"use client";

import useSWR from "swr";
import { Box, Package } from "lucide-react";
import { toast } from "sonner";
import { apiSend, ApiError, fetcher } from "@/lib/api";
import { SettingsForm, type SettingField } from "@/components/admin/settings-form";
import { PageHeader } from "@/components/page-header";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";

interface Modul {
  kode: string;
  nama: string;
  kategori: string;
  aktif: boolean;
}

const PENGATURAN: SettingField[] = [
  {
    kunci: "modul.jenis_server",
    label: "Server Ini Digunakan Sebagai",
    type: "select",
    defaultValue: "OFFLINE_ONLINE",
    options: [
      { value: "OFFLINE", label: "Offline saja di kantor desa" },
      { value: "ONLINE", label: "Online saja di hosting" },
      { value: "OFFLINE_ONLINE", label: "Offline di kantor desa dan online di hosting" },
      { value: "OFFLINE_ONLINE_KANTOR", label: "Offline dan online di kantor desa" },
    ],
  },
  {
    kunci: "modul.server_mana",
    label: "Server Ini",
    type: "select",
    defaultValue: "OFFLINE_ADMIN",
    options: [
      { value: "OFFLINE_ADMIN", label: "Offline admin saja di kantor desa" },
      { value: "ONLINE_PUBLIK", label: "Online web publik saja di hosting" },
    ],
  },
  {
    kunci: "modul.offline_mode",
    label: "Akses Web pada Server Offline Ini",
    type: "select",
    defaultValue: "PETUGAS",
    options: [
      { value: "PETUGAS", label: "Web bisa diakses petugas web" },
      { value: "NONAKTIF", label: "Web non-aktif sama sekali" },
    ],
  },
  {
    kunci: "modul.offline_mode_saja",
    label: "Akses Web pada Server Offline Saja",
    type: "select",
    defaultValue: "PUBLIK",
    options: [
      { value: "PUBLIK", label: "Web bisa diakses publik" },
      { value: "PETUGAS", label: "Web hanya bisa diakses petugas web" },
      { value: "NONAKTIF", label: "Web non-aktif sama sekali" },
    ],
  },
];

export default function ModulPage() {
  const { data, mutate } = useSWR<Modul[]>("/modul", fetcher);
  const daftar = data ?? [];

  async function toggle(modul: Modul) {
    try {
      await apiSend(`/modul/${modul.kode}`, "PATCH", { aktif: !modul.aktif });
      toast.success(`Modul ${modul.nama} ${modul.aktif ? "dinonaktifkan" : "diaktifkan"}`);
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal mengubah modul");
    }
  }

  return (
    <div className="space-y-5">
      <PageHeader
        title="Modul"
        description="Aktifkan atau nonaktifkan modul aplikasi sesuai kebutuhan desa."
      />
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Daftar Modul</CardTitle>
        </CardHeader>
        <CardContent className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-14">No</TableHead>
                <TableHead>Nama Modul</TableHead>
                <TableHead>Icon</TableHead>
                <TableHead>Kategori</TableHead>
                <TableHead>Tampil</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {daftar.map((modul, index) => (
                <TableRow key={modul.kode}>
                  <TableCell className="text-muted-foreground">{index + 1}</TableCell>
                  <TableCell className="font-medium">{modul.nama}</TableCell>
                  <TableCell>
                    <Package className="h-4 w-4 text-muted-foreground" />
                  </TableCell>
                  <TableCell className="text-muted-foreground">{modul.kategori}</TableCell>
                  <TableCell>
                    <button
                      type="button"
                      onClick={() => toggle(modul)}
                      className={cn(
                        "relative h-6 w-11 rounded-full transition-colors",
                        modul.aktif ? "bg-primary" : "bg-muted-foreground/30",
                      )}
                      aria-label={`Ubah status ${modul.nama}`}
                    >
                      <span
                        className={cn(
                          "absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all",
                          modul.aktif ? "left-[1.375rem]" : "left-0.5",
                        )}
                      />
                    </button>
                  </TableCell>
                  <TableCell>
                    <Badge variant={modul.aktif ? "success" : "secondary"}>
                      {modul.aktif ? "Aktif" : "Tidak Aktif"}
                    </Badge>
                  </TableCell>
                </TableRow>
              ))}
              {!daftar.length && (
                <TableRow>
                  <TableCell colSpan={6} className="py-8 text-center text-muted-foreground">
                    Belum ada modul.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Box className="h-4 w-4" /> Penggunaan OpenSID di Desa
          </CardTitle>
        </CardHeader>
        <CardContent>
          <SettingsForm
            grup="modul"
            title=""
            fields={PENGATURAN}
            hideHeader
            submitLabel="Simpan Penggunaan"
          />
        </CardContent>
      </Card>
    </div>
  );
}