import {
  Activity,
  ArrowUpRight,
  Box,
  Database,
  ShieldCheck,
  Users,
} from "lucide-react";
import { Link } from "react-router-dom";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";

const summaryCards = [
  {
    label: "Total Tenants",
    value: "-",
    hint: "Tenant-aware core",
    icon: Users,
  },
  {
    label: "OIDC Clients",
    value: "-",
    hint: "Hydra registry",
    icon: ShieldCheck,
  },
  {
    label: "Audit Events (24h)",
    value: "-",
    hint: "ClickHouse stream",
    icon: Activity,
  },
  {
    label: "Policy Gate",
    value: "Planned",
    hint: "Keto + Admin checks",
    icon: Database,
  },
];

function GlobalOverviewPage() {
  return (
    <div className="space-y-10">
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-2">
          <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
            Global Overview
          </p>
          <h2 className="text-3xl font-semibold">
            Tenant-independent control plane
          </h2>
          <p className="text-sm text-[var(--color-muted)]">
            모든 테넌트 공통 지표와 정책 상태를 한 곳에서 확인합니다.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Badge variant="muted">IDP: Ory primary</Badge>
          <Badge variant="muted">Fallback: Descope</Badge>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {summaryCards.map(({ label, value, hint, icon: Icon }) => (
          <Card key={label} className="bg-[var(--color-panel)]">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardDescription>{label}</CardDescription>
              <div className="rounded-full border border-[var(--color-border)] p-2 text-[var(--color-muted)]">
                <Icon size={16} />
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-semibold">{value}</div>
              <p className="mt-1 text-xs text-[var(--color-muted)]">{hint}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid gap-6 lg:grid-cols-[1.4fr,1fr]">
        <Card className="bg-[var(--color-panel)]">
          <CardHeader>
            <CardTitle className="text-xl">Admin playbook</CardTitle>
            <CardDescription>
              운영 정책, 레이트리밋, 감사 로그의 기본 룰을 요약합니다.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 text-sm text-[var(--color-muted)]">
            <div className="flex items-start gap-3">
              <div className="mt-1 rounded-full border border-[var(--color-border)] p-2">
                <ShieldCheck size={14} />
              </div>
              <div>
                <p className="font-semibold text-foreground">
                  Backend-only IDP access
                </p>
                <p>
                  모든 IDP 호출은 backend를 통해서만 수행하며, Hydra/Kratos
                  admin 포트는 외부에 노출하지 않습니다.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="mt-1 rounded-full border border-[var(--color-border)] p-2">
                <Box size={14} />
              </div>
              <div>
                <p className="font-semibold text-foreground">
                  Tenant isolation
                </p>
                <p>
                  Tenant 헤더와 감사 로그 규칙을 기본 적용하며, 향후 Keto
                  정책으로 확장 예정입니다.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="bg-[var(--color-panel)]">
          <CardHeader>
            <CardTitle className="text-xl">빠른 이동</CardTitle>
            <CardDescription>
              주요 운영 화면으로 바로 이동합니다.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <Button
              asChild
              className="w-full justify-between"
              variant="outline"
            >
              <Link to="/tenants/new">
                테넌트 추가
                <ArrowUpRight size={16} />
              </Link>
            </Button>
            <Button
              asChild
              className="w-full justify-between"
              variant="outline"
            >
              <Link to="/audit-logs">
                감사 로그 보기
                <ArrowUpRight size={16} />
              </Link>
            </Button>
            <Button
              asChild
              className="w-full justify-between"
              variant="outline"
            >
              <Link to="/dashboard">
                테넌트 대시보드
                <ArrowUpRight size={16} />
              </Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

export default GlobalOverviewPage;
