inter-hub-haskell/Web/View/Hubs/FrictionHeatmap.hs

module Web.View.Hubs.FrictionHeatmap where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude
import Web.Routes ()
import Application.Helper.FrictionScore (scoreBand)

data FrictionHeatmapView = FrictionHeatmapView
    { hub           :: !Hub
    , widgets       :: ![Widget]
    , frictionScores :: ![FrictionScore]
    }

instance View FrictionHeatmapView where
    html FrictionHeatmapView { .. } = [hsx|
        <div class="flex items-center justify-between mb-6">
            <div>
                <h1 class="text-2xl font-semibold">Friction Heatmap</h1>
                <p class="text-sm text-gray-500">{hub.name}</p>
            </div>
            <div class="flex gap-2">
                <a href={RecomputeFrictionAction (hub.id)}
                   class="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded hover:bg-indigo-700">
                    Recompute
                </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>

        <div class="mb-4 flex gap-4 text-xs text-gray-500">
            <span><span class="inline-block w-3 h-3 rounded bg-green-100 mr-1"></span>Low (0–19)</span>
            <span><span class="inline-block w-3 h-3 rounded bg-yellow-100 mr-1"></span>Medium (20–39)</span>
            <span><span class="inline-block w-3 h-3 rounded bg-orange-100 mr-1"></span>High (40–59)</span>
            <span><span class="inline-block w-3 h-3 rounded bg-red-100 mr-1"></span>Critical (60+)</span>
        </div>

        {renderHeatmapGrid widgets}
    |]
      where
        scoreFor w = maybe 0 (.score) (find (\fs -> fs.widgetId == w.id) frictionScores)
        hasScore w = any (\fs -> fs.widgetId == w.id) frictionScores

        renderHeatmapGrid :: [Widget] -> Html
        renderHeatmapGrid [] = [hsx|<p class="text-sm text-gray-400">No widgets in this hub.</p>|]
        renderHeatmapGrid ws = [hsx|
            <div class="grid grid-cols-3 gap-3">
                {forEach ws renderWidgetCard}
            </div>
        |]

        renderWidgetCard :: Widget -> Html
        renderWidgetCard w =
            let s    = scoreFor w
                band = scoreBand s
            in [hsx|
            <div class={"rounded-lg border p-4 " <> band}>
                <div class="flex items-start justify-between">
                    <a href={ShowWidgetAction (w.id)}
                       class="font-medium text-sm hover:underline">{w.name}</a>
                    {renderScoreBadge (hasScore w) s}
                </div>
                <p class="text-xs mt-1 opacity-70">{w.widgetType}</p>
            </div>
            |]

renderScoreBadge :: Bool -> Int -> Html
renderScoreBadge True  s = [hsx|<span class="text-lg font-bold">{show s}</span>|]
renderScoreBadge False _ = [hsx|<span class="text-xs text-gray-400">–</span>|]