import {
  useCallback, useEffect, useMemo, useRef, useState,
  type CSSProperties, type MouseEvent, type PointerEvent as ReactPointerEvent,
} from 'react'
import {
  calendarApi, APIError, canEditCalendar,
  type CalendarItem, type CalendarEvent, type EventInput,
} from '../api/client'
import PageHeader from '../components/PageHeader'
import ConfirmDialog from '../components/ConfirmDialog'
import EventDialog from '../components/calendar/EventDialog'
import CalendarDialog from '../components/calendar/CalendarDialog'
import DayDialog, { type DayEvent } from '../components/calendar/DayDialog'
import DeleteEventDialog from '../components/calendar/DeleteEventDialog'
import {
  addDays, dayKey, eventDay, isSameDay, spannedDays, startOfDay, startOfMonth, startOfWeek,
} from '../components/calendar/dates'
import { useEventDrag } from '../components/calendar/useEventDrag'
import { TrashIcon, RenameIcon, DownloadIcon, PeopleIcon } from '../components/icons'
import ShareWithDialog from '../components/ShareWithDialog'

type ViewMode = 'month' | 'week' | 'list'

const weekdayLabels = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
const monthLabels = [
  'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
  'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember',
]

/** Höhe einer Stunde im Wochenraster. */
const HOUR_H = 44
/** Breite der Stundenspalte links im Wochenraster. */
const GUTTER = 52

type EventWithCalendar = DayEvent

/** Aufnehmen zum Ziehen – siehe components/calendar/useEventDrag.ts. */
type EventDown = (ev: EventWithCalendar, e: ReactPointerEvent) => void

function decorate(ev: CalendarEvent, cal: CalendarItem): EventWithCalendar {
  return {
    ...ev,
    calendarId: cal.id,
    calendarName: cal.name,
    // Eigene Terminfarbe schlägt die Kalenderfarbe – aber nur, wenn eine
    // gesetzt ist. Sonst erbt der Termin sie weiterhin.
    color: ev.color || cal.color,
    startsAt: eventDay(ev.start, ev.all_day),
    endsAt: ev.end ? eventDay(ev.end, ev.all_day) : null,
  }
}

/** Eindeutig auch für aufgeklappte Wiederholungen: die teilen sich die UID
 *  und unterscheiden sich nur im Anfangszeitpunkt. */
function eventKey(ev: EventWithCalendar): string {
  return `${ev.calendarId}|${ev.uid}|${ev.start}`
}

/** Termine je Tag. Ein mehrtägiger Termin steht in **jeder** Zelle, die er
 *  belegt – vorher nur am Starttag, was ihn ab dem zweiten Tag verschwinden
 *  ließ. */
function groupByDay(events: EventWithCalendar[]): Map<string, EventWithCalendar[]> {
  const map = new Map<string, EventWithCalendar[]>()
  for (const ev of events) {
    for (const day of spannedDays(ev.startsAt, ev.endsAt, ev.all_day)) {
      const key = dayKey(day)
      if (!map.has(key)) map.set(key, [])
      map.get(key)!.push(ev)
    }
  }
  for (const list of map.values()) {
    list.sort((a, b) => {
      // Ganztägige zuerst, danach nach Uhrzeit – so wie jeder Kalender es zeigt.
      if (a.all_day !== b.all_day) return a.all_day ? -1 : 1
      return +a.startsAt - +b.startsAt
    })
  }
  return map
}

/** Vorschlag für einen neuen Termin: heute die nächste volle Stunde, an
 *  anderen Tagen 9 Uhr. Mitternacht als Vorgabe trifft fast nie zu. */
function suggestStart(day: Date): Date {
  const now = new Date()
  if (isSameDay(day, now)) {
    const next = new Date(now)
    next.setMinutes(0, 0, 0)
    next.setHours(next.getHours() + 1)
    if (isSameDay(next, day)) return next
  }
  const d = startOfDay(day)
  d.setHours(9)
  return d
}

