module Web.View.DecisionRecords.New where

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

data NewView = NewView
    { record       :: !DecisionRecord
    , requirements :: ![Requirement]
    , candidates   :: ![RequirementCandidate]
    , users        :: ![User]
    }

instance View NewView where
    html NewView { .. } = [hsx|
        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
            <a href={DecisionRecordsAction} class="hover:text-gray-700">Decisions</a>
            <span>/</span>
            <span>New</span>
        </div>

        <div class="max-w-2xl">
            <h1 class="text-2xl font-semibold mb-6">New Decision Record</h1>
            {renderForm record requirements candidates users CreateDecisionRecordAction}
        </div>
    |]

renderForm :: DecisionRecord -> [Requirement] -> [RequirementCandidate] -> [User] -> DecisionRecordsController -> Html
renderForm record requirements candidates users formAction = [hsx|
    <form method="POST" action={formAction} class="bg-white rounded-lg border border-gray-200 px-6 py-5 space-y-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
            <input type="text" name="title" value={record.title}
                   class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                   required />
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Outcome</label>
            <select name="outcome"
                    class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="accepted">accepted</option>
                <option value="rejected">rejected</option>
                <option value="deferred">deferred</option>
                <option value="split">split</option>
                <option value="merged">merged</option>
                <option value="reframed">reframed</option>
            </select>
            <p class="text-xs text-gray-400 mt-1">Outcome cannot be changed after creation.</p>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Rationale</label>
            <textarea name="rationale" rows="4"
                      class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                      required>{record.rationale}</textarea>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Linked Requirement (optional)</label>
            <select name="requirementId"
                    class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="">— None —</option>
                {forEach requirements renderRequirementOption}
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Linked Candidate (optional)</label>
            <select name="candidateId"
                    class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="">— None —</option>
                {forEach candidates renderCandidateOption}
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Notes (optional)</label>
            <textarea name="notes" rows="2"
                      class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                      placeholder="For split/merged: list related candidate IDs or context"
                      >{fromMaybe "" record.notes}</textarea>
        </div>

        <div class="flex gap-3 pt-2">
            <button type="submit"
                    class="bg-indigo-600 text-white text-sm px-4 py-2 rounded hover:bg-indigo-700">
                Create Decision
            </button>
            <a href={DecisionRecordsAction}
               class="text-sm text-gray-500 px-4 py-2 rounded hover:bg-gray-100">Cancel</a>
        </div>
    </form>
|]

renderRequirementOption :: Requirement -> Html
renderRequirementOption r = [hsx|<option value={show r.id}>{r.title}</option>|]

renderCandidateOption :: RequirementCandidate -> Html
renderCandidateOption c = [hsx|<option value={show c.id}>{c.title}</option>|]