import { useEffect, useMemo, useRef, useState } from "react";
import { Plus, Trash2, Users } from "lucide-react";
import type { BusyPeriod, CalendarEvent, EmailAddress, JSCalendarAlert, JSCalendarParticipant, JSCalendarRecurrenceRule, JSCalendarNDay } from "@/jmap/types";
import { useCalendar, myParticipantKeys, isRecurring, isOccurrence, eventRule, makeParticipant, participantEmail, type EventScope } from "@/store/calendar";
import { useSettings } from "@/store/settings";
import { useSession } from "@/store/session";
import { useContacts } from "@/store/contacts";
import { Dialog } from "@/ui/dialog";
import { ColorSwatches, Switch } from "@/ui/misc";
import { toast } from "@/ui/toast";
import { RecipientInput } from "../compose/RecipientInput";
import { DateField, DateTimeField } from "@/ui/datefield";
import { browserTimeZone, dateToZonedLocal, formatDuration, fromInputDateTime, listTimeZones, parseDuration, toInputDateTime, toLocalDateOnly, zonedToDate, DAY_MS, humanDuration } from "@/lib/dates";
import { formatClock, formatNumericDate, formatWeekday } from "@/lib/datetime";
import { WEEKDAYS, describeRule, presetFor, ruleFromPreset, type RecurrencePreset } from "@/lib/recurrence";
import { newKey } from "@/lib/contacts";
import { askEditScope, droppedMessage, runScoped } from "./scope";
import { t as translate } from "@/lib/i18n";

export interface EditorInit {
  event?: CalendarEvent;
  start: Date;
  end: Date;
  allDay: boolean;
  /**
   * Values a new event opens with, from wherever it was begun -- a message,
   * so far. Not an event: this is still a form the reader has to finish, so
   * `editing` stays false and the dialog says New event / Create.
   */
  seed?: { title?: string; description?: string };
}

const ALERT_OPTIONS = [0, 5, 10, 15, 30, 60, 120, 1440, 2880, 10080];

/**
 * Fields this form always sends that a single occurrence will not take.
 *
 * `useDefaultAlerts` and `calendarIds` are refused with `invalidProperties`;
 * the rest are dropped from the patch while the response still reports
 * success. Both halves are reasons not to send them — the second more so,
 * because nothing would say it had happened.
 */
const OCCURRENCE_OMIT = new Set(["useDefaultAlerts", "calendarIds", "recurrenceRule", "privacy", "organizerCalendarAddress"]);

