Artifacts

import Link from "next/link";
import { FolderGit2, BookOpen, Database, ShieldOff } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { MetaItem } from "@/components/shared/field-list";
import { CONTENT_ROOT, REPO_ROOT } from "@/lib/content/config";
import { getGovernanceDocs, getOverviewStats } from "@/lib/content/overview";

export const dynamic = "force-dynamic";
export const metadata = { title: "Settings" };

const NON_GOALS = [
  "Graphiti",
  "LiteLLM",
  "Langfuse",
  "Playwright",
  "Autonomous workers",
  "Runtime AI execution",
  "Docker orchestration",
  "Backend services",
  "External APIs",
];

export default function SettingsPage() {
  const docs = getGovernanceDocs();
  const stats = getOverviewStats();

  return (
    <div>
      <PageHeader
        eyebrow="System"
        title="Settings"
        description="How HQ01 is wired to the repository. V1 is intentionally read-only: markdown and yaml in, executive cockpit out."
      />

      <div className="space-y-6">
        <Card>
          <CardContent className="p-6">
            <div className="mb-5 flex items-center gap-2.5">
              <Database className="h-[18px] w-[18px] text-foreground/70" />
              <h2 className="text-sm font-semibold tracking-tight">Content Source</h2>
            </div>
            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
              <MetaItem label="Workspace Root">
                <span className="font-mono text-[13px]">{CONTENT_ROOT}</span>
              </MetaItem>
              <MetaItem label="Git Repository">
                <span className="font-mono text-[13px]">{REPO_ROOT}</span>
              </MetaItem>
              <MetaItem label="Override">
                <span className="font-mono text-[13px]">HQ01_CONTENT_ROOT</span>
              </MetaItem>
              <MetaItem label="Mode">Read-only · request-time file reads</MetaItem>
            </div>
            <div className="mt-5 grid grid-cols-3 gap-4 border-t border-border pt-5 sm:grid-cols-6">
              <Stat label="Missions" value={stats.missions} />
              <Stat label="Work Orders" value={stats.workOrders} />
              <Stat label="Assignments" value={stats.assignments} />
              <Stat label="Executives" value={stats.executives} />
              <Stat label="Reports" value={stats.reports} />
              <Stat label="Docs" value={docs.length} />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="mb-5 flex items-center gap-2.5">
              <BookOpen className="h-[18px] w-[18px] text-foreground/70" />
              <h2 className="text-sm font-semibold tracking-tight">
                Governance & Doctrine
              </h2>
            </div>
            {docs.length === 0 ? (
              <p className="text-sm text-muted-foreground">
                No constitutions, doctrine, or roadmap documents found yet.
              </p>
            ) : (
              <div className="divide-y divide-border overflow-hidden rounded-lg border border-border">
                {docs.map((d) => (
                  <Link
                    key={d.path}
                    href={`/artifacts?file=${encodeURIComponent(d.path)}`}
                    className="flex items-center justify-between gap-3 px-4 py-3 transition-colors hover:bg-secondary/60"
                  >
                    <div className="flex items-center gap-3">
                      <FolderGit2 className="h-4 w-4 text-muted-foreground" />
                      <span className="text-[14px] font-medium">{d.title}</span>
                    </div>
                    <Badge variant="muted">{d.kind}</Badge>
                  </Link>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="mb-2 flex items-center gap-2.5">
              <ShieldOff className="h-[18px] w-[18px] text-foreground/70" />
              <h2 className="text-sm font-semibold tracking-tight">Non-Goals (V1)</h2>
            </div>
            <p className="mb-4 text-[13px] text-muted-foreground">
              HQ01 V1 deliberately excludes runtime intelligence and orchestration.
              These belong to other systems.
            </p>
            <div className="flex flex-wrap gap-2">
              {NON_GOALS.map((g) => (
                <Badge key={g} variant="outline" className="text-muted-foreground">
                  {g}
                </Badge>
              ))}
            </div>
          </CardContent>
        </Card>

        <Card className="bg-sidebar text-sidebar-foreground border-sidebar-border">
          <CardContent className="p-6">
            <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-sidebar-muted">
              Operating Principle
            </div>
            <p className="mt-2 text-[15px] leading-relaxed">
              Intelligence belongs to the organization, not the worker. Workers
              execute work. Assignments terminate. Sessions terminate.
              Organizations accumulate intelligence. Doctrine preserves truth.
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

function Stat({ label, value }: { label: string; value: number }) {
  return (
    <div>
      <div className="text-xl font-semibold tabular-nums">{value}</div>
      <div className="text-[11px] text-muted-foreground">{label}</div>
    </div>
  );
}