export default function CalendarPage() {
  const [calendars, setCalendars] = useState<CalendarItem[]>([])
  /** Ausgeblendete Kalender. Bewusst andersherum als „sichtbare": So ist ein
   *  **neu angelegter** Kalender automatisch sichtbar. */
  const [hidden, setHidden] = useState<Set<string>>(new Set())
  const [eventsByCal, setEventsByCal] = useState<Record<string, CalendarEvent[]>>({})
  const [viewMode, setViewMode] = useState<ViewMode>('month')
  const [cursor, setCursor] = useState(new Date())
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [showList, setShowList] = useState(() =>
    typeof window === 'undefined' ? true : window.matchMedia('(min-width: 900px)').matches)

  const [dayDialog, setDayDialog] = useState<Date | null>(null)
  const [eventDialog, setEventDialog] = useState<{ calId: string; event?: CalendarEvent; start: Date } | null>(null)
  const [calDialog, setCalDialog] = useState<{ calendar?: CalendarItem } | null>(null)
  const [deleteCalendar, setDeleteCalendar] = useState<CalendarItem | null>(null)
  /** Kalender, dessen Freigaben gerade verwaltet werden. */
  const [shareCalendar, setShareCalendar] = useState<CalendarItem | null>(null)
  const [deleteEvent, setDeleteEvent] = useState<
    { calId: string; uid: string; summary: string; recurring: boolean; occurrence: string } | null>(null)

  const importInputRef = useRef<HTMLInputElement>(null)
  const importTargetRef = useRef<string | null>(null)

  /**
   * Sichtbares Zeitfenster. Der Server klappt Wiederholungen **darin** auf –
   * eine wöchentliche Reihe ohne Ende hat kein natürliches Ende, also muss
   * die Ansicht sagen, welchen Ausschnitt sie braucht.
   */
  const range = useMemo(() => {
    if (viewMode === 'month') {
      const s = startOfWeek(startOfMonth(cursor))
      return { from: addDays(s, -1), to: addDays(s, 43) }
    }
    if (viewMode === 'week') {
      const s = startOfWeek(cursor)
      return { from: addDays(s, -1), to: addDays(s, 8) }
    }
    const today = startOfDay(new Date())
    return { from: addDays(today, -31), to: addDays(today, 365) }
  }, [viewMode, cursor.getFullYear(), cursor.getMonth(), viewMode === 'week' ? +startOfWeek(cursor) : 0])

  const loadEvents = useCallback(async (list: CalendarItem[], from: Date, to: Date) => {
    const pairs = await Promise.all(list.map(async c => {
      try {
        return [c.id, await calendarApi.listEvents(c.id, from, to)] as const
      } catch {
        return [c.id, [] as CalendarEvent[]] as const
      }
    }))
    setEventsByCal(Object.fromEntries(pairs))
  }, [])

  const loadCalendars = useCallback(async () => {
    setError(null)
    try {
      // ?? []: Eine Liste, die als null ankommt, legte die ganze Seite lahm
      // (das ist einmal passiert). Der Server schickt das nicht mehr – aber
      // eine Ansicht sollte an einer unerwarteten Antwort nicht zerbrechen.
      setCalendars(await calendarApi.list() ?? [])
    } catch (e) {
      setError(e instanceof APIError ? e.message : 'Laden fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { loadCalendars() }, [loadCalendars])

  // Termine hängen an Kalenderliste **und** Zeitfenster: Beim Blättern in
  // einen anderen Monat müssen die Wiederholungen dort neu aufgeklappt werden.
  useEffect(() => {
    if (calendars.length === 0) { setEventsByCal({}); return }
    loadEvents(calendars, range.from, range.to)
  }, [calendars, range.from, range.to, loadEvents])

  const refreshEvents = useCallback(
    () => loadEvents(calendars, range.from, range.to),
    [calendars, range.from, range.to, loadEvents])

  const allEvents = useMemo(() => {
    const out: EventWithCalendar[] = []
    for (const cal of calendars) {
      if (hidden.has(cal.id)) continue
      for (const ev of eventsByCal[cal.id] ?? []) out.push(decorate(ev, cal))
    }
    return out
  }, [calendars, hidden, eventsByCal])

  const byDay = useMemo(() => groupByDay(allEvents), [allEvents])

  /**
   * Kalender, in die dieses Konto schreiben darf.
   *
   * Die Kalenderwahl im Termin-Dialog zeigt nur diese. Einen nur lesbaren
   * Kalender dort anzubieten hieße, jemanden ein Formular ausfüllen zu lassen,
   * das der Server danach ablehnt.
   */
  const writableCalendars = useMemo(() => calendars.filter(canEditCalendar), [calendars])

  function toggleVisible(id: string) {
    setHidden(prev => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id); else next.add(id)
      return next
    })
  }

  const defaultCalendarId = calendars[0]?.id

  function openNewEvent(start: Date) {
    if (!defaultCalendarId) return
    setEventDialog({ calId: defaultCalendarId, start })
  }

  function openEditEvent(ev: EventWithCalendar) {
    setEventDialog({ calId: ev.calendarId, event: ev, start: ev.startsAt })
  }

  async function saveEvent(input: EventInput, calId: string) {
    if (!eventDialog) return
    try {
      if (eventDialog.event) {
        // Erst die Änderungen, dann der Umzug. Andersherum stünde der Termin
        // nach einem Fehler im neuen Kalender, aber unverändert – die
        // verwirrendere Hälfte. So bleibt er im Zweifel liegen, wo er war,
        // und die Eingaben sind trotzdem gesichert.
        await calendarApi.updateEvent(eventDialog.calId, eventDialog.event.uid, input)
        if (calId !== eventDialog.calId) {
          await calendarApi.moveEvent(eventDialog.calId, eventDialog.event.uid, calId)
        }
      } else {
        await calendarApi.createEvent(calId, input)
      }
      setEventDialog(null)
      await refreshEvents()
    } catch (e) {
      setError(e instanceof APIError ? e.message : 'Speichern fehlgeschlagen')
    }
  }

  /** Termin auf einen Kalender in der Seitenleiste gezogen. */
  async function moveEventTo(ev: EventWithCalendar, targetId: string) {
    try {
      await calendarApi.moveEvent(ev.calendarId, ev.uid, targetId)
      // Ein Kalender, in den man gerade etwas hineingezogen hat, soll das
      // auch zeigen – sonst verschwindet der Termin scheinbar spurlos.
      setHidden(prev => {
        if (!prev.has(targetId)) return prev
        const next = new Set(prev)
        next.delete(targetId)
        return next
      })
      await refreshEvents()
    } catch (e) {
      setError(e instanceof APIError ? e.message : 'Verschieben fehlgeschlagen')
    }
  }

  const { drag, onPointerDown, dragged } = useEventDrag(moveEventTo)

  /** Klick auf einen Termin – aber nicht der, der nur einem Ziehen hinterherkommt. */
  function clickEvent(ev: EventWithCalendar) {
    if (dragged()) return
    openEditEvent(ev)
  }

  /** `scope: 'single'` streicht nur diesen einen Termin aus der Reihe
   *  (EXDATE), `'series'` löscht sie ganz. Bei Einzelterminen sind beide
   *  Wege gleichbedeutend. */
  async function confirmDeleteEvent(scope: 'single' | 'series') {
    if (!deleteEvent) return
    try {
      await calendarApi.deleteEvent(
        deleteEvent.calId, deleteEvent.uid,
        scope === 'single' && deleteEvent.recurring ? deleteEvent.occurrence : undefined)
      setDeleteEvent(null)
      setEventDialog(null)
      await refreshEvents()
    } catch (e) {
      setError(e instanceof APIError ? e.message : 'Löschen fehlgeschlagen')
    }
  }

  async function saveCalendar(name: string, color: string) {
    try {
      if (calDialog?.calendar) {
        await calendarApi.update(calDialog.calendar.id, { name, color })
      } else {
        await calendarApi.create(name, color)
      }
      setCalDialog(null)
      await loadCalendars()
    } catch (e) {
      setError(e instanceof APIError ? e.message : 'Speichern fehlgeschlagen')
    }
  }

  async function confirmDeleteCalendar() {
    if (!deleteCalendar) return
    try {
      await calendarApi.remove(deleteCalendar.id)
      setDeleteCalendar(null)
      await loadCalendars()
    } catch (e) {
      setError(e instanceof APIError ? e.message : 'Löschen fehlgeschlagen')
    }
  }

  function triggerImport(calId: string) {
    importTargetRef.current = calId
    importInputRef.current?.click()
  }
  async function handleImportFile(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    const calId = importTargetRef.current
    e.target.value = ''
    if (!file || !calId) return
    try {
      await calendarApi.import(calId, file)
      await refreshEvents()
    } catch (err) {
      setError(err instanceof APIError ? err.message : 'Import fehlgeschlagen')
    }
  }

  function stepPeriod(dir: 1 | -1) {
    setCursor(prev => {
      if (viewMode === 'month') return new Date(prev.getFullYear(), prev.getMonth() + dir, 1)
      if (viewMode === 'week') return addDays(prev, dir * 7)
      return addDays(prev, dir * 30)
    })
  }

  const periodLabel = viewMode === 'month'
    ? `${monthLabels[cursor.getMonth()]} ${cursor.getFullYear()}`
    : viewMode === 'week'
      ? (() => {
          const s = startOfWeek(cursor)
          const e = addDays(s, 6)
          return `${s.getDate()}.${s.getMonth() + 1}. – ${e.getDate()}.${e.getMonth() + 1}.${e.getFullYear()}`
        })()
      : 'Alle Termine'

  if (loading) {
    return <div style={{ padding: 24, color: 'var(--color-text-muted)' }}>Lädt…</div>
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minWidth: 0 }}>
      <PageHeader
        title="Kalender"
        icon={
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="5" width="18" height="16" rx="2" />
            <path d="M3 10h18M8 3v4M16 3v4" />
          </svg>
        }
      >
        <button onClick={() => setShowList(v => !v)} title="Kalenderliste" style={{
          ...navBtnStyle, width: 30,
          color: showList ? 'var(--color-primary)' : 'var(--color-text-muted)',
        }}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" />
            <circle cx="3.5" cy="6" r="1.2" fill="currentColor" /><circle cx="3.5" cy="12" r="1.2" fill="currentColor" /><circle cx="3.5" cy="18" r="1.2" fill="currentColor" />
          </svg>
        </button>

        <div style={{ display: 'flex', gap: 4 }}>
          {(['month', 'week', 'list'] as ViewMode[]).map(m => (
            <button key={m} onClick={() => setViewMode(m)} style={{
              padding: '6px 12px', borderRadius: 8, fontSize: 12.5, cursor: 'pointer',
              border: '1px solid var(--color-border)',
              background: viewMode === m ? 'var(--color-primary)' : 'transparent',
              color: viewMode === m ? '#fff' : 'var(--color-text-muted)',
              transition: 'background 0.15s, color 0.15s',
            }}>
              {m === 'month' ? 'Monat' : m === 'week' ? 'Woche' : 'Liste'}
            </button>
          ))}
        </div>

        {viewMode !== 'list' && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <button onClick={() => stepPeriod(-1)} style={navBtnStyle} aria-label="zurück">‹</button>
            <span style={{ fontSize: 13, color: 'var(--color-text)', minWidth: 140, textAlign: 'center' }}>{periodLabel}</span>
            <button onClick={() => stepPeriod(1)} style={navBtnStyle} aria-label="weiter">›</button>
            <button onClick={() => setCursor(new Date())} style={{ ...navBtnStyle, width: 'auto', padding: '0 10px', fontSize: 12 }}>Heute</button>
          </div>
        )}

        <button onClick={() => openNewEvent(suggestStart(new Date()))} disabled={!defaultCalendarId} style={{
          padding: '7px 14px', borderRadius: 8, border: 'none',
          background: 'var(--color-primary)', color: '#fff', fontSize: 13, fontWeight: 600,
          cursor: defaultCalendarId ? 'pointer' : 'not-allowed', opacity: defaultCalendarId ? 1 : 0.5,
        }}>
          + Termin
        </button>
      </PageHeader>

      {error && (
        <div style={{ padding: '8px 16px', background: 'var(--color-danger)', color: '#fff', fontSize: 13, display: 'flex', justifyContent: 'space-between' }}>
          <span>{error}</span>
          <button onClick={() => setError(null)} style={{ border: 'none', background: 'none', color: '#fff', cursor: 'pointer' }}>✕</button>
        </div>
      )}

      <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
        {showList && (
          <aside style={{
            width: 210, flexShrink: 0, borderRight: '1px solid var(--color-border)',
            padding: 14, overflowY: 'auto',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
              <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--color-text-muted)', letterSpacing: 0.5 }}>KALENDER</span>
              <button onClick={() => setCalDialog({})} title="Neuer Kalender" style={{
                border: 'none', background: 'none', cursor: 'pointer', color: 'var(--color-primary)',
                fontSize: 18, lineHeight: 1, padding: '0 2px',
              }}>+</button>
            </div>
            {drag && (
              <p style={{ fontSize: 11.5, color: 'var(--color-text-muted)', margin: '0 0 8px', lineHeight: 1.4 }}>
                Auf einen Kalender ziehen zum Verschieben
              </p>
            )}
            {calendars.map(cal => {
              const on = !hidden.has(cal.id)
              // Ablegefläche fürs Ziehen. Der eigene Kalender des gezogenen
              // Termins ist keins – dorthin gibt es nichts zu verschieben.
              // Ablegefläche nur, wo auch geschrieben werden darf. Ein Ziel
              // anzubieten, das der Server danach ablehnt, ist schlechter als
              // gar keines: Man hat den Termin schon losgelassen.
              const isTarget = !!drag && drag.ev.calendarId !== cal.id && canEditCalendar(cal)
              const isOver = isTarget && drag!.overId === cal.id
              return (
                <div key={cal.id} className="aether-cal-row"
                  data-cal-drop={isTarget ? cal.id : undefined}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 9, padding: '6px 4px',
                    fontSize: 13, color: 'var(--color-text)', borderRadius: 6,
                    outline: isOver ? `2px solid ${cal.color}` : isTarget ? '1px dashed var(--color-border)' : 'none',
                    background: isOver ? cal.color + '22' : undefined,
                  }}>
                  {/* Der Farbpunkt **ist** der Schalter: gefüllt = wird
                      angezeigt, leerer Ring = ausgeblendet. Ein Kästchen
                      daneben sagte dasselbe zweimal. */}
                  <button
                    onClick={() => toggleVisible(cal.id)}
                    role="switch" aria-checked={on}
                    title={on ? 'Ausblenden' : 'Einblenden'}
                    style={{
                      width: 15, height: 15, borderRadius: '50%', flexShrink: 0, padding: 0,
                      border: `2px solid ${cal.color}`,
                      background: on ? cal.color : 'transparent',
                      cursor: 'pointer', transition: 'background 0.12s',
                    }}
                  />
                  <span onClick={() => toggleVisible(cal.id)} style={{
                    flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer',
                    opacity: on ? 1 : 0.45,
                  }}>
                    {cal.name}
                    {/* Fremde Kalender tragen ihren Absender. Zwei „Privat"
                        nebeneinander wären sonst nicht zu unterscheiden. */}
                    {cal.shared && cal.owner_name && (
                      <span style={{ color: 'var(--color-text-muted)', fontSize: 11.5 }}>
                        {' · '}{cal.owner_name}{cal.permission === 'read' ? ' (nur lesen)' : ''}
                      </span>
                    )}
                  </span>
                  <CalMenu
                    own={!cal.shared}
                    canWrite={canEditCalendar(cal)}
                    onRename={() => setCalDialog({ calendar: cal })}
                    onShare={() => setShareCalendar(cal)}
                    onExport={() => window.open(calendarApi.exportUrl(cal.id), '_blank')}
                    onImport={() => triggerImport(cal.id)}
                    onDelete={() => setDeleteCalendar(cal)}
                  />
                </div>
              )
            })}
            {calendars.length === 0 && (
              <p style={{ fontSize: 12.5, color: 'var(--color-text-muted)', lineHeight: 1.5 }}>
                Noch kein Kalender – über <strong>+</strong> einen anlegen.
              </p>
            )}
          </aside>
        )}

        <div style={{ flex: 1, minWidth: 0, overflow: 'hidden', display: 'flex' }}>
          {viewMode === 'month' && (
            <MonthGrid cursor={cursor} byDay={byDay} onOpenDay={setDayDialog}
                       onEventClick={clickEvent} onEventDown={onPointerDown} />
          )}
          {viewMode === 'week' && (
            <WeekGrid cursor={cursor} byDay={byDay} onSlotClick={openNewEvent} onOpenDay={setDayDialog}
                      onEventClick={clickEvent} onEventDown={onPointerDown} />
          )}
          {viewMode === 'list' && (
            <ListAgenda events={allEvents} onEventClick={clickEvent} onEventDown={onPointerDown} />
          )}
        </div>
      </div>

      {/* Ist die Kalenderliste zugeklappt – am Handy der Regelfall –, fehlte
          sonst jedes Ziel, und die Geste liefe ins Leere. Die Leiste taucht
          deshalb nur während des Ziehens auf, unten in Daumennähe. */}
      {drag && !showList && (
        <div style={{
          position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 205,
          display: 'flex', gap: 8, padding: 12, overflowX: 'auto',
          background: 'var(--color-surface)', borderTop: '1px solid var(--color-border)',
          boxShadow: '0 -4px 16px rgba(0,0,0,0.3)',
        }}>
          {calendars.filter(c => c.id !== drag.ev.calendarId && canEditCalendar(c)).map(cal => (
            <div key={cal.id} data-cal-drop={cal.id} style={{
              display: 'flex', alignItems: 'center', gap: 7, padding: '10px 14px',
              borderRadius: 10, fontSize: 13, whiteSpace: 'nowrap', flexShrink: 0,
              border: `2px solid ${drag.overId === cal.id ? cal.color : 'var(--color-border)'}`,
              background: drag.overId === cal.id ? cal.color + '22' : 'transparent',
              color: 'var(--color-text)',
            }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: cal.color }} />
              {cal.name}
            </div>
          ))}
        </div>
      )}

      {/* Der Termin am Zeiger. `pointerEvents: none`, sonst läge er selbst
          unter dem Finger und verdeckte das Ziel darunter. */}
      {drag && (
        <div style={{
          position: 'fixed', left: drag.x + 12, top: drag.y - 14, zIndex: 300,
          pointerEvents: 'none', maxWidth: 220, padding: '5px 9px', borderRadius: 6,
          fontSize: 12, background: 'var(--color-surface)', color: drag.ev.color,
          border: `1px solid ${drag.ev.color}`, boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>
          {drag.ev.summary || '(ohne Titel)'}{drag.ev.recurring ? ' ↻ (ganze Reihe)' : ''}
        </div>
      )}

      <input ref={importInputRef} type="file" accept=".ics,text/calendar" style={{ display: 'none' }} onChange={handleImportFile} />

      {dayDialog && (
        <DayDialog
          day={dayDialog}
          events={byDay.get(dayKey(dayDialog)) ?? []}
          onPick={ev => { setDayDialog(null); openEditEvent(ev) }}
          onCreate={() => { const d = dayDialog; setDayDialog(null); openNewEvent(suggestStart(d)) }}
          onClose={() => setDayDialog(null)}
        />
      )}
      {eventDialog && (
        <EventDialog
          event={eventDialog.event}
          defaultStart={eventDialog.start}
          calendars={writableCalendars}
          calendarId={eventDialog.calId}
          onSave={saveEvent}
          onDelete={eventDialog.event ? () => setDeleteEvent({
            calId: eventDialog.calId,
            uid: eventDialog.event!.uid,
            summary: eventDialog.event!.summary,
            recurring: eventDialog.event!.recurring,
            // Der angeklickte Einzeltermin – nur er wird gestrichen, wenn
            // man sich für „nur diesen" entscheidet.
            occurrence: eventDialog.event!.start,
          }) : undefined}
          onCancel={() => setEventDialog(null)}
        />
      )}
      {calDialog && (
        <CalendarDialog calendar={calDialog.calendar} onSave={saveCalendar} onCancel={() => setCalDialog(null)} />
      )}
      {shareCalendar && (
        <ShareWithDialog
          resource={{ type: 'calendar', id: shareCalendar.id, name: shareCalendar.name }}
          onClose={() => setShareCalendar(null)}
        />
      )}

      {deleteCalendar && (
        <ConfirmDialog
          title="Kalender löschen"
          message={`"${deleteCalendar.name}" mit allen Terminen darin unwiderruflich löschen?`}
          confirmLabel="Löschen" danger
          onConfirm={confirmDeleteCalendar}
          onCancel={() => setDeleteCalendar(null)}
        />
      )}
      {deleteEvent && (
        <DeleteEventDialog
          summary={deleteEvent.summary}
          recurring={deleteEvent.recurring}
          onSingle={() => confirmDeleteEvent('single')}
          onSeries={() => confirmDeleteEvent('series')}
          onCancel={() => setDeleteEvent(null)}
        />
      )}

      <style>{`
        .aether-cal-row:hover { background: var(--color-surface-2); }
        .aether-cal-cell { transition: background 0.12s; }
        .aether-cal-cell:hover { background: var(--color-surface-2); }
        .aether-cal-chip { transition: filter 0.12s; }
        .aether-cal-chip:hover { filter: brightness(1.12); }
      `}</style>
    </div>
  )
}

