/**
 * Live demo for calendar-booking/ui/calendar-settings-panel.
 *
 * Primary source: Labs' CalendarSettings.tsx (branch main, 62ba4fc, 1369
 * lines) — the workspace-scoped operator page at `/calendar`, mounted under
 * `PrivateRoute` ("Bookings" domain, nav.tsx line 133, `App.tsx` line 455).
 * Its one read (`fetchData`, three parallel GETs) and five writes (connect,
 * disconnect, save/delete a meeting type, save the calendar-wide default
 * messages) are replaced by props; the meeting-type form and the default-
 * messages toggle keep their own local `useState`, seeded from props, the
 * same convention identity-auth/ui/admin-users-console's demo uses for its
 * search box and billing-credits/ui/subscription-manager's for its voucher
 * input, so typing and toggling in the docs frame still works.
 *
 * The `admin-variant` state approximates a SECOND, genuinely separate real
 * file: `AdminCalendarSettings.tsx` (969 lines), the platform-admin page at
 * `/admin/calendar` (`AdminRoute`, `App.tsx` line 799, "Operate" domain).
 * It is not a prop branch of one source file the way, say, an admin flag
 * changes one Labs page elsewhere — it is its own component, its own fetch
 * calls (`/api/calendar/admin/*`, no `workspace_id`), and a `MeetingType`
 * type with no `messages` field at all. This recipe reproduces the real,
 * measured differences (named below and in Gotchas) rather than inventing a
 * single unified admin/workspace branch that does not exist in Labs; the
 * admin file is a secondary `reference_impl` entry, not the one this recipe
 * is measured against pixel-for-pixel.
 *
 * What is kept byte-faithful (workspace scope, the primary source): the
 * header, the connection-status card's copy and layout, the meeting-types
 * list row (color bar, duration/location/notice/buffer summary line, the
 * embed-code box always visible under the row), the meeting-type form's
 * field set and its one genuine gap (Data model / Gotchas), the
 * Standard-Nachrichten toggle, the bookings section's today/upcoming/past
 * categorisation with the pulsing "today" summary banner and the collapsed
 * past list sliced to 10, and every string of copy, German (de-CH),
 * including the two dead icon imports (`User`, `Copy`) the source carries
 * and this demo does not re-import.
 *
 * What is different, and why:
 * - `new Date()` (the source's `categorizedBookings` useMemo, line 454) is
 *   replaced by an injected `now` prop: a server-rendered frame and a later
 *   client hydration of the same demo could otherwise categorise a booking
 *   into "today" on one render and "past" on the other if a real clock
 *   crossed midnight between them. Sample data is dated around `now` so the
 *   three buckets are non-empty.
 * - `toLocaleString('de-CH', …)` / `toLocaleDateString('de-CH', …)` (lines
 *   414-450) are replaced with fixed formatters reading UTC getters against
 *   a lookup table, the same class of fix identity-auth/ui/admin-users-
 *   console's demo applies to `toLocaleString()` and this domain's sibling
 *   billing-credits/ui/subscription-manager applies to `toLocaleDateString`:
 *   the browser's ICU data does not have to match Node's for the frame to
 *   render the same text twice.
 * - `AlternativeCalendarConnect` (the iCal/CalDAV card, `disconnected`
 *   state): its header row is reproduced exactly (same `Card`, same copy,
 *   same closed-by-default `Button`), because that row is what the real
 *   page shows before a click. Its open state — two tab forms that call
 *   `GET /api/calendar/workspace/integrations` on mount and POST a feed URL
 *   or CalDAV credentials — is not rendered: it is a separate component, not
 *   part of the four packages a demo may import from (AUTHORING.md), and it
 *   reaches the network on mount, which this demo must not do.
 * - `PrimaMachtsButton` (the AI-companion button beside "Neu" in the
 *   workspace file, `usePrima`/`PrimaContext`-dependent) is not rendered,
 *   the same way billing-credits/ui/subscription-manager does not mount
 *   `SubscriptionModal`: it needs a provider this kit does not carry.
 * - `MessageStepsEditor` (the actual message-step editor, `forms` domain,
 *   not part of the four packages) is not mounted. The Standard-Nachrichten
 *   and per-meeting-type Nachrichten `Toggle`s are real and interactive
 *   (both are `@prima-modules/alchemy-ui` `Toggle`s, nothing page-local);
 *   when a toggle is on, a read-only summary row per configured step (its
 *   type as a `Badge`, its timing as plain text) stands in for the editor.
 * - `window.confirm` before disconnect/delete and `window.open` for the
 *   OAuth popup are not wired — a demo has no user to confirm with and
 *   reaches no network — the same convention subscription-manager's demo
 *   uses for its own `window.confirm`/`window.location.href`. The
 *   `window.addEventListener('message', …)` OAuth-callback listener has
 *   nothing to listen to without a real popup, so it is not attached either.
 * - `navigator.clipboard.writeText` on "copy embed code" is not called; the
 *   copied-checkmark swap it drives is reproduced from local state alone, so
 *   clicking it in the docs frame still shows the checkmark.
 * - Real, structural admin-vs-workspace differences reproduced in
 *   `admin-variant`: no Standard-Nachrichten section and no per-type
 *   Nachrichten toggle (the admin `MeetingType` interface has no `messages`
 *   field, AdminCalendarSettings.tsx lines 57-70); no `AlternativeCalendar
 *   Connect` card (admin is Google-only); the "Neu" button reads "Neuer
 *   Meeting-Typ" (admin line 502) not "Neu"; each meeting-type row expands
 *   on a chevron click into a details grid instead of always showing the
 *   embed box (admin lines 856-905); an "Inaktiv" `Badge` on a disabled
 *   meeting type (admin has this, workspace has no such badge); English
 *   location labels ("Phone Call", "In Person", admin lines 91-96) against
 *   the workspace file's German ones ("Telefon", "Vor Ort") — a real,
 *   unfixed inconsistency between the two files, reproduced not corrected;
 *   bookings render as a flat "Aktuelle Buchungen" list with a raw status
 *   `Badge` (admin lines 912-967) instead of the workspace file's
 *   today/upcoming/past breakdown. The admin meeting-type FORM itself
 *   (which does add address/phone fields the workspace form lacks, drops
 *   the timezone selector for static text, and caps buffers/lookahead
 *   lower) is not rendered here — no state opens it, so it is documented in
 *   this recipe's Gotchas and Reference implementation rather than built,
 *   the same restraint billing-credits/ui/subscription-manager applies to
 *   `SubscriptionModal`'s own body.
 * - Sample data (workspace name, attendee names and e-mails, calendar
 *   account name, every id) is fictional; no id from a real Labs workspace,
 *   Google account or booking is reproduced (AUTHORING.md house rules).
 */
