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

module Web.View.WidgetPatterns.Show where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude
import Web.Routes ()
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 crossHubBadge else mempty}
            {renderPublishedBadge pattern.isPublished}
        </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 renderPatternDescription pattern.description}

        {aggregatePanel adopterCount anonCount meanFriction outcomeCount}

        <div class="flex gap-2 mb-6">
            {renderPatternActions pattern.isPublished pattern.id}
        </div>

        <h2 class="text-lg font-semibold mb-3">Version History</h2>
        {renderVersionHistory versions}

        {renderPublishNewVersionForm pattern.isPublished pattern.id}
    |]

-- | 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 renderAnonCountNote anonCount 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 renderChangelog 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>
|]

crossHubBadge :: Html
crossHubBadge = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-purple-100 text-purple-700">cross-hub</span>|]

renderPublishedBadge :: Bool -> Html
renderPublishedBadge True  = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-green-100 text-green-800">published</span>|]
renderPublishedBadge False = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-amber-100 text-amber-800">draft</span>|]

renderPatternDescription :: Text -> Html
renderPatternDescription d = [hsx|<p class="text-sm text-gray-600 mb-4">{d}</p>|]

renderAnonCountNote :: Int -> Html
renderAnonCountNote n = [hsx|<p class="text-xs text-gray-400">{tshow n} opted out of aggregate feedback</p>|]

renderChangelog :: Text -> Html
renderChangelog c = [hsx|<p class="text-xs text-gray-600">{c}</p>|]

renderPatternActions :: Bool -> Id WidgetPattern -> Html
renderPatternActions False pid = [hsx|
    <a href={EditWidgetPatternAction (pid)}
       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 (pid)}
       class="text-sm bg-green-600 text-white px-3 py-1.5 rounded hover:bg-green-700">
        Publish
    </a>
|]
renderPatternActions True pid = [hsx|
    <a href={AdoptPatternAction (pid)}
       class="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded hover:bg-indigo-700">
        Adopt Pattern
    </a>
|]

renderVersionHistory :: [WidgetPatternVersion] -> Html
renderVersionHistory [] = [hsx|<p class="text-sm text-gray-400 mb-6">No versions published yet.</p>|]
renderVersionHistory vs = [hsx|
    <div class="space-y-3 mb-6">
        {forEach vs renderVersionRow}
    </div>
|]

renderPublishNewVersionForm :: Bool -> Id WidgetPattern -> Html
renderPublishNewVersionForm False _ = mempty
renderPublishNewVersionForm True pid = [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 (pid)}>
            <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="JSON definition"></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>
|]