const navBtnStyle: CSSProperties = {
  width: 26, height: 26, borderRadius: 6, border: '1px solid var(--color-border)',
  background: 'transparent', color: 'var(--color-text)', cursor: 'pointer', fontSize: 14,
  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
}

/**
 * Das Menü eines Kalenders.
 *
 * Bei einem **fremden** Kalender bleiben nur die Punkte stehen, die auch
 * gehen: ansehen und ausgeben. Bearbeiten, Löschen, Freigeben gehören dem
 * Eigentümer – ein Menüpunkt, der immer scheitert, ist schlimmer als keiner.
 * Der Server lehnt sie ohnehin ab; hier geht es darum, gar nicht erst
 * hinzuführen.
 */
function CalMenu({ onRename, onExport, onImport, onDelete, onShare, own, canWrite }: {
  onRename: () => void; onExport: () => void; onImport: () => void
  onDelete: () => void; onShare: () => void
  own: boolean; canWrite: boolean
}) {
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)
  useEffect(() => {
    if (!open) return
    function onDoc(e: globalThis.MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
    }
    function onKey(e: KeyboardEvent) { if (e.key === 'Escape') setOpen(false) }
    document.addEventListener('mousedown', onDoc)
    window.addEventListener('keydown', onKey)
    return () => { document.removeEventListener('mousedown', onDoc); window.removeEventListener('keydown', onKey) }
  }, [open])
  return (
    <div ref={ref} style={{ position: 'relative', flexShrink: 0 }}>
      <button onClick={() => setOpen(o => !o)} aria-label="Kalendermenü" style={{
        border: 'none', background: 'none', cursor: 'pointer', color: 'var(--color-text-muted)', padding: '0 2px',
      }}>⋮</button>
      {open && (
        <div style={{
          position: 'absolute', right: 0, top: 22, zIndex: 30, minWidth: 165,
          background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 8,
          boxShadow: '0 4px 14px rgba(0,0,0,0.25)', overflow: 'hidden',
        }}>
          {own && <MenuRow icon={<RenameIcon />} label="Bearbeiten" onClick={() => { setOpen(false); onRename() }} />}
          {own && <MenuRow icon={<PeopleIcon />} label="Freigeben…" onClick={() => { setOpen(false); onShare() }} />}
          <MenuRow icon={<DownloadIcon />} label="Exportieren (.ics)" onClick={() => { setOpen(false); onExport() }} />
          {canWrite && <MenuRow label="Importieren (.ics)" onClick={() => { setOpen(false); onImport() }} />}
          {own && <MenuRow icon={<TrashIcon />} label="Löschen" danger onClick={() => { setOpen(false); onDelete() }} />}
        </div>
      )}
    </div>
  )
}

