import { deleteNewsPopupAction, saveNewsPopupAction } from "@/app/admin/actions";
import { AdminImageUpload } from "@/components/admin/AdminImageUpload";
import { Button } from "@/components/ui/button";
import { getAdminNewsPopupsData } from "@/lib/admin-data";

function toDateTimeLocal(value: Date | string | null | undefined) {
  if (!value) return "";
  const date = value instanceof Date ? value : new Date(value);
  if (Number.isNaN(date.getTime())) return "";
  return date.toISOString().slice(0, 16);
}

export default async function AdminNewsPopupPage() {
  const popups = await getAdminNewsPopupsData();

  return (
    <div className="space-y-5">
      <h1 className="text-2xl font-bold text-navy-deep">News Popup</h1>
      <p className="text-sm text-navy-muted">
        Control first-visit modal popup content, image, and CTA from admin.
      </p>

      <section className="soft-card p-4">
        <h2 className="mb-3 text-lg font-bold text-navy-deep">Create Popup</h2>
        <form action={saveNewsPopupAction} className="grid gap-3 md:grid-cols-2">
          <input
            name="title"
            required
            placeholder="Big Festive EV Offer"
            className="rounded-lg border border-border px-3 py-2"
          />
          <input
            name="ctaLabel"
            placeholder="Book Test Ride"
            className="rounded-lg border border-border px-3 py-2"
          />
          <input
            name="ctaUrl"
            placeholder="/book-test-ride"
            className="rounded-lg border border-border px-3 py-2"
          />
          <input
            name="startsAt"
            type="datetime-local"
            className="rounded-lg border border-border px-3 py-2"
          />
          <input
            name="endsAt"
            type="datetime-local"
            className="rounded-lg border border-border px-3 py-2"
          />
          <div className="rounded-lg border border-border px-3 py-2 text-sm text-navy-deep">
            <label className="mr-4 inline-flex items-center gap-2">
              <input type="checkbox" defaultChecked name="isActive" /> Active
            </label>
            <label className="inline-flex items-center gap-2">
              <input type="checkbox" defaultChecked name="showOnce" /> Show once per visitor
            </label>
          </div>
          <div className="md:col-span-2">
            <textarea
              name="description"
              required
              rows={3}
              placeholder="Launch offer details..."
              className="w-full rounded-lg border border-border px-3 py-2"
            />
          </div>
          <div className="md:col-span-2">
            <AdminImageUpload
              label="Popup Image"
              name="imageUrl"
              previewAlt="Popup preview image"
            />
          </div>
          <div className="md:col-span-2">
            <Button type="submit" variant="green">
              Save Popup
            </Button>
          </div>
        </form>
      </section>

      <section className="space-y-4">
        {popups.map((popup: any) => (
          <div key={popup.id} className="soft-card p-4">
            <form action={saveNewsPopupAction} className="grid gap-3 md:grid-cols-2">
              <input type="hidden" name="id" value={popup.id} />
              <input
                name="title"
                required
                defaultValue={popup.title}
                className="rounded-lg border border-border px-3 py-2"
              />
              <input
                name="ctaLabel"
                defaultValue={popup.ctaLabel ?? ""}
                className="rounded-lg border border-border px-3 py-2"
              />
              <input
                name="ctaUrl"
                defaultValue={popup.ctaUrl ?? ""}
                className="rounded-lg border border-border px-3 py-2"
              />
              <input
                name="startsAt"
                type="datetime-local"
                defaultValue={toDateTimeLocal(popup.startsAt)}
                className="rounded-lg border border-border px-3 py-2"
              />
              <input
                name="endsAt"
                type="datetime-local"
                defaultValue={toDateTimeLocal(popup.endsAt)}
                className="rounded-lg border border-border px-3 py-2"
              />
              <div className="rounded-lg border border-border px-3 py-2 text-sm text-navy-deep">
                <label className="mr-4 inline-flex items-center gap-2">
                  <input type="checkbox" name="isActive" defaultChecked={popup.isActive} /> Active
                </label>
                <label className="inline-flex items-center gap-2">
                  <input type="checkbox" name="showOnce" defaultChecked={popup.showOnce} /> Show once per visitor
                </label>
              </div>
              <div className="md:col-span-2">
                <textarea
                  name="description"
                  required
                  defaultValue={popup.description}
                  rows={3}
                  className="w-full rounded-lg border border-border px-3 py-2"
                />
              </div>
              <div className="md:col-span-2">
                <AdminImageUpload
                  label="Popup Image"
                  name="imageUrl"
                  defaultValue={popup.imageUrl ?? ""}
                  previewAlt={`${popup.title} image`}
                />
              </div>
              <div className="md:col-span-2 flex items-center gap-2">
                <Button type="submit" size="sm" variant="green">
                  Update
                </Button>
              </div>
            </form>
            <form action={deleteNewsPopupAction} className="mt-3">
              <input type="hidden" name="id" value={popup.id} />
              <Button className="bg-red-600 text-white hover:bg-red-700" size="sm" type="submit">
                Delete
              </Button>
            </form>
          </div>
        ))}
      </section>
    </div>
  );
}