module Web.View.AdaptiveThresholds.Index where

import Web.View.Prelude
import Data.Time (diffUTCTime)

data IndexView = IndexView
    { hubs    :: ![Hub]
    , configs :: ![AdaptiveThresholdConfig]
    , insights :: ![LearningInsight]
    }

instance View IndexView where
    html IndexView { .. } = [hsx|
        <div class="p-6">
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold text-gray-900">Adaptive Thresholds</h1>
            </div>

            <div class="grid grid-cols-1 gap-4 mb-8">
                {forM_ hubs (renderHubCard configs)}
            </div>

            <h2 class="text-lg font-semibold text-gray-800 mb-3">Recent Calibration Insights</h2>
            <div class="space-y-3">
                {forM_ insights renderInsight}
            </div>
        </div>
    |]
      where
        renderHubCard cs h =
            let mCfg = find (\c -> c.hubId == h.id) cs
            in [hsx|
            <div class="bg-white shadow rounded-lg p-5">
                <div class="flex justify-between items-start">
                    <div>
                        <h3 class="font-semibold text-gray-900">{h.name}</h3>
                        {renderCfgStatus mCfg}
                    </div>
                    <form method="POST" action={CalibrateThresholdsAction (h.id)}>
                        <button type="submit"
                            class="px-3 py-1.5 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700">
                            Calibrate
                        </button>
                    </form>
                </div>
            </div>
        |]
        renderInsight i = [hsx|
            <div class="bg-white shadow rounded-sm p-4 border-l-4 border-indigo-400">
                <p class="text-sm font-medium text-gray-800">{i.title}</p>
                <p class="text-sm text-gray-600 mt-1">{i.body}</p>
                <p class="text-xs text-gray-400 mt-1">{show i.computedAt}</p>
            </div>
        |]

renderCfgStatus :: Maybe AdaptiveThresholdConfig -> Html
renderCfgStatus Nothing = [hsx|<p class="text-sm text-gray-400 mt-1">Not calibrated</p>|]
renderCfgStatus (Just cfg) = [hsx|
    <p class="text-sm text-gray-600 mt-1">
        Last calibrated: {show cfg.calibrationDate}
    </p>
    <p class="text-sm text-gray-500">{maybe "" id cfg.notes}</p>
|]