import { createBrandAction, deleteBrandAction, updateBrandAction } from "@/app/admin/actions";
import { AdminImageUpload } from "@/components/admin/AdminImageUpload";
import { Button } from "@/components/ui/button";
import { getAdminBrandsData } from "@/lib/admin-data";

function isImagePath(value: string) {
  return /^(\/|https?:\/\/).+\.(png|jpe?g|webp|gif|svg)$/i.test(value.trim());
}

export default async function AdminBrandsPage() {
  const brands = await getAdminBrandsData();

  return (
    <div className="space-y-5">
      <h1 className="text-2xl font-bold text-navy-deep">Brands</h1>
      <form action={createBrandAction} className="soft-card grid gap-3 p-4 md:grid-cols-3">
        <input name="name" required placeholder="Name" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="slug" placeholder="Slug" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="logoText" placeholder="Logo text fallback (optional)" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <div className="md:col-span-2">
          <AdminImageUpload label="Brand Logo" name="logoImageUrl" previewAlt="Brand logo" />
        </div>
        <input name="shortDescription" required placeholder="Description" className="h-11 rounded-xl border border-border px-4 text-sm md:col-span-2" />
        <input name="keyStrength" placeholder="Key strength" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <label className="flex items-center gap-2 text-sm"><input name="isFeatured" type="checkbox" /> Featured</label>
        <Button type="submit" variant="green">Add Brand</Button>
      </form>
      <div className="soft-card overflow-x-auto">
        <table className="w-full min-w-[760px] text-left text-sm">
          <thead className="bg-primary-soft"><tr><th className="px-4 py-3">Name</th><th>Description</th><th>Logo</th><th>Strength</th><th>Scooters</th><th>Action</th></tr></thead>
          <tbody>
            {brands.map((brand: any) => (
              <tr className="border-t border-border" key={brand.id}>
                <td className="px-4 py-3 font-bold">{brand.name}</td>
                <td>{brand.shortDescription}</td>
                <td>
                  {isImagePath(brand.logoText) ? (
                    <img src={brand.logoText} alt={`${brand.name} logo`} className="h-10 w-24 rounded-lg border border-border bg-white object-contain p-1" />
                  ) : (
                    brand.logoText
                  )}
                </td>
                <td>{brand.keyStrength}</td>
                <td>{brand._count?.scooters ?? 0}</td>
                <td>
                  <form action={deleteBrandAction}>
                    <input type="hidden" name="id" value={brand.id} />
                    <Button className="bg-red-600 text-white hover:bg-red-700" size="sm" disabled={(brand._count?.scooters ?? 0) > 0} type="submit">Delete</Button>
                  </form>
                  <details className="mt-2">
                    <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={updateBrandAction} className="mt-2 grid gap-2">
                      <input type="hidden" name="id" value={brand.id} />
                      <input name="name" defaultValue={brand.name} className="rounded-lg border border-border px-2 py-1" />
                      <input name="slug" defaultValue={brand.slug} className="rounded-lg border border-border px-2 py-1" />
                      <input name="shortDescription" defaultValue={brand.shortDescription} className="rounded-lg border border-border px-2 py-1" />
                      <input name="logoText" defaultValue={brand.logoText} className="rounded-lg border border-border px-2 py-1" />
                      <AdminImageUpload
                        label="Brand Logo"
                        name="logoImageUrl"
                        defaultValue={isImagePath(brand.logoText) ? brand.logoText : ""}
                        previewAlt={`${brand.name} logo`}
                      />
                      <input name="keyStrength" defaultValue={brand.keyStrength} className="rounded-lg border border-border px-2 py-1" />
                      <label className="text-xs"><input name="isFeatured" type="checkbox" defaultChecked={brand.isFeatured} /> Featured</label>
                      <Button size="sm" type="submit" variant="green">Save</Button>
                    </form>
                  </details>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}