inter-hub/Web/View/AgentProposals/Show.hs

module Web.View.AgentProposals.Show where

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

data ShowView = ShowView
    { proposal    :: !AgentProposal
    , mWidget     :: !(Maybe Widget)
    , mCandidate  :: !(Maybe RequirementCandidate)
    , mDecision   :: !(Maybe DecisionRecord)
    , mReview     :: !(Maybe AgentReviewRecord)
    , confidences :: ![ConfidenceAnnotation]
    , users       :: ![User]
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="mb-4">
            <a href={AgentProposalsAction} class="text-sm text-indigo-600 hover:underline">← Agent Proposals</a>
        </div>

        <div class="flex items-start justify-between mb-6">
            <div class="flex items-center gap-3">
                <span class={proposalTypeBadge proposal.proposalType <> " text-sm px-2 py-1 rounded font-medium"}>
                    {proposal.proposalType}
                </span>
                <span class={statusBadge proposal.status <> " text-sm px-2 py-1 rounded font-medium"}>
                    {proposal.status}
                </span>
            </div>
        </div>

        <!-- Content panel -->
        <div class="bg-white rounded-lg border border-gray-200 p-5 mb-5">
            <h2 class="text-sm font-semibold text-gray-700 mb-2">AI Output</h2>
            <pre class="text-sm text-gray-800 whitespace-pre-wrap font-mono bg-gray-50 rounded p-4">{proposal.content}</pre>
        </div>

        <!-- Confidence breakdown -->
        {if null confidences then mempty else renderConfidences confidences}

        <!-- Source context -->
        <div class="bg-white rounded-lg border border-gray-200 p-5 mb-5">
            <h2 class="text-sm font-semibold text-gray-700 mb-3">Source Context</h2>
            <dl class="grid grid-cols-2 gap-3 text-sm">
                <dt class="text-gray-500">Widget</dt>
                <dd>{maybe "—" (.name) mWidget}</dd>
                <dt class="text-gray-500">Candidate</dt>
                <dd>{maybe "—" (.title) mCandidate}</dd>
                <dt class="text-gray-500">Decision</dt>
                <dd>{maybe "—" (.title) mDecision}</dd>
            </dl>
        </div>

        <!-- Review section -->
        {renderReviewSection mReview users proposal.id proposal.status}

        <!-- Attribution footer -->
        <div class="text-xs text-gray-400 mt-4 border-t pt-3">
            Model: <span class="font-mono">{proposal.modelRef}</span>
            · Created: {show proposal.createdAt}
        </div>
    |]

renderReviewSection :: Maybe AgentReviewRecord -> [User] -> Id AgentProposal -> Text -> Html
renderReviewSection mReview users proposalId status =
    case mReview of
        Just review -> renderExistingReview review users
        Nothing     -> renderReviewForm proposalId status

renderConfidences :: [ConfidenceAnnotation] -> Html
renderConfidences cs = [hsx|
    <div class="bg-white rounded-lg border border-gray-200 p-5 mb-5">
        <h2 class="text-sm font-semibold text-gray-700 mb-3">Confidence Breakdown</h2>
        <div class="space-y-3">
            {forEach cs renderConfidenceRow}
        </div>
    </div>
|]

renderConfidenceRow :: ConfidenceAnnotation -> Html
renderConfidenceRow c =
    let pct = show (round (c.score * 100) :: Int) <> "%"
        barWidth = "width: " <> pct
    in [hsx|
        <div>
            <div class="flex justify-between text-xs mb-1">
                <span class="text-gray-600">{c.dimension}</span>
                <span class="text-gray-500">{pct}</span>
            </div>
            <div class="w-full bg-gray-100 rounded h-2">
                <div class="bg-indigo-400 rounded h-2" style={barWidth}></div>
            </div>
            {maybe mempty renderConfExplanation c.explanation}
        </div>
    |]

