"use client";

import { useState } from "react";
import Link from "next/link";
import { ClipboardList, Settings2 } from "lucide-react";
import { PageHeader } from "@/components/page-header";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { DokumenPersyaratan } from "./dokumen-persyaratan";
import { PersyaratanLayanan } from "./persyaratan-layanan";

type Tab = "dokumen" | "layanan";

export default function DaftarPersyaratanPage() {
  const [tab, setTab] = useState<Tab>("dokumen");

  return (
    <div className="animate-fade-in space-y-6">
      <PageHeader
        title="Daftar Persyaratan"
        description="Katalog dokumen persyaratan surat desa ala OpenSID, lengkap dengan pengaturan syarat tiap layanan."
        action={
          <Button variant="outline" asChild>
            <Link href="/admin/surat/jenis">
              <Settings2 className="h-4 w-4" />
              Pengaturan Surat
            </Link>
          </Button>
        }
      />

      <div className="inline-flex rounded-xl border border-border bg-card p-1">
        {[
          { key: "dokumen" as const, label: "Dokumen Persyaratan", icon: ClipboardList },
          { key: "layanan" as const, label: "Syarat per Layanan", icon: Settings2 },
        ].map((item) => (
          <button
            key={item.key}
            type="button"
            onClick={() => setTab(item.key)}
            className={cn(
              "inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
              tab === item.key
                ? "bg-primary text-primary-foreground shadow-sm"
                : "text-muted-foreground hover:bg-muted",
            )}
          >
            <item.icon className="h-4 w-4" />
            {item.label}
          </button>
        ))}
      </div>

      {tab === "dokumen" ? <DokumenPersyaratan /> : <PersyaratanLayanan />}
    </div>
  );
}