/**
 * AdminPage — /admin route (D-02: dedicated gated route, not SettingsSheet extension).
 *
 * Non-admin users are redirected to /calendar at the App.tsx route level (UX, D-03).
 * The server enforces 403 on every /api/admin/* request (Plan 03, requireAdmin).
 *
 * UI-SPEC §Surface 1 (/admin route):
 *   - "Admin Settings" heading (18px/600)
 *   - Centered content column, maxWidth 640px on desktop
 *   - var(--space-12) top/bottom padding, var(--space-6) horizontal padding
 *
 * UI-SPEC §Surface 2 (MEMBERS section):
 *   - 32px avatar swatch (var(--color-member-N)) + member name + credential status badge
 *   - "Rotate" or "Add credential" action button per hasCredential
 *   - Opens CredentialSheet in admin-rotate or admin-add mode
 *
 * UI-SPEC §Surface 5 (SHARED CALENDAR section):
 *   - Radio group, one row per synced calendar
 *   - "Currently shared" label on active selection
 *   - Two-tap Save (disabled until selection differs from saved)
 *   - Empty state when no calendars synced
 *
 * Security: client isAdmin gate is UX only. Server 403 is the real boundary (D-03).
 */

import { useState, useRef } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { CheckCircle, AlertCircle } from 'lucide-react';
import {
  fetchAdminMembers,
  fetchAdminCalendars,
  setSharedCalendar,
  fetchAdminTimezone,
  setAdminTimezone,
  type AdminMember,
  type AdminCalendar,
} from '../api/client.js';
import { CredentialSheet, type CredentialSheetMode } from '../components/CredentialSheet.js';

// ── Styles ─────────────────────────────────────────────────────────────────

const sectionLabelStyle: React.CSSProperties = {
  fontSize: 'var(--text-label-size, 13px)',
  fontWeight: 600,
  color: 'var(--color-text-muted)',
  textTransform: 'uppercase',
  letterSpacing: '0.06em',
  marginBottom: 'var(--space-2, 8px)',
};

// ── AdminPage ──────────────────────────────────────────────────────────────