function MenuRow({ icon, label, onClick, danger }: { icon?: React.ReactNode; label: string; onClick: () => void; danger?: boolean }) {
  return (
    <button onClick={onClick} className="aether-cal-row" style={{
      display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '8px 12px',
      border: 'none', background: 'none', cursor: 'pointer', fontSize: 12.5, textAlign: 'left',
      color: danger ? 'var(--color-danger)' : 'var(--color-text)',
    }}>
      {icon ?? <span style={{ width: 15 }} />}{label}
    </button>
  )
}

function timeLabel(d: Date): string {
  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
}

/** Ein Termin im Monatsraster bzw. in der ganztägigen Zeile der Woche.
 *  `stopPropagation` ist hier das Entscheidende: Ohne das reichte der Klick
 *  an die Tageszelle darunter durch und öffnete den Tag statt den Termin. */
function EventChip({ ev, onClick, onDown }: {
  ev: EventWithCalendar; onClick: () => void; onDown: EventDown
}) {
  return (
    <div
      className="aether-cal-chip"
      onClick={(e: MouseEvent) => { e.stopPropagation(); onClick() }}
      onPointerDown={e => { e.stopPropagation(); onDown(ev, e) }}
      title={ev.summary}
      style={{
        // Ohne das scrollt die Ansicht mit, sobald der Finger auf einem
        // Termin liegt – und das lange Drücken käme nie zustande.
        touchAction: 'none', userSelect: 'none',
        display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, padding: '1px 5px', borderRadius: 4,
        background: ev.color + '26', color: ev.color, cursor: 'pointer', marginBottom: 2,
        borderLeft: `2px solid ${ev.color}`,
        overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', flexShrink: 0,
      }}
    >
      {!ev.all_day && <span style={{ opacity: 0.75 }}>{timeLabel(ev.startsAt)}</span>}
      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{ev.summary || '(ohne Titel)'}</span>
      {ev.recurring && <span style={{ opacity: 0.7, flexShrink: 0 }}>↻</span>}
    </div>
  )
}