renderExistingReview :: AgentReviewRecord -> [User] -> Html
renderExistingReview review users = [hsx|
    <div class="bg-gray-50 rounded-lg border border-gray-200 p-5 mb-5">
        <h2 class="text-sm font-semibold text-gray-700 mb-2">Review Decision</h2>
        <div class="flex items-center gap-3 mb-2">
            <span class={decisionBadge review.decision <> " text-sm px-2 py-1 rounded font-medium"}>
                {review.decision}
            </span>
            <span class="text-xs text-gray-400">by {reviewerName users review.reviewerId} at {show review.reviewedAt}</span>
        </div>
        {maybe mempty renderReviewNote review.notes}
    </div>
|]

renderReviewForm :: Id AgentProposal -> Text -> Html
renderReviewForm pid status
    | status /= "pending" = mempty
    | otherwise = [hsx|
        <div class="bg-white rounded-lg border border-gray-200 p-5 mb-5">
            <h2 class="text-sm font-semibold text-gray-700 mb-3">Review This Proposal</h2>
            <div class="mb-3">
                <label class="block text-xs text-gray-500 mb-1">Notes (optional)</label>
                <textarea id="review-notes" name="notes" rows="2"
                    class="w-full border border-gray-300 rounded px-3 py-2 text-sm"></textarea>
            </div>
            <div class="flex gap-3">
                <form method="POST" action={AcceptProposalAction (pid)}
                      onsubmit="document.getElementById('accept-notes').value = document.getElementById('review-notes').value">
                    <input type="hidden" name="notes" id="accept-notes" />
                    <button type="submit"
                        class="bg-green-600 text-white text-sm px-4 py-2 rounded hover:bg-green-700">
                        Accept
                    </button>
                </form>
                <form method="POST" action={RejectProposalAction (pid)}
                      onsubmit="document.getElementById('reject-notes').value = document.getElementById('review-notes').value">
                    <input type="hidden" name="notes" id="reject-notes" />
                    <button type="submit"
                        class="bg-red-600 text-white text-sm px-4 py-2 rounded hover:bg-red-700">
                        Reject
                    </button>
                </form>
            </div>
        </div>
    |]

renderConfExplanation :: Text -> Html
renderConfExplanation e = [hsx|<p class="text-xs text-gray-400 mt-0.5">{e}</p>|]

renderReviewNote :: Text -> Html
renderReviewNote n = [hsx|<p class="text-sm text-gray-600">{n}</p>|]

reviewerName :: [User] -> Maybe (Id User) -> Text
reviewerName _     Nothing    = "unknown"
reviewerName users (Just uid) = maybe "(unknown)" (.name) (find (\u -> u.id == uid) users)

proposalTypeBadge :: Text -> Text
proposalTypeBadge "summary"            = "bg-blue-100 text-blue-800"
proposalTypeBadge "requirement_draft"  = "bg-indigo-100 text-indigo-800"
proposalTypeBadge "duplicate_flag"     = "bg-orange-100 text-orange-800"
proposalTypeBadge "policy_flag"        = "bg-red-100 text-red-800"
proposalTypeBadge "impl_proposal"      = "bg-green-100 text-green-800"
proposalTypeBadge _                    = "bg-gray-100 text-gray-600"

statusBadge :: Text -> Text
statusBadge "pending"    = "bg-yellow-100 text-yellow-800"
statusBadge "accepted"   = "bg-green-100 text-green-800"
statusBadge "rejected"   = "bg-red-100 text-red-800"
statusBadge "superseded" = "bg-gray-100 text-gray-500"
statusBadge _            = "bg-gray-100 text-gray-600"

decisionBadge :: Text -> Text
decisionBadge "accepted" = "bg-green-100 text-green-800"
decisionBadge "rejected" = "bg-red-100 text-red-800"
decisionBadge "modified" = "bg-blue-100 text-blue-800"
decisionBadge _          = "bg-gray-100 text-gray-600"