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

module Web.View.RequirementCandidates.Show where

import Web.View.Prelude
import Web.Routes ()

data ShowView = ShowView
    { candidate        :: !RequirementCandidate
    , widget           :: !Widget
    , triageStates     :: ![TriageState]
    , mAssignment      :: !(Maybe ReviewerAssignment)
    , users            :: ![User]
    , mSourceAnnotation :: !(Maybe Annotation)
    , mSourceThread    :: !(Maybe AnnotationThread)
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
            <a href={RequirementCandidatesAction} class="hover:text-gray-700">Candidates</a>
            <span>/</span>
            <span>{candidate.title}</span>
        </div>

        <div class="max-w-3xl space-y-6">
            <!-- Header card -->
            <div class="bg-white rounded-lg border border-gray-200 px-6 py-5">
                <div class="flex items-start justify-between mb-3">
                    <h1 class="text-2xl font-semibold">{candidate.title}</h1>
                    <div class="flex gap-2 ml-4 flex-wrap">
                        <form method="POST" action={DetectDuplicatesAction (candidate.id)} class="inline">
                            <button type="submit" class="text-sm border border-orange-300 text-orange-700 px-3 py-1.5 rounded hover:bg-orange-50">
                                Check Duplicates
                            </button>
                        </form>
                        <form method="POST" action={DetectPolicySensitivityAction (candidate.id)} class="inline">
                            <button type="submit" class="text-sm border border-red-300 text-red-700 px-3 py-1.5 rounded hover:bg-red-50">
                                Policy Check
                            </button>
                        </form>
                        <a href={EditRequirementCandidateAction (candidate.id)}
                           class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
                            Edit
                        </a>
                    </div>
                </div>
                <div class="flex items-center gap-2 mb-3">
                    <span class={statusClass candidate.status <> " text-xs px-2 py-0.5 rounded font-medium"}>
                        {candidate.status}
                    </span>
                    <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
                        {candidate.category}
                    </span>
                    <span class="text-xs text-gray-400">
                        Widget: {widget.name}
                    </span>
                </div>
                <p class="text-sm text-gray-700 leading-relaxed">{candidate.description}</p>
            </div>

            <!-- Source -->
            <div class="bg-white rounded-lg border border-gray-200 px-6 py-4">
                <h2 class="text-sm font-semibold text-gray-700 mb-3">Source</h2>
                {renderSource mSourceAnnotation mSourceThread}
            </div>

            <!-- Triage actions -->
            <div class="bg-white rounded-lg border border-gray-200 px-6 py-4">
                <h2 class="text-sm font-semibold text-gray-700 mb-3">Triage</h2>
                {renderTriageActions candidate}
            </div>

            <!-- Reviewer assignment -->
            <div class="bg-white rounded-lg border border-gray-200 px-6 py-4">
                <h2 class="text-sm font-semibold text-gray-700 mb-3">Reviewer</h2>
                {renderReviewerSection candidate mAssignment users}
            </div>

            <!-- Phase 3: Promote to Requirement / Link to Decision -->
            {renderGovernanceActions candidate}

            <!-- Triage history -->
            <div class="bg-white rounded-lg border border-gray-200 px-6 py-4">
                <h2 class="text-sm font-semibold text-gray-700 mb-3">Triage History</h2>
                {renderTriageHistory triageStates}
            </div>
        </div>
    |]

renderSource :: Maybe Annotation -> Maybe AnnotationThread -> Html
renderSource Nothing Nothing = [hsx|<p class="text-sm text-gray-400">No source linked.</p>|]
renderSource (Just a) _ = [hsx|
    <div class="text-sm">
        <p class="text-gray-500 mb-1">Source annotation:</p>
        <p class="text-gray-700 italic">"{a.body}"</p>
    </div>
|]
renderSource Nothing (Just t) = [hsx|
    <div class="text-sm">
        <p class="text-gray-500 mb-1">Source thread:</p>
        <a href={ShowAnnotationThreadAction (t.id)}
           class="text-indigo-600 hover:text-indigo-800">{t.title}</a>
    </div>
|]

renderTriageActions :: RequirementCandidate -> Html
renderTriageActions c = [hsx|
    <div class="flex flex-wrap gap-2">
        {forEach (allowedNextStatuses c.status) (renderTriageButton c.id)}
    </div>
|]

allowedNextStatuses :: Text -> [Text]
allowedNextStatuses "open"      = ["in_review"]
allowedNextStatuses "in_review" = ["accepted", "rejected", "deferred"]
allowedNextStatuses "deferred"  = ["in_review"]
allowedNextStatuses _           = []

renderTriageButton :: Id RequirementCandidate -> Text -> Html
renderTriageButton candidateId newStatus = [hsx|
    <form method="POST" action={UpdateTriageStatusAction (candidateId)}
          class="inline">
        <input type="hidden" name="status" value={newStatus} />
        <button type="submit" class={triageButtonClass newStatus}>
            → {newStatus}
        </button>
    </form>
|]

