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

module Web.View.WidgetPatterns.Show where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude
import Data.Aeson (encode)
import qualified Data.ByteString.Lazy.Char8 as BL

data ShowView = ShowView
    { pattern      :: !WidgetPattern
    , hub          :: !Hub
    , versions     :: ![WidgetPatternVersion]
    , adopterCount :: !Int
    , anonCount    :: !Int
    , meanFriction :: !(Maybe Double)
    , outcomeCount :: !Int
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="mb-4">
            <a href={WidgetPatternsAction} class="text-sm text-gray-500 hover:text-gray-700">
                ← Widget Patterns
            </a>
        </div>

        <div class="flex items-center gap-3 mb-2">
            <h1 class="text-2xl font-semibold">{pattern.name}</h1>
            <span class="font-mono text-sm text-gray-400">{pattern.widgetType}</span>
            {if pattern.isCrossHub
                then [hsx|<span class="px-2 py-0.5 rounded text-xs bg-purple-100 text-purple-700">cross-hub</span>|]
                else mempty}
            {if pattern.isPublished
                then [hsx|<span class="px-2 py-0.5 rounded text-xs bg-green-100 text-green-800">published</span>|]
                else [hsx|<span class="px-2 py-0.5 rounded text-xs bg-amber-100 text-amber-800">draft</span>|]}
        </div>

        <p class="text-sm text-gray-500 mb-1">Hub: {hub.name}</p>
        <p class="text-sm text-gray-500 mb-4">{tshow adopterCount} adopters</p>

        {maybe mempty (\d -> [hsx|<p class="text-sm text-gray-600 mb-4">{d}</p>|]) pattern.description}

        {aggregatePanel adopterCount anonCount meanFriction outcomeCount}

        <div class="flex gap-2 mb-6">
            {if not pattern.isPublished
                then [hsx|
                    <a href={EditWidgetPatternAction { widgetPatternId = pattern.id }}
                       class="text-sm border border-gray-300 text-gray-700 px-3 py-1.5 rounded hover:bg-gray-50">
                        Edit
                    </a>
                    <a href={PublishWidgetPatternAction { widgetPatternId = pattern.id }}
                       class="text-sm bg-green-600 text-white px-3 py-1.5 rounded hover:bg-green-700">
                        Publish
                    </a>
                |]
                else [hsx|
                    <a href={AdoptPatternAction { widgetPatternId = pattern.id }}
                       class="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded hover:bg-indigo-700">
                        Adopt Pattern
                    </a>
                |]}
        </div>

        <h2 class="text-lg font-semibold mb-3">Version History</h2>
        {if null versions
            then [hsx|<p class="text-sm text-gray-400 mb-6">No versions published yet.</p>|]
            else [hsx|
                <div class="space-y-3 mb-6">
                    {forEach versions renderVersionRow}
                </div>
            |]}

        {if pattern.isPublished
            then [hsx|
                <div class="border-t border-gray-200 pt-4">
                    <h2 class="text-base font-semibold mb-3">Publish New Version</h2>
                    <form method="POST" action={PublishNewVersionAction { widgetPatternId = pattern.id }}>
                        {csrfTokenFormField}
                        <div class="mb-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Definition (JSON)
                            </label>
                            <textarea name="definition" rows="4"
                                class="w-full border border-gray-300 rounded px-3 py-2 text-sm font-mono"
                                placeholder='{"key": "value"}'></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Changelog</label>
                            <input type="text" name="changelog"
                                class="w-full border border-gray-300 rounded px-3 py-2 text-sm"
                                placeholder="What changed in this version?" />
                        </div>
                        <button type="submit"
                            class="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded hover:bg-indigo-700">
                            Publish Version
                        </button>
                    </form>
                </div>
            |]
            else mempty}
    |]

-- | Aggregate friction/outcome panel (T07)
aggregatePanel :: Int -> Int -> Maybe Double -> Int -> Html
aggregatePanel adopterCount anonCount meanFriction outcomeCount = [hsx|
    <div class="bg-gray-50 rounded border border-gray-200 p-4 mb-6">
        <h3 class="text-sm font-semibold text-gray-700 mb-3">Adoption Metrics</h3>
        <div class="grid grid-cols-3 gap-4">
            <div>
                <p class="text-xs text-gray-500">Total Adopters</p>
                <p class="text-lg font-semibold">{tshow adopterCount}</p>
                {if anonCount > 0
                    then [hsx|<p class="text-xs text-gray-400">{tshow anonCount} opted out of aggregate feedback</p>|]
                    else mempty}
            </div>
            <div>
                <p class="text-xs text-gray-500">Mean Friction Score</p>
                <p class="text-lg font-semibold">
                    {maybe "—" (\f -> tshow (round f :: Int)) meanFriction}
                </p>
                <p class="text-xs text-gray-400">non-anonymous adopters</p>
            </div>
            <div>
                <p class="text-xs text-gray-500">Outcome Signals</p>
                <p class="text-lg font-semibold">{tshow outcomeCount}</p>
            </div>
        </div>
    </div>
|]

renderVersionRow :: WidgetPatternVersion -> Html
renderVersionRow v = [hsx|
    <div class="bg-white rounded border border-gray-200 p-3">
        <div class="flex items-center justify-between mb-1">
            <span class="font-mono text-sm font-medium">v{tshow v.versionNumber}</span>
            <span class="text-xs text-gray-400">{tshow v.publishedAt}</span>
        </div>
        {maybe mempty (\c -> [hsx|<p class="text-xs text-gray-600">{c}</p>|]) v.changelog}
        <details class="mt-2">
            <summary class="text-xs text-gray-400 cursor-pointer">Definition</summary>
            <pre class="text-xs text-gray-600 mt-1 overflow-x-auto">{cs (BL.unpack (encode v.definition)) :: Text}</pre>
        </details>
    </div>
|]