"use client";

import { useState, useTransition } from "react";
import { Button, Card, StatusBadge } from "@/components/ui";
import { deleteEventAction, setEventStatusAction } from "@/lib/actions/events";

const LABELS: Record<string, string> = { PUBLISHED: "Publish", DRAFT: "Back to draft", CANCELLED: "Mark cancelled", ARCHIVED: "Archive" };

export function EventStatusPanel({ eventId, status, base }: { eventId: string; status: string; base: string }) {
  const [pending, start] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [confirm, setConfirm] = useState(false);
  return (
    <Card className="mt-4 space-y-3 p-4">
      <div className="flex items-center gap-2 text-sm"><span className="font-medium">Status</span><StatusBadge value={status} /></div>
      <p className="text-xs text-muted-foreground">Only published events and published sessions appear on the website.</p>
      <div className="flex flex-wrap gap-2">
        {Object.keys(LABELS).filter((s) => s !== status).map((s) => (
          <Button key={s} variant={s === "PUBLISHED" ? "primary" : "secondary"} disabled={pending} onClick={() => start(async () => { const r = await setEventStatusAction(eventId, s); if (r.ok) window.location.reload(); else setError(r.error); })}>{LABELS[s]}</Button>
        ))}
        {confirm ? (
          <><Button variant="danger" disabled={pending} onClick={() => start(async () => { const r = await deleteEventAction(base, eventId); if (r && !r.ok) { setError(r.error); setConfirm(false); } })}>Confirm delete event</Button><Button variant="ghost" onClick={() => setConfirm(false)}>Cancel</Button></>
        ) : <Button variant="ghost" onClick={() => setConfirm(true)}>Delete event</Button>}
      </div>
      {error ? <p role="alert" className="text-sm text-danger">{error}</p> : null}
    </Card>
  );
}