import { createPartAction, deletePartAction, updatePartAction } from "@/app/admin/actions";
import { AdminImageUpload } from "@/components/admin/AdminImageUpload";
import { Button } from "@/components/ui/button";
import { getAdminPartsData } from "@/lib/admin-data";

export default async function AdminPartsPage() {
  const parts = await getAdminPartsData();
  const categories = Array.from(new Set(parts.map((part: any) => part.category)));

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

      <form action={createPartAction} className="soft-card grid gap-3 p-4 md:grid-cols-4">
        <input name="name" required placeholder="Name" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="category" required placeholder="Category" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="price" type="number" placeholder="Price" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <div className="md:col-span-2">
          <AdminImageUpload label="Part Image" name="image" previewAlt="Part image" />
        </div>
        <input name="compatibility" placeholder="Compatibility" className="h-11 rounded-xl border border-border px-4 text-sm md:col-span-2" />
        <select name="stockStatus" className="h-11 rounded-xl border border-border px-4 text-sm">
          <option>IN_STOCK</option>
          <option>LIMITED_STOCK</option>
          <option>OUT_OF_STOCK</option>
        </select>
        <label className="flex items-center gap-2 text-sm">
          <input name="inquiryOnly" type="checkbox" /> Inquiry only
        </label>
        <Button type="submit" variant="green">
          Add Part
        </Button>
      </form>

      <div className="soft-card overflow-x-auto">
        <table className="w-full min-w-[860px] text-left text-sm">
          <thead className="bg-primary-soft">
            <tr>
              <th className="px-4 py-3">Image</th>
              <th>Name</th>
              <th>Category</th>
              <th>Price</th>
              <th>Inquiry</th>
              <th>Stock</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {parts.map((part: any) => (
              <tr className="border-t border-border" key={part.id}>
                <td className="px-4 py-3">
                  <img src={part.image} alt={part.name} className="h-12 w-16 rounded-xl object-cover" />
                </td>
                <td className="font-bold">{part.name}</td>
                <td>{part.category}</td>
                <td>Rs. {part.price}</td>
                <td>{part.inquiryOnly ? "Yes" : "No"}</td>
                <td>{part.stockStatus ?? "IN_STOCK"}</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={updatePartAction} className="mt-2 grid min-w-[18rem] gap-2">
                      <input type="hidden" name="id" value={part.id} />
                      <input name="name" defaultValue={part.name} className="rounded-lg border border-border px-2 py-1" />
                      <input name="category" defaultValue={part.category} className="rounded-lg border border-border px-2 py-1" />
                      <input name="price" type="number" defaultValue={part.price} className="rounded-lg border border-border px-2 py-1" />
                      <AdminImageUpload
                        defaultValue={part.image}
                        label="Part Image"
                        name="image"
                        previewAlt={`${part.name} image`}
                      />
                      <input
                        name="compatibility"
                        defaultValue={part.compatibility?.join?.(", ") ?? ""}
                        className="rounded-lg border border-border px-2 py-1"
                      />
                      <select name="stockStatus" defaultValue={part.stockStatus ?? "IN_STOCK"} className="rounded-lg border border-border px-2 py-1">
                        <option>IN_STOCK</option>
                        <option>LIMITED_STOCK</option>
                        <option>OUT_OF_STOCK</option>
                      </select>
                      <label className="text-xs">
                        <input name="inquiryOnly" type="checkbox" defaultChecked={part.inquiryOnly} /> Inquiry only
                      </label>
                      <Button size="sm" type="submit" variant="green">Save</Button>
                    </form>
                  </details>
                  <form action={deletePartAction} className="mt-2">
                    <input type="hidden" name="id" value={part.id} />
                    <Button className="bg-red-600 text-white hover:bg-red-700" size="sm" type="submit">Delete</Button>
                  </form>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="text-xs text-navy-muted">Categories: {categories.join(", ")}</p>
    </div>
  );
}