import Link from "next/link";
import { Plus } from "lucide-react";
import { getAllOffersAdmin, deleteOffer, toggleOfferPublished } from "@/lib/actions/offers";

export default async function AdminOffersPage() {
  const offers = await getAllOffersAdmin();

  return (
    <div>
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-charcoal-950">Offers</h1>
        <Link
          href="/admin/offers/new"
          className="inline-flex items-center gap-2 rounded-full bg-gold-500 px-4 py-2 text-sm font-semibold text-charcoal-950 hover:bg-gold-400"
        >
          <Plus size={16} /> New Offer
        </Link>
      </div>

      <div className="mt-8 overflow-x-auto rounded-2xl border border-charcoal-950/10 bg-white">
        <table className="w-full text-sm">
          <thead className="bg-charcoal-50 text-xs font-semibold uppercase tracking-wide text-charcoal-400">
            <tr>
              <th className="px-4 py-3 text-start">Title</th>
              <th className="px-4 py-3 text-start">Category</th>
              <th className="px-4 py-3 text-start">Price</th>
              <th className="px-4 py-3 text-start">Status</th>
              <th className="px-4 py-3 text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            {offers.map((offer) => (
              <tr key={offer.id} className="border-t border-charcoal-950/5">
                <td className="px-4 py-3 font-medium text-charcoal-950">{offer.titleEn}</td>
                <td className="px-4 py-3 text-charcoal-500">{offer.category}</td>
                <td className="px-4 py-3 text-charcoal-500">
                  {offer.price} {offer.currency}
                </td>
                <td className="px-4 py-3">
                  <form
                    action={async () => {
                      "use server";
                      await toggleOfferPublished(offer.id, !offer.published);
                    }}
                  >
                    <button
                      type="submit"
                      className={`rounded-full px-3 py-1 text-xs font-semibold ${
                        offer.published
                          ? "bg-green-100 text-green-700"
                          : "bg-charcoal-100 text-charcoal-500"
                      }`}
                    >
                      {offer.published ? "Published" : "Draft"}
                    </button>
                  </form>
                </td>
                <td className="px-4 py-3">
                  <div className="flex justify-end gap-3">
                    <Link href={`/admin/offers/${offer.id}`} className="text-gold-700 hover:underline">
                      Edit
                    </Link>
                    <form
                      action={async () => {
                        "use server";
                        await deleteOffer(offer.id);
                      }}
                    >
                      <button type="submit" className="text-red-600 hover:underline">
                        Delete
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {offers.length === 0 ? (
          <p className="p-8 text-center text-charcoal-400">No offers yet.</p>
        ) : null}
      </div>
    </div>
  );
}