import { createBranchAction, deleteBranchAction, updateBranchAction } from "@/app/admin/actions";
import { AdminImageUpload } from "@/components/admin/AdminImageUpload";
import { Button } from "@/components/ui/button";
import { getAdminBranchesData } from "@/lib/admin-data";

export default async function AdminBranchesPage() {
  const branches = await getAdminBranchesData();

  return (
    <div className="space-y-5">
      <h1 className="text-2xl font-bold text-navy-deep">Branches</h1>

      <form action={createBranchAction} className="soft-card grid gap-3 p-4 md:grid-cols-3">
        <input name="name" required placeholder="Branch name" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="slug" required placeholder="Slug" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="type" defaultValue="Branch" placeholder="Type" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="city" required placeholder="City" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="district" required placeholder="District" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="phone" required placeholder="Phone" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="whatsapp" required placeholder="WhatsApp" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="openingHours" required placeholder="Opening hours" className="h-11 rounded-xl border border-border px-4 text-sm md:col-span-2" />
        <input name="mapLink" required placeholder="Map link" className="h-11 rounded-xl border border-border px-4 text-sm md:col-span-2" />
        <div className="md:col-span-2">
          <AdminImageUpload label="Branch Image" name="branchImage" previewAlt="Branch image" />
        </div>
        <Button type="submit" variant="green">Add Branch</Button>
      </form>

      <div className="soft-card overflow-x-auto">
        <table className="w-full min-w-[1100px] text-left text-sm">
          <thead className="bg-primary-soft">
            <tr>
              <th className="px-4 py-3">Image</th>
              <th>Name</th>
              <th>City</th>
              <th>Contact</th>
              <th>Related</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {branches.map((branch: any) => (
              <tr className="border-t border-border" key={branch.id}>
                <td className="px-4 py-3">
                  {branch.branchImage ? (
                    <img src={branch.branchImage} alt={branch.name} className="h-12 w-20 rounded-xl border border-border object-cover" />
                  ) : (
                    <span className="text-xs text-navy-muted">No image</span>
                  )}
                </td>
                <td className="font-bold text-navy-deep">{branch.name}</td>
                <td>{branch.city}, {branch.district}</td>
                <td>{branch.phone}</td>
                <td>
                  I:{branch._count?.inventory ?? 0} O:{branch._count?.offers ?? 0} B:{branch._count?.bookings ?? 0} L:{branch._count?.leads ?? 0}
                </td>
                <td>
                  <details>
                    <summary className="inline-flex h-9 cursor-pointer items-center justify-center rounded-full border border-primary/30 bg-white px-3 text-sm font-semibold text-primary-deep hover:border-primary hover:bg-primary-soft">Edit</summary>
                    <form action={updateBranchAction} className="mt-2 grid min-w-[22rem] gap-2">
                      <input type="hidden" name="id" value={branch.id} />
                      <input name="name" defaultValue={branch.name} className="rounded-lg border border-border px-2 py-1" />
                      <input name="slug" defaultValue={branch.slug} className="rounded-lg border border-border px-2 py-1" />
                      <input name="type" defaultValue={branch.type} className="rounded-lg border border-border px-2 py-1" />
                      <input name="city" defaultValue={branch.city} className="rounded-lg border border-border px-2 py-1" />
                      <input name="district" defaultValue={branch.district} className="rounded-lg border border-border px-2 py-1" />
                      <input name="phone" defaultValue={branch.phone} className="rounded-lg border border-border px-2 py-1" />
                      <input name="whatsapp" defaultValue={branch.whatsapp} className="rounded-lg border border-border px-2 py-1" />
                      <input name="openingHours" defaultValue={branch.openingHours} className="rounded-lg border border-border px-2 py-1" />
                      <input name="mapLink" defaultValue={branch.mapLink} className="rounded-lg border border-border px-2 py-1" />
                      <AdminImageUpload
                        label="Branch Image"
                        name="branchImage"
                        defaultValue={branch.branchImage ?? ""}
                        previewAlt={branch.name}
                      />
                      <Button size="sm" type="submit" variant="green">Save</Button>
                    </form>
                  </details>
                  <form action={deleteBranchAction} className="mt-2">
                    <input type="hidden" name="id" value={branch.id} />
                    <Button className="bg-red-600 text-white hover:bg-red-700" size="sm" type="submit">Delete</Button>
                  </form>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}