import React, { useState } from 'react';
import {
  Calendar,
  Check,
  ChevronDown,
  ChevronUp,
  Clock,
  Code,
  Copy,
  Edit,
  ExternalLink,
  Link2,
  Link2Off,
  MapPin,
  Phone,
  Plus,
  RefreshCw,
  Trash2,
  Video,
} from 'lucide-react';
import { defineStates } from '@prima-modules/demo';
import { Badge, Button, Card, Heading, Input, Spinner, Text, Textarea, Toggle } from '@prima-modules/alchemy-ui';
import { Shell, type ShellUser, type ShellWorkspace } from '../../../ui-design-system/ui/appshell-navigation/demo';
import { DOMAINS } from '../../../ui-design-system/ui/appshell-navigation/nav';

/* ---- types (CalendarSettings.tsx lines 43-93, AdminCalendarSettings.tsx lines 37-79) ---------- */

export interface CalendarIntegration {
  id: string;
  workspace_id: string | null;
  provider: string;
  provider_account_id: string | null;
  provider_account_name: string | null;
  calendar_id: string;
  timezone: string;
  is_active: boolean;
  connected_at: string | null;
  last_sync_at: string | null;
  is_platform_level: boolean;
}

export interface MessageStep {
  id: string;
  type: 'confirmation' | 'reminder' | 'followup';
  enabled: boolean;
  timing?: { anchor: 'on_event' | 'before_event' | 'after_event'; value: number; unit: 'minutes' | 'hours' | 'days' | 'weeks' };
}

export interface MeetingType {
  id: string;
  calendar_integration_id: string;
  slug: string;
  name: string;
  description: string | null;
  duration_minutes: number;
  buffer_before_minutes: number;
  buffer_after_minutes: number;
  min_notice_hours: number;
  max_days_ahead: number;
  availability_schedule: Record<string, string[]>;
  location_type: string;
  custom_location: string | null;
  zoom_link: string | null;
  phone_number: string | null;
  color: string;
  is_active: boolean;
  /** Workspace scope only: null = inherit the calendar default; [] = deliberately none; [...] = own.
   *  The admin `MeetingType` interface has no such field (AdminCalendarSettings.tsx 57-70) — left
   *  undefined for an admin-scope row. */
  messages?: MessageStep[] | null;
  created_at: string | null;
}

export interface Booking {
  id: string;
  meeting_type_id: string;
  starts_at: string;
  ends_at: string;
  attendee_email: string;
  attendee_name: string;
  meeting_link: string | null;
  location: string | null;
  status: string;
  google_event_link: string | null;
}

export interface MeetingTypeFormState {
  name: string;
  slug: string;
  description: string;
  duration_minutes: number;
  buffer_before_minutes: number;
  buffer_after_minutes: number;
  min_notice_hours: number;
  max_days_ahead: number;
  location_type: string;
  custom_location: string;
  zoom_link: string;
  phone_number: string;
  color: string;
  availability_schedule: Record<string, string[]>;
  messages: MessageStep[] | null;
}

export interface Props {
  /** The signed-in operator, for the shell's account row. `isAdmin` also picks the shell's rail. */
  viewer: ShellUser;
  workspace: ShellWorkspace;
  /** Which real file this state approximates: CalendarSettings.tsx (workspace) or AdminCalendarSettings.tsx (platform-admin). */
  scope: 'workspace' | 'platform-admin';
  /** `loading` is the first fetch (line 546-554, a bare spinner inside the shell); `ok` is any state after. */
  status: 'loading' | 'ok';
  integration: CalendarIntegration | null;
  meetingTypes: MeetingType[];
  bookings: Booking[];
  /** Fixed "now" the bookings categorisation reads instead of `new Date()` (see header comment). */
  now: string;
  message?: { type: 'success' | 'error'; text: string } | null;
  isConnecting?: boolean;
  showPastBookings?: boolean;
  /** Workspace scope only. `null` seeds the toggle off; a non-null array (possibly empty) seeds it on. */
  defaultMessages?: MessageStep[] | null;
  showMeetingTypeForm?: boolean;
  editingMeetingType?: MeetingType | null;
  meetingTypeForm?: MeetingTypeFormState;
  isSavingMeetingType?: boolean;
  /** Admin scope only: which row's details panel starts expanded. */
  expandedMeetingTypeId?: string | null;
}

/* ---- constants (CalendarSettings.tsx 95-120, AdminCalendarSettings.tsx 87-113) ---------------- */

/** The workspace file's labels (German). The admin file's are English (below) — a real, unfixed inconsistency. */
const LOCATION_TYPES_WORKSPACE = [
  { value: 'google_meet', label: 'Google Meet', icon: Video },
  { value: 'zoom', label: 'Zoom', icon: Video },
  { value: 'phone', label: 'Telefon', icon: Phone },
  { value: 'in_person', label: 'Vor Ort', icon: MapPin },
];
const LOCATION_TYPES_ADMIN = [
  { value: 'google_meet', label: 'Google Meet', icon: Video },
  { value: 'zoom', label: 'Zoom', icon: Video },
  { value: 'phone', label: 'Phone Call', icon: Phone },
  { value: 'in_person', label: 'In Person', icon: MapPin },
];

const DAY_LABELS: Record<string, string> = {
  mon: 'Montag', tue: 'Dienstag', wed: 'Mittwoch', thu: 'Donnerstag', fri: 'Freitag', sat: 'Samstag', sun: 'Sonntag',
};
const DEFAULT_SCHEDULE: Record<string, string[]> = {
  mon: ['09:00-17:00'], tue: ['09:00-17:00'], wed: ['09:00-17:00'], thu: ['09:00-17:00'], fri: ['09:00-17:00'], sat: [], sun: [],
};

const MESSAGE_TYPE_LABEL: Record<MessageStep['type'], string> = { confirmation: 'Bestätigung', reminder: 'Erinnerung', followup: 'Follow-up' };
function formatTiming(step: MessageStep): string {
  if (!step.timing) return '';
  const { anchor, value, unit } = step.timing;
  const UNIT_LABEL: Record<string, string> = { minutes: 'Minuten', hours: 'Stunden', days: 'Tage', weeks: 'Wochen' };
  if (anchor === 'on_event') return 'bei Terminbeginn';
  const dir = anchor === 'before_event' ? 'vorher' : 'danach';
  return `${value} ${UNIT_LABEL[unit]} ${dir}`;
}

/* ---- date helpers (replace the source's locale-dependent formatting; see header comment) ------ */

