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]
    }

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>

        {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>
                    <a href={NewAnnotationAction { widgetId = widget.id }}
                       class="text-sm text-indigo-600 hover:text-indigo-800">+ Add</a>
                </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>

        <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>
|]