import {
  Download,
  Database,
  School,
  Users,
  Package,
  Utensils,
  ClipboardList,
  MessageSquare,
  ShieldCheck,
} from "lucide-react";

const BACKUP_API = "http://openplate.my.id/backend/api/backup/export.php";

const backupItems = [
  {
    title: "Backup Data SPPG",
    description: "Mengunduh seluruh data utama SPPG.",
    type: "sppg",
    icon: Database,
  },
  {
    title: "Backup Data Sekolah",
    description: "Mengunduh data sekolah penerima manfaat.",
    type: "sekolah",
    icon: School,
  },
  {
    title: "Backup Data Karyawan",
    description: "Mengunduh data karyawan setiap SPPG.",
    type: "karyawan",
    icon: Users,
  },
  {
    title: "Backup Bahan Makanan",
    description: "Mengunduh data stok bahan makanan.",
    type: "bahan",
    icon: Package,
  },
  {
    title: "Backup Omprengan",
    description: "Mengunduh data omprengan dan peralatan makan.",
    type: "omprengan",
    icon: Utensils,
  },
  {
    title: "Backup Laporan Operasional",
    description: "Mengunduh laporan operasional dapur.",
    type: "laporan",
    icon: ClipboardList,
  },
  {
    title: "Backup Pengaduan",
    description: "Mengunduh seluruh data pengaduan masyarakat.",
    type: "pengaduan",
    icon: MessageSquare,
  },
  {
    title: "Backup Audit Log",
    description: "Mengunduh riwayat aktivitas sistem.",
    type: "audit",
    icon: ShieldCheck,
  },
];

export default function BackupData() {
  const handleDownload = (type) => {
    window.open(`${BACKUP_API}?type=${type}`, "_blank");
  };

  const handleDownloadAll = () => {
    backupItems.forEach((item, index) => {
      setTimeout(() => {
        window.open(`${BACKUP_API}?type=${item.type}`, "_blank");
      }, index * 500);
    });
  };

  return (
    <div className="p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-black text-foreground">
            Backup Data
          </h1>
          <p className="text-sm text-muted-foreground mt-1">
            Unduh data penting sistem dalam format CSV sebagai cadangan.
          </p>
        </div>

        <button
          type="button"
          onClick={handleDownloadAll}
          className="w-fit inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90"
        >
          <Download className="w-4 h-4" />
          Backup Semua
        </button>
      </div>

      <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700">
        Backup ini mengambil data langsung dari database. Simpan file CSV di
        tempat yang aman karena bisa berisi data operasional sistem.
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
        {backupItems.map((item) => {
          const Icon = item.icon;

          return (
            <div
              key={item.type}
              className="rounded-xl border border-border bg-card p-5 hover:shadow-md transition"
            >
              <div className="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center mb-4">
                <Icon className="w-5 h-5 text-primary" />
              </div>

              <h3 className="font-bold text-foreground">{item.title}</h3>

              <p className="text-sm text-muted-foreground mt-2 min-h-[40px]">
                {item.description}
              </p>

              <button
                type="button"
                onClick={() => handleDownload(item.type)}
                className="mt-5 w-full inline-flex items-center justify-center gap-2 rounded-lg border border-border px-3 py-2 text-sm font-medium hover:bg-muted"
              >
                <Download className="w-4 h-4" />
                Unduh CSV
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}