module Web.View.Hubs.FrictionHeatmap where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude
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 { hubId = 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 { hubId = 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>

        {if null widgets
            then [hsx|<p class="text-sm text-gray-400">No widgets in this hub.</p>|]
            else [hsx|
                <div class="grid grid-cols-3 gap-3">
                    {forEach widgets renderWidgetCard}
                </div>
            |]}
    |]
      where
        scoreFor w = maybe 0 (.score) (find (\fs -> fs.widgetId == w.id) frictionScores)
        hasScore w = any (\fs -> fs.widgetId == w.id) frictionScores

        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 { widgetId = w.id }}
                       class="font-medium text-sm hover:underline">{w.name}</a>
                    {if hasScore w
                        then [hsx|<span class="text-lg font-bold">{show s}</span>|]
                        else [hsx|<span class="text-xs text-gray-400">–</span>|]}
                </div>
                <p class="text-xs mt-1 opacity-70">{w.widgetType}</p>
            </div>
            |]