import { Suspense } from "react";
import { PencilIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { listPelanggan } from "@/data/pelanggan";
import { HapusPelangganButton } from "./_components/hapus-pelanggan-button";
import { PelangganForm } from "./_components/pelanggan-form";
import { TambahPelangganButton } from "./_components/tambah-pelanggan-button";
import { CariPelanggan } from "./_components/cari-pelanggan";

export default function PelangganPage({
  searchParams,
}: {
  searchParams: Promise<{ search?: string }>;
}) {
  return (
    <div className="p-4">
      <div className="flex items-center justify-between">
        <h1 className="text-lg font-semibold">Data Pelanggan</h1>
        <div className="flex items-center gap-2">
          <Suspense fallback={null}>
            <CariPelanggan />
          </Suspense>
          <TambahPelangganButton />
        </div>
      </div>
      <Suspense fallback={<p className="mt-4 text-sm">Memuat...</p>}>
        <DaftarPelanggan searchParams={searchParams} />
      </Suspense>
    </div>
  );
}

async function DaftarPelanggan({
  searchParams,
}: {
  searchParams: Promise<{ search?: string }>;
}) {
  const { search } = await searchParams;
  const daftar = await listPelanggan(search);

  return (
    <table className="mt-4 w-full text-sm">
      <thead>
        <tr className="border-b text-left">
          <th className="py-2 pr-4">Kode</th>
          <th className="py-2 pr-4">Nama</th>
          <th className="py-2 pr-4">Alias</th>
          <th className="py-2 pr-4">Alamat</th>
          <th className="py-2 pr-4">Ponsel</th>
          <th className="py-2 pr-4">Bon</th>
          <th className="py-2 pr-4">Aksi</th>
        </tr>
      </thead>
      <tbody>
        {daftar.map((p) => (
          <tr key={p.kdCustomer} className="border-b">
            <td className="py-2 pr-4">{p.kdCustomer}</td>
            <td className="py-2 pr-4">{p.nama}</td>
            <td className="py-2 pr-4">{p.alias}</td>
            <td className="py-2 pr-4">{p.alamat}</td>
            <td className="py-2 pr-4">{p.ponsel ?? "-"}</td>
            <td className="py-2 pr-4">
              {p.nilaiBon !== null && p.nilaiBon > 0 ? p.nilaiBon : "-"}
            </td>
            <td className="flex gap-1 py-2 pr-4">
              <PelangganForm
                pelanggan={p}
                trigger={
                  <Button variant="ghost" size="icon-sm" title="Edit pelanggan">
                    <PencilIcon />
                    <span className="sr-only">Edit</span>
                  </Button>
                }
              />
              <HapusPelangganButton kdCustomer={p.kdCustomer} nama={p.nama} />
            </td>
          </tr>
        ))}
        {daftar.length === 0 && (
          <tr>
            <td colSpan={7} className="py-4 text-center text-muted-foreground">
              Tidak ada pelanggan
            </td>
          </tr>
        )}
      </tbody>
    </table>
  );
}