caldav/web/dav/CalendarView.tsx

import type { CalendarEvent } from './shared';
import { useState } from 'react';
import { CalendarDays, MapPin, Repeat, Pencil, Trash2, Check, X, Plus } from 'lucide-react';
import { useCalendarEvents, useSelectedCollection } from './useDavData';
import { useDavEdit, setProperty, CREATING, type NewEvent } from './useDavEdit';
import { useTranslation } from 'officerdev';

// Right panel of /calendar. Deliberately a grouped agenda list, not a month grid: the sidecar returns
// events as they are stored, with RRULE unexpanded, so a grid would have to invent occurrences the server
// never claimed existed. A list can show a repeating event honestly, as one entry with a "repeats" badge.

const dayKey = (ev: CalendarEvent) => (ev.start ? ev.start.slice(0, 10) : '');

const formatDay = (iso: string) => {
  if (!iso) return 'No date';
  const date = new Date(`${iso}T12:00:00`);
  if (Number.isNaN(date.getTime())) return iso;
  return date.toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
};

const formatTime = (ev: CalendarEvent) => {
  if (ev.allDay || !ev.start) return 'All day';
  const start = new Date(ev.start);
  if (Number.isNaN(start.getTime())) return '';
  const opts: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' };
  const end = ev.end ? new Date(ev.end) : null;
  if (!end || Number.isNaN(end.getTime())) return start.toLocaleTimeString(undefined, opts);
  return `${start.toLocaleTimeString(undefined, opts)} – ${end.toLocaleTimeString(undefined, opts)}`;
};

type Draft = { summary: string; location: string; date: string; start: string; end: string; allDay: boolean };

const pad = (n: number) => String(n).padStart(2, '0');
const localDate = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
const localTime = (d: Date) => `${pad(d.getHours())}:${pad(d.getMinutes())}`;

/** The next whole hour, for an hour. What every calendar has trained people to expect from "new event". */
const blankDraft = (): Draft => {
  const start = new Date(Date.now() + 60 * 60 * 1000);
  start.setMinutes(0, 0, 0);
  const end = new Date(start.getTime() + 60 * 60 * 1000);
  return { summary: '', location: '', date: localDate(start), start: localTime(start), end: localTime(end), allDay: false };
};

/**
 * The form's local fields become what the sidecar takes: an ISO instant, or a plain date for all-day.
 *
 * The clock is read as LOCAL — a person typing 14:00 means 14:00 where they are — and `toISOString`
 * converts it, so what reaches the file is UTC and unambiguous.
 */
const toEvent = (d: Draft): NewEvent => {
  const base = { summary: d.summary.trim(), location: d.location.trim() || undefined };
  if (d.allDay) return { ...base, start: d.date, allDay: true };

  const start = new Date(`${d.date}T${d.start}`);
  let end = new Date(`${d.date}T${d.end}`);
  // 23:00–01:00 is an event that crosses midnight, not one that ends two hours before it started.
  if (end <= start) end = new Date(end.getTime() + 24 * 60 * 60 * 1000);
  return { ...base, start: start.toISOString(), end: end.toISOString(), allDay: false };
};

const FIELD = 'rounded-md border bg-background px-2 py-1 text-sm';

