"use client";

import { format } from "date-fns";
import type { AudienceEvent } from "@db/queries/campaign-audience";

export interface TicketAudienceValue {
  eventId: string;
  ticketTypeIds: string[];
}

// Pick an event, then which ticket types' buyers to include (e.g. VIP + VVIP
// only). Used by the campaign form and the segment builder.
export default function TicketAudiencePicker({
  events,
  value,
  onChange,
}: {
  events: AudienceEvent[];
  value: TicketAudienceValue;
  onChange: (v: TicketAudienceValue) => void;
}) {
  const ev = events.find((e) => e.id === value.eventId);

  if (events.length === 0) {
    return <p className="text-sm text-be-muted">You have no events yet.</p>;
  }

  const toggle = (id: string) =>
    onChange({
      ...value,
      ticketTypeIds: value.ticketTypeIds.includes(id)
        ? value.ticketTypeIds.filter((x) => x !== id)
        : [...value.ticketTypeIds, id],
    });
  const allSelected = ev ? ev.ticketTypes.length > 0 && ev.ticketTypes.every((t) => value.ticketTypeIds.includes(t.id)) : false;

  return (
    <div className="space-y-3 rounded-lg border border-be-border p-3">
      <div>
        <label className="mb-1 block text-xs font-medium text-be-muted">Event</label>
        <select
          value={value.eventId}
          onChange={(e) => {
            const next = events.find((x) => x.id === e.target.value);
            // Default to every ticket type; untick the ones to leave out.
            onChange({ eventId: e.target.value, ticketTypeIds: next ? next.ticketTypes.map((t) => t.id) : [] });
          }}
          className="input"
        >
          <option value="">Choose an event…</option>
          {events.map((e) => (
            <option key={e.id} value={e.id}>
              {e.title} · {format(new Date(e.startsAt), "d MMM yyyy")}
            </option>
          ))}
        </select>
      </div>

      {ev && (
        <div>
          <div className="mb-1 flex items-center justify-between gap-2">
            <span className="text-xs font-medium text-be-muted">Ticket types</span>
            {ev.ticketTypes.length > 1 && (
              <button
                type="button"
                onClick={() => onChange({ ...value, ticketTypeIds: allSelected ? [] : ev.ticketTypes.map((t) => t.id) })}
                className="text-xs font-medium text-brand-green hover:underline"
              >
                {allSelected ? "Clear all" : "Select all"}
              </button>
            )}
          </div>
          {ev.ticketTypes.length === 0 ? (
            <p className="text-sm text-be-muted">This event has no ticket types.</p>
          ) : (
            <ul className="divide-y divide-be-border rounded-md border border-be-border">
              {ev.ticketTypes.map((t) => (
                <li key={t.id}>
                  <label className="flex cursor-pointer items-center gap-3 px-3 py-2 text-sm">
                    <input
                      type="checkbox"
                      checked={value.ticketTypeIds.includes(t.id)}
                      onChange={() => toggle(t.id)}
                      className="h-4 w-4 shrink-0"
                    />
                    <span className="min-w-0 flex-1 truncate text-be-text">{t.name}</span>
                    <span className="shrink-0 text-xs tabular-nums text-be-muted">
                      {t.buyers} buyer{t.buyers === 1 ? "" : "s"}
                    </span>
                  </label>
                </li>
              ))}
            </ul>
          )}
          <p className="mt-1.5 text-xs text-be-muted">
            Buyers with paid tickets of the ticked types. Cancelled or upgraded tickets don&apos;t count, so an upgraded
            buyer only gets their new tier&apos;s messages. Someone who bought more than one type gets the message once.
          </p>
        </div>
      )}
    </div>
  );
}