module Web.View.StaticPages.Capabilities where

import Web.View.Prelude

data CapabilitiesView = CapabilitiesView

instance View CapabilitiesView where
    html CapabilitiesView = [hsx|
        <div class="max-w-4xl mx-auto py-10 px-6">
            <div class="mb-8">
                <a href={LandingAction} class="text-sm text-indigo-600 hover:underline">← Home</a>
                <h1 class="text-3xl font-bold text-gray-900 mt-3 mb-2">Platform Capabilities</h1>
                <p class="text-gray-500">IHF v0.2 — GAAF 3.68 Strong — 12 phases complete</p>
            </div>

            {-- Phase map --}
            <section id="phases" class="mb-12">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">12-Phase Capability Map</h2>
                <div class="space-y-3">
                    {phaseRow "1" "Core Domain Model" "Hubs, Widgets, WidgetVersions, InteractionEvents (append-only), Annotations, ViewContexts, CapabilityReferences. Widget envelope helper injects stable widget-id attributes."}
                    {phaseRow "2" "Requirement Candidates" "Triage lifecycle, duplicate detection, policy sensitivity routing, reviewer assignment, promotion to Requirement."}
                    {phaseRow "3" "Decision Records" "Requirement → DecisionRecord chain with policy references, implementation change references, and governance status."}
                    {phaseRow "4" "Deployment & Outcomes" "DeploymentRecord, OutcomeSignal (append-only), ChangeEvaluation. Outcome feedback closes the loop to DecisionRecords."}
                    {phaseRow "5" "Agent-Assisted Distillation" "AI agents (Anthropic API) draft Requirements from widget clusters, route via configurable model selection. AgentProposals with confidence annotations."}
                    {phaseRow "6" "Cross-Framework UI Adaptation" "EnvelopeEmissionContracts, InteractionReportingContracts, WidgetAdapterSpecs. Adapts widgets across framework boundaries."}
                    {phaseRow "7" "Advanced Observability" "FrictionScores, BottleneckRecords, HubHealthSnapshots, CrossHubPropagation detection. Heatmaps and operational review board."}
                    {phaseRow "8" "Federated Hub Maturity" "WidgetOwnerships, HubRoutingRules, FederatedPolicyOverlays, StewardshipRoles, ArchiveRecords with LineageInspector."}
                    {phaseRow "9" "External API Surface" "REST v1 + v2, JWT auth, OpenAPI 3.1, TypeScript + Python SDKs, WebhookSubscriptions, per-consumer ApiKeys, ApiDashboard."}
                    {phaseRow "10" "Hub Registry & Widget Marketplace" "WidgetPatterns with versioned adoption, GovernanceTemplates, HubRegistry, Marketplace dashboard. Phase 10 API v2 endpoints."}
                    {phaseRow "11" "Advanced AI Federation" "AgentRegistrations, ModelRoutingPolicies, AgentDelegations (tree), CollectiveProposals, AiGovernancePolicies, AgentPerformanceRecords."}
                    {phaseRow "12" "Platform Memory & Continuous Learning" "OutcomeCorrelations, PatternPerformanceRecords, AdaptiveThresholdConfigs, InstitutionalKnowledgeBase (GIN FTS), LearningInsights, retroactive lineage enrichment."}
                </div>
            </section>

            {-- GAAF scorecard --}
            <section id="gaaf" class="mb-12">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">GAAF-2026 Scorecard</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    {scoreCard "Core Architecture" "3.9" "Append-only invariants, type registry, FK discipline"}
                    {scoreCard "Functional Completeness" "3.8" "All 12 phases implemented with full controller+view coverage"}
                    {scoreCard "Observability" "3.5" "Friction heatmaps, health snapshots, lineage inspector"}
                    {scoreCard "Overall" "3.68" "Strong — GAAF 2026 threshold for production readiness"}
                </div>
            </section>

            {-- API surface --}
            <section id="api" class="mb-12">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">API Surface</h2>
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="px-4 py-3 text-left font-medium text-gray-700">Version</th>
                                <th class="px-4 py-3 text-left font-medium text-gray-700">Endpoints</th>
                                <th class="px-4 py-3 text-left font-medium text-gray-700">Auth</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b border-gray-100">
                                <td class="px-4 py-3 font-mono text-xs text-gray-600">v1</td>
                                <td class="px-4 py-3 text-gray-700">POST /api/v1/interaction-events</td>
                                <td class="px-4 py-3 text-gray-500">None (legacy write path)</td>
                            </tr>
                            <tr class="border-b border-gray-100">
                                <td class="px-4 py-3 font-mono text-xs text-gray-600">v2</td>
                                <td class="px-4 py-3 text-gray-700">Widgets, Events, Annotations, Candidates, Decisions, Deployments, Signals, Registries, Patterns, Learning</td>
                                <td class="px-4 py-3 text-gray-500">JWT Bearer</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3 font-mono text-xs text-gray-600">v2 spec</td>
                                <td class="px-4 py-3 text-gray-700">GET /api/v2/openapi.json · /api/v2/openapi.yaml · /api/v2/docs</td>
                                <td class="px-4 py-3 text-gray-500">None (public)</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>

            {-- Learning loop --}
            <section id="learning" class="mb-12">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">The Learning Loop</h2>
                <p class="text-sm text-gray-600 mb-4">
                    Phase 12 closes the full learning loop. The system continuously improves routing
                    and triage thresholds based on observed outcomes:
                </p>
                <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-5 font-mono text-xs text-indigo-800 leading-relaxed">
                    Widget → Annotation → RequirementCandidate → Requirement<br/>
                    → DecisionRecord → DeploymentRecord → OutcomeSignal<br/>
                    → OutcomeCorrelation / PatternPerformanceRecord<br/>
                    → InstitutionalKnowledgeEntry → AdaptiveThresholdConfig<br/>
                    → improved routing + triage (loop closed)
                </div>
            </section>

            {-- Type registry --}
            <section id="type-registry" class="mb-12">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">Type Registry System</h2>
                <p class="text-sm text-gray-600 mb-3">
                    GAAF Rule 1: all type discriminator columns reference a registry table.
                    New hub-owned types must be registered before use (GAAF Rule 2).
                </p>
                <div class="grid grid-cols-2 gap-3 text-sm">
                    <div class="bg-white border rounded p-3"><strong class="text-gray-700">widget_type_registry</strong> <span class="text-gray-400">— hub-owned widget types</span></div>
                    <div class="bg-white border rounded p-3"><strong class="text-gray-700">event_type_registry</strong> <span class="text-gray-400">— interaction event types</span></div>
                    <div class="bg-white border rounded p-3"><strong class="text-gray-700">annotation_category_registry</strong> <span class="text-gray-400">— annotation categories</span></div>
                    <div class="bg-white border rounded p-3"><strong class="text-gray-700">policy_scope_registry</strong> <span class="text-gray-400">— policy sensitivity scopes</span></div>
                </div>
            </section>

            <div class="flex gap-4 text-sm">
                <a href={TutorialAction} class="text-indigo-600 hover:underline">Developer Tutorial →</a>
                <a href={ExtensionGuideAction} class="text-indigo-600 hover:underline">Extension Guide →</a>
                <a href={HubsAction} class="text-indigo-600 hover:underline">Management UI →</a>
            </div>
        </div>
    |]
      where
        phaseRow num title_ desc = [hsx|
            <div class="bg-white rounded-lg border border-gray-200 p-4 flex gap-4">
                <div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center text-sm font-bold flex-shrink-0">
                    {num :: Text}
                </div>
                <div>
                    <div class="font-medium text-gray-800">{title_ :: Text}</div>
                    <div class="text-sm text-gray-500 mt-0.5">{desc :: Text}</div>
                </div>
            </div>
        |]
        scoreCard label_ score_ detail_ = [hsx|
            <div class="bg-white border border-gray-200 rounded-lg p-4 text-center">
                <div class="text-2xl font-bold text-indigo-700">{score_ :: Text}</div>
                <div class="text-sm font-medium text-gray-700 mt-1">{label_ :: Text}</div>
                <div class="text-xs text-gray-400 mt-1">{detail_ :: Text}</div>
            </div>
        |]