inter-hub/Web/View/Hubs/AntifragilityDashboard.hs

module Web.View.Hubs.AntifragilityDashboard where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude
import Web.Routes ()

data AntifragilityDashboardView = AntifragilityDashboardView
    { hub                 :: !Hub
    , widgets             :: ![Widget]
    , allDeployments      :: ![DeploymentRecord]
    , allDecisions        :: ![DecisionRecord]
    , allSignals          :: ![OutcomeSignal]
    , allEvaluations      :: ![ChangeEvaluation]
    , allImplRefs         :: ![ImplementationChangeReference]
    , regressionWidgetIds :: ![Id Widget]
    , recurrenceLeaderboard :: ![(Id Widget, Int)]
    }

instance View AntifragilityDashboardView where
    html AntifragilityDashboardView { .. } = [hsx|
        <div class="mb-6 flex items-center justify-between">
            <div>
                <div class="flex items-center gap-2 text-sm text-gray-500 mb-1">
                    <a href={HubsAction} class="hover:text-gray-700">Hubs</a>
                    <span>/</span>
                    <a href={ShowHubAction (hub.id)} class="hover:text-gray-700">{hub.name}</a>
                    <span>/</span>
                    <span>Antifragility</span>
                </div>
                <h1 class="text-2xl font-semibold">Antifragility Dashboard — {hub.name}</h1>
            </div>
            <div class="flex gap-2">
                <a href={TriageDashboardAction (hub.id)}
                   class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
                    Triage
                </a>
                <a href={GovernanceDashboardAction (hub.id)}
                   class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
                    Governance
                </a>
                <a href={ShowHubAction (hub.id)}
                   class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
                    Hub
                </a>
            </div>
        </div>

        <!-- KPI row -->
        <div class="grid grid-cols-4 gap-4 mb-6">
            <div class="bg-white rounded-lg border border-gray-200 px-4 py-3 text-center">
                <div class="text-2xl font-bold">{show (length allDeployments)}</div>
                <div class="text-xs text-gray-500 mt-0.5">deployments</div>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 px-4 py-3 text-center">
                <div class="text-2xl font-bold">{avgScoreText}</div>
                <div class="text-xs text-gray-500 mt-0.5">avg evaluation</div>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 px-4 py-3 text-center">
                <div class="text-2xl font-bold">{improvedPctText}</div>
                <div class="text-xs text-gray-500 mt-0.5">improved signals</div>
            </div>
            <div class="bg-red-50 rounded-lg border border-red-200 px-4 py-3 text-center">
                <div class="text-2xl font-bold text-red-700">{show (length regressionWidgetIds)}</div>
                <div class="text-xs text-red-500 mt-0.5">regressions</div>
            </div>
        </div>

        <!-- Regression alerts -->
        {if null regressionWidgetIds then mempty else renderRegressionAlerts regressedWidgets}

        <!-- Open gaps: decisions with impl refs but no deployment -->
        <div class="bg-white rounded-lg border border-gray-200 px-6 py-5 mb-6">
            <h2 class="text-sm font-semibold text-gray-700 mb-3">
                Open Gaps
                <span class="text-xs font-normal text-gray-400 ml-2">
                    (decisions with impl refs but no deployment recorded)
                </span>
            </h2>
            {renderOpenGaps openGaps}
        </div>

        <!-- Recent deployments -->
        <div class="bg-white rounded-lg border border-gray-200 px-6 py-5 mb-6">
            <h2 class="text-sm font-semibold text-gray-700 mb-3">Recent Deployments</h2>
            {renderRecentDeploysSection recentDeploys allDecisions allSignals allEvaluations}
        </div>

        <!-- Recurrence leaderboard -->
        <div class="bg-white rounded-lg border border-gray-200 px-6 py-5">
            <h2 class="text-sm font-semibold text-gray-700 mb-3">Recurrence Leaderboard</h2>
            {renderRecurrenceSection recurrenceLeaderboard widgets}
        </div>
    |]
      where
        deployedIds    = map (.id) allDeployments
        openGaps       = filter (\d -> any (\r -> r.decisionId == d.id) allImplRefs
                                    && not (any (\dp -> dp.decisionId == d.id) allDeployments))
                                allDecisions
        recentDeploys  = take 20 (sortByDesc (.deployedAt) allDeployments)
        regressedWidgets = filter (\w -> w.id `elem` regressionWidgetIds) widgets
        avgScoreText
            | null allEvaluations = "—"
            | otherwise =
                let avg = fromIntegral (sum (map (.score) allEvaluations)) / fromIntegral (length allEvaluations) :: Double
                in show (round avg :: Int) <> "/5"
        improvedPctText
            | null allSignals = "—"
            | otherwise =
                let improved = length (filter (\s -> s.signalType == "improved") allSignals)
                    pct = (fromIntegral improved * 100 `div` length allSignals) :: Int
                in show pct <> "%"

