// Events — CRUD on workspace events plus signup viewer.

function EventsPage() {
  const auth = useAuth();
  const ws = auth.currentWorkspace;
  const toast = useToast();

  const [events, setEvents] = useState([]);
  const [signupCounts, setSignupCounts] = useState({});
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(null);
  const [tab, setTab] = useState("all");

  const load = useCallback(async () => {
    if (!ws?.id) { setLoading(false); return; }
    setLoading(true);
    const evRes = await SB.from('events')
      .select('*')
      .eq('workspace_id', ws.id)
      .is('archived_at', null)
      .order('starts_at', { ascending: false });
    if (evRes.error) { setLoading(false); toast.push(evRes.error.message); return; }
    const list = evRes.data || [];
    setEvents(list);
    if (list.length > 0) {
      const sgn = await SB.from('event_signups')
        .select('event_id')
        .in('event_id', list.map(e => e.id));
      const counts = {};
      (sgn.data || []).forEach(s => { counts[s.event_id] = (counts[s.event_id] || 0) + 1; });
      setSignupCounts(counts);
    } else {
      setSignupCounts({});
    }
    setLoading(false);
  }, [ws?.id, toast]);

  useEffect(() => { load(); }, [load]);

  const newEvent = () => {
    const start = new Date(); start.setDate(start.getDate() + 14); start.setHours(18, 0, 0, 0);
    const end = new Date(start); end.setHours(20, 0, 0, 0);
    return {
      id: null,            // null = unsaved
      workspace_id: ws.id,
      title: "Untitled event",
      description: "",
      starts_at: start.toISOString(),
      ends_at: end.toISOString(),
      location: "",
      capacity: 25,
      questions: [],
      published: false
    };
  };

  const totalSignups = events.reduce((s, e) => s + (signupCounts[e.id] || 0), 0);
  const filtered = events.filter(e => {
    if (tab === "all") return true;
    if (tab === "published") return e.published;
    if (tab === "draft") return !e.published;
    return true;
  });

  return (
    <div className="px-5 lg:px-7 py-7 max-w-[1500px] mx-auto">
      <PageHeader
        eyebrow="Programming"
        title="Events"
        subtitle="Workshops, classes, and one-off signups. Custom questions per event."
        actions={<Button icon="plus" onClick={() => setEditing(newEvent())}>Create event</Button>}
      />

      <div className="flex items-center justify-between mb-4">
        <Tabs value={tab} onChange={setTab} options={[
          { value: "all", label: `All (${events.length})` },
          { value: "published", label: `Published (${events.filter(e => e.published).length})` },
          { value: "draft",     label: `Draft (${events.filter(e => !e.published).length})` }
        ]} />
        <div className="text-[12px] text-ink/55 hidden md:block">Total signups: <span className="text-ink">{totalSignups}</span></div>
      </div>

      {loading ? (
        <div className="py-16 text-center text-[12.5px] text-ink/50">Loading events…</div>
      ) : events.length === 0 ? (
        <div className="rounded-lg border border-dashed border-ink/[0.12] bg-white p-12 text-center">
          <div className="font-display text-[20px] mb-1">No events yet</div>
          <p className="text-[13px] text-ink/55 mb-5 max-w-md mx-auto">
            Use events for workshops, classes, or one-off signups where multiple people sign up for the same slot.
          </p>
          <Button icon="plus" onClick={() => setEditing(newEvent())}>Create your first event</Button>
        </div>
      ) : filtered.length === 0 ? (
        <EmptyState icon="ticket" title="Nothing here" body="No events match that filter." />
      ) : (
        <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
          {filtered.map(e => (
            <EventCard
              key={e.id}
              event={e}
              signups={signupCounts[e.id] || 0}
              onEdit={() => setEditing(e)}
            />
          ))}
        </div>
      )}

      {editing && (
        <EventEditor
          event={editing}
          onClose={() => setEditing(null)}
          onSaved={() => { setEditing(null); load(); }}
        />
      )}
    </div>
  );
}

