module Web.View.LearningDashboard.Show where

import Web.View.Prelude
import Data.Time (diffUTCTime, getCurrentTime, nominalDay)

data ShowView = ShowView
    { topCorrelations     :: ![OutcomeCorrelation]
    , patternRankings     :: ![PatternPerformanceRecord]
    , thresholdStatus     :: ![(Hub, Maybe AdaptiveThresholdConfig)]
    , recentInsights      :: ![LearningInsight]
    , knowledgeHighlights :: ![InstitutionalKnowledgeEntry]
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="p-6">
            <h1 class="text-2xl font-bold text-gray-900 mb-6">Learning Dashboard</h1>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">

                {-- Panel 1: Top annotation predictors --}
                <div class="bg-white shadow rounded-lg p-5">
                    <h2 class="text-base font-semibold text-gray-800 mb-4">Top Annotation Predictors</h2>
                    {renderCorrelationsSection topCorrelations}
                </div>

                {-- Panel 2: Pattern performance ranking --}
                <div class="bg-white shadow rounded-lg p-5">
                    <h2 class="text-base font-semibold text-gray-800 mb-4">Pattern Performance Ranking</h2>
                    {renderPatternRankingsSection patternRankings}
                </div>

            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

                {-- Panel 3: Adaptive threshold status --}
                <div class="bg-white shadow rounded-lg p-5">
                    <h2 class="text-base font-semibold text-gray-800 mb-4">Adaptive Threshold Status</h2>
                    <div class="space-y-2">
                        {forM_ thresholdStatus renderThresholdStatus}
                    </div>
                </div>

                {-- Panel 4: Recent learning insights --}
                <div class="bg-white shadow rounded-lg p-5">
                    <h2 class="text-base font-semibold text-gray-800 mb-4">Recent Insights</h2>
                    {renderInsightsSection recentInsights}
                </div>

                {-- Panel 5: Knowledge base highlights --}
                <div class="bg-white shadow rounded-lg p-5">
                    <h2 class="text-base font-semibold text-gray-800 mb-4">Knowledge Highlights</h2>
                    {renderKnowledgeSection knowledgeHighlights}
                </div>

            </div>
        </div>
    |]
renderCorrelationsSection :: [OutcomeCorrelation] -> Html
renderCorrelationsSection [] = [hsx|<p class="text-sm text-gray-400">No data — run correlation analysis per hub.</p>|]
renderCorrelationsSection cs = [hsx|
    <div class="space-y-2">
        {forEach cs renderCorrelation}
    </div>
|]

renderPatternRankingsSection :: [PatternPerformanceRecord] -> Html
renderPatternRankingsSection [] = [hsx|<p class="text-sm text-gray-400">No data — run pattern performance per hub.</p>|]
renderPatternRankingsSection rs = [hsx|
    <div class="space-y-2">
        {forEach rs renderPatternRank}
    </div>
|]

renderInsightsSection :: [LearningInsight] -> Html
renderInsightsSection [] = [hsx|<p class="text-sm text-gray-400">No insights yet.</p>|]
renderInsightsSection is = [hsx|
    <div class="space-y-3">
        {forEach is renderInsight}
    </div>
|]

renderKnowledgeSection :: [InstitutionalKnowledgeEntry] -> Html
renderKnowledgeSection [] = [hsx|<p class="text-sm text-gray-400">No entries yet — distil a decision.</p>|]
renderKnowledgeSection es = [hsx|
    <div class="space-y-3">
        {forEach es renderKnowledge}
    </div>
|]

renderCorrelation :: OutcomeCorrelation -> Html
renderCorrelation c = [hsx|
    <div class="flex items-center gap-3">
        <span class="text-sm text-gray-700 w-32 truncate">{c.annotationCategory}</span>
        <div class="flex-1 bg-gray-200 rounded-full h-2">
            <div class={barColor c.correlationScore}
                 style={"width:" <> show (round (c.correlationScore * 100) :: Int) <> "%"}></div>
        </div>
        <span class="text-xs text-gray-500">{show (round (c.correlationScore * 100) :: Int)}%</span>
    </div>
|]

barColor :: Double -> Text
barColor s
    | s >= 0.7  = "h-2 rounded-full bg-green-500"
    | s >= 0.4  = "h-2 rounded-full bg-yellow-500"
    | otherwise = "h-2 rounded-full bg-red-400"

renderPatternRank :: PatternPerformanceRecord -> Html
renderPatternRank r =
    let rate = if r.totalOutcomeCount > 0
                then fromIntegral r.positiveOutcomeCount / fromIntegral r.totalOutcomeCount :: Double
                else 0.0
    in [hsx|
    <div class="flex items-center gap-2">
        <span class="text-xs text-gray-400 w-5">{maybe "-" show r.outcomeRank}</span>
        <a href={ShowWidgetPatternAction (r.widgetPatternId)}
           class="text-sm text-blue-600 hover:underline truncate flex-1">
            {show r.widgetPatternId}
        </a>
        <span class="text-xs text-gray-500">{show (round (rate * 100) :: Int)}%</span>
    </div>
|]

renderThresholdStatus :: (Hub, Maybe AdaptiveThresholdConfig) -> Html
renderThresholdStatus (h, mCfg) =
    let driftClass = case mCfg of
            Nothing  -> "text-red-500" :: Text
            Just _   -> "text-green-600"
        label = case mCfg of
            Nothing  -> "Not calibrated" :: Text
            Just _   -> "Calibrated"
    in [hsx|
    <div class="flex justify-between text-sm">
        <span class="text-gray-700">{h.name}</span>
        <span class={driftClass}>{label}</span>
    </div>
|]

renderInsight :: LearningInsight -> Html
renderInsight i = [hsx|
    <div class="border-l-4 border-indigo-400 pl-3">
        <p class="text-xs font-medium text-gray-700">{i.title}</p>
        <p class="text-xs text-gray-400">{insightTypeBadge i.insightType}</p>
    </div>
|]

insightTypeBadge :: Text -> Text
insightTypeBadge t = case t of
    "annotation_predictor"  -> "Annotation predictor"
    "threshold_calibration" -> "Threshold calibration"
    "pattern_ranking"       -> "Pattern ranking"
    "routing_improvement"   -> "Routing improvement"
    _                       -> t

renderKnowledge :: InstitutionalKnowledgeEntry -> Html
renderKnowledge e = [hsx|
    <div>
        <a href={ShowInstitutionalKnowledgeAction (e.id)}
           class="text-sm text-blue-600 hover:underline">
            {take 80 e.summary <> if length e.summary > 80 then "…" else ""}
        </a>
    </div>
|]