function MonthGrid({ cursor, byDay, onOpenDay, onEventClick, onEventDown }: {
  cursor: Date
  byDay: Map<string, EventWithCalendar[]>
  onOpenDay: (day: Date) => void
  onEventClick: (ev: EventWithCalendar) => void
  onEventDown: EventDown
}) {
  const gridStart = startOfWeek(startOfMonth(cursor))
  const today = new Date()
  // So viele Wochen, wie der Monat wirklich berührt – nicht immer sechs.
  const nextMonth = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1)
  const weekCount = Math.ceil((+nextMonth - +gridStart) / (7 * 86400000))
  const weeks = Array.from({ length: weekCount }, (_, w) =>
    Array.from({ length: 7 }, (_, i) => addDays(gridStart, w * 7 + i)))

  return (
    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', borderBottom: '1px solid var(--color-border)', flexShrink: 0 }}>
        {weekdayLabels.map(l => (
          <div key={l} style={{ padding: '6px 8px', fontSize: 11, color: 'var(--color-text-muted)', fontWeight: 600 }}>{l}</div>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateRows: `repeat(${weeks.length}, minmax(0, 1fr))`, flex: 1, overflow: 'auto' }}>
        {weeks.map((row, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', borderBottom: '1px solid var(--color-border)', minHeight: 96 }}>
            {row.map(day => {
              const inMonth = day.getMonth() === cursor.getMonth()
              const events = byDay.get(dayKey(day)) ?? []
              const isToday = isSameDay(day, today)
              return (
                <div
                  key={+day}
                  className="aether-cal-cell"
                  onClick={() => onOpenDay(day)}
                  style={{
                    borderRight: '1px solid var(--color-border)', padding: 4, cursor: 'pointer',
                    background: inMonth ? 'transparent' : 'var(--color-surface-2)',
                    opacity: inMonth ? 1 : 0.55,
                    display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0,
                  }}
                >
                  <span style={{
                    fontSize: 11.5, fontWeight: isToday ? 700 : 400,
                    color: isToday ? '#fff' : 'var(--color-text-muted)',
                    background: isToday ? 'var(--color-primary)' : 'transparent',
                    borderRadius: 10, padding: '1px 6px', alignSelf: 'flex-start', marginBottom: 3, flexShrink: 0,
                  }}>
                    {day.getDate()}
                  </span>
                  <div style={{ overflow: 'hidden', minWidth: 0 }}>
                    {events.slice(0, 3).map(ev => (
                      <EventChip key={eventKey(ev)} ev={ev} onClick={() => onEventClick(ev)} onDown={onEventDown} />
                    ))}
                    {events.length > 3 && (
                      <span style={{ fontSize: 10.5, color: 'var(--color-text-muted)', paddingLeft: 4 }}>
                        +{events.length - 3} weitere
                      </span>
                    )}
                  </div>
                </div>
              )
            })}
          </div>
        ))}
      </div>
    </div>
  )
}