function EventCard({ event, signups, onEdit }) {
  const start = new Date(event.starts_at);
  const end   = new Date(event.ends_at);
  const cap   = event.capacity || 0;
  const pct   = cap > 0 ? Math.min(100, Math.round((signups / cap) * 100)) : 0;
  const full  = cap > 0 && signups >= cap;
  const status = event.published ? (full ? "Full" : "Published") : "Draft";
  return (
    <button onClick={onEdit} className="text-left rounded-lg border border-ink/[0.06] bg-white hover:border-ink/[0.16] transition overflow-hidden shadow-card">
      <div className="h-24 border-b border-ink/[0.06] p-4 flex items-end justify-between bg-gradient-to-br from-ink/[0.02] to-ink/[0.06]">
        <div>
          <div className="text-[10px] uppercase tracking-[0.14em] text-ink/45 mb-1">{fmt(start, "EEE MMM d")}</div>
          <div className="font-mono text-[12px] text-ink/65">{fmt(start, "h:mma").toLowerCase()} – {fmt(end, "h:mma").toLowerCase()}</div>
        </div>
        <StatusBadge status={status} />
      </div>
      <div className="p-4">
        <div className="font-display text-[20px] tracking-tight leading-tight line-clamp-2">{event.title}</div>
        {event.location && <div className="text-[12px] text-ink/55 mt-1 flex items-center gap-1.5"><Icon name="map-pin" size={11} />{event.location}</div>}
        <div className="mt-4">
          <div className="flex items-center justify-between text-[11.5px] text-ink/55 mb-1.5">
            <span>{signups} {cap ? `/ ${cap}` : ""} signups</span>
            <span>{(event.questions || []).length} questions</span>
          </div>
          {cap > 0 && (
            <div className="h-1 rounded-full bg-ink/[0.04] overflow-hidden">
              <div className="h-full rounded-full" style={{ width: pct + "%", background: full ? "#A04444" : "#3D7BB0" }} />
            </div>
          )}
        </div>
      </div>
    </button>
  );
}

// ── Event editor — drawer with details / questions / attendees tabs ──────
const EVENT_FIELD_TYPES = ["short","long","email","phone","number","dropdown","multi","checkbox","radio"];

