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

module Web.View.Widgets.Show where

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

data ShowView = ShowView
    { widget        :: !Widget
    , hub           :: !Hub
    , versions      :: ![WidgetVersion]
    , events        :: ![InteractionEvent]
    , annotations   :: ![Annotation]
    , recentSignals :: ![OutcomeSignal]
    , isRegressed   :: !Bool
    , cycleCount    :: !Int
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="mb-2 flex items-center gap-2 text-sm text-gray-500">
            <a href={HubsAction} class="hover:text-gray-700">Hubs</a>
            <span>/</span>
            <a href={ShowHubAction { hubId = hub.id }} class="hover:text-gray-700">{hub.name}</a>
            <span>/</span>
            <span>{widget.name}</span>
        </div>

        {if cycleCount >= 2 then [hsx|
        <div class="mb-2 flex items-center gap-2 bg-yellow-50 border border-yellow-200 rounded-lg px-4 py-2">
            <span class="text-yellow-700 font-semibold text-sm">⟳ {show cycleCount} cycles</span>
            <span class="text-yellow-600 text-xs">
                Recurring friction — this widget has been through {show cycleCount} improvement cycles.
            </span>
        </div>
        |] else mempty}

        {if isRegressed then [hsx|
        <div class="mb-4 flex items-center gap-2 bg-red-50 border border-red-200 rounded-lg px-4 py-3">
            <span class="text-red-600 font-semibold text-sm">⚠ Regression detected</span>
            <span class="text-red-500 text-xs">
                This widget had an improved signal but has since received high/critical annotations.
            </span>
        </div>
        |] else mempty}

        {widgetEnvelope widget [hsx|
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h1 class="text-2xl font-semibold">{widget.name}</h1>
                    <p class="text-sm text-gray-500 mt-0.5">
                        {widget.widgetType}
                        <span class="ml-2 text-xs bg-gray-100 px-1.5 py-0.5 rounded">{widget.policyScope}</span>
                        <span class="ml-2 text-xs bg-green-100 text-green-700 px-1.5 py-0.5 rounded">{widget.status}</span>
                        <span class="ml-2 text-xs text-gray-400">v{show widget.version}</span>
                    </p>
                </div>
                <a href={EditWidgetAction { widgetId = widget.id }}
                   class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
                    Edit
                </a>
            </div>
        |]}

        <div class="grid grid-cols-3 gap-4 mb-8 mt-6">
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wide">Total Events</p>
                <p class="text-3xl font-semibold mt-1">{length events}</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wide">Annotations</p>
                <p class="text-3xl font-semibold mt-1">{length annotations}</p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wide">Versions</p>
                <p class="text-3xl font-semibold mt-1">{length versions}</p>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-6 mb-8">
            <section>
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-lg font-medium">Annotations</h2>
                    <div class="flex items-center gap-2">
                        {if length annotations >= 3 then [hsx|
                            <form method="POST" action={DraftRequirementAction { widgetId = widget.id }} class="inline">
                                <button type="submit" class="text-xs border border-indigo-300 text-indigo-700 px-2 py-1 rounded hover:bg-indigo-50">
                                    Draft Requirement
                                </button>
                            </form>
                        |] else mempty}
                        <form method="POST" action={SummarizeClusterAction { widgetId = widget.id }} class="inline">
                            <button type="submit" class="text-xs border border-blue-300 text-blue-700 px-2 py-1 rounded hover:bg-blue-50">
                                Summarize Feedback
                            </button>
                        </form>
                        <a href={NewAnnotationAction { widgetId = widget.id }}
                           class="text-sm text-indigo-600 hover:text-indigo-800">+ Add</a>
                    </div>
                </div>
                <div class="space-y-2">
                    {forEach rootAnnotations (renderAnnotation childrenOf)}
                </div>
            </section>

            <section>
                <h2 class="text-lg font-medium mb-3">Annotation Breakdown</h2>
                <div class="bg-white rounded-lg border border-gray-200 p-4 space-y-2">
                    {forEach categoryBreakdown renderCategoryRow}
                </div>
            </section>
        </div>

        <section class="mb-8">
            <h2 class="text-lg font-medium mb-3">Interaction Events</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-700">Event</th>
                            <th class="text-left px-4 py-3 font-medium text-gray-700">Actor</th>
                            <th class="text-left px-4 py-3 font-medium text-gray-700">Occurred</th>
                        </tr>
                    </thead>
                    <tbody>
                        {forEach events renderEventRow}
                    </tbody>
                </table>
            </div>
        </section>

        {if null recentSignals then mempty else [hsx|
        <section class="mb-8">
            <h2 class="text-lg font-medium mb-3">Recent Outcome Signals</h2>
            <div class="bg-white rounded-lg border border-gray-200 divide-y divide-gray-100">
                {forEach recentSignals renderSignalRow}
            </div>
        </section>
        |]}

        <section>
            <h2 class="text-lg font-medium mb-3">Version History</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-700">Version</th>
                            <th class="text-left px-4 py-3 font-medium text-gray-700">Recorded</th>
                        </tr>
                    </thead>
                    <tbody>
                        {forEach versions renderVersionRow}
                    </tbody>
                </table>
            </div>
        </section>
    |]
  where
    rootAnnotations = filter (\a -> isNothing a.parentId) annotations
    childrenOf parent = filter (\a -> a.parentId == Just parent.id) annotations
    categoryBreakdown =
        [ (cat, length (filter (\a -> a.category == cat) annotations))
        | cat <- ["friction","defect","wish","policy_concern","doc_gap","trust","other"]
        , any (\a -> a.category == cat) annotations
        ]