sortByDesc :: Ord b => (a -> b) -> [a] -> [a]
sortByDesc f = sortBy (\a b -> compare (f b) (f a))

renderRegressedBadge :: Widget -> Html
renderRegressedBadge w = [hsx|
    <a href={ShowWidgetAction (w.id)}
       class="text-xs bg-red-100 text-red-800 border border-red-300 rounded px-2 py-1 hover:bg-red-200">
        {w.name}
    </a>
|]

renderGapRow :: DecisionRecord -> Html
renderGapRow d = [hsx|
    <div class="flex items-center justify-between py-1.5 text-sm">
        <a href={ShowDecisionRecordAction (d.id)}
           class="text-indigo-600 hover:text-indigo-800">{d.title}</a>
        <span class={outcomeClass d.outcome <> " text-xs px-2 py-0.5 rounded font-medium"}>
            {d.outcome}
        </span>
    </div>
|]

renderDeployRow :: [DecisionRecord] -> [OutcomeSignal] -> [ChangeEvaluation] -> DeploymentRecord -> Html
renderDeployRow decisions signals evals dr = [hsx|
    <tr>
        <td class="py-2 pr-4">
            <a href={ShowDeploymentRecordAction (dr.id)}
               class="font-mono text-indigo-600 hover:text-indigo-800">{dr.versionRef}</a>
        </td>
        <td class="py-2 pr-4 text-gray-600">{decisionTitle}</td>
        <td class="py-2 pr-4 text-right">
            {renderSignalSummary drSignals}
        </td>
        <td class="py-2 pr-4 text-right">
            {maybe noEvalBadge renderEvalBadge mScore}
        </td>
        <td class="py-2 text-right text-xs text-gray-400">{show dr.deployedAt}</td>
    </tr>
|]
  where
    decisionTitle = maybe "—" (.title) (find (\d -> d.id == dr.decisionId) decisions)
    drSignals     = filter (\s -> s.deploymentId == dr.id) signals
    mScore        = fmap (.score) (find (\e -> e.deploymentId == dr.id) evals)

renderSignalSummary :: [OutcomeSignal] -> Html
renderSignalSummary [] = [hsx|<span class="text-gray-400 text-xs">—</span>|]
renderSignalSummary signals = [hsx|
    <div class="flex gap-1 justify-end">
        {forEach (take 3 signals) renderSignalDot}
    </div>
|]

signalDot :: Text -> Text
signalDot "improved"     = "inline-block w-2 h-2 rounded-full bg-green-500"
signalDot "regressed"    = "inline-block w-2 h-2 rounded-full bg-red-500"
signalDot "neutral"      = "inline-block w-2 h-2 rounded-full bg-gray-400"
signalDot "inconclusive" = "inline-block w-2 h-2 rounded-full bg-yellow-400"
signalDot _              = "inline-block w-2 h-2 rounded-full bg-gray-300"

renderEvalBadge :: Int -> Html
renderEvalBadge score = [hsx|
    <span class={scoreClass score <> " text-xs px-2 py-0.5 rounded font-medium"}>
        {show score}/5
    </span>
|]