const WEEKDAY_SHORT_DE = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
const pad = (n: number) => String(n).padStart(2, '0');
function formatTime(iso: string): string {
  const d = new Date(iso);
  return `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
}
function formatDateTime(iso: string): string {
  const d = new Date(iso);
  return `${pad(d.getUTCDate())}.${pad(d.getUTCMonth() + 1)}.${d.getUTCFullYear()}, ${formatTime(iso)}`;
}
function utcDayStart(iso: string): number {
  const d = new Date(iso);
  return Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
}
function formatDateShort(iso: string, nowIso: string): string {
  const dayStart = utcDayStart(iso);
  const today = utcDayStart(nowIso);
  const tomorrow = today + 86_400_000;
  if (dayStart === today) return 'Heute';
  if (dayStart === tomorrow) return 'Morgen';
  const d = new Date(iso);
  return `${WEEKDAY_SHORT_DE[d.getUTCDay()]}, ${pad(d.getUTCDate())}.${pad(d.getUTCMonth() + 1)}.`;
}

/** Port of CalendarSettings.tsx's categorizedBookings useMemo (lines 453-483), `now` injected. */
function categorizeBookings(bookings: Booking[], nowIso: string) {
  const todayStart = utcDayStart(nowIso);
  const tomorrowStart = todayStart + 86_400_000;
  const today: Booking[] = [];
  const upcoming: Booking[] = [];
  const past: Booking[] = [];
  const active = bookings.filter((b) => b.status !== 'cancelled');
  for (const b of active) {
    const start = utcDayStart(b.starts_at);
    if (start < todayStart) past.push(b);
    else if (start < tomorrowStart) today.push(b);
    else upcoming.push(b);
  }
  today.sort((a, b) => +new Date(a.starts_at) - +new Date(b.starts_at));
  upcoming.sort((a, b) => +new Date(a.starts_at) - +new Date(b.starts_at));
  past.sort((a, b) => +new Date(b.starts_at) - +new Date(a.starts_at));
  return { today, upcoming, past };
}

function generateSlug(name: string): string {
  return name
    .toLowerCase()
    .replace(/[äöü]/g, (m) => ({ ä: 'ae', ö: 'oe', ü: 'ue' } as Record<string, string>)[m] || m)
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-|-$/g, '');
}

/* ---- sample data ----------------------------------------------------------------------------- */

const viewer: ShellUser = { name: 'Talia Wenger', email: 'talia@example.com', isAdmin: false };
const adminViewer: ShellUser = { name: 'Dario Keller', email: 'dario@example.com', isAdmin: true };
const workspace: ShellWorkspace = { id: 'ws_42', name: 'Studio Feuerstein', slug: 'studio-feuerstein' };

const NOW = '2026-09-12T08:00:00Z';

const googleIntegration: CalendarIntegration = {
  id: 'cal_int_1',
  workspace_id: 'ws_42',
  provider: 'google',
  provider_account_id: 'acct_gcal_sample_1',
  provider_account_name: 'kalender@studio-feuerstein.example',
  calendar_id: 'primary',
  timezone: 'Europe/Zurich',
  is_active: true,
  connected_at: '2026-08-03T09:12:00Z',
  last_sync_at: '2026-09-12T07:40:00Z',
  is_platform_level: false,
};

const platformIntegration: CalendarIntegration = {
  ...googleIntegration,
  id: 'cal_int_platform_1',
  workspace_id: null,
  provider_account_name: 'kalender@prima-platform.example',
  is_platform_level: true,
};

const meetingTypesSample: MeetingType[] = [
  {
    id: 'mt_1', calendar_integration_id: 'cal_int_1', slug: 'erstgespraech', name: 'Erstgespräch',
    description: 'Kurzes Kennenlernen für neue Anfragen.', duration_minutes: 30,
    buffer_before_minutes: 0, buffer_after_minutes: 15, min_notice_hours: 24, max_days_ahead: 28,
    availability_schedule: { ...DEFAULT_SCHEDULE }, location_type: 'google_meet', custom_location: null,
    zoom_link: null, phone_number: null, color: '#6844C4', is_active: true, messages: null,
    created_at: '2026-08-05T10:00:00Z',
  },
  {
    id: 'mt_2', calendar_integration_id: 'cal_int_1', slug: 'strategie-call', name: 'Strategie-Call',
    description: 'Vertiefte Beratung für bestehende Kund:innen.', duration_minutes: 60,
    buffer_before_minutes: 10, buffer_after_minutes: 15, min_notice_hours: 48, max_days_ahead: 45,
    availability_schedule: { ...DEFAULT_SCHEDULE, sat: ['10:00-12:00'] }, location_type: 'zoom',
    custom_location: null, zoom_link: 'https://zoom.us/j/00000000000', phone_number: null,
    color: '#2E8B57', is_active: true, messages: [
      { id: 'msg_1', type: 'confirmation', enabled: true, timing: { anchor: 'on_event', value: 0, unit: 'days' } },
      { id: 'msg_2', type: 'reminder', enabled: true, timing: { anchor: 'before_event', value: 24, unit: 'hours' } },
    ],
    created_at: '2026-08-11T14:30:00Z',
  },
  {
    id: 'mt_3', calendar_integration_id: 'cal_int_1', slug: 'vor-ort-termin', name: 'Vor-Ort-Termin',
    description: null, duration_minutes: 45,
    buffer_before_minutes: 15, buffer_after_minutes: 15, min_notice_hours: 72, max_days_ahead: 21,
    availability_schedule: { ...DEFAULT_SCHEDULE }, location_type: 'in_person',
    custom_location: 'Bahnhofstrasse 12, 8001 Zürich', zoom_link: null, phone_number: null,
    color: '#C4844C', is_active: true, messages: [],
    created_at: '2026-08-20T08:15:00Z',
  },
];

const adminMeetingTypesSample: MeetingType[] = [
  {
    id: 'mt_admin_1', calendar_integration_id: 'cal_int_platform_1', slug: 'onboarding-call', name: 'Onboarding-Call',
    description: 'Erstgespräch für neue Plattform-Kund:innen.', duration_minutes: 30,
    buffer_before_minutes: 0, buffer_after_minutes: 15, min_notice_hours: 24, max_days_ahead: 28,
    availability_schedule: { ...DEFAULT_SCHEDULE }, location_type: 'google_meet', custom_location: null,
    zoom_link: null, phone_number: null, color: '#6844C4', is_active: true,
    created_at: '2026-07-14T09:00:00Z',
  },
  {
    id: 'mt_admin_2', calendar_integration_id: 'cal_int_platform_1', slug: 'partner-check-in', name: 'Partner-Check-in',
    description: 'Vierteljährliches Review mit Agentur-Partnern.', duration_minutes: 45,
    buffer_before_minutes: 10, buffer_after_minutes: 10, min_notice_hours: 48, max_days_ahead: 60,
    availability_schedule: { ...DEFAULT_SCHEDULE }, location_type: 'phone', custom_location: null,
    zoom_link: null, phone_number: '+41 44 000 00 00', color: '#8C8C8C', is_active: false,
    created_at: '2026-06-02T11:00:00Z',
  },
];

const bookingsSample: Booking[] = [
  { id: 'bk_1', meeting_type_id: 'mt_1', starts_at: '2026-09-12T09:00:00Z', ends_at: '2026-09-12T09:30:00Z', attendee_email: 'lea.furrer@example.com', attendee_name: 'Lea Furrer', meeting_link: 'https://meet.example.com/erstgespraech-lea', location: null, status: 'confirmed', google_event_link: 'https://calendar.example.com/event/1' },
  { id: 'bk_2', meeting_type_id: 'mt_2', starts_at: '2026-09-12T13:00:00Z', ends_at: '2026-09-12T14:00:00Z', attendee_email: 'noah.meier@example.com', attendee_name: 'Noah Meier', meeting_link: 'https://zoom.us/j/00000000000', location: null, status: 'confirmed', google_event_link: 'https://calendar.example.com/event/2' },
  { id: 'bk_3', meeting_type_id: 'mt_1', starts_at: '2026-09-13T10:00:00Z', ends_at: '2026-09-13T10:30:00Z', attendee_email: 'sina.baumann@example.com', attendee_name: 'Sina Baumann', meeting_link: null, location: null, status: 'confirmed', google_event_link: 'https://calendar.example.com/event/3' },
  { id: 'bk_4', meeting_type_id: 'mt_3', starts_at: '2026-09-16T15:00:00Z', ends_at: '2026-09-16T15:45:00Z', attendee_email: 'jonas.rieder@example.com', attendee_name: 'Jonas Rieder', meeting_link: null, location: 'Bahnhofstrasse 12, 8001 Zürich', status: 'confirmed', google_event_link: null },
  { id: 'bk_5', meeting_type_id: 'mt_2', starts_at: '2026-09-10T09:00:00Z', ends_at: '2026-09-10T10:00:00Z', attendee_email: 'mira.suter@example.com', attendee_name: 'Mira Suter', meeting_link: null, location: null, status: 'confirmed', google_event_link: 'https://calendar.example.com/event/5' },
  { id: 'bk_cancelled', meeting_type_id: 'mt_1', starts_at: '2026-09-14T09:00:00Z', ends_at: '2026-09-14T09:30:00Z', attendee_email: 'declined@example.com', attendee_name: 'Elias Roth', meeting_link: null, location: null, status: 'cancelled', google_event_link: null },
  // 11 more past bookings, literal and fictional, so the collapsed list demonstrates its "+N weitere" overflow (source line 1341).
  ...Array.from({ length: 11 }, (_, i) => ({
    id: `bk_past_${i}`,
    meeting_type_id: i % 2 === 0 ? 'mt_1' : 'mt_2',
    starts_at: `2026-08-${String(20 - i).padStart(2, '0')}T09:00:00Z`,
    ends_at: `2026-08-${String(20 - i).padStart(2, '0')}T09:30:00Z`,
    attendee_email: `kontakt${i}@example.com`,
    attendee_name: `Kontakt ${i + 1}`,
    meeting_link: null,
    location: null,
    status: 'confirmed',
    google_event_link: null,
  })),
];

const adminBookingsSample: Booking[] = [
  { id: 'bk_admin_1', meeting_type_id: 'mt_admin_1', starts_at: '2026-09-12T11:00:00Z', ends_at: '2026-09-12T11:30:00Z', attendee_email: 'partner1@example.com', attendee_name: 'Agentur Nordlicht', meeting_link: null, location: null, status: 'confirmed', google_event_link: 'https://calendar.example.com/event/a1' },
  { id: 'bk_admin_2', meeting_type_id: 'mt_admin_2', starts_at: '2026-09-15T14:00:00Z', ends_at: '2026-09-15T14:45:00Z', attendee_email: 'partner2@example.com', attendee_name: 'Kollektiv Aare', meeting_link: null, location: null, status: 'pending', google_event_link: null },
  { id: 'bk_admin_3', meeting_type_id: 'mt_admin_1', starts_at: '2026-09-08T09:00:00Z', ends_at: '2026-09-08T09:30:00Z', attendee_email: 'partner3@example.com', attendee_name: 'Studio Winkel', meeting_link: null, location: null, status: 'cancelled', google_event_link: null },
];

const defaultMeetingTypeForm: MeetingTypeFormState = {
  name: '', slug: '', description: '', duration_minutes: 60, buffer_before_minutes: 0, buffer_after_minutes: 15,
  min_notice_hours: 24, max_days_ahead: 28, location_type: 'google_meet', custom_location: '', zoom_link: '',
  phone_number: '', color: '#6844C4', availability_schedule: { ...DEFAULT_SCHEDULE }, messages: null,
};

const base: Props = {
  viewer,
  workspace,
  scope: 'workspace',
  status: 'ok',
  integration: googleIntegration,
  meetingTypes: meetingTypesSample,
  bookings: bookingsSample,
  now: NOW,
  message: null,
  isConnecting: false,
  showPastBookings: false,
  defaultMessages: [
    { id: 'default_1', type: 'confirmation', enabled: true, timing: { anchor: 'on_event', value: 0, unit: 'days' } },
    { id: 'default_2', type: 'reminder', enabled: true, timing: { anchor: 'before_event', value: 24, unit: 'hours' } },
  ],
  showMeetingTypeForm: false,
  editingMeetingType: null,
  meetingTypeForm: defaultMeetingTypeForm,
  isSavingMeetingType: false,
};

export const states = defineStates<Props>({
  loading: {
    label: 'First fetch: the bare spinner inside the shell, before the integration is known (line 546-554)',
    props: { ...base, status: 'loading', integration: null, meetingTypes: [], bookings: [] },
    height: 560, viewport: 1440,
  },
  disconnected: {
    label: 'No calendar connected: the Verbinden card plus the closed iCal/CalDAV alternative-connect header',
    props: { ...base, integration: null, meetingTypes: [], bookings: [], defaultMessages: null },
    height: 620, viewport: 1440,
  },
  'connected-empty': {
    label: 'Google connected, no meeting types or bookings yet: the two empty-state cards, Standard-Nachrichten off',
    props: { ...base, meetingTypes: [], bookings: [], defaultMessages: null },
    height: 1100, viewport: 1440,
  },
  populated: {
    label: 'Three meeting types, bookings across today/upcoming/past (collapsed), Standard-Nachrichten on',
    props: base,
    height: 2400, viewport: 1440,
  },
  'meeting-type-form-open': {
    label: 'Creating a meeting type: the form open over the existing list, per-type Nachrichten inheriting the default',
    props: { ...base, showMeetingTypeForm: true, meetingTypeForm: { ...defaultMeetingTypeForm, name: 'Discovery Call', slug: 'discovery-call' } },
    height: 2800, viewport: 1440,
  },
  'admin-variant': {
    label: 'Platform-admin at /admin/calendar: no Standard-Nachrichten, one row expanded, a flat Aktuelle-Buchungen list',
    props: {
      ...base,
      viewer: adminViewer,
      scope: 'platform-admin',
      integration: platformIntegration,
      meetingTypes: adminMeetingTypesSample,
      bookings: adminBookingsSample,
      defaultMessages: null,
      expandedMeetingTypeId: 'mt_admin_1',
    },
    height: 1500, viewport: 1440,
  },
});

/* ---- the page (Kalender/Kalender-Integration) ---------------------------------------------- */

type PageProps = Omit<Props, 'viewer' | 'workspace'>;

function CalendarPanel({
  scope,
  status,
  integration,
  meetingTypes,
  bookings,
  now,
  message = null,
  isConnecting = false,
  showPastBookings: showPastBookingsInitial = false,
  defaultMessages: defaultMessagesInitial = null,
  showMeetingTypeForm: showMeetingTypeFormInitial = false,
  editingMeetingType = null,
  meetingTypeForm: meetingTypeFormInitial = defaultMeetingTypeForm,
  isSavingMeetingType = false,
  expandedMeetingTypeId: expandedInitial = null,
}: PageProps) {
  const [showPastBookings, setShowPastBookings] = useState(showPastBookingsInitial);
  const [defaultMessages, setDefaultMessages] = useState<MessageStep[] | null>(defaultMessagesInitial);
  const [showMeetingTypeForm, setShowMeetingTypeForm] = useState(showMeetingTypeFormInitial);
  const [form, setForm] = useState<MeetingTypeFormState>(meetingTypeFormInitial);
  const [expandedMeetingTypeId, setExpandedMeetingTypeId] = useState<string | null>(expandedInitial);
  const [copiedId, setCopiedId] = useState<string | null>(null);

  const isAdmin = scope === 'platform-admin';
  const LOCATION_TYPES = isAdmin ? LOCATION_TYPES_ADMIN : LOCATION_TYPES_WORKSPACE;
  const locationLabel = (value: string) => LOCATION_TYPES.find((lt) => lt.value === value)?.label;

  if (status === 'loading') {
    return (
      <div className="flex items-center justify-center h-[480px]">
        <Spinner size="xl" color="primary" label="Laden..." />
      </div>
    );
  }

  const googleConnected = isAdmin ? !!integration : integration?.provider === 'google';
  const { today, upcoming, past } = categorizeBookings(bookings, now);

  return (
    <div className={`${isAdmin ? 'max-w-6xl' : 'max-w-4xl'} mx-auto p-6`}>
      {/* Header */}
      <div className="mb-8 flex items-center justify-between">
        <div>
          <Heading level={1} className="mb-2 flex items-center gap-3">
            <Calendar className="w-8 h-8 text-[#6844C4]" />
            {isAdmin ? 'Kalender-Integration' : 'Kalender'}
          </Heading>
          <Text muted>
            {isAdmin
              ? 'Google Calendar verbinden und Meeting-Typen für das Onboarding verwalten'
              : 'Verbinde deinen Google Calendar und erstelle buchbare Termine'}
          </Text>
        </div>
        {integration && (
          <Button variant="ghost" size="sm">
            <RefreshCw className="w-4 h-4 mr-2" />
            Aktualisieren
          </Button>
        )}
      </div>

      {message && (
        <Card variant="glass" padding="md" className={`mb-6 ${message.type === 'success' ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}`}>
          <Text className={message.type === 'success' ? 'text-green-800' : 'text-red-800'}>{message.text}</Text>
        </Card>
      )}

      {/* Connection status */}
      <Card variant="glass" padding="lg" className="mb-8">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${googleConnected ? 'bg-green-100' : 'bg-stone-100'}`}>
              {googleConnected ? <Link2 className="w-6 h-6 text-green-600" /> : <Link2Off className="w-6 h-6 text-ink-60" />}
            </div>
            <div>
              <Text weight="semibold" size="lg">{googleConnected ? 'Google Calendar verbunden' : 'Google Calendar nicht verbunden'}</Text>
              {googleConnected && integration && (
                <Text muted size="sm">
                  {integration.provider_account_name} ({integration.provider_account_id})
                  {isAdmin && integration.connected_at && <span className="ml-2">• Verbunden am {formatDateTime(integration.connected_at)}</span>}
                </Text>
              )}
            </div>
          </div>
          <div>
            {googleConnected ? (
              <Button variant="outline" size="sm">
                <Link2Off className="w-4 h-4 mr-2" />
                Trennen
              </Button>
            ) : (
              <Button variant="primary" size="sm" disabled={isConnecting}>
                <Link2 className="w-4 h-4 mr-2" />
                {isAdmin ? 'Google Calendar verbinden' : 'Verbinden'}
              </Button>
            )}
          </div>
        </div>
      </Card>

      {/* Alternative (iCal/CalDAV) connect — workspace only, and only while Google is not the active provider. */}
      {!isAdmin && !googleConnected && (
        <Card variant="glass" padding="lg" className="mb-8">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 rounded-xl flex items-center justify-center bg-stone-100">
                <Calendar className="w-6 h-6 text-ink-60" />
              </div>
              <div>
                <Text weight="semibold" size="lg">Andere Kalender (iCal · CalDAV)</Text>
                <Text muted size="sm">Hostpoint, Fastmail, mailbox.org, ProtonCalendar — ohne OAuth.</Text>
              </div>
            </div>
            <Button variant="outline" size="sm">Verbinden</Button>
          </div>
        </Card>
      )}

      {/* Standard-Nachrichten — workspace only */}
      {!isAdmin && integration && (
        <Card className="mb-6">
          <div className="flex items-start justify-between gap-4 mb-3">
            <div>
              <Heading level={2}>Standard-Nachrichten</Heading>
              <Text size="sm" muted className="mt-1">
                Gelten für alle Meeting-Typen, die keine eigenen Nachrichten haben. Platzhalter: <code>{'{{name}}'}</code>, <code>{'{{meeting}}'}</code>, <code>{'{{date}}'}</code>, <code>{'{{time}}'}</code>, <code>{'{{location}}'}</code>.
              </Text>
            </div>
            <Toggle checked={defaultMessages !== null} onChange={(on: boolean) => setDefaultMessages(on ? [] : null)} />
          </div>
          {defaultMessages === null ? (
            <Text size="sm" muted>Keine Standard-Nachrichten. Einschalten, um eine Bestätigung, eine Erinnerung oder ein Follow-up für alle Termine zu schreiben.</Text>
          ) : (
            <MessageStepsSummary steps={defaultMessages} />
          )}
        </Card>
      )}

      {/* Meeting types */}
      {integration && (
        <>
          <div className="mb-4 flex items-center justify-between">
            <Heading level={2}>Meeting-Typen</Heading>
            <Button variant="primary" size="sm" onClick={() => setShowMeetingTypeForm(true)}>
              <Plus className="w-4 h-4 mr-2" />
              {isAdmin ? 'Neuer Meeting-Typ' : 'Neu'}
            </Button>
          </div>

          {!isAdmin && showMeetingTypeForm && (
            <MeetingTypeForm
              form={form}
              setForm={setForm}
              editing={!!editingMeetingType}
              isSaving={isSavingMeetingType}
              integration={integration}
              onCancel={() => setShowMeetingTypeForm(false)}
            />
          )}

          {meetingTypes.length === 0 ? (
            <Card variant="glass" padding="lg" className={`text-center ${isAdmin ? 'mb-8' : ''}`}>
              <Calendar className="w-12 h-12 mx-auto mb-4 text-ink-40" />
              <Text muted>{isAdmin ? 'Noch keine Meeting-Typen erstellt. Erstelle deinen ersten Meeting-Typ für das Onboarding.' : 'Noch keine Meeting-Typen. Erstelle deinen ersten buchbaren Termin.'}</Text>
            </Card>
          ) : (
            <div className={`space-y-4 ${isAdmin ? 'mb-8' : ''}`}>
              {meetingTypes.map((mt) =>
                isAdmin ? (
                  <AdminMeetingTypeRow
                    key={mt.id}
                    mt={mt}
                    expanded={expandedMeetingTypeId === mt.id}
                    copied={copiedId === mt.id}
                    onToggleExpand={() => setExpandedMeetingTypeId(expandedMeetingTypeId === mt.id ? null : mt.id)}
                    onCopy={() => { setCopiedId(mt.id); setTimeout(() => setCopiedId(null), 2000); }}
                    locationLabel={locationLabel}
                  />
                ) : (
                  <WorkspaceMeetingTypeRow
                    key={mt.id}
                    mt={mt}
                    copied={copiedId === mt.id}
                    onCopy={() => { setCopiedId(mt.id); setTimeout(() => setCopiedId(null), 2000); }}
                    locationLabel={locationLabel}
                  />
                )
              )}
            </div>
          )}

          {/* Bookings */}
          {isAdmin ? (
            <div>
              <div className="mb-4"><Heading level={2}>Aktuelle Buchungen</Heading></div>
              {bookings.length === 0 ? (
                <Card variant="glass" padding="lg" className="text-center">
                  <Calendar className="w-12 h-12 mx-auto mb-4 text-ink-40" />
                  <Text muted>Noch keine Buchungen vorhanden</Text>
                </Card>
              ) : (
                <div className="space-y-3">
                  {bookings.map((booking) => (
                    <Card key={booking.id} variant="glass" padding="md">
                      <div className="flex items-center justify-between">
                        <div>
                          <Text weight="medium">{booking.attendee_name}</Text>
                          <Text muted size="sm">{booking.attendee_email}</Text>
                        </div>
                        <div className="text-right">
                          <Text size="sm">{formatDateTime(booking.starts_at)}</Text>
                          <Badge variant={booking.status === 'confirmed' ? 'success' : booking.status === 'cancelled' ? 'error' : 'secondary'} size="sm">{booking.status}</Badge>
                        </div>
                        {booking.google_event_link && (
                          <a href={booking.google_event_link} target="_blank" rel="noopener noreferrer" className="ml-2">
                            <ExternalLink className="w-4 h-4 text-ink-60 hover:text-[#6844C4]" />
                          </a>
                        )}
                      </div>
                    </Card>
                  ))}
                </div>
              )}
            </div>
          ) : (
            <div className="mt-10">
              <Heading level={2} className="mb-4">Gebuchte Termine</Heading>

              {bookings.length > 0 && (today.length > 0 || upcoming.length > 0) && (
                <Card variant="glass" padding="md" className="mb-6 bg-gradient-to-r from-[#6844C4]/5 to-transparent border-l-4 border-[#6844C4]">
                  <div className="flex items-center gap-4">
                    <div className="w-10 h-10 rounded-full bg-[#6844C4]/10 flex items-center justify-center">
                      <Calendar className="w-5 h-5 text-[#6844C4]" />
                    </div>
                    <div>
                      {today.length > 0 ? (
                        <>
                          <Text weight="semibold">{today.length === 1 ? 'Ein Termin heute' : `${today.length} Termine heute`}</Text>
                          <Text muted size="sm">Nächster: {formatTime(today[0].starts_at)} - {today[0].attendee_name}</Text>
                        </>
                      ) : (
                        <>
                          <Text weight="semibold">Kein Termin heute</Text>
                          <Text muted size="sm">Nächster: {formatDateShort(upcoming[0].starts_at, now)} {formatTime(upcoming[0].starts_at)}</Text>
                        </>
                      )}
                    </div>
                  </div>
                </Card>
              )}

              {bookings.length === 0 ? (
                <Card variant="glass" padding="lg" className="text-center">
                  <Calendar className="w-12 h-12 mx-auto mb-4 text-ink-40" />
                  <Text muted>Noch keine Buchungen vorhanden.</Text>
                </Card>
              ) : (
                <div className="space-y-6">
                  {today.length > 0 && (
                    <div>
                      <Text weight="semibold" size="sm" className="mb-3 text-green-600 flex items-center gap-2">
                        <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
                        Heute ({today.length})
                      </Text>
                      <div className="space-y-2">
                        {today.map((booking) => {
                          const mt = meetingTypes.find((m) => m.id === booking.meeting_type_id);
                          return (
                            <Card key={booking.id} variant="glass" padding="sm" className="border-l-4 border-green-500">
                              <div className="flex items-center justify-between">
                                <div className="flex items-center gap-3">
                                  <div className="text-center min-w-[50px]"><Text weight="semibold" size="lg">{formatTime(booking.starts_at)}</Text></div>
                                  <div>
                                    <Text weight="medium">{booking.attendee_name}</Text>
                                    <Text muted size="sm">{booking.attendee_email}</Text>
                                    {mt && <Text muted size="xs">{mt.name} - {mt.duration_minutes} Min.</Text>}
                                  </div>
                                </div>
                                <div className="flex items-center gap-2">
                                  {booking.meeting_link && <Button variant="primary" size="sm"><Video className="w-4 h-4 mr-1" />Meeting</Button>}
                                  {booking.google_event_link && <Button variant="ghost" size="sm" title="In Google Calendar öffnen"><ExternalLink className="w-4 h-4" /></Button>}
                                </div>
                              </div>
                            </Card>
                          );
                        })}
                      </div>
                    </div>
                  )}

                  {upcoming.length > 0 && (
                    <div>
                      <Text weight="semibold" size="sm" className="mb-3 text-[#6844C4] flex items-center gap-2">
                        <Clock className="w-4 h-4" />
                        Bevorstehend ({upcoming.length})
                      </Text>
                      <div className="space-y-2">
                        {upcoming.map((booking) => {
                          const mt = meetingTypes.find((m) => m.id === booking.meeting_type_id);
                          return (
                            <Card key={booking.id} variant="glass" padding="sm">
                              <div className="flex items-center justify-between">
                                <div className="flex items-center gap-3">
                                  <div className="text-center min-w-[70px]">
                                    <Text weight="semibold" size="sm">{formatDateShort(booking.starts_at, now)}</Text>
                                    <Text muted size="xs">{formatTime(booking.starts_at)}</Text>
                                  </div>
                                  <div>
                                    <Text weight="medium">{booking.attendee_name}</Text>
                                    <Text muted size="sm">{booking.attendee_email}</Text>
                                    {mt && <Text muted size="xs">{mt.name}</Text>}
                                  </div>
                                </div>
                                {booking.google_event_link && <Button variant="ghost" size="sm" title="In Google Calendar öffnen"><ExternalLink className="w-4 h-4" /></Button>}
                              </div>
                            </Card>
                          );
                        })}
                      </div>
                    </div>
                  )}

                  {past.length > 0 && (
                    <div>
                      <button onClick={() => setShowPastBookings(!showPastBookings)} className="w-full flex items-center justify-between py-2 text-left">
                        <Text muted size="sm">Vergangene Termine ({past.length})</Text>
                        {showPastBookings ? <ChevronUp className="w-4 h-4 text-ink-60" /> : <ChevronDown className="w-4 h-4 text-ink-60" />}
                      </button>
                      {showPastBookings && (
                        <div className="space-y-2 mt-2">
                          {past.slice(0, 10).map((booking) => {
                            const mt = meetingTypes.find((m) => m.id === booking.meeting_type_id);
                            return (
                              <Card key={booking.id} variant="glass" padding="sm" className="opacity-60">
                                <div className="flex items-center gap-3">
                                  <div className="text-center min-w-[70px]">
                                    <Text muted size="sm">{formatDateShort(booking.starts_at, now)}</Text>
                                    <Text muted size="xs">{formatTime(booking.starts_at)}</Text>
                                  </div>
                                  <div>
                                    <Text muted weight="medium">{booking.attendee_name}</Text>
                                    <Text muted size="sm">{booking.attendee_email}</Text>
                                    {mt && <Text muted size="xs">{mt.name}</Text>}
                                  </div>
                                </div>
                              </Card>
                            );
                          })}
                          {past.length > 10 && <Text muted size="sm" className="text-center py-2">+ {past.length - 10} weitere vergangene Termine</Text>}
                        </div>
                      )}
                    </div>
                  )}

                  {today.length === 0 && upcoming.length === 0 && past.length === 0 && (
                    <Card variant="glass" padding="lg" className="text-center"><Text muted>Keine Termine gefunden.</Text></Card>
                  )}
                </div>
              )}
            </div>
          )}
        </>
      )}
    </div>
  );
}

