import { prisma } from "@/lib/prisma";
import { createWarehouse, deleteWarehouse } from "@/lib/actions/inventory";
import InventoryTabs from "@/components/admin/InventoryTabs";

export default async function AdminWarehousesPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const { error } = await searchParams;
  const warehouses = await prisma.warehouse.findMany({ orderBy: { name: "asc" } });

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Warehouses / Godowns</h1>
      <p className="mt-1 text-sm text-stone-500">
        The storage locations you use. Add one here before you can log a Stock Transfer between locations.
      </p>

      <InventoryTabs active="/iv-manage-84x2/inventory/warehouses" />

      {error && <p className="mb-4 text-sm text-red-700">{decodeURIComponent(error)}</p>}

      <form action={createWarehouse} className="grid max-w-2xl grid-cols-1 gap-3 rounded-lg border border-rose-100 bg-white p-4 sm:grid-cols-4">
        <input name="name" required placeholder="Name (e.g. Main store)" className="rounded-md border border-stone-300 px-2 py-2 text-sm" />
        <input name="location" placeholder="Location (optional)" className="rounded-md border border-stone-300 px-2 py-2 text-sm" />
        <input name="notes" placeholder="Notes (optional)" className="rounded-md border border-stone-300 px-2 py-2 text-sm" />
        <button type="submit" className="rounded-md bg-rose-700 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-800">
          Add
        </button>
      </form>

      <div className="mt-6 overflow-hidden rounded-lg border border-rose-100 bg-white">
        {warehouses.length === 0 ? (
          <p className="p-4 text-sm text-stone-500">No warehouses yet — most single-location businesses just need one.</p>
        ) : (
          <table className="w-full text-sm">
            <thead className="bg-rose-50/60 text-left text-xs uppercase text-stone-500">
              <tr>
                <th className="p-3">Name</th>
                <th className="p-3">Location</th>
                <th className="p-3">Notes</th>
                <th className="p-3"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-rose-100">
              {warehouses.map((w) => (
                <tr key={w.id}>
                  <td className="p-3 font-medium text-stone-800">{w.name}</td>
                  <td className="p-3 text-stone-600">{w.location ?? "—"}</td>
                  <td className="p-3 text-stone-500">{w.notes ?? "—"}</td>
                  <td className="p-3 text-right">
                    <form action={deleteWarehouse.bind(null, w.id)}>
                      <button type="submit" className="text-xs text-stone-400 hover:text-red-700">
                        Delete
                      </button>
                    </form>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}