module Web.View.AnnotationThreads.Show where

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

data ShowView = ShowView
    { widget      :: !Widget
    , thread      :: !AnnotationThread
    , annotations :: ![Annotation]
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
            <a href={ShowWidgetAction (widget.id)} class="hover:text-gray-700">{widget.name}</a>
            <span>/</span>
            <a href={WidgetAnnotationThreadsAction (widget.id)} class="hover:text-gray-700">Threads</a>
            <span>/</span>
            <span>{thread.title}</span>
        </div>

        <div class="max-w-2xl">
            <div class="mb-6">
                <h1 class="text-2xl font-semibold">{thread.title}</h1>
                {maybe mempty renderThreadDesc thread.description}
            </div>

            <div class="mb-4 flex items-center gap-3">
                {renderSeverityBar annotations}
                <span class="text-xs text-gray-500">{dominantCategoryBadge annotations}</span>
            </div>

            <div class="space-y-3">
                {forEach annotations renderAnnotationCard}
            </div>
        </div>
    |]

renderAnnotationCard :: Annotation -> Html
renderAnnotationCard a = [hsx|
    <div class="bg-white rounded-lg border border-gray-200 px-4 py-3">
        <div class="flex items-center gap-2 mb-2">
            <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{a.category}</span>
            <span class={severityClass a.severity <> " text-xs px-2 py-0.5 rounded"}>
                {a.severity}
            </span>
        </div>
        <p class="text-sm text-gray-700">{a.body}</p>
    </div>
|]

renderSeverityBar :: [Annotation] -> Html
renderSeverityBar annotations =
    let total    = length annotations
        counts   = map (\s -> (s, length $ filter (\a -> a.severity == s) annotations))
                       ["critical", "high", "medium", "low"]
        nonZero  = filter (\(_, n) -> n > 0) counts
    in if total == 0
        then mempty
        else renderSeverityBarItems nonZero total

renderSeverityBarItems :: [(Text, Int)] -> Int -> Html
renderSeverityBarItems nonZero total = [hsx|
    <div class="flex items-center gap-1">
        {forEach nonZero (renderBarSegmentPair total)}
    </div>
|]

renderBarSegmentPair :: Int -> (Text, Int) -> Html
renderBarSegmentPair total (s, n) = renderBarSegment s n total

renderBarSegment :: Text -> Int -> Int -> Html
renderBarSegment sev n total =
    let pct = (n * 100) `div` total
    in [hsx|
    <div class={barColor sev <> " h-2 rounded"} style={"width: " <> show pct <> "px"} title={sev <> ": " <> show n}>
    </div>
|]

renderThreadDesc :: Text -> Html
renderThreadDesc d = [hsx|<p class="text-sm text-gray-500 mt-1">{d}</p>|]

barColor :: Text -> Text
barColor "low"      = "bg-gray-300"
barColor "medium"   = "bg-blue-400"
barColor "high"     = "bg-yellow-400"
barColor "critical" = "bg-red-500"
barColor _          = "bg-gray-300"

dominantCategoryBadge :: [Annotation] -> Text
dominantCategoryBadge [] = ""
dominantCategoryBadge annotations =
    let cats  = map (.category) annotations
        tally = map (\c -> (c, length $ filter (== c) cats)) (nub cats)
        best  = foldl1 (\(c1, n1) (c2, n2) -> if n2 > n1 then (c2, n2) else (c1, n1)) tally
    in fst best

severityClass :: Text -> Text
severityClass "low"      = "bg-gray-100 text-gray-500"
severityClass "medium"   = "bg-blue-100 text-blue-700"
severityClass "high"     = "bg-yellow-100 text-yellow-800"
severityClass "critical" = "bg-red-100 text-red-800 font-semibold"
severityClass _          = "bg-gray-100 text-gray-500"