import {
  Activity,
  ArrowRight,
  BarChart3,
  CheckCircle2,
  Database,
  KeyRound,
  ShieldCheck,
  Sparkles,
} from "lucide-react";

const guardHighlights = [
  {
    title: "RP 정책 통제",
    body: "Relying Party 상태를 활성/비활성으로 관리하고 정책 변경을 기록합니다.",
    metric: "Policy",
  },
  {
    title: "Consent 흐름",
    body: "사용자 Consent를 조회하고 필요 시 회수해 리스크를 제어합니다.",
    metric: "Consent",
  },
  {
    title: "Hydra Admin",
    body: "Hydra Admin API를 통해 RP 등록 현황을 동기화합니다.",
    metric: "Hydra",
  },
];

const stackReadiness = [
  "React 19 + Vite 7, strict TS, Router v6 data router.",
  "TanStack Query 5로 RP/Consent 데이터를 캐시합니다.",
  "Axios 클라이언트에서 Bearer + 테넌트 헤더를 주입합니다.",
  "Tailwind + shadcn/ui로 devfront 톤을 맞춥니다.",
  "Hydra Admin API 연동을 위한 프록시 엔드포인트 준비.",
];

const nextSteps = [
  "RP 등록/수정/삭제 워크플로우 추가",
  "Consent 검색 필터 고도화 및 CSV 내보내기",
  "권한 가드 및 감사 로그 연동",
];

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} />
              devfront ready
            </div>
            <h2 className="text-3xl font-semibold leading-tight">
              RP 등록 현황과 Consent 상태를
              <span className="text-[var(--color-accent)]"> 하나의 화면</span>
              에서 관리합니다.
            </h2>
            <p className="text-[var(--color-muted)]">
              Hydra Admin API와 동기화된 RP 목록, 상태 토글, Consent 회수까지
              devfront에서 처리하도록 준비합니다.
            </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)]">
                RP registry synced
              </span>
              <span className="rounded-full border border-[var(--color-border)] px-3 py-2 text-[var(--color-muted)]">
                Consent guard ready
              </span>
              <span className="rounded-full bg-[rgba(249,168,38,0.16)] px-3 py-2 font-semibold text-[var(--color-accent-strong)]">
                Policy toggle enabled
              </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} />
              RP 정책은 dev scope에서만 적용
            </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)]">
              <KeyRound size={16} />
              Consent 회수는 감사 로그와 연계
            </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)]">
              <Database size={16} />
              Hydra Admin 상태 체크 준비
            </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)]">
                active
              </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">Devfront baseline</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 RP controls</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">현재 관측</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">
              Consent grants
            </span>
            <span className="rounded-full border border-[var(--color-border)] px-3 py-2">
              RP status
            </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)]">
              <BarChart3 size={16} />
              RP 요청 추이
            </div>
            <p className="mt-3 text-2xl font-semibold">준비 중</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} />
              Consent 회수 건수
            </div>
            <p className="mt-3 text-2xl font-semibold">준비 중</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)]">
              <Database size={16} />
              Hydra 상태
            </div>
            <p className="mt-3 text-2xl font-semibold">정상</p>
          </div>
        </div>
      </section>
    </div>
  );
}

export default DashboardPage;