import {
  Activity,
  ArrowRight,
  Building2,
  CheckCircle2,
  LineChart,
  Radio,
  ShieldCheck,
  Sparkles,
} from "lucide-react";

const guardHighlights = [
  {
    title: "Tenant isolation",
    body: "All admin calls expect X-Tenant-ID and are prepared for tenant-aware headers.",
    metric: "Header guard",
    accent: "active",
  },
  {
    title: "Admin TTL",
    body: "Session budget kept short for admins. App session vs admin session split is explicit.",
    metric: "15m default",
    accent: "ttl",
  },
  {
    title: "Audit-first",
    body: "Every management action should log to ClickHouse. Hooks in place for later wiring.",
    metric: "per-action",
    accent: "audit",
  },
];

const stackReadiness = [
  "React 19 + Vite 7, strict TS, Router v6 data router.",
  "TanStack Query 5 provider ready with sane defaults.",
  "Axios client stub with bearer + tenant header injector.",
  "Tailwind v4 tokens tuned for admin dark plane.",
  "React Hook Form + Zod planned for client forms.",
  "IdP-neutral auth hook point reserved for role guard.",
];

const nextSteps = [
  "Add IdP-neutral OIDC/OAuth auth layer and enforce admin role in RequireAuth.",
  "Persist tenant picklist and feed X-Tenant-ID for every admin call.",
  "Add shadcn/ui primitives for forms and tables; lock lint/format.",
];