interface Slot {
  ev: EventWithCalendar
  top: number
  height: number
  col: number
  cols: number
}

/** Überlappende Termine nebeneinander statt übereinander. Ohne das liegt der
 *  zweite Termin einer Stunde unsichtbar unter dem ersten. */
function layoutDay(events: EventWithCalendar[], day: Date): Slot[] {
  const dayStart = +startOfDay(day)
  const items = events
    .filter(ev => !ev.all_day)
    .map(ev => {
      const from = Math.max(0, (+ev.startsAt - dayStart) / 60000)
      const rawTo = ev.endsAt ? (+ev.endsAt - dayStart) / 60000 : from + 60
      const to = Math.min(24 * 60, Math.max(from + 20, rawTo)) // Mindesthöhe, sonst unklickbar
      return { ev, from, to, col: 0, cols: 1 }
    })
    .sort((a, b) => a.from - b.from || a.to - b.to)

  let cluster: typeof items = []
  let clusterEnd = -1
  const colEnds: number[] = []
  const flush = () => {
    const cols = Math.max(...cluster.map(s => s.col)) + 1
    cluster.forEach(s => { s.cols = cols })
    cluster = []
    colEnds.length = 0
  }
  for (const s of items) {
    if (cluster.length && s.from >= clusterEnd) flush()
    let c = colEnds.findIndex(e => e <= s.from)
    if (c === -1) { c = colEnds.length; colEnds.push(s.to) } else { colEnds[c] = s.to }
    s.col = c
    cluster.push(s)
    clusterEnd = Math.max(clusterEnd, s.to)
  }
  if (cluster.length) flush()

  return items.map(s => ({
    ev: s.ev,
    top: (s.from / 60) * HOUR_H,
    height: ((s.to - s.from) / 60) * HOUR_H,
    col: s.col,
    cols: s.cols,
  }))
}