function MessageStepsSummary({ steps }: { steps: MessageStep[] }) {
  if (steps.length === 0) {
    return <Text size="xs" muted>Eingeschaltet, aber noch keine Nachricht geschrieben.</Text>;
  }
  return (
    <div className="space-y-2">
      {steps.map((step) => (
        <div key={step.id} className="flex items-center gap-2">
          <Badge variant="secondary" size="sm">{MESSAGE_TYPE_LABEL[step.type]}</Badge>
          <Text size="xs" muted>{formatTiming(step)}</Text>
        </div>
      ))}
      <Text size="xs" muted className="pt-1">Der Editor (MessageStepsEditor, forms-Domäne) ist nicht Teil dieses Kits.</Text>
    </div>
  );
}

function WorkspaceMeetingTypeRow({ mt, copied, onCopy, locationLabel }: { mt: MeetingType; copied: boolean; onCopy: () => void; locationLabel: (v: string) => string | undefined }) {
  const embed = `<iframe src="https://api.example.com/api/calendar/embed/${mt.slug}" width="100%" height="600" frameborder="0"></iframe>`;
  return (
    <Card variant="glass" padding="md">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="w-3 h-12 rounded-full" style={{ backgroundColor: mt.color }} />
          <div>
            <Text weight="semibold">{mt.name}</Text>
            <Text muted size="sm" className="flex items-center gap-2 flex-wrap">
              <Clock className="w-3 h-3" />
              {mt.duration_minutes} Min.
              <span className="mx-1">•</span>
              {locationLabel(mt.location_type)}
              <span className="mx-1">•</span>
              Vorlauf {mt.min_notice_hours}h
              <span className="mx-1">•</span>
              Puffer {mt.buffer_before_minutes}/{mt.buffer_after_minutes} Min.
            </Text>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="sm" onClick={onCopy} title="Embed-Code kopieren">
            {copied ? <Check className="w-4 h-4 text-green-500" /> : <Code className="w-4 h-4" />}
          </Button>
          <Button variant="ghost" size="sm"><Edit className="w-4 h-4" /></Button>
          <Button variant="ghost" size="sm"><Trash2 className="w-4 h-4 text-red-500" /></Button>
        </div>
      </div>
      <div className="mt-3 p-3 bg-stone-100 rounded-lg">
        <Text muted size="xs" className="mb-1 flex items-center gap-1"><Code className="w-3 h-3" />Embed-Code</Text>
        <code className="text-xs break-all">{embed}</code>
      </div>
    </Card>
  );
}

