"use client";

import { useEffect, useState } from "react";
import useSWR from "swr";
import { toast } from "sonner";
import { apiSend, ApiError, fetcher } from "@/lib/api";
import { PageHeader } from "@/components/page-header";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const PAKET = [
  { kode: "layanan-mandiri", nama: "Layanan Mandiri", harga: "Gratis", fitur: ["Akun warga", "Kotak pesan", "Pendaftaran online"] },
  { kode: "lapak", nama: "Lapak Desa", harga: "Gratis", fitur: ["Pelapak", "Produk", "Etalase publik"] },
  { kode: "satu-data", nama: "Satu Data", harga: "Gratis", fitur: ["DTKS", "Rekonsiliasi", "Ekspor data"] },
  { kode: "peta", nama: "Peta Desa", harga: "Gratis", fitur: ["Titik fasilitas", "Potensi desa", "Tampil beranda"] },
  { kode: "sms-gateway", nama: "SMS Gateway", harga: "Berbayar", fitur: ["Notifikasi surat", "Broadcast warga", "Log pengiriman"] },
  { kode: "whatsapp", nama: "WhatsApp Gateway", harga: "Berbayar", fitur: ["Hubung warga", "Notifikasi", "Template pesan"] },
];

interface SettingRow {
  kunci: string;
  nilai: string | null;
}

export default function PaketPage() {
  const { data, mutate } = useSWR<SettingRow[]>("/pengaturan-sistem?grup=paket", fetcher);
  const [values, setValues] = useState<Record<string, boolean>>({});

  useEffect(() => {
    const map = new Map((data ?? []).map((row) => [row.kunci, row.nilai !== "0"]));
    const next: Record<string, boolean> = {};
    for (const paket of PAKET) next[paket.kode] = map.get(`paket.${paket.kode}`) ?? false;
    setValues(next);
  }, [data]);

  async function toggle(kode: string) {
    const next = !values[kode];
    try {
      await apiSend("/pengaturan-sistem", "PUT", {
        items: [{ kunci: `paket.${kode}`, nilai: next ? "1" : "0", grup: "paket" }],
      });
      toast.success(`Paket ${next ? "diaktifkan" : "dinonaktifkan"}`);
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal mengubah paket");
    }
  }

  return (
    <div className="space-y-5">
      <PageHeader
        title="Paket Tambahan"
        description="Paket fitur tambahan yang dapat diaktifkan untuk desa."
      />
      <div className="grid gap-4 md:grid-cols-2">
        {PAKET.map((paket) => (
          <Card key={paket.kode}>
            <CardHeader className="flex-row items-start justify-between space-y-0">
              <div>
                <CardTitle className="text-base">{paket.nama}</CardTitle>
                <CardDescription>{paket.fitur.join(" · ")}</CardDescription>
              </div>
              <Badge variant={values[paket.kode] ? "success" : "secondary"}>
                {values[paket.kode] ? "Aktif" : "Nonaktif"}
              </Badge>
            </CardHeader>
            <CardContent className="flex items-center justify-between">
              <span className="text-sm font-medium">{paket.harga}</span>
              <button
                type="button"
                onClick={() => toggle(paket.kode)}
                className={cn(
                  "relative h-6 w-11 rounded-full transition-colors",
                  values[paket.kode] ? "bg-primary" : "bg-muted-foreground/30",
                )}
                aria-label={`Ubah paket ${paket.nama}`}
              >
                <span
                  className={cn(
                    "absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all",
                    values[paket.kode] ? "left-[1.375rem]" : "left-0.5",
                  )}
                />
              </button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}