function WeekGrid({ cursor, byDay, onSlotClick, onOpenDay, onEventClick, onEventDown }: {
  cursor: Date
  byDay: Map<string, EventWithCalendar[]>
  onSlotClick: (start: Date) => void
  onOpenDay: (day: Date) => void
  onEventClick: (ev: EventWithCalendar) => void
  onEventDown: EventDown
}) {
  const scrollRef = useRef<HTMLDivElement>(null)
  const start = startOfWeek(cursor)
  const days = useMemo(() => Array.from({ length: 7 }, (_, i) => addDays(start, i)), [+start])
  const today = new Date()
  const hours = Array.from({ length: 24 }, (_, h) => h)

  // Beim Öffnen auf den Morgen springen – 0 Uhr oben zu zeigen verschenkt
  // den halben Bildschirm an eine Zeit, in der nichts stattfindet.
  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = 7 * HOUR_H
  }, [])

  const cols = `${GUTTER}px repeat(7, minmax(0, 1fr))`
  const nowTop = (today.getHours() * 60 + today.getMinutes()) / 60 * HOUR_H

  /** Klick ins Raster: die angeklickte Stunde, nicht Mitternacht. */
  function slotFromClick(e: MouseEvent<HTMLDivElement>, day: Date) {
    const rect = e.currentTarget.getBoundingClientRect()
    const minutes = ((e.clientY - rect.top) / HOUR_H) * 60
    const d = startOfDay(day)
    // Auf halbe Stunden runden – minutengenau anzuklicken ist Glückssache.
    d.setMinutes(Math.max(0, Math.min(23 * 60 + 30, Math.round(minutes / 30) * 30)))
    return d
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 }}>
      {/* Kopfzeile – der Tag darin öffnet den Tag, wie im Monatsraster. */}
      <div style={{ display: 'grid', gridTemplateColumns: cols, borderBottom: '1px solid var(--color-border)', flexShrink: 0 }}>
        <div />
        {days.map(day => {
          const isToday = isSameDay(day, today)
          return (
            <button key={+day} onClick={() => onOpenDay(day)} className="aether-cal-cell" style={{
              padding: '6px 4px', textAlign: 'center', borderLeft: '1px solid var(--color-border)',
              background: 'transparent', border: 'none', borderLeftWidth: 1, borderLeftStyle: 'solid',
              borderLeftColor: 'var(--color-border)', cursor: 'pointer',
            }}>
              <div style={{ fontSize: 10.5, color: 'var(--color-text-muted)' }}>{weekdayLabels[(day.getDay() + 6) % 7]}</div>
              <span style={{
                fontSize: 14, fontWeight: isToday ? 700 : 500,
                color: isToday ? '#fff' : 'var(--color-text)',
                background: isToday ? 'var(--color-primary)' : 'transparent',
                borderRadius: 12, padding: '1px 7px', display: 'inline-block',
              }}>
                {day.getDate()}
              </span>
            </button>
          )
        })}
      </div>

      {/* Ganztägige Termine – eigene Zeile über dem Stundenraster. */}
      <div style={{ display: 'grid', gridTemplateColumns: cols, borderBottom: '1px solid var(--color-border)', flexShrink: 0, minHeight: 26 }}>
        <div style={{ fontSize: 9.5, color: 'var(--color-text-muted)', padding: '4px 6px', textAlign: 'right' }}>ganztg.</div>
        {days.map(day => (
          <div key={+day} className="aether-cal-cell" onClick={() => onOpenDay(day)}
               style={{ borderLeft: '1px solid var(--color-border)', padding: 2, cursor: 'pointer', minWidth: 0 }}>
            {(byDay.get(dayKey(day)) ?? []).filter(ev => ev.all_day).map(ev => (
              <EventChip key={eventKey(ev)} ev={ev} onClick={() => onEventClick(ev)} onDown={onEventDown} />
            ))}
          </div>
        ))}
      </div>

      {/* Stundenraster */}
      <div ref={scrollRef} style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: cols, height: 24 * HOUR_H, position: 'relative' }}>
          <div style={{ position: 'relative' }}>
            {hours.map(h => (
              <div key={h} style={{
                position: 'absolute', top: h * HOUR_H - 6, right: 6,
                fontSize: 10, color: 'var(--color-text-muted)',
              }}>
                {h > 0 ? `${String(h).padStart(2, '0')}:00` : ''}
              </div>
            ))}
          </div>

          {days.map(day => {
            const slots = layoutDay(byDay.get(dayKey(day)) ?? [], day)
            const isToday = isSameDay(day, today)
            return (
              <div
                key={+day}
                className="aether-cal-cell"
                onClick={e => onSlotClick(slotFromClick(e, day))}
                style={{ position: 'relative', borderLeft: '1px solid var(--color-border)', cursor: 'pointer', minWidth: 0 }}
              >
                {hours.map(h => (
                  <div key={h} style={{
                    position: 'absolute', top: h * HOUR_H, left: 0, right: 0, height: HOUR_H,
                    borderTop: h === 0 ? 'none' : '1px solid var(--color-border)',
                    opacity: 0.6, pointerEvents: 'none',
                  }} />
                ))}

                {isToday && (
                  <div style={{
                    position: 'absolute', top: nowTop, left: 0, right: 0, height: 2,
                    background: 'var(--color-danger)', zIndex: 3, pointerEvents: 'none',
                  }} />
                )}

                {slots.map(({ ev, top, height, col, cols: n }) => (
                  <div
                    key={eventKey(ev)}
                    className="aether-cal-chip"
                    onClick={e => { e.stopPropagation(); onEventClick(ev) }}
                    onPointerDown={e => { e.stopPropagation(); onEventDown(ev, e) }}
                    title={`${ev.summary} – ${timeLabel(ev.startsAt)}`}
                    style={{
                      position: 'absolute', top, height, touchAction: 'none', userSelect: 'none',
                      left: `calc(${(col / n) * 100}% + 2px)`,
                      width: `calc(${100 / n}% - 4px)`,
                      background: ev.color + '2e', borderLeft: `3px solid ${ev.color}`,
                      borderRadius: 4, padding: '2px 4px', overflow: 'hidden', cursor: 'pointer', zIndex: 2,
                    }}
                  >
                    <div style={{ fontSize: 10.5, color: ev.color, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                      {ev.summary || '(ohne Titel)'}{ev.recurring ? ' ↻' : ''}
                    </div>
                    {height > 28 && (
                      <div style={{ fontSize: 9.5, color: 'var(--color-text-muted)' }}>{timeLabel(ev.startsAt)}</div>
                    )}
                  </div>
                ))}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}

function ListAgenda({ events, onEventClick, onEventDown }: {
  events: EventWithCalendar[]
  onEventClick: (ev: EventWithCalendar) => void
  onEventDown: EventDown
}) {
  const groups = useMemo(() => {
    const map = new Map<string, { day: Date; evs: EventWithCalendar[] }>()
    for (const ev of events) {
      for (const day of spannedDays(ev.startsAt, ev.endsAt, ev.all_day)) {
        const key = dayKey(day)
        if (!map.has(key)) map.set(key, { day, evs: [] })
        map.get(key)!.evs.push(ev)
      }
    }
    return [...map.values()]
      .sort((a, b) => +a.day - +b.day)
      .map(g => ({ ...g, evs: g.evs.sort((a, b) => (a.all_day === b.all_day ? +a.startsAt - +b.startsAt : a.all_day ? -1 : 1)) }))
  }, [events])

  if (groups.length === 0) {
    return <p style={{ padding: 24, color: 'var(--color-text-muted)', fontSize: 13 }}>Keine Termine.</p>
  }

  const today = new Date()
  return (
    <div style={{ padding: '12px 20px', overflowY: 'auto', flex: 1 }}>
      {groups.map(({ day, evs }) => (
        <div key={dayKey(day)} style={{ marginBottom: 18 }}>
          <div style={{
            fontSize: 12.5, fontWeight: 600, marginBottom: 6,
            color: isSameDay(day, today) ? 'var(--color-primary)' : 'var(--color-text-muted)',
          }}>
            {weekdayLabels[(day.getDay() + 6) % 7]}, {day.getDate()}. {monthLabels[day.getMonth()]} {day.getFullYear()}
            {isSameDay(day, today) && ' · heute'}
          </div>
          {evs.map(ev => (
            <div key={eventKey(ev)} className="aether-cal-cell"
              onClick={() => onEventClick(ev)}
              onPointerDown={e => onEventDown(ev, e)}
              style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 8,
                cursor: 'pointer', border: '1px solid var(--color-border)', marginBottom: 6,
                // Hier bewusst **kein** touchAction: 'none' wie bei den
                // Terminen im Raster: Die Zeilen füllen die ganze Breite, und
                // eine Liste, die sich nicht mehr scrollen lässt, wäre ein
                // schlechter Tausch für eine Zieh-Geste. Mit der Maus ziehen
                // geht trotzdem.
              }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: ev.color, flexShrink: 0 }} />
              <span style={{ fontSize: 12.5, color: 'var(--color-text-muted)', width: 62, flexShrink: 0 }}>
                {ev.all_day ? 'ganztg.' : timeLabel(ev.startsAt)}
              </span>
              <span style={{ fontSize: 13.5, color: 'var(--color-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {ev.summary || '(ohne Titel)'}{ev.recurring ? ' ↻' : ''}
              </span>
              {ev.location && (
                <span style={{ fontSize: 12, color: 'var(--color-text-muted)', marginLeft: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {ev.location}
                </span>
              )}
            </div>
          ))}
        </div>
      ))}
    </div>
  )
}