renderAnnotation :: (Annotation -> [Annotation]) -> Annotation -> Html
renderAnnotation childrenOf a = [hsx|
    <div class="bg-white rounded border border-gray-200 px-4 py-3">
        <div class="flex items-center gap-2 mb-1">
            <span class="text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded">{a.category}</span>
            <span class="text-xs text-gray-400">{a.actorType}</span>
            <span class="text-xs text-gray-300 ml-auto">{show a.createdAt}</span>
        </div>
        <p class="text-sm text-gray-700">{a.body}</p>
        <div class="ml-4 mt-2 space-y-2">
            {forEach (childrenOf a) (renderAnnotation childrenOf)}
        </div>
    </div>
|]

renderEventRow :: InteractionEvent -> Html
renderEventRow e = [hsx|
    <tr class="border-b border-gray-100">
        <td class="px-4 py-3 font-mono text-xs text-gray-700">{e.eventType}</td>
        <td class="px-4 py-3 text-gray-500 text-xs">{e.actorType}</td>
        <td class="px-4 py-3 text-gray-400 text-xs">{show e.occurredAt}</td>
    </tr>
|]

renderVersionRow :: WidgetVersion -> Html
renderVersionRow v = [hsx|
    <tr class="border-b border-gray-100">
        <td class="px-4 py-3 text-gray-700">v{show v.version}</td>
        <td class="px-4 py-3 text-gray-400 text-xs">{show v.createdAt}</td>
    </tr>
|]

renderCategoryRow :: (Text, Int) -> Html
renderCategoryRow (cat, count) = [hsx|
    <div class="flex items-center justify-between text-sm">
        <span class="text-gray-600">{cat}</span>
        <span class="font-semibold">{show count}</span>
    </div>
|]

renderSignalRow :: OutcomeSignal -> Html
renderSignalRow sig = [hsx|
    <div class="flex items-center gap-3 px-4 py-3 text-sm">
        <span class={signalTypeClass sig.signalType <> " text-xs px-2 py-0.5 rounded font-medium"}>
            {sig.signalType}
        </span>
        {maybe mempty (\v -> [hsx|<span class="font-mono text-gray-700">{show v}</span>|]) sig.value}
        <span class="text-xs text-gray-400 ml-auto">{show sig.observedAt}</span>
    </div>
|]

signalTypeClass :: Text -> Text
signalTypeClass "improved"     = "bg-green-100 text-green-800"
signalTypeClass "regressed"    = "bg-red-100 text-red-800"
signalTypeClass "neutral"      = "bg-gray-100 text-gray-600"
signalTypeClass "inconclusive" = "bg-yellow-100 text-yellow-800"
signalTypeClass _              = "bg-gray-100 text-gray-600"