inter-hub/Web/View/WidgetAdapterSpecs/Show.hs

module Web.View.WidgetAdapterSpecs.Show where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude
import Web.Routes ()
import Application.Helper.View (adapterStatusBadge)

data ShowView = ShowView
    { spec       :: !WidgetAdapterSpec
    , mEnvelope  :: !(Maybe EnvelopeEmissionContract)
    , mReporting :: !(Maybe InteractionReportingContract)
    , widgets    :: ![Widget]
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="mb-4">
            <a href={WidgetAdapterSpecsAction} class="text-sm text-gray-500 hover:text-gray-800">
                ← Adapter Specs
            </a>
        </div>

        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center gap-3">
                <span class="bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded">
                    {spec.framework}
                </span>
                <h1 class="text-2xl font-semibold">{spec.name}</h1>
                <span class={adapterStatusBadge spec.status <> " text-xs px-2 py-0.5 rounded font-medium"}>
                    {spec.status}
                </span>
                {maturityBadge spec.maturity}
            </div>
            <a href={EditWidgetAdapterSpecAction (spec.id)}
               class="text-sm text-gray-500 border border-gray-200 rounded px-3 py-1 hover:border-gray-400">
                Edit status / notes
            </a>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <div class="text-xs text-gray-500 mb-1">Spec Version</div>
                <div class="font-mono font-medium">{spec.version}</div>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <div class="text-xs text-gray-500 mb-1">Registered Widgets</div>
                <div class="font-medium">{length widgets}</div>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <div class="text-xs text-gray-500 mb-2">Envelope Contract</div>
                {renderEnvelopeLink mEnvelope}
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <div class="text-xs text-gray-500 mb-2">Reporting Contract</div>
                {renderReportingLink mReporting}
            </div>
        </div>

        {forEach (specNotes spec) renderSpecNote}

        {renderWidgetsSection widgets}
    |]

renderSpecNote :: Text -> Html
renderSpecNote n = [hsx|
    <div class="bg-gray-50 rounded-lg border border-gray-200 p-4 mb-4 text-sm text-gray-700">
        <strong>Notes:</strong> {n}
    </div>
|]

renderWidgetsSection :: [Widget] -> Html
renderWidgetsSection [] = [hsx|<p class="text-sm text-gray-400 mt-6">No widgets assigned to this adapter spec.</p>|]
renderWidgetsSection ws = [hsx|
    <h2 class="text-lg font-semibold mb-3 mt-6">Assigned Widgets</h2>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">Name</th>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">Type</th>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {forEach ws renderWidgetRow}
            </tbody>
        </table>
    </div>
|]

renderEnvelopeLink :: Maybe EnvelopeEmissionContract -> Html
renderEnvelopeLink Nothing  = [hsx|<span class="text-gray-400 text-sm">—</span>|]
renderEnvelopeLink (Just c) = [hsx|
    <a href={ShowEnvelopeEmissionContractAction (c.id)}
       class="font-mono text-indigo-600 hover:underline text-sm">v{c.contractVersion}</a>
|]

renderReportingLink :: Maybe InteractionReportingContract -> Html
renderReportingLink Nothing  = [hsx|<span class="text-gray-400 text-sm">—</span>|]
renderReportingLink (Just c) = [hsx|
    <a href={ShowInteractionReportingContractAction (c.id)}
       class="font-mono text-indigo-600 hover:underline text-sm">v{c.contractVersion}</a>
|]

renderWidgetRow :: Widget -> Html
renderWidgetRow w = [hsx|
    <tr class="hover:bg-gray-50">
        <td class="px-4 py-3">
            <a href={ShowWidgetAction (w.id)}
               class="text-indigo-600 hover:underline">{w.name}</a>
        </td>
        <td class="px-4 py-3 text-gray-500 text-xs">{w.widgetType}</td>
        <td class="px-4 py-3 text-gray-500 text-xs">{w.status}</td>
    </tr>
|]

specNotes :: WidgetAdapterSpec -> [Text]
specNotes s = case s.notes of
    Just n  -> [n]
    Nothing -> []

maturityBadge :: Text -> Html
maturityBadge "stable"       = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-green-100 text-green-800 font-medium">Stable</span>|]
maturityBadge "beta"         = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-blue-100 text-blue-800 font-medium">Beta</span>|]
maturityBadge "experimental" = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-amber-100 text-amber-800 font-medium">Experimental</span>|]
maturityBadge "deprecated"   = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-500 font-medium">Deprecated</span>|]
maturityBadge m              = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-600 font-medium">{m}</span>|]