"use client";

import { useState } from "react";
import useSWR from "swr";
import { Package, Plus, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { apiSend, ApiError, fetcher } from "@/lib/api";
import { useSession } from "@/lib/use-session";
import { SimpleCrud, type CrudColumn, type CrudField, type CrudRow } from "@/components/admin/simple-crud";
import { SettingsForm, type SettingField } from "@/components/admin/settings-form";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { formatRupiah } from "@/lib/utils";

const FIELDS: CrudField[] = [
  { name: "nama", label: "Nama Pelapak", required: true, full: true },
  { name: "nik", label: "NIK" },
  { name: "telepon", label: "Telepon" },
  { name: "username", label: "Username" },
  { name: "alamat", label: "Alamat", type: "textarea" },
  { name: "aktif", label: "Aktif", type: "checkbox" },
];

const COLUMNS: CrudColumn[] = [
  { name: "nama", label: "Pelapak" },
  { name: "telepon", label: "No. Telepon" },
  {
    name: "_count",
    label: "Jumlah Produk",
    render: (row) => {
      const count = row._count as { produk?: number } | undefined;
      return String(count?.produk ?? 0);
    },
  },
  { name: "alamat", label: "Alamat", hideOnMobile: true },
  { name: "aktif", label: "Aktif" },
];

const PENGATURAN: SettingField[] = [
  { kunci: "lapak.pesan_singkat_wa", label: "Pesan Singkat WA", type: "textarea" },
  {
    kunci: "lapak.jumlah_produk_perhalaman",
    label: "Jumlah Produk Perhalaman",
    type: "number",
    defaultValue: "10",
  },
  {
    kunci: "lapak.banyak_foto_produk",
    label: "Banyak Foto Tiap Produk",
    type: "number",
    defaultValue: "3",
  },
  {
    kunci: "lapak.jumlah_pengajuan_produk",
    label: "Jumlah Pengajuan Produk Oleh Warga",
    type: "number",
    defaultValue: "5",
  },
];

interface Produk {
  id: number;
  pelapakId: number;
  nama: string;
  harga: string;
  satuan: string | null;
  deskripsi: string | null;
  aktif: boolean;
}

function ProdukDialog({ pelapak, onClose }: { pelapak: CrudRow; onClose: () => void }) {
  const { user } = useSession();
  const pelapakId = Number(pelapak.id);
  const { data, mutate } = useSWR<Produk[]>(
    `/master/produk-lapak?pelapakId=${pelapakId}`,
    fetcher,
  );
  const [form, setForm] = useState({ nama: "", harga: "", satuan: "", deskripsi: "" });
  const [saving, setSaving] = useState(false);

  async function add(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSaving(true);
    try {
      await apiSend("/master/produk-lapak", "POST", { ...form, pelapakId, aktif: true });
      toast.success("Produk ditambahkan");
      setForm({ nama: "", harga: "", satuan: "", deskripsi: "" });
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menambah produk");
    } finally {
      setSaving(false);
    }
  }

  async function remove(id: number) {
    await apiSend(`/master/produk-lapak/${id}`, "DELETE");
    toast.success("Produk dihapus");
    await mutate();
  }

  return (
    <Dialog open onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
        <DialogHeader>
          <DialogTitle>Produk Lapak</DialogTitle>
          <DialogDescription>{String(pelapak.nama)}</DialogDescription>
        </DialogHeader>

        <div className="overflow-x-auto rounded-lg border border-border">
          <table className="w-full text-sm">
            <thead className="bg-muted/40">
              <tr>
                <th className="px-3 py-2 text-left font-medium">Produk</th>
                <th className="px-3 py-2 text-left font-medium">Harga</th>
                <th className="px-3 py-2 text-left font-medium">Satuan</th>
                <th className="w-12" />
              </tr>
            </thead>
            <tbody>
              {(data ?? []).map((produk) => (
                <tr key={produk.id} className="border-t border-border">
                  <td className="px-3 py-2">{produk.nama}</td>
                  <td className="px-3 py-2">{formatRupiah(produk.harga)}</td>
                  <td className="px-3 py-2">{produk.satuan ?? "-"}</td>
                  <td className="px-2">
                    {user?.role === "ADMIN" && (
                      <button
                        type="button"
                        onClick={() => remove(produk.id)}
                        className="rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
                        aria-label="Hapus produk"
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    )}
                  </td>
                </tr>
              ))}
              {!data?.length && (
                <tr>
                  <td colSpan={4} className="px-3 py-6 text-center text-muted-foreground">
                    Belum ada produk.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>

        {user?.role === "ADMIN" && (
          <form onSubmit={add} className="space-y-3">
            <div className="grid gap-3 sm:grid-cols-2">
              <div className="space-y-1.5">
                <Label htmlFor="produk-nama">Nama Produk</Label>
                <Input
                  id="produk-nama"
                  value={form.nama}
                  onChange={(event) => setForm((current) => ({ ...current, nama: event.target.value }))}
                  required
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="produk-harga">Harga</Label>
                <Input
                  id="produk-harga"
                  type="number"
                  value={form.harga}
                  onChange={(event) => setForm((current) => ({ ...current, harga: event.target.value }))}
                  required
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="produk-satuan">Satuan</Label>
                <Input
                  id="produk-satuan"
                  value={form.satuan}
                  onChange={(event) => setForm((current) => ({ ...current, satuan: event.target.value }))}
                  placeholder="kg, ikat, buah…"
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="produk-deskripsi">Deskripsi</Label>
                <Input
                  id="produk-deskripsi"
                  value={form.deskripsi}
                  onChange={(event) => setForm((current) => ({ ...current, deskripsi: event.target.value }))}
                />
              </div>
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={onClose}>
                Tutup
              </Button>
              <Button type="submit" disabled={saving}>
                <Plus className="h-4 w-4" /> {saving ? "Menyimpan…" : "Tambah Produk"}
              </Button>
            </DialogFooter>
          </form>
        )}
      </DialogContent>
    </Dialog>
  );
}

export default function LapakPage() {
  const [pelapak, setPelapak] = useState<CrudRow | null>(null);
  return (
    <>
      <SimpleCrud
        title="Lapak Desa"
        description="Pelapak dan produk unggulan warga desa."
        entity="pelapak"
        fields={FIELDS}
        columns={COLUMNS}
        searchPlaceholder="Cari pelapak…"
        createLabel="Tambah Pelapak"
        showNo
        actionOnLeft
        ekspor={{
          fileName: "lapak",
          header: ["No", "Pelapak", "No. Telepon", "Jumlah Produk"],
          values: (row) => [
            "",
            String(row.nama ?? ""),
            String(row.telepon ?? ""),
            String((row._count as { produk?: number } | undefined)?.produk ?? 0),
          ],
        }}
        rowActions={(row) => (
          <button
            type="button"
            onClick={() => setPelapak(row)}
            title="Produk"
            className="rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
          >
            <Package className="h-4 w-4" />
          </button>
        )}
      />
      <SettingsForm
        grup="lapak"
        title="Pengaturan Lapak"
        description="Batas dan tampilan data Lapak Desa."
        fields={PENGATURAN}
      />
      {pelapak && <ProdukDialog pelapak={pelapak} onClose={() => setPelapak(null)} />}
    </>
  );
}