export function AdminPage() {
  const queryClient = useQueryClient();

  // Credential sheet state
  const [sheetOpen, setSheetOpen] = useState(false);
  const [sheetMode, setSheetMode] = useState<CredentialSheetMode>('admin-add');
  const [sheetMember, setSheetMember] = useState<AdminMember | null>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);

  // Shared calendar picker state
  const [selectedCalendarId, setSelectedCalendarId] = useState<number | null>(null);

  // Timezone picker state
  const [timezoneInput, setTimezoneInput] = useState<string | null>(null);
  // Searchable combobox state: tzSearch is the live filter text while the list is
  // open (null = closed, input shows the selected zone). tzActiveIndex tracks the
  // keyboard-highlighted option.
  const [tzOpen, setTzOpen] = useState(false);
  const [tzSearch, setTzSearch] = useState<string | null>(null);
  const [tzActiveIndex, setTzActiveIndex] = useState(0);
  const tzBlurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  // Members query
  const membersQuery = useQuery({
    queryKey: ['admin', 'members'],
    queryFn: fetchAdminMembers,
    retry: false,
    staleTime: 60 * 1000,
  });

  // Calendars query
  const calendarsQuery = useQuery({
    queryKey: ['admin', 'calendars'],
    queryFn: fetchAdminCalendars,
    retry: false,
    staleTime: 60 * 1000,
  });

  // Derive current saved shared calendar id from the data
  const currentSharedId = calendarsQuery.data?.calendars.find((c) => c.isShared)?.id ?? null;

  // Effective selected = user pick OR fallback to current saved
  const effectiveSelected = selectedCalendarId ?? currentSharedId;

  // Timezone query
  const timezoneQuery = useQuery({
    queryKey: ['admin', 'timezone'],
    queryFn: fetchAdminTimezone,
    retry: false,
    staleTime: 60 * 1000,
  });

  // Timezone save mutation
  const timezoneMutation = useMutation({
    mutationFn: (tz: string) => setAdminTimezone(tz),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ['admin', 'timezone'] });
      setTimezoneInput(null); // reset local override after save
    },
  });

  // Detected browser timezone (D-02)
  const detectedTz = Intl.DateTimeFormat().resolvedOptions().timeZone;

  // Effective timezone input value: local override → stored value → ''
  const storedTimezone = timezoneQuery.data?.timezone ?? '';
  const effectiveTimezoneInput = timezoneInput ?? storedTimezone;

  // WR-01: derive isExplicit so we only apply the no-op guard when the timezone
  // has ALREADY been explicitly saved. On first run (isExplicitlySet: false) the
  // admin must be able to confirm/save the displayed system-default — even if the
  // input value already matches the fallback string. Keep pending and empty-input
  // guards unconditional.
  const isExplicit = timezoneQuery.data?.isExplicitlySet ?? false;

  // Save is disabled when:
  //   - mutation is in-flight (pending), OR
  //   - input is empty, OR
  //   - the timezone IS already explicitly set AND the input is unchanged (no-op)
  const timezoneSaveDisabled =
    timezoneMutation.isPending ||
    effectiveTimezoneInput === '' ||
    (isExplicit && effectiveTimezoneInput === storedTimezone);

  // IANA zones list (Intl.supportedValuesOf may not be present in all runtimes)
  const ianaZones: string[] =
    typeof (Intl as { supportedValuesOf?: (key: string) => string[] }).supportedValuesOf ===
    'function'
      ? (Intl as { supportedValuesOf: (key: string) => string[] }).supportedValuesOf('timeZone')
      : [];

  // Searchable combobox: filter zones by the live search text (case-insensitive,
  // ignoring underscores so "new york" matches "America/New_York"). When the search
  // is empty the full list shows — so tapping the field reveals every zone with no
  // typing required.
  const tzNorm = (s: string) => s.toLowerCase().replace(/_/g, ' ');
  const tzQuery = tzOpen ? tzNorm(tzSearch ?? '') : '';
  const filteredZones = tzQuery
    ? ianaZones.filter((tz) => tzNorm(tz).includes(tzQuery))
    : ianaZones;

  // Commit a zone selection from the list, then close.
  function selectTimezone(tz: string) {
    if (tzBlurTimer.current) clearTimeout(tzBlurTimer.current);
    setTimezoneInput(tz);
    setTzSearch(null);
    setTzOpen(false);
  }

  // Save shared calendar mutation
  const sharedCalMutation = useMutation({
    mutationFn: (calId: number) => setSharedCalendar(calId),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ['admin', 'calendars'] });
      // Also invalidate events so the shared lane updates
      void queryClient.invalidateQueries({ queryKey: ['events'] });
      setSelectedCalendarId(null); // reset picker
    },
  });

  // Open credential sheet for a member
  function openSheet(member: AdminMember, buttonRef: React.RefObject<HTMLButtonElement | null>) {
    // Capture the button so focus can return on close
    (triggerRef as React.MutableRefObject<HTMLElement | null>).current = buttonRef.current;
    setSheetMember(member);
    setSheetMode(member.hasCredential ? 'admin-rotate' : 'admin-add');
    setSheetOpen(true);
  }

  const saveDisabled =
    sharedCalMutation.isPending ||
    effectiveSelected === null ||
    effectiveSelected === currentSharedId;

  return (
    <div
      style={{
        height: '100%',
        overflowY: 'auto',
        fontFamily: 'var(--font-family-base)',
        // Bottom padding to clear the 56px fixed tab bar on phone
        paddingBottom: 'calc(56px + env(safe-area-inset-bottom, 0px))',
      }}
    >
      <div
        style={{
          maxWidth: '640px',
          margin: '0 auto',
          padding: 'var(--space-12, 48px) var(--space-6, 24px)',
        }}
      >
        {/* Page heading */}
        <h1
          style={{
            margin: '0 0 var(--space-8, 32px) 0',
            fontSize: 'var(--text-heading-size, 18px)',
            fontWeight: 600,
            lineHeight: 'var(--text-heading-line-height, 1.25)',
            color: 'var(--color-text-primary)',
          }}
        >
          Admin Settings
        </h1>

        {/* ── MEMBERS section ─────────────────────────────────────────────── */}
        <section aria-label="Members" style={{ marginBottom: 'var(--space-8, 32px)' }}>
          <div style={sectionLabelStyle}>Members</div>

          {membersQuery.isLoading && (
            <div
              style={{
                padding: 'var(--space-4, 16px) 0',
                color: 'var(--color-text-muted)',
                fontSize: 'var(--text-body-size, 15px)',
              }}
            >
              Loading members…
            </div>
          )}

          {membersQuery.isError && (
            <div
              style={{
                color: 'var(--color-destructive)',
                fontSize: 'var(--text-body-size, 15px)',
                padding: 'var(--space-4, 16px) 0',
              }}
            >
              Could not load members.
            </div>
          )}

          {membersQuery.data && (
            <div>
              {membersQuery.data.members.map((member, idx) => (
                <MemberRow
                  key={member.id}
                  member={member}
                  colorIndex={idx}
                  onAction={(buttonRef) => openSheet(member, buttonRef)}
                />
              ))}
            </div>
          )}
        </section>

        {/* ── SHARED CALENDAR section ──────────────────────────────────────── */}
        <section aria-label="Shared Calendar" style={{ marginBottom: 'var(--space-8, 32px)' }}>
          <div style={sectionLabelStyle}>Shared Calendar</div>

          <p
            style={{
              margin: '0 0 var(--space-4, 16px) 0',
              fontSize: 'var(--text-body-size, 15px)',
              fontWeight: 400,
              color: 'var(--color-text-secondary)',
              lineHeight: 1.5,
            }}
          >
            The shared family calendar is visible to all members in the same color lane.
          </p>

          {calendarsQuery.isLoading && (
            <div
              style={{
                color: 'var(--color-text-muted)',
                fontSize: 'var(--text-body-size, 15px)',
                padding: 'var(--space-2, 8px) 0',
              }}
            >
              Loading calendars…
            </div>
          )}

          {calendarsQuery.isError && (
            <div
              style={{
                color: 'var(--color-destructive)',
                fontSize: 'var(--text-body-size, 15px)',
                padding: 'var(--space-2, 8px) 0',
              }}
            >
              Could not load calendars.
            </div>
          )}

          {calendarsQuery.data && calendarsQuery.data.calendars.length === 0 && (
            <EmptyCalendarsState />
          )}

          {calendarsQuery.data && calendarsQuery.data.calendars.length > 0 && (
            <>
              <div
                role="radiogroup"
                aria-label="Select shared calendar"
                style={{ marginBottom: 'var(--space-4, 16px)' }}
              >
                {calendarsQuery.data.calendars.map((cal) => (
                  <CalendarRadioRow
                    key={cal.id}
                    calendar={cal}
                    isSelected={effectiveSelected === cal.id}
                    onSelect={() => setSelectedCalendarId(cal.id)}
                  />
                ))}
              </div>

              {/* Two-tap Save button */}
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <button
                  type="button"
                  disabled={saveDisabled}
                  onClick={() => {
                    if (effectiveSelected !== null) {
                      sharedCalMutation.mutate(effectiveSelected);
                    }
                  }}
                  style={{
                    background: saveDisabled
                      ? 'var(--color-border, #E2E4E9)'
                      : 'var(--color-member-0, #4A90D9)',
                    color: '#ffffff',
                    border: 'none',
                    cursor: saveDisabled ? 'default' : 'pointer',
                    fontSize: 'var(--text-label-size, 13px)',
                    fontWeight: 600,
                    minHeight: '44px',
                    minWidth: '44px',
                    padding: '0 var(--space-6, 24px)',
                    borderRadius: 'var(--space-1, 4px)',
                    fontFamily: 'var(--font-family-base)',
                    transition: 'background 0.15s ease',
                  }}
                >
                  {sharedCalMutation.isPending ? 'Saving…' : 'Save'}
                </button>
              </div>

              {sharedCalMutation.isError && (
                <div
                  style={{
                    color: 'var(--color-destructive)',
                    fontSize: 'var(--text-label-size, 13px)',
                    marginTop: 'var(--space-2, 8px)',
                    textAlign: 'right',
                  }}
                >
                  Something went wrong. Please try again.
                </div>
              )}
            </>
          )}
        </section>

        {/* ── TIMEZONE section ─────────────────────────────────────────────── */}
        <section aria-label="Timezone">
          <div style={sectionLabelStyle}>Timezone</div>

          {timezoneQuery.isLoading && (
            <div
              style={{
                color: 'var(--color-text-muted)',
                fontSize: 'var(--text-body-size, 15px)',
                padding: 'var(--space-2, 8px) 0',
              }}
            >
              Loading timezone…
            </div>
          )}

          {timezoneQuery.isError && (
            <div
              style={{
                color: 'var(--color-destructive)',
                fontSize: 'var(--text-body-size, 15px)',
                padding: 'var(--space-2, 8px) 0',
              }}
            >
              Could not load timezone setting.
            </div>
          )}

          {timezoneQuery.data && (
            <>
              {/* System-default notice (D-06) */}
              {!timezoneQuery.data.isExplicitlySet && (
                <div
                  style={{
                    fontSize: 'var(--text-label-size, 13px)',
                    color: 'var(--color-text-muted)',
                    marginBottom: 'var(--space-3, 12px)',
                    fontStyle: 'italic',
                  }}
                >
                  Using system default — save a timezone to make it explicit.
                </div>
              )}

              {/* IANA picker — searchable combobox. Focusing shows the full list
                  (no typing/erasing needed); typing filters it case-insensitively
                  (underscores ignored, so "new york" matches America/New_York). */}
              <div style={{ position: 'relative', marginBottom: 'var(--space-3, 12px)' }}>
                <input
                  type="text"
                  role="combobox"
                  aria-label="Household timezone"
                  aria-expanded={tzOpen}
                  aria-controls="tz-listbox"
                  aria-autocomplete="list"
                  aria-activedescendant={
                    tzOpen && filteredZones.length ? `tz-opt-${tzActiveIndex}` : undefined
                  }
                  autoComplete="off"
                  value={tzOpen ? (tzSearch ?? '') : effectiveTimezoneInput}
                  placeholder={
                    tzOpen ? effectiveTimezoneInput || 'Search timezones…' : 'Search timezones…'
                  }
                  onFocus={() => {
                    if (tzBlurTimer.current) clearTimeout(tzBlurTimer.current);
                    setTzOpen(true);
                    setTzSearch('');
                    setTzActiveIndex(0);
                  }}
                  onChange={(e) => {
                    setTzSearch(e.target.value);
                    setTzOpen(true);
                    setTzActiveIndex(0);
                  }}
                  onKeyDown={(e) => {
                    if (e.key === 'ArrowDown') {
                      e.preventDefault();
                      if (!tzOpen) {
                        setTzOpen(true);
                        setTzSearch('');
                      }
                      setTzActiveIndex((i) => Math.min(i + 1, filteredZones.length - 1));
                    } else if (e.key === 'ArrowUp') {
                      e.preventDefault();
                      setTzActiveIndex((i) => Math.max(i - 1, 0));
                    } else if (e.key === 'Enter') {
                      if (tzOpen && filteredZones[tzActiveIndex]) {
                        e.preventDefault();
                        selectTimezone(filteredZones[tzActiveIndex]);
                      }
                    } else if (e.key === 'Escape') {
                      setTzOpen(false);
                      setTzSearch(null);
                    }
                  }}
                  onBlur={() => {
                    // Delay so an option's onClick fires before the list unmounts.
                    tzBlurTimer.current = setTimeout(() => {
                      setTzOpen(false);
                      setTzSearch(null);
                    }, 120);
                  }}
                  style={{
                    width: '100%',
                    boxSizing: 'border-box',
                    padding: 'var(--space-2, 8px) var(--space-3, 12px)',
                    fontSize: 'var(--text-body-size, 15px)',
                    fontFamily: 'var(--font-family-base)',
                    border: '1px solid var(--color-border)',
                    borderRadius: 'var(--space-1, 4px)',
                    color: 'var(--color-text-primary)',
                    background: 'var(--color-surface, #ffffff)',
                    minHeight: '44px',
                  }}
                />
                {tzOpen && (
                  <ul
                    id="tz-listbox"
                    role="listbox"
                    aria-label="Timezones"
                    style={{
                      position: 'absolute',
                      zIndex: 10,
                      top: 'calc(100% + 4px)',
                      left: 0,
                      right: 0,
                      margin: 0,
                      padding: 'var(--space-1, 4px)',
                      listStyle: 'none',
                      maxHeight: '260px',
                      overflowY: 'auto',
                      background: 'var(--color-surface, #ffffff)',
                      border: '1px solid var(--color-border)',
                      borderRadius: 'var(--space-1, 4px)',
                      boxShadow: '0 6px 20px rgba(0,0,0,0.12)',
                    }}
                  >
                    {filteredZones.length === 0 && (
                      <li
                        style={{
                          padding: 'var(--space-2, 8px) var(--space-3, 12px)',
                          color: 'var(--color-text-muted)',
                          fontSize: 'var(--text-body-size, 15px)',
                        }}
                      >
                        No matching timezones
                      </li>
                    )}
                    {filteredZones.map((tz, i) => {
                      const active = i === tzActiveIndex;
                      return (
                        <li
                          key={tz}
                          id={`tz-opt-${i}`}
                          role="option"
                          aria-selected={tz === effectiveTimezoneInput}
                          ref={
                            active
                              ? (el) => {
                                  el?.scrollIntoView({ block: 'nearest' });
                                }
                              : undefined
                          }
                          onMouseDown={(e) => e.preventDefault()}
                          onMouseEnter={() => setTzActiveIndex(i)}
                          onClick={() => selectTimezone(tz)}
                          style={{
                            padding: 'var(--space-2, 8px) var(--space-3, 12px)',
                            fontSize: 'var(--text-body-size, 15px)',
                            fontFamily: 'var(--font-family-base)',
                            color: 'var(--color-text-primary)',
                            borderRadius: 'var(--space-1, 4px)',
                            cursor: 'pointer',
                            background: active ? 'var(--color-member-0, #4A90D9)' : 'transparent',
                            ...(active ? { color: '#ffffff' } : null),
                            minHeight: '44px',
                            display: 'flex',
                            alignItems: 'center',
                          }}
                        >
                          {tz}
                        </li>
                      );
                    })}
                  </ul>
                )}
              </div>

              {/* Use detected zone affordance (D-02) */}
              {detectedTz && detectedTz !== effectiveTimezoneInput && (
                <div style={{ marginBottom: 'var(--space-3, 12px)' }}>
                  <button
                    type="button"
                    onClick={() => setTimezoneInput(detectedTz)}
                    style={{
                      background: 'none',
                      border: 'none',
                      padding: 0,
                      cursor: 'pointer',
                      fontSize: 'var(--text-label-size, 13px)',
                      color: 'var(--color-member-0, #4A90D9)',
                      fontFamily: 'var(--font-family-base)',
                      textDecoration: 'underline',
                    }}
                  >
                    Use detected: {detectedTz}
                  </button>
                </div>
              )}

              {/* Save button */}
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <button
                  type="button"
                  disabled={timezoneSaveDisabled}
                  onClick={() => {
                    if (effectiveTimezoneInput) {
                      timezoneMutation.mutate(effectiveTimezoneInput);
                    }
                  }}
                  style={{
                    background: timezoneSaveDisabled
                      ? 'var(--color-border, #E2E4E9)'
                      : 'var(--color-member-0, #4A90D9)',
                    color: '#ffffff',
                    border: 'none',
                    cursor: timezoneSaveDisabled ? 'default' : 'pointer',
                    fontSize: 'var(--text-label-size, 13px)',
                    fontWeight: 600,
                    minHeight: '44px',
                    minWidth: '44px',
                    padding: '0 var(--space-6, 24px)',
                    borderRadius: 'var(--space-1, 4px)',
                    fontFamily: 'var(--font-family-base)',
                    transition: 'background 0.15s ease',
                  }}
                >
                  {timezoneMutation.isPending ? 'Saving…' : 'Save'}
                </button>
              </div>

              {timezoneMutation.isError && (
                <div
                  style={{
                    color: 'var(--color-destructive)',
                    fontSize: 'var(--text-label-size, 13px)',
                    marginTop: 'var(--space-2, 8px)',
                    textAlign: 'right',
                  }}
                >
                  Could not save timezone. Please check the value and try again.
                </div>
              )}
            </>
          )}
        </section>
      </div>

      {/* Credential sheet — admin-rotate or admin-add */}
      {sheetMember && (
        <CredentialSheet
          isOpen={sheetOpen}
          onClose={() => setSheetOpen(false)}
          mode={sheetMode}
          memberName={sheetMember.displayName}
          memberId={sheetMember.id}
          triggerRef={triggerRef}
        />
      )}
    </div>
  );
}

