module Web.View.CollectiveProposals.Show where

import Web.View.Prelude
import Web.View.CollectiveProposals.Index (consensusBadge)
import Data.Aeson (Value)

data ShowView = ShowView
    { proposal          :: !CollectiveProposal
    , agentContributions :: ![(CollectiveProposalContribution, Text)]
      -- ^ (contribution, agent name)
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="p-6 space-y-6 max-w-4xl">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">{proposal.title}</h1>
                    <p class="text-sm font-mono text-gray-500 mt-1">{proposal.taskType}</p>
                </div>
                {consensusBadge proposal.consensusStatus}
            </div>

            {maybe mempty renderProposalSummary proposal.summary}

            {maybe mempty renderFinalContent proposal.finalContent}

            <div>
                <h2 class="text-lg font-semibold text-gray-800 mb-3">
                    Agent Contributions ({show (length agentContributions)})
                </h2>
                <div class="grid gap-4">
                    {forEach agentContributions renderContrib}
                </div>
            </div>
        </div>
    |]

renderProposalSummary :: Text -> Html
renderProposalSummary s = [hsx|<p class="text-gray-700">{s}</p>|]

renderFinalContent :: Value -> Html
renderFinalContent fc = [hsx|
    <div class="bg-green-50 border border-green-200 rounded-lg p-4">
        <h2 class="text-sm font-semibold text-green-800 mb-2">Synthesized Recommendation</h2>
        <pre class="text-sm text-green-900 whitespace-pre-wrap">{show fc}</pre>
    </div>
|]

renderContrib :: (CollectiveProposalContribution, Text) -> Html
renderContrib (contrib, agentName) = [hsx|
    <div class="bg-white shadow rounded-lg p-4">
        <div class="flex justify-between items-center mb-2">
            <span class="text-sm font-medium text-gray-800">{agentName}</span>
            <span class="text-xs text-gray-400">
                {maybe "" (\m -> "model: " <> m) contrib.modelUsed}
                {maybe "" (\t -> " · " <> show t <> " tokens out") contrib.tokensOut}
            </span>
        </div>
        <pre class="text-sm text-gray-700 whitespace-pre-wrap bg-gray-50 rounded p-3">{show contrib.content}</pre>
    </div>
|]