import { createOfferAction, deleteOfferAction, updateOfferAction } from "@/app/admin/actions";
import { Button } from "@/components/ui/button";
import { getAdminOffersData, getAdminReferenceData } from "@/lib/admin-data";

export default async function AdminOffersPage() {
  const [offers, refs] = await Promise.all([getAdminOffersData(), getAdminReferenceData()]);

  return (
    <div className="space-y-5">
      <h1 className="text-2xl font-bold text-navy-deep">Offers</h1>
      <form action={createOfferAction} className="soft-card grid gap-3 p-4 md:grid-cols-4">
        <input name="title" required placeholder="Title" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="category" placeholder="Category" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="discountLabel" placeholder="Discount label" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="startsAt" type="date" className="h-11 rounded-xl border border-border px-4 text-sm" />
        <input name="validUntil" type="date" required className="h-11 rounded-xl border border-border px-4 text-sm" />
        <select name="brandId" className="h-11 rounded-xl border border-border px-4 text-sm"><option value="">Brand optional</option>{refs.brands.map((item: any) => <option key={item.id} value={item.id}>{item.name}</option>)}</select>
        <select name="scooterId" className="h-11 rounded-xl border border-border px-4 text-sm"><option value="">Scooter optional</option>{refs.scooters.map((item: any) => <option key={item.id} value={item.id}>{item.name}</option>)}</select>
        <select name="branchId" className="h-11 rounded-xl border border-border px-4 text-sm"><option value="">Branch optional</option>{refs.branches.map((item: any) => <option key={item.id} value={item.id}>{item.city}</option>)}</select>
        <textarea name="description" placeholder="Description" className="min-h-24 rounded-xl border border-border px-4 py-3 text-sm md:col-span-3" />
        <label className="flex items-center gap-2 text-sm"><input name="active" type="checkbox" defaultChecked /> Active</label>
        <Button type="submit" variant="green">Add Offer</Button>
      </form>
      <div className="soft-card overflow-x-auto">
        <table className="w-full min-w-[980px] text-left text-sm">
          <thead className="bg-primary-soft">
            <tr>
              <th className="px-4 py-3">Title</th>
              <th>Category</th>
              <th>Discount</th>
              <th>Scooter/Brand/Branch</th>
              <th>End</th>
              <th>Active</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {offers.map((offer: any) => (
              <tr className="border-t border-border" key={offer.id}>
                <td className="px-4 py-3 font-bold">{offer.title}</td>
                <td>{offer.category}</td>
                <td>{offer.discountLabel}</td>
                <td>
                  {offer.scooter?.name ??
                    offer.scooterId ??
                    offer.brand?.name ??
                    offer.brandId ??
                    offer.branch?.city ??
                    offer.branchId ??
                    "General"}
                </td>
                <td>{new Date(offer.validUntil).toLocaleDateString()}</td>
                <td>{offer.active ?? true ? "Yes" : "No"}</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={updateOfferAction} className="mt-2 grid min-w-[20rem] gap-2">
                      <input type="hidden" name="id" value={offer.id} />
                      <input name="title" defaultValue={offer.title} className="rounded-lg border border-border px-2 py-1" />
                      <input name="category" defaultValue={offer.category} className="rounded-lg border border-border px-2 py-1" />
                      <input name="discountLabel" defaultValue={offer.discountLabel} className="rounded-lg border border-border px-2 py-1" />
                      <input
                        name="startsAt"
                        type="date"
                        defaultValue={offer.startsAt ? new Date(offer.startsAt).toISOString().slice(0, 10) : ""}
                        className="rounded-lg border border-border px-2 py-1"
                      />
                      <input
                        name="validUntil"
                        type="date"
                        defaultValue={new Date(offer.validUntil).toISOString().slice(0, 10)}
                        className="rounded-lg border border-border px-2 py-1"
                      />
                      <textarea name="description" defaultValue={offer.description} className="rounded-lg border border-border px-2 py-1" />
                      <label className="text-xs">
                        <input name="active" type="checkbox" defaultChecked={offer.active ?? true} /> Active
                      </label>
                      <Button size="sm" type="submit" variant="green">Save</Button>
                    </form>
                  </details>
                  <form action={deleteOfferAction} className="mt-2">
                    <input type="hidden" name="id" value={offer.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>
  );
}