module Web.View.AiGovernancePolicies.New where

import Web.View.Prelude

data NewView = NewView
    { policy :: !AiGovernancePolicy
    , hubs   :: ![Hub]
    , agents :: ![AgentRegistration]
    }

allowedActionOptions :: [(Text, Text)]
allowedActionOptions =
    [ ("read",       "read — agent may read artifacts")
    , ("propose",    "propose — agent may create proposals")
    , ("delegate",   "delegate — agent may delegate to other agents")
    , ("auto_apply", "auto_apply — agent may apply changes without human review")
    ]

instance View NewView where
    html NewView { .. } = [hsx|
        <div class="p-6 max-w-xl">
            <h1 class="text-2xl font-bold text-gray-900 mb-6">Add AI Governance Policy</h1>
            {formFor policy [hsx|
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Hub</label>
                        <select name="hubId" class="block w-full border-gray-300 rounded-md shadow-sm text-sm">
                            {forEach hubs \h -> [hsx|<option value={show h.id}>{h.name}</option>|]}
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Agent</label>
                        <select name="agentRegistrationId" class="block w-full border-gray-300 rounded-md shadow-sm text-sm">
                            {forEach agents \a -> [hsx|<option value={show a.id}>{a.name}</option>|]}
                        </select>
                    </div>
                    <div>{(textField #artifactType) { label = "Artifact Type", placeholder = "e.g. requirement_candidate, annotation, decision_record" }}</div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Allowed Actions</label>
                        <div class="space-y-2">
                            {forEach allowedActionOptions \(val, label) -> [hsx|
                                <label class="flex items-center gap-2 text-sm">
                                    <input type="checkbox" name="allowedActions" value={val} class="rounded" />
                                    <span>{label}</span>
                                </label>
                            |]}
                        </div>
                    </div>
                    <div class="flex gap-3 pt-2">
                        {submitButton { label = "Create Policy" }}
                        <a href={AiGovernancePoliciesAction}
                           class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm">Cancel</a>
                    </div>
                </div>
            |]}
        </div>
    |]