module Web.View.InteractionReportingContracts.Show where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude
import Application.Helper.View (adapterStatusBadge)

data ShowView = ShowView
    { contract :: !InteractionReportingContract
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="mb-6">
            <a href={InteractionReportingContractsAction} class="text-sm text-gray-500 hover:text-gray-800">
                ← Reporting Contracts
            </a>
        </div>

        <div class="flex items-center gap-3 mb-6">
            <h1 class="text-2xl font-semibold">
                Reporting Contract <span class="font-mono">v{contract.contractVersion}</span>
            </h1>
            <span class={adapterStatusBadge contract.status <> " text-xs px-2 py-0.5 rounded font-medium"}>
                {contract.status}
            </span>
            {maturityBadge contract.maturity}
        </div>

        {forEach (contractDescription contract) (\d -> [hsx|
            <p class="text-sm text-gray-600 mb-6">{d}</p>
        |])}

        <div class="grid grid-cols-1 gap-4">
            <div class="bg-white rounded-lg border border-gray-200 p-5">
                <h2 class="text-sm font-semibold text-gray-700 mb-3">Endpoint</h2>
                <div class="flex items-center gap-2">
                    <span class="bg-green-100 text-green-800 text-xs font-bold px-2 py-0.5 rounded">POST</span>
                    <code class="text-sm text-gray-800">{contract.endpointPath}</code>
                </div>
                <div class="mt-2 text-xs text-gray-500">Auth: <code>{contract.authScheme}</code></div>
            </div>

            <div class="bg-white rounded-lg border border-gray-200 p-5">
                <h2 class="text-sm font-semibold text-gray-700 mb-3">Required Fields</h2>
                <pre class="text-xs bg-gray-50 rounded p-3 overflow-auto">{tshow contract.requiredFields}</pre>
            </div>

            <div class="bg-white rounded-lg border border-gray-200 p-5">
                <h2 class="text-sm font-semibold text-gray-700 mb-3">Accepted Event Types</h2>
                <pre class="text-xs bg-gray-50 rounded p-3 overflow-auto">{tshow contract.acceptedEventTypes}</pre>
            </div>
        </div>

        <div class="mt-6 bg-blue-50 border border-blue-200 rounded p-4 text-sm">
            <h3 class="font-semibold text-blue-800 mb-2">Example Request</h3>
            <pre class="text-xs text-blue-900 overflow-auto">curl -X POST {contract.endpointPath} \
  -H "Authorization: Bearer &lt;hub-api-key&gt;" \
  -H "Content-Type: application/json" \
  -d '{"{"}
    "widget_id": "&lt;uuid&gt;",
    "hub_id": "&lt;uuid&gt;",
    "event_type": "clicked",
    "occurred_at": "2026-03-29T12:00:00Z"
{"}"}'</pre>
        </div>

        <div class="mt-4 text-xs text-gray-400">
            Created: {show contract.createdAt}
        </div>
    |]

contractDescription :: InteractionReportingContract -> [Text]
contractDescription c = case c.description of
    Just d  -> [d]
    Nothing -> []

maturityBadge :: Text -> Html
maturityBadge "stable"       = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-green-100 text-green-800 font-medium">Stable</span>|]
maturityBadge "beta"         = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-blue-100 text-blue-800 font-medium">Beta</span>|]
maturityBadge "experimental" = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-amber-100 text-amber-800 font-medium">Experimental</span>|]
maturityBadge "deprecated"   = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-500 font-medium">Deprecated</span>|]
maturityBadge m              = [hsx|<span class="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-600 font-medium">{m}</span>|]