function AdminMeetingTypeRow({ mt, expanded, copied, onToggleExpand, onCopy, locationLabel }: { mt: MeetingType; expanded: boolean; copied: boolean; onToggleExpand: () => void; onCopy: () => void; locationLabel: (v: string) => string | undefined }) {
  const embed = `<iframe src="https://api.example.com/api/calendar/embed/${mt.slug}" width="100%" height="600" frameborder="0"></iframe>`;
  return (
    <Card variant="glass" padding="md">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="w-3 h-12 rounded-full" style={{ backgroundColor: mt.color }} />
          <div>
            <div className="flex items-center gap-2">
              <Text weight="semibold">{mt.name}</Text>
              {!mt.is_active && <Badge variant="secondary" size="sm">Inaktiv</Badge>}
            </div>
            <Text muted size="sm" className="flex items-center gap-2">
              <Clock className="w-3 h-3" />
              {mt.duration_minutes} Min.
              <span className="mx-1">•</span>
              {locationLabel(mt.location_type)}
              <span className="mx-1">•</span>
              /{mt.slug}
            </Text>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="sm" onClick={onCopy} title="Embed-Code kopieren">
            {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
          </Button>
          <Button variant="ghost" size="sm"><Edit className="w-4 h-4" /></Button>
          <Button variant="ghost" size="sm"><Trash2 className="w-4 h-4 text-red-500" /></Button>
          <Button variant="ghost" size="sm" onClick={onToggleExpand}>
            {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
          </Button>
        </div>
      </div>
      {expanded && (
        <div className="mt-4 pt-4 border-t border-line">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
            <div><Text muted size="xs">Mindestvorlauf</Text><Text>{mt.min_notice_hours}h</Text></div>
            <div><Text muted size="xs">Max. Tage voraus</Text><Text>{mt.max_days_ahead}</Text></div>
            <div><Text muted size="xs">Puffer vorher</Text><Text>{mt.buffer_before_minutes} Min.</Text></div>
            <div><Text muted size="xs">Puffer nachher</Text><Text>{mt.buffer_after_minutes} Min.</Text></div>
          </div>
          {mt.description && <div className="mt-3"><Text muted size="xs">Beschreibung</Text><Text size="sm">{mt.description}</Text></div>}
          <div className="mt-4 p-3 bg-stone-100 rounded-lg">
            <Text muted size="xs" className="mb-2">Embed-Code</Text>
            <code className="text-xs break-all">{embed}</code>
          </div>
        </div>
      )}
    </Card>
  );
}

/**
 * The workspace form (CalendarSettings.tsx 758-1086). Genuine, reproduced gap (Data model / Gotchas): only the
 * `zoom_link` field is conditionally rendered for its location type (843-857) — `custom_location` (in_person) and
 * `phone_number` (phone) have no input anywhere in this form, unlike the admin file's form (which has both, not
 * rendered here since no state opens it, see the header comment).
 */
function MeetingTypeForm({ form, setForm, editing, isSaving, integration, onCancel }: {
  form: MeetingTypeFormState; setForm: (f: MeetingTypeFormState) => void; editing: boolean; isSaving: boolean; integration: CalendarIntegration; onCancel: () => void;
}) {
  return (
    <Card variant="glass" padding="lg" className="mb-6">
      <Heading level={3} className="mb-4">{editing ? 'Meeting-Typ bearbeiten' : 'Neuer Meeting-Typ'}</Heading>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <Text as="label" size="sm" weight="medium" className="block mb-2">Name</Text>
          <Input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value, slug: editing ? form.slug : generateSlug(e.target.value) })} placeholder="z.B. Discovery Call" />
        </div>
        <div>
          <Text as="label" size="sm" weight="medium" className="block mb-2">Slug (URL)</Text>
          <Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="discovery-call" disabled={editing} />
        </div>
        <div className="md:col-span-2">
          <Text as="label" size="sm" weight="medium" className="block mb-2">Beschreibung</Text>
          <Textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optionale Beschreibung" rows={2} />
        </div>
        <div>
          <Text as="label" size="sm" weight="medium" className="block mb-2">Dauer (Minuten)</Text>
          <Input type="number" value={form.duration_minutes} onChange={(e) => setForm({ ...form, duration_minutes: parseInt(e.target.value) || 60 })} min={15} max={480} />
        </div>
        <div>
          <Text as="label" size="sm" weight="medium" className="block mb-2">Meeting-Ort</Text>
          <select value={form.location_type} onChange={(e) => setForm({ ...form, location_type: e.target.value })} className="w-full px-3 py-2 rounded-lg border border-line bg-white">
            {LOCATION_TYPES_WORKSPACE.map((lt) => <option key={lt.value} value={lt.value}>{lt.label}</option>)}
          </select>
        </div>
        {form.location_type === 'zoom' && (
          <div className="md:col-span-2">
            <Text as="label" size="sm" weight="medium" className="block mb-2">Zoom Link</Text>
            <Input type="url" value={form.zoom_link} onChange={(e) => setForm({ ...form, zoom_link: e.target.value })} placeholder="https://zoom.us/j/..." />
          </div>
        )}
        <div>
          <Text as="label" size="sm" weight="medium" className="block mb-2">Farbe</Text>
          <div className="flex items-center gap-2">
            <input type="color" value={form.color} onChange={(e) => setForm({ ...form, color: e.target.value })} className="w-10 h-10 rounded cursor-pointer" />
            <Input type="text" value={form.color} onChange={(e) => setForm({ ...form, color: e.target.value })} className="flex-1" />
          </div>
        </div>
        <div>
          <Text as="label" size="sm" weight="medium" className="block mb-2">Mindestvorlauf (Stunden)</Text>
          <Input type="number" value={form.min_notice_hours} onChange={(e) => setForm({ ...form, min_notice_hours: parseInt(e.target.value) || 24 })} min={0} max={168} />
        </div>
        <div>
          <Text as="label" size="sm" weight="medium" className="block mb-2">Max. Tage im Voraus</Text>
          <Input type="number" value={form.max_days_ahead} onChange={(e) => setForm({ ...form, max_days_ahead: parseInt(e.target.value) || 28 })} min={1} max={365} />
        </div>
        <div>
          <Text as="label" size="sm" weight="medium" className="block mb-2">Puffer vorher (Min.)</Text>
          <Input type="number" value={form.buffer_before_minutes} onChange={(e) => setForm({ ...form, buffer_before_minutes: parseInt(e.target.value) || 0 })} min={0} max={120} />
        </div>
        <div>
          <Text as="label" size="sm" weight="medium" className="block mb-2">Puffer nachher (Min.)</Text>
          <Input type="number" value={form.buffer_after_minutes} onChange={(e) => setForm({ ...form, buffer_after_minutes: parseInt(e.target.value) || 15 })} min={0} max={120} />
        </div>
      </div>

      <div className="mt-6">
        <Text as="label" size="sm" weight="medium" className="block mb-2">Zeitzone</Text>
        <select value={integration.timezone} disabled className="w-full rounded-lg border border-line bg-white px-3 py-2 text-sm">
          <option>{integration.timezone}</option>
        </select>
        <Text size="xs" muted className="mt-1">Alle Verfügbarkeitszeiten beziehen sich auf diese Zeitzone.</Text>
      </div>

      <div className="mt-6">
        <Text as="label" size="sm" weight="medium" className="block mb-3">Verfügbarkeit ({integration.timezone})</Text>
        <div className="space-y-2">
          {Object.entries(DAY_LABELS).map(([day, label]) => (
            <div key={day} className="flex items-center gap-3">
              <Text className="w-24 shrink-0">{label}</Text>
              <Input
                type="text"
                value={(form.availability_schedule[day] || []).join(', ')}
                onChange={(e) => setForm({ ...form, availability_schedule: { ...form.availability_schedule, [day]: e.target.value.split(',').map((t) => t.trim()).filter(Boolean) } })}
                placeholder="z.B. 09:00-12:00, 14:00-17:00"
                className="flex-1"
              />
            </div>
          ))}
          <Text size="xs" muted className="mt-1">Format: HH:MM-HH:MM. Mehrere Zeitfenster mit Komma trennen. Leer lassen = nicht verfügbar.</Text>
        </div>
      </div>

      <div className="mt-6 pt-6 border-t border-line">
        <div className="flex items-start justify-between gap-4 mb-3">
          <div>
            <Text as="label" size="sm" weight="medium" className="block">Nachrichten</Text>
            <Text size="xs" muted className="mt-0.5">Bestätigung, Erinnerung und Follow-up per E-Mail. Platzhalter: <code>{'{{name}}'}</code>, <code>{'{{meeting}}'}</code>, <code>{'{{date}}'}</code>, <code>{'{{time}}'}</code>, <code>{'{{location}}'}</code>.</Text>
          </div>
          <Toggle checked={form.messages !== null} onChange={(on: boolean) => setForm({ ...form, messages: on ? [] : null })} />
        </div>
        {form.messages === null ? (
          <Text size="xs" muted>Verwendet die Standard-Nachrichten des Kalenders. Einschalten, um für diesen Meeting-Typ eigene zu schreiben.</Text>
        ) : (
          <MessageStepsSummary steps={form.messages} />
        )}
      </div>

      <div className="mt-6 flex items-center gap-3">
        <Button variant="primary" disabled={isSaving || !form.name || !form.slug}>
          {editing ? 'Speichern' : 'Erstellen'}
        </Button>
        <Button variant="ghost" onClick={onCancel}>Abbrechen</Button>
      </div>
    </Card>
  );
}

export default function Demo({ viewer: pageViewer, workspace: ws, galleryMode, ...page }: Props & { galleryMode?: boolean }) {
  const activePath = page.scope === 'platform-admin' ? '/admin/calendar' : '/calendar';
  return (
    <Shell domains={DOMAINS} user={pageViewer} workspaces={[ws]} currentWorkspaceId={ws.id} activePath={activePath} hasTour={false} hideChrome={galleryMode}>
      <CalendarPanel {...page} />
    </Shell>
  );
}