module Web.View.Requirements.Show where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude

data ShowView = ShowView
    { requirement :: !Requirement
    , candidate   :: !RequirementCandidate
    , widget      :: !Widget
    , mDecision   :: !(Maybe DecisionRecord)
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
            <a href={RequirementsAction} class="hover:text-gray-700">Requirements</a>
            <span>/</span>
            <span>{requirement.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">{requirement.title}</h1>
                    <span class={reqStatusClass requirement.status <> " text-xs px-2 py-0.5 rounded font-medium ml-4"}>
                        {requirement.status}
                    </span>
                </div>
                <p class="text-sm text-gray-700 leading-relaxed">{requirement.description}</p>
            </div>

            <!-- Source candidate -->
            <div class="bg-white rounded-lg border border-gray-200 px-6 py-4">
                <h2 class="text-sm font-semibold text-gray-700 mb-2">Source Candidate</h2>
                <a href={ShowRequirementCandidateAction { requirementCandidateId = candidate.id }}
                   class="text-sm text-indigo-600 hover:text-indigo-800">{candidate.title}</a>
                <p class="text-xs text-gray-400 mt-1">Widget: {widget.name}</p>
            </div>

            <!-- Linked decision -->
            <div class="bg-white rounded-lg border border-gray-200 px-6 py-4">
                <h2 class="text-sm font-semibold text-gray-700 mb-2">Linked Decision</h2>
                {case mDecision of
                    Nothing -> [hsx|<p class="text-sm text-gray-400">No decision linked yet.</p>|]
                    Just dr -> [hsx|
                        <a href={ShowDecisionRecordAction { decisionRecordId = dr.id }}
                           class="text-sm text-indigo-600 hover:text-indigo-800">{dr.title}</a>
                        <span class={outcomeClass dr.outcome <> " text-xs px-2 py-0.5 rounded font-medium ml-2"}>
                            {dr.outcome}
                        </span>
                    |]}
            </div>
        </div>
    |]

reqStatusClass :: Text -> Text
reqStatusClass "active"     = "bg-green-100 text-green-800"
reqStatusClass "superseded" = "bg-yellow-100 text-yellow-800"
reqStatusClass "withdrawn"  = "bg-gray-100 text-gray-500"
reqStatusClass _            = "bg-gray-100 text-gray-600"

outcomeClass :: Text -> Text
outcomeClass "accepted"  = "bg-green-100 text-green-800"
outcomeClass "rejected"  = "bg-red-100 text-red-800"
outcomeClass "deferred"  = "bg-gray-100 text-gray-600"
outcomeClass "split"     = "bg-purple-100 text-purple-800"
outcomeClass "merged"    = "bg-indigo-100 text-indigo-800"
outcomeClass "reframed"  = "bg-orange-100 text-orange-800"
outcomeClass _           = "bg-gray-100 text-gray-600"