// ── MemberRow ──────────────────────────────────────────────────────────────

interface MemberRowProps {
  member: AdminMember;
  colorIndex: number;
  onAction: (buttonRef: React.RefObject<HTMLButtonElement | null>) => void;
}

function MemberRow({ member, colorIndex, onAction }: MemberRowProps) {
  const buttonRef = useRef<HTMLButtonElement>(null);

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 'var(--space-3, 12px)',
        minHeight: '44px',
        padding: 'var(--space-2, 8px) 0',
        borderBottom: '1px solid var(--color-border-subtle, var(--color-border))',
      }}
    >
      {/* Avatar swatch */}
      <div
        aria-hidden="true"
        style={{
          width: '32px',
          height: '32px',
          borderRadius: '50%',
          background: `var(--color-member-${colorIndex}, var(--color-member-0))`,
          flexShrink: 0,
        }}
      />

      {/* Name + status */}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div
          style={{
            fontSize: 'var(--text-body-size, 15px)',
            fontWeight: 400,
            color: 'var(--color-text-primary)',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}
        >
          {member.displayName ?? 'Member'}
        </div>

        {/* Credential status badge */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 'var(--space-1, 4px)',
            marginTop: '2px',
          }}
        >
          {member.hasCredential ? (
            <>
              <CheckCircle
                size={16}
                aria-hidden="true"
                style={{ color: 'var(--color-text-secondary)', flexShrink: 0 }}
              />
              <span
                style={{
                  fontSize: 'var(--text-label-size, 13px)',
                  color: 'var(--color-text-secondary)',
                }}
              >
                Credential set
              </span>
            </>
          ) : (
            <>
              <AlertCircle
                size={16}
                aria-hidden="true"
                style={{ color: 'var(--color-text-muted)', flexShrink: 0 }}
              />
              <span
                style={{
                  fontSize: 'var(--text-label-size, 13px)',
                  color: 'var(--color-text-muted)',
                }}
              >
                No credential
              </span>
            </>
          )}
        </div>
      </div>

      {/* Action button */}
      <button
        ref={buttonRef}
        type="button"
        onClick={() => onAction(buttonRef)}
        style={{
          background: 'none',
          border: '1px solid var(--color-border)',
          borderRadius: 'var(--space-1, 4px)',
          cursor: 'pointer',
          fontSize: 'var(--text-label-size, 13px)',
          fontWeight: 600,
          color: 'var(--color-text-primary)',
          minHeight: '44px',
          minWidth: '44px',
          padding: '0 var(--space-3, 12px)',
          fontFamily: 'var(--font-family-base)',
          flexShrink: 0,
        }}
      >
        {member.hasCredential ? 'Rotate' : 'Add credential'}
      </button>
    </div>
  );
}