export function EventEditor({ init, onClose }: { init: EditorInit; onClose: () => void }) {
  const cal = useCalendar();
  const settings = useSettings((s) => s.settings);
  const session = useSession((s) => s.session);
  const [base, setBase] = useState<CalendarEvent | null | undefined>(init.event && !init.event.baseEventId ? init.event : undefined);
  const [scope, setScope] = useState<EventScope | undefined>(init.event?.baseEventId ? undefined : "series");
  const editing = Boolean(init.event);

  /*
   * Which event this form is even about has to be settled before it opens.
   *
   * A form populated from the master shows the series' start date, so editing
   * Wednesday's standup would offer to move Monday's — right for the series and
   * wrong for one date. So the scope is asked first, and the occurrence itself
   * is what the form loads when the answer is "this occurrence".
   */
  /*
   * Asked once per event, and deliberately not tied to the effect's lifetime.
   *
   * Two things make the obvious version wrong. A dialog is queued in a store
   * the moment it is requested, so it outlives the effect that asked for it: a
   * re-run queues a second prompt the first answer cannot retract, and the
   * reader is asked the same question twice. And gating the *answer* on a
   * cleanup flag is worse — React's StrictMode runs mount, cleanup, mount, so
   * the flag is already set by the time anyone clicks and the editor never
   * opens at all. The ref is what makes this once; the answer is applied
   * whenever it arrives.
   */
  const asked = useRef<string | null>(null);
  useEffect(() => {
    const ev = init.event;
    if (!ev) { setBase(null); setScope("series"); return; }
    if (!ev.baseEventId) { setBase(ev); setScope("series"); return; }
    if (asked.current === ev.id) return;
    asked.current = ev.id;
    void (async () => {
      const chosen = isRecurring(ev) && isOccurrence(ev) ? await askEditScope(ev) : "series";
      if (!chosen) { onClose(); return; }
      setScope(chosen);
      if (chosen === "occurrence") setBase(ev);
      else void cal.getEvent(ev.baseEventId!).then(setBase);
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [init.event?.id]);

  if (base === undefined || scope === undefined) return null;
  return <EventForm key={base?.id ?? "new"} init={init} base={base} scope={scope} editing={editing} onClose={onClose} settingsTz={settings.timeZone ?? browserTimeZone} defaultAlert={settings.defaultAlertMinutes} myEmail={session?.username ?? ""} />;
}

function EventForm({ init, base, scope, editing, onClose, settingsTz, defaultAlert, myEmail }: { init: EditorInit; base: CalendarEvent | null; scope: EventScope; editing: boolean; onClose: () => void; settingsTz: string; defaultAlert: number; myEmail: string }) {
  /** This form is editing one date rather than the series behind it. */
  const oneDate = scope === "occurrence";
  const cal = useCalendar();
  const contacts = useContacts();
  const ev = base;
  const calendars = Object.values(cal.calendars).filter((c) => c.myRights.mayWriteAll || c.myRights.mayWriteOwn);
  const initialCal = ev ? Object.keys(ev.calendarIds)[0] : (calendars.find((c) => c.isDefault)?.id ?? calendars[0]?.id);
  const evTz = ev?.timeZone ?? settingsTz;
  const baseStart = ev ? zonedToDate(ev.start, ev.showWithoutTime ? null : evTz) : init.start;
  const baseEnd = ev ? new Date(baseStart.getTime() + (parseDuration(ev.duration) || (ev.showWithoutTime ? 86400 : 3600)) * 1000) : init.end;

  const [title, setTitle] = useState(ev?.title ?? init.seed?.title ?? "");
  const [calendarId, setCalendarId] = useState(initialCal ?? "");
  const [allDay, setAllDay] = useState(ev ? Boolean(ev.showWithoutTime) : init.allDay);
  const [start, setStart] = useState(baseStart);
  const [end, setEnd] = useState(baseEnd);
  const [tz, setTz] = useState(evTz);
  const [location, setLocation] = useState(Object.values(ev?.locations ?? {})[0]?.name ?? "");
  const [vurl, setVurl] = useState(Object.values(ev?.virtualLocations ?? {})[0]?.uri ?? "");
  const [description, setDescription] = useState(ev?.description ?? init.seed?.description ?? "");
  const [status, setStatus] = useState<NonNullable<CalendarEvent["status"]>>(ev?.status ?? "confirmed");
  const [privacy, setPrivacy] = useState<NonNullable<CalendarEvent["privacy"]>>(ev?.privacy ?? "public");
  const [freeBusy, setFreeBusy] = useState<NonNullable<CalendarEvent["freeBusyStatus"]>>(ev?.freeBusyStatus ?? "busy");
  const [color, setColor] = useState<string | null>(ev?.color ?? null);
  const categories = useSettings((s) => s.settings.eventCategories);
  const [category, setCategory] = useState<string>(() => Object.keys(ev?.categories ?? {}).find((n) => categories.some((c) => c.name.toLowerCase() === n.toLowerCase())) ?? "");
  const [rule, setRule] = useState<JSCalendarRecurrenceRule | undefined>(ev ? eventRule(ev) : undefined);
  const [preset, setPreset] = useState<RecurrencePreset>(presetFor(ev ? eventRule(ev) : undefined));
  const [alerts, setAlerts] = useState<number[]>(() => {
    const a = Object.values(ev?.alerts ?? {}).map((x) => ("offset" in x.trigger ? -parseDuration(x.trigger.offset) / 60 : 0)).filter((n) => n >= 0);
    if (ev) return a;
    return defaultAlert >= 0 ? [defaultAlert] : [];
  });
  const myKeys = ev ? myParticipantKeys(ev, cal.identities) : [];
  const [attendees, setAttendees] = useState<EmailAddress[]>(() =>
    Object.entries(ev?.participants ?? {})
      .filter(([k, p]) => !myKeys.includes(k) && !(p.roles?.owner && !p.roles?.attendee))
      .map(([, p]) => ({ name: p.name ?? null, email: participantEmail(p) }))
      .filter((a) => a.email),
  );
  const [sendInvites, setSendInvites] = useState(true);
  const [busy, setBusy] = useState(false);
  const [fb, setFb] = useState<Record<string, BusyPeriod[]>>({});
  const [showMore, setShowMore] = useState(Boolean(ev && (ev.privacy !== "public" || ev.freeBusyStatus === "free" || ev.color || ev.status !== "confirmed" || Object.keys(ev.categories ?? {}).length)));

  const identity = cal.identities.find((i) => i.isDefault) ?? cal.identities[0];
  const myAddress = identity?.calendarAddress ?? (myEmail.includes("@") ? `mailto:${myEmail}` : "");
  const myPlainEmail = myAddress.replace(/^mailto:/i, "");

  // Free/busy lookup for attendees that are directory principals
  useEffect(() => {
    if (!attendees.length || !contacts.principalsLoaded) {
      if (!contacts.principalsLoaded) void contacts.loadPrincipals();
      return;
    }
    const dayStart = new Date(start);
    dayStart.setHours(0, 0, 0, 0);
    const dayEnd = new Date(dayStart.getTime() + DAY_MS);
    let cancelled = false;
    (async () => {
      const out: Record<string, BusyPeriod[]> = {};
      for (const a of attendees) {
        const p = contacts.principals.find((x) => x.email?.toLowerCase() === a.email.toLowerCase());
        if (!p) continue;
        try {
          out[a.email] = await cal.availability(p.id, dayStart, dayEnd);
        } catch {
          /* ignore */
        }
      }
      if (!cancelled) setFb(out);
    })();
    return () => {
      cancelled = true;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [attendees.map((a) => a.email).join(","), start.getTime(), contacts.principalsLoaded]);

  const onStartChange = (d: Date) => {
    if (Number.isNaN(d.getTime())) return;
    const dur = end.getTime() - start.getTime();
    setStart(d);
    setEnd(new Date(d.getTime() + Math.max(dur, allDay ? DAY_MS : 15 * 60_000)));
  };

  const save = async () => {
    if (!calendarId) {
      toast.error(translate("Choose a calendar"));
      return;
    }
    if (end <= start) {
      toast.error(translate("End must be after start"));
      return;
    }
    setBusy(true);
    try {
      const s = allDay ? new Date(start.getFullYear(), start.getMonth(), start.getDate()) : start;
      let e = allDay ? new Date(end.getFullYear(), end.getMonth(), end.getDate()) : end;
      if (allDay && e <= s) e = new Date(s.getTime() + DAY_MS);
      const participants: Record<string, JSCalendarParticipant> = {};
      if (attendees.length && myAddress) {
        participants.me = makeParticipant(myPlainEmail, identity?.name, "owner");
        for (const a of attendees) {
          // preserve existing status if the attendee was already there
          const existing = Object.values(ev?.participants ?? {}).find((p) => participantEmail(p).toLowerCase() === a.email.toLowerCase());
          participants[newKey("p")] = makeParticipant(a.email, a.name, "attendee", existing?.participationStatus);
        }
      }
      const alertObj: Record<string, JSCalendarAlert> = {};
      for (const m of alerts) alertObj[newKey("a")] = { "@type": "Alert", trigger: { "@type": "OffsetTrigger", offset: formatDuration(-m * 60), relativeTo: "start" }, action: "display" };
      const obj: Record<string, unknown> = {
        title: title.trim() || "(untitled)",
        description: description.trim() || undefined,
        showWithoutTime: allDay,
        start: allDay ? `${toLocalDateOnly(s)}T00:00:00` : dateToZonedLocal(s, tz),
        timeZone: allDay ? null : tz,
        duration: formatDuration(Math.round((e.getTime() - s.getTime()) / 1000)),
        locations: location.trim() ? { [newKey("l")]: { "@type": "Location", name: location.trim() } } : undefined,
        virtualLocations: vurl.trim() ? { [newKey("v")]: { "@type": "VirtualLocation", uri: vurl.trim(), name: "Online meeting" } } : undefined,
        participants: Object.keys(participants).length ? participants : undefined,
        // Stalwart 0.16 names the organizer here; RFC 8984's replyTo is ignored.
        organizerCalendarAddress: Object.keys(participants).length && myAddress ? myAddress : undefined,
        alerts: Object.keys(alertObj).length ? alertObj : undefined,
        useDefaultAlerts: false,
        // Singular, and no array: Stalwart 0.16 rejects `recurrenceRules` outright (#30).
        recurrenceRule: rule ?? undefined,
        status,
        privacy,
        freeBusyStatus: freeBusy,
        color: color ?? (category ? categories.find((c) => c.name === category)?.color : undefined),
        categories: category ? { [category]: true } : undefined,
      };
      const invites = sendInvites && attendees.length > 0;
      if (ev) {
        /*
         * A single occurrence takes less than the series does. Four of the
         * fields this form always sends are among them — `useDefaultAlerts`
         * and `calendarIds` are refused outright, `recurrenceRule`,
         * `privacy` and `organizerCalendarAddress` are dropped in silence —
         * so they are left out here rather than sent and believed. The store
         * still checks; this is what stops it having to complain.
         */
        const source = oneDate
          ? Object.fromEntries(Object.entries(obj).filter(([k]) => !OCCURRENCE_OMIT.has(k)))
          : obj;
        const patch: Record<string, unknown> = {};
        for (const [k, v] of Object.entries(source)) patch[k] = v === undefined ? null : v;
        if (!oneDate && Object.keys(ev.calendarIds)[0] !== calendarId) patch.calendarIds = { [calendarId]: true };
        const dropped = await runScoped(scope, (s) => cal.updateEvent(ev, patch, invites, s));
        if (!dropped) { setBusy(false); return; }
        toast.success(droppedMessage(dropped) ?? (oneDate ? "This occurrence updated" : "Event updated"));
      } else {
        const clean: Record<string, unknown> = {};
        for (const [k, v] of Object.entries(obj)) if (v !== undefined) clean[k] = v;
        await cal.createEvent(clean as Partial<CalendarEvent>, calendarId, invites);
        toast.success(invites ? "Event created and invitations sent" : "Event created");
      }
      onClose();
    } catch (err) {
      toast.error((err as Error).message);
    } finally {
      setBusy(false);
    }
  };

  const customRule = rule ?? { "@type": "RecurrenceRule", frequency: "weekly" as const };
  const dayWindow = useMemo(() => {
    const ds = new Date(start);
    ds.setHours(0, 0, 0, 0);
    return { ds, de: new Date(ds.getTime() + DAY_MS) };
  }, [start]);

  return (
    <Dialog open onClose={onClose} title={editing ? translate("Edit event") : translate("New event")} size="lg" footer={<><button className="btn" onClick={onClose}>{translate("Cancel")}</button><button className="btn btn-primary" disabled={busy} onClick={() => void save()}>{busy ? translate("Saving…") : editing ? translate("Save") : attendees.length && sendInvites ? translate("Send invites") : translate("Create")}</button></>}>
      <div className="event-form">
        {ev && isRecurring(ev) && (
          <div className="info-box mb-16">
            {oneDate
              ? `Editing ${formatNumericDate(start)} only — the rest of the series is unchanged. Repeat, calendar and privacy belong to the series and are not shown.`
              : "This is a recurring event — changes apply to the whole series."}
          </div>
        )}
        <div className="field"><input className="input" style={{ fontSize: "1.1em", height: 44 }} placeholder={translate("Add title")} autoFocus value={title} onChange={(e) => setTitle(e.target.value)} /></div>
        <div className="time-row mb-8">
          {allDay ? (
            <>
              <DateField aria-label={translate("Starts")} value={toLocalDateOnly(start)} onChange={(v) => v && onStartChange(new Date(`${v}T00:00:00`))} />
              <span className="muted center">{translate("to")}</span>
              <DateField aria-label={translate("Ends")} value={toLocalDateOnly(new Date(end.getTime() - 1))} onChange={(v) => v && setEnd(new Date(new Date(`${v}T00:00:00`).getTime() + DAY_MS))} />
            </>
          ) : (
            <>
              <DateTimeField aria-label={translate("Starts")} value={toInputDateTime(start)} onChange={(v) => v && onStartChange(fromInputDateTime(v))} />
              <span className="muted center">{translate("to")}</span>
              <DateTimeField aria-label={translate("Ends")} value={toInputDateTime(end)} onChange={(v) => v && setEnd(fromInputDateTime(v))} />
            </>
          )}
        </div>
        <div className="row wrap" style={{ gap: 16, marginBottom: 8 }}>
          <label className="check"><input type="checkbox" checked={allDay} onChange={(e) => { setAllDay(e.target.checked); if (e.target.checked) { const s = new Date(start); s.setHours(0, 0, 0, 0); setStart(s); setEnd(new Date(s.getTime() + Math.max(DAY_MS, Math.ceil((end.getTime() - s.getTime()) / DAY_MS) * DAY_MS))); } }} />  {translate("All day")}</label>
          {!allDay && (
            <select className="select" style={{ width: "auto", height: 32 }} value={tz} onChange={(e) => setTz(e.target.value)} title={translate("Time zone")}>
              {!listTimeZones().includes(tz) && <option value={tz}>{tz}</option>}
              {listTimeZones().map((t) => <option key={t} value={t}>{t}</option>)}
            </select>
          )}
          {!oneDate && (
          <select className="select" style={{ width: "auto", height: 32 }} value={preset} onChange={(e) => { const p = e.target.value as RecurrencePreset; setPreset(p); if (p === "custom") setRule(rule ?? { "@type": "RecurrenceRule", frequency: "weekly", byDay: [{ "@type": "NDay", day: WEEKDAYS[(start.getDay() + 6) % 7]!.key }] }); else setRule(ruleFromPreset(p, start)); }}>
            <option value="none">{translate("Does not repeat")}</option>
            <option value="daily">{translate("Daily")}</option>
            <option value="weekly">{translate("Weekly on {weekday}", { weekday: formatWeekday(start, "long") })}</option>
            <option value="weekdays">{translate("Every weekday")}</option>
            <option value="monthly">{translate("Monthly on day {day}", { day: start.getDate() })}</option>
            <option value="yearly">{translate("Yearly")}</option>
            <option value="custom">{translate("Custom…")}</option>
          </select>
          )}
        </div>
        {!oneDate && preset === "custom" && (
          <div className="card" style={{ marginBottom: 12 }}>
            <div className="row wrap" style={{ gap: 8 }}>
              <span>{translate("Repeat every")}</span>
              <input className="input" type="number" min={1} style={{ width: 70 }} value={customRule.interval ?? 1} onChange={(e) => setRule({ ...customRule, interval: Math.max(1, Number(e.target.value)) })} />
              <select className="select" style={{ width: "auto" }} value={customRule.frequency} onChange={(e) => setRule({ ...customRule, frequency: e.target.value as JSCalendarRecurrenceRule["frequency"], byDay: e.target.value === "weekly" ? customRule.byDay : undefined, byMonthDay: e.target.value === "monthly" ? [start.getDate()] : undefined })}>
                <option value="daily">{translate("day(s)")}</option><option value="weekly">{translate("week(s)")}</option><option value="monthly">{translate("month(s)")}</option><option value="yearly">{translate("year(s)")}</option>
              </select>
            </div>
            {customRule.frequency === "weekly" && (
              <div className="row" style={{ gap: 4, marginTop: 8 }}>
                {WEEKDAYS.map((w) => {
                  const on = customRule.byDay?.some((d) => d.day === w.key);
                  return <button key={w.key} type="button" className={`btn btn-sm btn-pill ${on ? "btn-primary" : ""}`} style={{ width: 36, padding: 0 }} title={w.label} onClick={() => { const cur = customRule.byDay ?? []; const next: JSCalendarNDay[] = on ? cur.filter((d) => d.day !== w.key) : [...cur, { "@type": "NDay", day: w.key }]; setRule({ ...customRule, byDay: next.length ? next : undefined }); }}>{w.short}</button>;
                })}
              </div>
            )}
            <div className="row wrap" style={{ gap: 8, marginTop: 8 }}>
              <span>{translate("Ends")}</span>
              <select className="select" style={{ width: "auto" }} value={customRule.until ? "until" : customRule.count ? "count" : "never"} onChange={(e) => { const v = e.target.value; setRule({ ...customRule, until: v === "until" ? `${toLocalDateOnly(new Date(start.getTime() + 30 * DAY_MS))}T23:59:59` : undefined, count: v === "count" ? 10 : undefined }); }}>
                <option value="never">{translate("never")}</option><option value="until">{translate("on date")}</option><option value="count">{translate("after N times")}</option>
              </select>
              {customRule.until && <DateField aria-label={translate("Repeat until")} className="w-auto" value={customRule.until.slice(0, 10)} onChange={(v) => v && setRule({ ...customRule, until: `${v}T23:59:59` })} />}
              {customRule.count && <input className="input" type="number" min={1} style={{ width: 80 }} value={customRule.count} onChange={(e) => setRule({ ...customRule, count: Math.max(1, Number(e.target.value)) })} />}
            </div>
            <div className="hint mt-8">{describeRule(customRule)}</div>
          </div>
        )}
        <div className="field-row">
          <div className="field"><label>{translate("Calendar")}</label>
            <select className="select" value={calendarId} disabled={oneDate} title={oneDate ? translate("An occurrence cannot be moved to another calendar on its own") : undefined} onChange={(e) => setCalendarId(e.target.value)}>
              {calendars.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>
          <div className="field"><label>{translate("Location")}</label><input className="input" value={location} onChange={(e) => setLocation(e.target.value)} placeholder={translate("Add location")} /></div>
        </div>
        <div className="field"><label>{translate("Meeting link")}</label><input className="input" value={vurl} onChange={(e) => setVurl(e.target.value)} placeholder={translate("https://meet.example.com/…")} /></div>
        <div className="field">
          <label><Users size={13} />  {translate("Guests")}</label>
          <div className="input" style={{ height: "auto", minHeight: 38, padding: "4px 8px" }}>
            <RecipientInput value={attendees} onChange={setAttendees} placeholder={translate("Add guests by name or email")} />
          </div>
          {attendees.length > 0 && (
            <>
              <Switch checked={sendInvites} onChange={setSendInvites} label={translate("Send invitation emails to guests")} />
              {Object.keys(fb).length > 0 && (
                <div className="freebusy">
                  <div className="hint">{translate("Availability on {date}", { date: formatNumericDate(start) })}</div>
                  {attendees.filter((a) => fb[a.email]).map((a) => (
                    <div key={a.email} className="fb-row">
                      <span className="truncate" style={{ width: 140 }}>{a.name ?? a.email}</span>
                      <div className="fb-bar">
                        {fb[a.email]!.map((b, i) => {
                          const bs = Math.max(new Date(b.utcStart).getTime(), dayWindow.ds.getTime());
                          const be = Math.min(new Date(b.utcEnd).getTime(), dayWindow.de.getTime());
                          if (be <= bs) return null;
                          return <span key={i} className="fb-busy" style={{ left: `${((bs - dayWindow.ds.getTime()) / DAY_MS) * 100}%`, width: `${((be - bs) / DAY_MS) * 100}%` }} title={`${b.busyStatus}: ${formatClock(new Date(b.utcStart))} – ${formatClock(new Date(b.utcEnd))}`} />;
                        })}
                        {!allDay && <span className="fb-window" style={{ left: `${((start.getTime() - dayWindow.ds.getTime()) / DAY_MS) * 100}%`, width: `${((end.getTime() - start.getTime()) / DAY_MS) * 100}%` }} />}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </>
          )}
        </div>
        <div className="field"><label>{translate("Description")}</label><textarea className="textarea" value={description} onChange={(e) => setDescription(e.target.value)} rows={3} /></div>
        <div className="field">
          <label>{translate("Reminders")}</label>
          <div className="alerts-list">
            {alerts.map((m, i) => (
              <div key={i} className="row">
                <select className="select" style={{ width: "auto" }} value={String(m)} onChange={(e) => setAlerts(alerts.map((x, j) => (j === i ? Number(e.target.value) : x)))}>
                  {[...new Set([...ALERT_OPTIONS, m])].sort((a, b) => a - b).map((o) => <option key={o} value={o}>{o === 0 ? "At time of event" : `${humanDuration(o * 60)} before`}</option>)}
                </select>
                <button className="icon-btn sm danger" onClick={() => setAlerts(alerts.filter((_, j) => j !== i))} aria-label={translate("Remove reminder")}><Trash2 size={16} /></button>
              </div>
            ))}
            <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }} onClick={() => setAlerts([...alerts, 10])}><Plus size={14} />  {translate("Add reminder")}</button>
          </div>
        </div>
        <button className="btn btn-ghost btn-sm" onClick={() => setShowMore((v) => !v)}>{showMore ? "Fewer options" : "More options"}</button>
        {showMore && (
          <div className="mt-8">
            <div className="field-row">
              <div className="field"><label>{translate("Status")}</label><select className="select" value={status} onChange={(e) => setStatus(e.target.value as typeof status)}><option value="confirmed">{translate("Confirmed")}</option><option value="tentative">{translate("Tentative")}</option><option value="cancelled">{translate("Cancelled")}</option></select></div>
              <div className="field"><label>{translate("Show as")}</label><select className="select" value={freeBusy} onChange={(e) => setFreeBusy(e.target.value as typeof freeBusy)}><option value="busy">{translate("Busy")}</option><option value="free">{translate("Free")}</option></select></div>
              {!oneDate && <div className="field"><label>{translate("Visibility")}</label><select className="select" value={privacy} onChange={(e) => setPrivacy(e.target.value as typeof privacy)}><option value="public">{translate("Default")}</option><option value="private">{translate("Private")}</option><option value="secret">{translate("Secret")}</option></select></div>}
            </div>
            <div className="field"><label>{translate("Category")}</label>
              <select className="select" value={category} onChange={(e) => setCategory(e.target.value)}>
                <option value="">{translate("None")}</option>
                {categories.map((c) => <option key={c.name} value={c.name}>{c.name}</option>)}
              </select>
            </div>
            <div className="field"><label>{translate("Color")}</label><div className="row wrap"><ColorSwatches value={color} onChange={setColor} />{color && <button className="btn btn-ghost btn-sm" onClick={() => setColor(null)}>{category ? translate("Use category color") : translate("Use calendar color")}</button>}</div></div>
          </div>
        )}
      </div>
    </Dialog>
  );
}