function DashboardPage() {
  return (
    <div className="space-y-10">
      <section className="relative overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-7 shadow-[var(--shadow-card)]">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_24%_20%,rgba(54,211,153,0.14),transparent_32%)]" />
        <div className="relative flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
          <div className="space-y-3 max-w-2xl">
            <div className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] px-3 py-1 text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
              <Sparkles size={14} />
              adminfront ready
            </div>
            <h2 className="text-3xl font-semibold leading-tight">
              Build the admin plane with{" "}
              <span className="text-[var(--color-accent)]">tenant-aware</span>{" "}
              defaults and{" "}
              <span className="text-[var(--color-accent-strong)]">
                least privilege
              </span>{" "}
              UX.
            </h2>
            <p className="text-[var(--color-muted)]">
              Route, query, and styling scaffolds are in place. Use this canvas
              to ship RP registry, audit exploration, and guarded login aligned
              with issue #60 while keeping providers swappable.
            </p>
            <div className="flex flex-wrap gap-3 text-sm">
              <span className="rounded-full bg-[rgba(54,211,153,0.16)] px-3 py-2 text-[var(--color-accent)]">
                Router + Query wired
              </span>
              <span className="rounded-full border border-[var(--color-border)] px-3 py-2 text-[var(--color-muted)]">
                Admin namespace only
              </span>
              <span className="rounded-full bg-[rgba(249,168,38,0.16)] px-3 py-2 font-semibold text-[var(--color-accent-strong)]">
                Auth hook pending
              </span>
            </div>
          </div>
          <div className="grid gap-3 text-sm">
            <div className="flex items-center gap-2 rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-3 text-[var(--color-muted)]">
              <ShieldCheck size={16} />
              Admin guard scoped to /admin
            </div>
            <div className="flex items-center gap-2 rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-3 text-[var(--color-muted)]">
              <Building2 size={16} />
              Tenant selection placeholder ready
            </div>
            <div className="flex items-center gap-2 rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-3 text-[var(--color-muted)]">
              <Radio size={16} />
              Audit stream hook for ClickHouse
            </div>
          </div>
        </div>
      </section>

      <section className="grid gap-4 md:grid-cols-3">
        {guardHighlights.map((item) => (
          <div
            key={item.title}
            className="relative overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-panel)] p-5 transition hover:-translate-y-1 hover:shadow-[0_16px_48px_rgba(7,15,26,0.4)]"
          >
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(54,211,153,0.12),transparent_45%)]" />
            <div className="relative flex items-center justify-between gap-2">
              <div className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
                {item.metric}
              </div>
              <span className="rounded-full border border-[var(--color-border)] px-3 py-1 text-[11px] text-[var(--color-muted)]">
                {item.accent}
              </span>
            </div>
            <div className="relative mt-3 space-y-2">
              <h3 className="text-lg font-semibold">{item.title}</h3>
              <p className="text-sm text-[var(--color-muted)]">{item.body}</p>
            </div>
          </div>
        ))}
      </section>

      <section className="grid gap-6 md:grid-cols-[1.2fr,0.8fr]">
        <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
          <div className="flex items-center justify-between gap-3">
            <div>
              <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
                Stack readiness
              </p>
              <h3 className="text-xl font-semibold">Matches issue #60</h3>
            </div>
            <button
              type="button"
              className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-muted)] transition hover:border-[var(--color-accent)] hover:text-[var(--color-accent)]"
            >
              Setup notes
              <ArrowRight size={14} />
            </button>
          </div>
          <div className="mt-4 grid gap-3 md:grid-cols-2">
            {stackReadiness.map((item) => (
              <div
                key={item}
                className="flex items-center gap-3 rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-3"
              >
                <CheckCircle2
                  size={16}
                  className="text-[var(--color-accent)]"
                />
                <p className="text-sm">{item}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
          <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
            Next actions
          </p>
          <h3 className="mt-2 text-xl font-semibold">
            Ship the first guarded flows
          </h3>
          <div className="mt-4 space-y-3">
            {nextSteps.map((item, idx) => (
              <div
                key={item}
                className="flex gap-3 rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-3"
              >
                <div className="grid h-8 w-8 place-items-center rounded-full bg-[rgba(249,168,38,0.12)] text-sm font-semibold text-[var(--color-accent-strong)]">
                  {idx + 1}
                </div>
                <p className="text-sm text-[var(--color-text)]">{item}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
        <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
          <div>
            <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
              Ops board
            </p>
            <h3 className="text-xl font-semibold">What to prototype next</h3>
          </div>
          <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
            <span className="rounded-full border border-[var(--color-border)] px-3 py-2">
              Audit → ClickHouse
            </span>
            <span className="rounded-full border border-[var(--color-border)] px-3 py-2">
              RP registry
            </span>
          </div>
        </div>
        <div className="mt-4 grid gap-4 md:grid-cols-3">
          <div className="rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] p-4">
            <div className="flex items-center gap-2 text-[var(--color-muted)]">
              <LineChart size={16} />
              <span className="text-xs uppercase tracking-[0.16em]">
                Metrics
              </span>
            </div>
            <h4 className="mt-2 text-lg font-semibold">
              RP registration funnel
            </h4>
            <p className="text-sm text-[var(--color-muted)]">
              Visualize create → secret rotate → redirect URI edits per tenant.
            </p>
          </div>
          <div className="rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] p-4">
            <div className="flex items-center gap-2 text-[var(--color-muted)]">
              <Activity size={16} />
              <span className="text-xs uppercase tracking-[0.16em]">Audit</span>
            </div>
            <h4 className="mt-2 text-lg font-semibold">Admin action stream</h4>
            <p className="text-sm text-[var(--color-muted)]">
              Live feed of admin API calls with per-action tenant, actor, and
              rate-limit outcome.
            </p>
          </div>
          <div className="rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] p-4">
            <div className="flex items-center gap-2 text-[var(--color-muted)]">
              <ShieldCheck size={16} />
              <span className="text-xs uppercase tracking-[0.16em]">
                Access
              </span>
            </div>
            <h4 className="mt-2 text-lg font-semibold">Admin login journey</h4>
            <p className="text-sm text-[var(--color-muted)]">
              Outline SMS + app-based MFA choice and emphasize “admin session”
              TTL with logout.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

export default DashboardPage;