export const CalendarView = () => {
  const { t } = useTranslation();
  const { selected, isLoading: loadingCollections } = useSelectedCollection('calendar');
  const { events, isLoading, error } = useCalendarEvents(selected?.path ?? null);
  // Keyed on the COLLECTION, so a save refreshes the list this event came from.
  const edit = useDavEdit(['caldav', 'events', selected?.path ?? null]);
  const [editing, setEditing] = useState<string | null>(null);
  const [draft, setDraft] = useState({ summary: '', location: '' });
  const [confirming, setConfirming] = useState<string | null>(null);
  const [draftNew, setDraftNew] = useState<Draft | null>(null);

  if (loadingCollections) return <Placeholder text="Loading calendars…" />;
  if (!selected) return <Placeholder text="No calendars yet. Create one from a CalDAV client." />;

  // Not an early return any more: the header carries the only way to ADD an event, and a calendar that
  // is empty or still loading is exactly when somebody wants it.
  const notice = error
    ? t('dav.readFailed', { name: selected.displayName, reason: String(error) })
    : isLoading
      ? 'Loading events…'
      : events.length === 0
        ? `${selected.displayName} has no events.`
        : null;

  const sorted = [...events].sort((a, b) => (a.start ?? '').localeCompare(b.start ?? ''));
  const days: Array<{ key: string; events: CalendarEvent[] }> = [];
  for (const ev of sorted) {
    const key = dayKey(ev);
    const last = days[days.length - 1];
    if (last && last.key === key) last.events.push(ev);
    else days.push({ key, events: [ev] });
  }
  // Newest day at the top. A calendar accumulates years, and an ascending list opens on whatever was
  // imported first — scrolling to the bottom to find this week is the wrong default. Within a day the
  // order stays chronological, because that is what a day IS.
  days.reverse();

  const submitNew = (e: React.FormEvent) => {
    e.preventDefault();
    if (!draftNew?.summary.trim()) return;
    void edit.create(selected.path, toEvent(draftNew)).then((ok) => ok && setDraftNew(null));
  };

  return (
    <div className="flex h-full flex-col">
      <header className="flex shrink-0 items-center justify-between gap-3 border-b px-6 py-3">
        <div className="min-w-0">
          <div className="truncate text-sm font-semibold leading-tight">{selected.displayName}</div>
          <div className="text-xs text-muted-foreground">
            {events.length} {events.length === 1 ? 'event' : 'events'}
          </div>
        </div>
        <button
          onClick={() => setDraftNew((d) => (d ? null : blankDraft()))}
          className="flex shrink-0 items-center gap-1.5 rounded-lg bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/20"
        >
          <Plus className="h-3.5 w-3.5" />
          New event
        </button>
      </header>

      <div className="flex-1 overflow-y-auto">
        <div className="mx-auto flex max-w-3xl flex-col gap-6 p-6">
          {/* Title, when, and where. No recurrence and no alarms: this form writes a minimal VEVENT, and
              a field the list cannot show afterwards is a field that silently disappears. */}
          {draftNew && (
            <form onSubmit={submitNew} className="flex flex-col gap-3 rounded-xl border bg-card p-4">
              <input
                autoFocus
                value={draftNew.summary}
                onChange={(e) => setDraftNew({ ...draftNew, summary: e.target.value })}
                placeholder="Title"
                className={FIELD}
              />
              <div className="flex flex-wrap items-center gap-2">
                <input
                  type="date"
                  value={draftNew.date}
                  onChange={(e) => setDraftNew({ ...draftNew, date: e.target.value })}
                  className={`${FIELD} tabular-nums`}
                />
                {!draftNew.allDay && (
                  <>
                    <input
                      type="time"
                      value={draftNew.start}
                      onChange={(e) => setDraftNew({ ...draftNew, start: e.target.value })}
                      className={`${FIELD} tabular-nums`}
                    />
                    <span className="text-xs text-muted-foreground">to</span>
                    <input
                      type="time"
                      value={draftNew.end}
                      onChange={(e) => setDraftNew({ ...draftNew, end: e.target.value })}
                      className={`${FIELD} tabular-nums`}
                    />
                  </>
                )}
                <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
                  <input
                    type="checkbox"
                    checked={draftNew.allDay}
                    onChange={(e) => setDraftNew({ ...draftNew, allDay: e.target.checked })}
                  />
                  All day
                </label>
              </div>
              <input
                value={draftNew.location}
                onChange={(e) => setDraftNew({ ...draftNew, location: e.target.value })}
                placeholder="Where"
                className={`${FIELD} text-xs`}
              />
              <div className="flex items-center gap-2">
                <button
                  type="submit"
                  disabled={edit.busy === CREATING || !draftNew.summary.trim()}
                  className="flex items-center gap-1 rounded-md bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary disabled:opacity-50"
                >
                  <Check className="h-3 w-3" /> {edit.busy === CREATING ? 'Creating…' : 'Create'}
                </button>
                <button
                  type="button"
                  onClick={() => setDraftNew(null)}
                  className="rounded-md px-2 py-1.5 text-xs text-muted-foreground"
                >
                  Cancel
                </button>
                {edit.error && <span className="text-xs text-destructive">{edit.error}</span>}
              </div>
            </form>
          )}

          {notice && <Placeholder text={notice} />}
          {days.map((day) => (
          <section key={day.key} className="flex flex-col gap-2">
            <h2 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              {formatDay(day.key)}
            </h2>
            {day.events.map((ev) => (
              <article key={ev.uid} className="flex gap-3 rounded-xl border bg-card p-3">
                <span
                  className="mt-1 h-2.5 w-2.5 shrink-0 rounded-full ring-1 ring-black/10"
                  style={{ backgroundColor: selected.color || '#94a3b8' }}
                />
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2">
                    <span className="truncate text-sm font-medium">{ev.summary || '(no title)'}</span>
                    {ev.rrule && (
                      <span
                        title={ev.rrule}
                        className="flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground"
                      >
                        <Repeat className="h-3 w-3" />
                        repeats
                      </span>
                    )}
                  </div>
                  <div className="mt-0.5 text-xs tabular-nums text-muted-foreground">{formatTime(ev)}</div>

                  {/* The editor is the title and the place, and nothing else. Those are the two fields a
                      person actually corrects; times and recurrence are where an editor does damage, and
                      a half-editor that silently rewrites an RRULE is worse than none. */}
                  {editing === ev.href && (
                    <form
                      className="mt-2 flex flex-col gap-2"
                      onSubmit={(e) => {
                        e.preventDefault();
                        if (!ev.href) return;
                        void edit
                          .save(ev.href, (raw) =>
                            setProperty(setProperty(raw, 'SUMMARY', draft.summary), 'LOCATION', draft.location || null),
                          )
                          .then(() => setEditing(null));
                      }}
                    >
                      <input
                        autoFocus
                        value={draft.summary}
                        onChange={(e) => setDraft((d) => ({ ...d, summary: e.target.value }))}
                        placeholder="Title"
                        className="rounded-md border bg-background px-2 py-1 text-sm"
                      />
                      <input
                        value={draft.location}
                        onChange={(e) => setDraft((d) => ({ ...d, location: e.target.value }))}
                        placeholder="Where"
                        className="rounded-md border bg-background px-2 py-1 text-xs"
                      />
                      <div className="flex items-center gap-2">
                        <button
                          type="submit"
                          disabled={edit.busy === ev.href}
                          className="flex items-center gap-1 rounded-md bg-primary/10 px-2 py-1 text-xs text-primary disabled:opacity-50"
                        >
                          <Check className="h-3 w-3" /> {edit.busy === ev.href ? 'Saving…' : 'Save'}
                        </button>
                        <button
                          type="button"
                          onClick={() => setEditing(null)}
                          className="rounded-md px-2 py-1 text-xs text-muted-foreground"
                        >
                          Cancel
                        </button>
                      </div>
                    </form>
                  )}
                  {ev.location && (
                    <div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
                      <MapPin className="h-3 w-3 shrink-0" />
                      <span className="truncate">{ev.location}</span>
                    </div>
                  )}
                  {ev.description && (
                    <p className="mt-1 whitespace-pre-wrap text-xs text-muted-foreground">{ev.description}</p>
                  )}
                </div>
                {/* Only for an event we can actually address. An item with no href came from somewhere
                    that did not give us one, and offering a delete that cannot work is worse than not
                    offering it. */}
                {ev.href && editing !== ev.href && (
                  <div className="flex shrink-0 items-start gap-1">
                    {confirming === ev.href ? (
                      <>
                        <button
                          onClick={() => void edit.remove(ev.href!).then(() => setConfirming(null))}
                          disabled={edit.busy === ev.href}
                          title="Delete this event"
                          className="rounded p-1 text-destructive hover:bg-destructive/10 disabled:opacity-50"
                        >
                          <Check className="h-3.5 w-3.5" />
                        </button>
                        <button onClick={() => setConfirming(null)} className="rounded p-1 opacity-50 hover:opacity-100">
                          <X className="h-3.5 w-3.5" />
                        </button>
                      </>
                    ) : (
                      <>
                        <button
                          onClick={() => {
                            setDraft({ summary: ev.summary ?? '', location: ev.location ?? '' });
                            setEditing(ev.href!);
                          }}
                          title="Edit"
                          className="rounded p-1 text-muted-foreground hover:text-foreground"
                        >
                          <Pencil className="h-3.5 w-3.5" />
                        </button>
                        <button
                          onClick={() => setConfirming(ev.href!)}
                          title="Delete"
                          className="rounded p-1 text-muted-foreground hover:text-destructive"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                        </button>
                      </>
                    )}
                  </div>
                )}
              </article>
            ))}
          </section>
          ))}
        </div>
      </div>
    </div>
  );
};

const Placeholder = ({ text }: { text: string }) => (
  <div className="flex h-full flex-col items-center justify-center gap-2 p-6 text-center text-sm text-muted-foreground">
    <CalendarDays className="h-6 w-6 opacity-40" />
    <span>{text}</span>
  </div>
);