module Web.View.WidgetAdapterSpecs.New where

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

data NewView = NewView
    { spec       :: !WidgetAdapterSpec
    , envelopes  :: ![EnvelopeEmissionContract]
    , reportings :: ![InteractionReportingContract]
    }

instance View NewView where
    html NewView { .. } = [hsx|
        <div class="mb-4">
            <a href={WidgetAdapterSpecsAction} class="text-sm text-gray-500 hover:text-gray-800">
                ← Adapter Specs
            </a>
        </div>
        <h1 class="text-2xl font-semibold mb-6">Register Adapter Spec</h1>
        {renderForm spec envelopes reportings}
    |]

renderForm :: WidgetAdapterSpec -> [EnvelopeEmissionContract] -> [InteractionReportingContract] -> Html
renderForm spec envelopes reportings = formFor spec [hsx|
    <div class="bg-white rounded-lg border border-gray-200 p-6 space-y-5 max-w-lg">

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-red-500">*</span></label>
            {textField #name}
            <p class="text-xs text-gray-400 mt-1">Unique identifier, e.g. react-18, vue-3, web-component</p>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Framework <span class="text-red-500">*</span></label>
            {textField #framework}
            <p class="text-xs text-gray-400 mt-1">e.g. react, vue, angular, vanilla</p>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Version <span class="text-red-500">*</span></label>
            {textField #version}
            <p class="text-xs text-gray-400 mt-1">Adapter spec version, e.g. 1.0</p>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Envelope Contract</label>
            <select name="envelopeContractId" class="w-full border border-gray-200 rounded px-3 py-2 text-sm">
                <option value="">— None —</option>
                {forEach envelopes (\e -> [hsx|
                    <option value={tshow e.id}>v{e.contractVersion}</option>
                |])}
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Reporting Contract</label>
            <select name="reportingContractId" class="w-full border border-gray-200 rounded px-3 py-2 text-sm">
                <option value="">— None —</option>
                {forEach reportings (\r -> [hsx|
                    <option value={tshow r.id}>v{r.contractVersion}</option>
                |])}
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
            <select name="status" class="w-full border border-gray-200 rounded px-3 py-2 text-sm">
                <option value="draft">draft</option>
                <option value="active">active</option>
                <option value="deprecated">deprecated</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
            {textareaField #notes}
        </div>

        <div class="flex gap-3">
            {submitButton}
            <a href={WidgetAdapterSpecsAction}
               class="text-sm text-gray-500 border border-gray-200 rounded px-4 py-2 hover:border-gray-400">
                Cancel
            </a>
        </div>
    </div>
|]