triageButtonClass :: Text -> Text
triageButtonClass "accepted"  = "text-sm px-3 py-1.5 rounded border bg-green-50 border-green-300 text-green-800 hover:bg-green-100"
triageButtonClass "rejected"  = "text-sm px-3 py-1.5 rounded border bg-red-50 border-red-300 text-red-800 hover:bg-red-100"
triageButtonClass "deferred"  = "text-sm px-3 py-1.5 rounded border bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100"
triageButtonClass _           = "text-sm px-3 py-1.5 rounded border bg-yellow-50 border-yellow-300 text-yellow-800 hover:bg-yellow-100"

renderReviewerSection :: RequirementCandidate -> Maybe ReviewerAssignment -> [User] -> Html
renderReviewerSection candidate mAssignment users = [hsx|
    <div class="flex items-center gap-4">
        <div class="text-sm text-gray-600">
            {renderAssignmentStatus mAssignment users}
        </div>
        <form method="POST" action={AssignReviewerAction (candidate.id)}
              class="flex items-center gap-2">
            <select name="userId" class="text-sm border border-gray-300 rounded px-2 py-1">
                {forEach users renderUserOption}
            </select>
            <button type="submit"
                    class="text-sm bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700">
                Assign
            </button>
        </form>
    </div>
|]

reviewerName :: ReviewerAssignment -> [User] -> Text
reviewerName ra users =
    maybe "Unknown" (.name) (find (\u -> u.id == ra.userId) users)

renderTriageHistory :: [TriageState] -> Html
renderTriageHistory [] = [hsx|<p class="text-sm text-gray-400">No triage actions recorded yet.</p>|]
renderTriageHistory states = [hsx|
    <ol class="space-y-2">
        {forEach states renderTriageRow}
    </ol>
|]

renderAssignmentStatus :: Maybe ReviewerAssignment -> [User] -> Html
renderAssignmentStatus Nothing  _ = [hsx|<span class="text-gray-400">Unassigned</span>|]
renderAssignmentStatus (Just ra) users = [hsx|<span>{reviewerName ra users}</span>|]

renderUserOption :: User -> Html
renderUserOption u = [hsx|<option value={show u.id}>{u.name}</option>|]

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

renderTriageRow :: TriageState -> Html
renderTriageRow ts = [hsx|
    <li class="flex items-start gap-3 text-sm">
        <span class={statusClass ts.status <> " text-xs px-2 py-0.5 rounded mt-0.5 shrink-0"}>
            {ts.status}
        </span>
        <div>
            {maybe mempty renderTriageNote ts.notes}
            <p class="text-xs text-gray-400">{show ts.changedAt}</p>
        </div>
    </li>
|]

renderGovernanceActions :: RequirementCandidate -> Html
renderGovernanceActions candidate
    | candidate.status == "accepted" = [hsx|
        <div class="bg-white rounded-lg border border-indigo-200 px-6 py-4">
            <h2 class="text-sm font-semibold text-gray-700 mb-3">Governance</h2>
            <div class="flex flex-wrap gap-3">
                {renderPromoteButton candidate}
                {renderLinkDecisionButton candidate}
            </div>
        </div>
    |]
    | otherwise = mempty

renderPromoteButton :: RequirementCandidate -> Html
renderPromoteButton candidate =
    case candidate.requirementId of
        Just rid -> [hsx|
            <a href={ShowRequirementAction (rid)}
               class="text-sm text-green-700 bg-green-50 border border-green-200 px-3 py-1.5 rounded hover:bg-green-100">
                Requirement →
            </a>
        |]
        Nothing -> [hsx|
            <form method="POST"
                  action={PromoteToRequirementAction (candidate.id)}>
                <button type="submit"
                        class="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded hover:bg-indigo-700">
                    Promote to Requirement
                </button>
            </form>
        |]

renderLinkDecisionButton :: RequirementCandidate -> Html
renderLinkDecisionButton candidate = [hsx|
    <form method="POST"
          action={LinkToDecisionAction (candidate.id)}>
        <button type="submit"
                class="text-sm bg-gray-700 text-white px-3 py-1.5 rounded hover:bg-gray-800">
            Create Decision Record
        </button>
    </form>
|]

statusClass :: Text -> Text
statusClass "open"      = "bg-blue-100 text-blue-700"
statusClass "in_review" = "bg-yellow-100 text-yellow-800"
statusClass "accepted"  = "bg-green-100 text-green-800"
statusClass "rejected"  = "bg-red-100 text-red-800"
statusClass "deferred"  = "bg-gray-100 text-gray-600"
statusClass _           = "bg-gray-100 text-gray-600"