renderRecurrenceRow :: [Widget] -> (Id Widget, Int) -> Html
renderRecurrenceRow widgets (wid, count) = [hsx|
    <tr>
        <td class="py-2">
            {maybe noWidgetSpan renderWidgetLink mWidget}
        </td>
        <td class="py-2 text-right">
            <span class="text-sm font-semibold text-yellow-700">⟳ {show count}</span>
        </td>
    </tr>
|]
  where
    mWidget = find (\w -> w.id == wid) widgets

renderWidgetLink :: Widget -> Html
renderWidgetLink w = [hsx|
    <a href={ShowWidgetAction (w.id)}
       class="text-indigo-600 hover:text-indigo-800">{w.name}</a>
|]

renderRegressionAlerts :: [Widget] -> Html
renderRegressionAlerts ws = [hsx|
    <div class="bg-red-50 border border-red-200 rounded-lg px-6 py-4 mb-6">
        <h2 class="text-sm font-semibold text-red-700 mb-3">⚠ Regression Alerts</h2>
        <div class="flex flex-wrap gap-2">
            {forEach ws renderRegressedBadge}
        </div>
    </div>
|]

renderOpenGaps :: [DecisionRecord] -> Html
renderOpenGaps [] = [hsx|<p class="text-sm text-gray-400">All decisions with impl refs have deployments.</p>|]
renderOpenGaps gaps = [hsx|
    <div class="space-y-1">
        {forEach gaps renderGapRow}
    </div>
|]

renderRecentDeploysSection :: [DeploymentRecord] -> [DecisionRecord] -> [OutcomeSignal] -> [ChangeEvaluation] -> Html
renderRecentDeploysSection [] _ _ _ = [hsx|<p class="text-sm text-gray-400">No deployments yet.</p>|]
renderRecentDeploysSection deploys decisions signals evals = [hsx|
    <table class="w-full text-sm">
        <thead class="border-b border-gray-100">
            <tr>
                <th class="text-left py-2 text-xs font-medium text-gray-500">Version</th>
                <th class="text-left py-2 text-xs font-medium text-gray-500">Decision</th>
                <th class="text-right py-2 text-xs font-medium text-gray-500">Signals</th>
                <th class="text-right py-2 text-xs font-medium text-gray-500">Eval</th>
                <th class="text-right py-2 text-xs font-medium text-gray-500">Deployed</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            {forEach deploys (renderDeployRow decisions signals evals)}
        </tbody>
    </table>
|]

renderRecurrenceSection :: [(Id Widget, Int)] -> [Widget] -> Html
renderRecurrenceSection [] _ = [hsx|<p class="text-sm text-gray-400">No recurring widgets detected.</p>|]
renderRecurrenceSection leaderboard widgets = [hsx|
    <table class="w-full text-sm">
        <thead class="border-b border-gray-100">
            <tr>
                <th class="text-left py-2 text-xs font-medium text-gray-500">Widget</th>
                <th class="text-right py-2 text-xs font-medium text-gray-500">Cycles</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            {forEach leaderboard (renderRecurrenceRow widgets)}
        </tbody>
    </table>
|]

noEvalBadge :: Html
noEvalBadge = [hsx|<span class="text-gray-400 text-xs">—</span>|]

noWidgetSpan :: Html
noWidgetSpan = [hsx|<span class="text-gray-500">—</span>|]

renderSignalDot :: OutcomeSignal -> Html
renderSignalDot s = [hsx|<span class={signalDot s.signalType}></span>|]

outcomeClass :: Text -> Text
outcomeClass "accepted"  = "bg-green-100 text-green-800"
outcomeClass "rejected"  = "bg-red-100 text-red-800"
outcomeClass "deferred"  = "bg-gray-100 text-gray-600"
outcomeClass "split"     = "bg-purple-100 text-purple-800"
outcomeClass "merged"    = "bg-indigo-100 text-indigo-800"
outcomeClass "reframed"  = "bg-orange-100 text-orange-800"
outcomeClass _           = "bg-gray-100 text-gray-600"

scoreClass :: Int -> Text
scoreClass n
    | n <= 2    = "bg-red-100 text-red-800"
    | n == 3    = "bg-yellow-100 text-yellow-800"
    | otherwise = "bg-green-100 text-green-800"