// ── CalendarRadioRow ────────────────────────────────────────────────────────

interface CalendarRadioRowProps {
  calendar: AdminCalendar;
  isSelected: boolean;
  onSelect: () => void;
}

function CalendarRadioRow({ calendar, isSelected, onSelect }: CalendarRadioRowProps) {
  return (
    <div
      role="radio"
      aria-checked={isSelected}
      tabIndex={0}
      onClick={onSelect}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          onSelect();
        }
      }}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 'var(--space-3, 12px)',
        minHeight: '44px',
        padding: 'var(--space-2, 8px) 0',
        cursor: 'pointer',
      }}
    >
      {/* Radio indicator: 20px circle */}
      <div
        aria-hidden="true"
        style={{
          width: '20px',
          height: '20px',
          borderRadius: '50%',
          flexShrink: 0,
          border: isSelected ? 'none' : '2px solid var(--color-border)',
          background: isSelected ? 'var(--color-member-0, #4A90D9)' : 'transparent',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {isSelected && (
          <div
            style={{
              width: '8px',
              height: '8px',
              borderRadius: '50%',
              background: '#ffffff',
            }}
          />
        )}
      </div>

      {/* Calendar name */}
      <span
        style={{
          fontSize: 'var(--text-body-size, 15px)',
          fontWeight: 400,
          color: 'var(--color-text-primary)',
          flex: 1,
        }}
      >
        {calendar.displayName}
      </span>

      {/* Currently shared label */}
      {calendar.isShared && (
        <span
          style={{
            fontSize: 'var(--text-label-size, 13px)',
            fontWeight: 400,
            color: 'var(--color-member-0, #4A90D9)',
          }}
        >
          Currently shared
        </span>
      )}
    </div>
  );
}

// ── EmptyCalendarsState ─────────────────────────────────────────────────────

function EmptyCalendarsState() {
  return (
    <div
      style={{
        padding: 'var(--space-8, 32px) 0',
        textAlign: 'center',
      }}
    >
      <div
        style={{
          fontSize: 'var(--text-body-size, 15px)',
          fontWeight: 600,
          color: 'var(--color-text-primary)',
          marginBottom: 'var(--space-2, 8px)',
        }}
      >
        No calendars synced yet
      </div>
      <div
        style={{
          fontSize: 'var(--text-label-size, 13px)',
          color: 'var(--color-text-secondary)',
          lineHeight: 1.5,
        }}
      >
        Calendars sync automatically. Check back after the first sync completes.
      </div>
    </div>
  );
}