function EventEditor({ event, onClose, onSaved }) {
  const toast = useToast();
  const [data, setData] = useState(event);
  const [tab, setTab] = useState("details");
  const [busy, setBusy] = useState(false);
  const [signups, setSignups] = useState([]);
  const [loadingSignups, setLoadingSignups] = useState(false);

  const update = (patch) => setData(prev => Object.assign({}, prev, patch));

  // Load attendees when the tab opens.
  useEffect(() => {
    if (tab !== "attendees" || !data.id) return;
    let cancelled = false;
    setLoadingSignups(true);
    (async () => {
      const res = await SB.from('event_signups')
        .select('id, answers, created_at, customers(id, name, email)')
        .eq('event_id', data.id)
        .order('created_at');
      if (cancelled) return;
      setLoadingSignups(false);
      setSignups(res.data || []);
    })();
    return () => { cancelled = true; };
  }, [tab, data.id]);

  const addQ = (type) => {
    const meta = window.FIELD_TYPES?.find(t => t.id === type);
    update({ questions: [...(data.questions || []), {
      id: "q_" + Math.random().toString(36).slice(2, 9),
      label: meta?.label || "Question",
      type,
      required: false,
      ...(["dropdown","multi","radio"].includes(type) ? { options: ["Option 1", "Option 2"] } : {})
    }] });
  };
  const removeQ = (id) => update({ questions: (data.questions || []).filter(q => q.id !== id) });
  const updateQ = (id, patch) => update({ questions: (data.questions || []).map(q => q.id === id ? Object.assign({}, q, patch) : q) });

  // Convert datetime-local input ↔ ISO.
  const localValue = (iso) => {
    const d = new Date(iso);
    const pad = (n) => String(n).padStart(2, "0");
    return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
  };

  const save = async () => {
    setBusy(true);
    // Strip the "id" field if we're inserting fresh.
    const payload = {
      workspace_id: data.workspace_id,
      title: data.title,
      description: data.description || "",
      starts_at: data.starts_at,
      ends_at: data.ends_at,
      location: data.location || "",
      capacity: data.capacity || 0,
      questions: data.questions || [],
      published: !!data.published
    };
    let res;
    if (data.id) {
      res = await SB.from('events').update(payload).eq('id', data.id);
    } else {
      res = await SB.from('events').insert(payload);
    }
    setBusy(false);
    if (res.error) { toast.push("Couldn't save: " + res.error.message); return; }
    toast.push(data.id ? "Event saved" : "Event created");
    onSaved();
  };

  const archive = async () => {
    if (!data.id) { onClose(); return; }
    if (!window.confirm(`Delete "${data.title}"? Existing signups are preserved but the event is hidden.`)) return;
    const res = await SB.from('events').update({ archived_at: new Date().toISOString() }).eq('id', data.id);
    if (res.error) { toast.push("Couldn't delete: " + res.error.message); return; }
    toast.push("Event deleted");
    onSaved();
  };

  return (
    <Drawer
      open={true}
      onClose={onClose}
      title={data.title || "Untitled event"}
      subtitle={data.id ? "Edit event" : "New event"}
      width={640}
      actions={
        <>
          {data.id && <Button variant="ghost" icon="trash-2" onClick={archive}>Delete</Button>}
          <Button variant="ghost" onClick={onClose} disabled={busy}>Cancel</Button>
          <Button icon="check" onClick={save} disabled={busy}>{busy ? "Saving…" : "Save event"}</Button>
        </>
      }
    >
      <Tabs value={tab} onChange={setTab} options={[
        { value: "details",   label: "Details" },
        { value: "questions", label: `Questions (${(data.questions || []).length})` },
        { value: "attendees", label: data.id ? "Attendees" : "Attendees (save first)" }
      ]} />

      {tab === "details" && (
        <div className="mt-5 flex flex-col gap-4">
          <Field label="Title" required>
            <Input value={data.title} onChange={(e) => update({ title: e.target.value })} />
          </Field>
          <Field label="Description">
            <Textarea value={data.description || ""} onChange={(e) => update({ description: e.target.value })} placeholder="What is this event about?" />
          </Field>
          <div className="grid grid-cols-2 gap-3">
            <Field label="Starts" required>
              <DateTimePicker
                value={data.starts_at}
                onChange={(iso) => {
                  const newStart = new Date(iso);
                  const oldEnd = new Date(data.ends_at);
                  // If end is now before (or equal to) start, push it to start + 1h.
                  if (oldEnd <= newStart) {
                    const newEnd = new Date(newStart);
                    newEnd.setHours(newEnd.getHours() + 1);
                    update({ starts_at: iso, ends_at: newEnd.toISOString() });
                  } else {
                    update({ starts_at: iso });
                  }
                }}
              />
            </Field>
            <Field label="Ends" required>
              <DateTimePicker
                value={data.ends_at}
                minDate={data.starts_at}
                onChange={(iso) => update({ ends_at: iso })}
              />
            </Field>
          </div>
          <Field label="Location">
            <Input value={data.location || ""} onChange={(e) => update({ location: e.target.value })} placeholder="123 Main St — or virtual link" />
          </Field>
          <div className="grid grid-cols-2 gap-3">
            <Field label="Capacity" hint="0 = unlimited">
              <Input type="number" value={data.capacity} onChange={(e) => update({ capacity: Math.max(0, +e.target.value || 0) })} />
            </Field>
            <Field label="Status">
              <Toggle checked={!!data.published} onChange={(v) => update({ published: v })} label={data.published ? "Published" : "Draft"} />
            </Field>
          </div>
        </div>
      )}

      {tab === "questions" && (
        <div className="mt-5">
          <p className="text-[12.5px] text-ink/55 mb-3">Customize what attendees are asked when signing up.</p>
          {(data.questions || []).length === 0 ? (
            <EmptyState icon="circle-help" title="No questions yet" body="Add custom questions tailored to this event." />
          ) : (
            <div className="flex flex-col gap-2">
              {data.questions.map((q) => {
                const t = (window.FIELD_TYPES || []).find(ft => ft.id === q.type);
                return (
                  <div key={q.id} className="rounded-md border border-ink/[0.06] bg-white p-3">
                    <div className="flex items-center gap-2">
                      <Icon name={t?.icon || "type"} size={12} className="text-ink/55" />
                      <input value={q.label} onChange={(e) => updateQ(q.id, { label: e.target.value })} className="flex-1 bg-transparent text-[13px] outline-none" />
                      <Toggle checked={q.required} onChange={(v) => updateQ(q.id, { required: v })} size="sm" />
                      <span className="text-[11px] text-ink/55 w-12 text-right">Req.</span>
                      <button onClick={() => removeQ(q.id)} className="p-1 text-ink/55 hover:text-[#D69898]"><Icon name="trash-2" size={12} /></button>
                    </div>
                    {["dropdown","multi","radio"].includes(q.type) && (
                      <div className="mt-2.5 pl-5">
                        <textarea
                          value={(q.options || []).join("\n")}
                          onChange={(e) => updateQ(q.id, { options: e.target.value.split("\n").filter(Boolean) })}
                          className="w-full bg-ink/[0.02] border border-ink/[0.06] rounded p-2 text-[12px] resize-none outline-none focus:border-ink/30"
                          rows={Math.max(2, (q.options || []).length)}
                        />
                        <div className="text-[10.5px] text-ink/45 mt-1">One option per line</div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}

          <div className="mt-4">
            <div className="text-[11px] uppercase tracking-[0.1em] text-ink/45 mb-2">Add question</div>
            <div className="flex flex-wrap gap-1.5">
              {EVENT_FIELD_TYPES.map(type => {
                const meta = (window.FIELD_TYPES || []).find(t => t.id === type);
                return (
                  <button
                    key={type}
                    onClick={() => addQ(type)}
                    className="inline-flex items-center gap-1.5 h-7 px-2.5 rounded border border-ink/[0.06] hover:bg-white text-[11.5px]"
                  >
                    <Icon name={meta?.icon || "type"} size={11} className="text-ink/65" />
                    {meta?.label || type}
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      )}

      {tab === "attendees" && (
        <div className="mt-5">
          {!data.id ? (
            <div className="text-[12.5px] text-ink/55">Save the event first to see attendees.</div>
          ) : loadingSignups ? (
            <div className="text-[12.5px] text-ink/50">Loading attendees…</div>
          ) : signups.length === 0 ? (
            <EmptyState icon="users" title="No signups yet" body="Once you publish the event, signups will appear here." />
          ) : (
            <div className="rounded-md border border-ink/[0.06] divide-y divide-ink/[0.06]">
              {signups.map(s => (
                <div key={s.id} className="px-3 py-2.5 flex items-center gap-3">
                  <Avatar name={s.customers?.name || "?"} size={28} />
                  <div className="flex-1 min-w-0">
                    <div className="text-[13px] truncate">{s.customers?.name || "—"}</div>
                    <div className="text-[11.5px] text-ink/55 truncate">{s.customers?.email || ""}</div>
                  </div>
                  <div className="text-[11px] text-ink/45 font-mono">{fmt(new Date(s.created_at), "MMM d")}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </Drawer>
  );
}

Object.assign(window, { EventsPage });