module Web.View.GovernanceTemplates.New where

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

data NewView = NewView
    { template   :: !GovernanceTemplate
    , hubs       :: ![Hub]
    , categories :: ![(Text, Text)]  -- (name, label)
    }

instance View NewView where
    html NewView { .. } = [hsx|
        <div class="mb-4">
            <a href={GovernanceTemplatesAction} class="text-sm text-gray-500 hover:text-gray-700">
                ← Governance Templates
            </a>
        </div>
        <h1 class="text-2xl font-semibold mb-6">New Governance Template</h1>

        <form method="POST" action={CreateGovernanceTemplateAction}>
            <div class="space-y-4 max-w-lg">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                    <input type="text" name="name" value={template.name}
                        class="w-full border border-gray-300 rounded px-3 py-2 text-sm" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Hub</label>
                    <select name="hubId" class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                        {forEach hubs renderHubOption}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                    <textarea name="description" rows="2"
                        class="w-full border border-gray-300 rounded px-3 py-2 text-sm"
                        >{fromMaybe "" template.description}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Categories <span class="text-xs text-gray-400">(select all that apply)</span>
                    </label>
                    <div class="space-y-1 border border-gray-200 rounded p-3">
                        {forEach categories renderCategoryCheckbox}
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Template Body (JSON)
                    </label>
                    <textarea name="templateBody" rows="6"
                        class="w-full border border-gray-300 rounded px-3 py-2 text-sm font-mono"
                        placeholder="{&quot;steps&quot;: [], &quot;questions&quot;: []}"></textarea>
                </div>
                <button type="submit"
                    class="text-sm bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">
                    Create Template
                </button>
            </div>
        </form>
    |]

renderHubOption :: Hub -> Html
renderHubOption h = [hsx|<option value={tshow h.id}>{h.name}</option>|]

renderCategoryCheckbox :: (Text, Text) -> Html
renderCategoryCheckbox (n, l) = [hsx|
    <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="categories" value={n} />
        <span class="font-mono text-xs text-gray-600">{n}</span>
        <span class="text-gray-700">{l}</span>
    </label>
|]