/**
 * SeriesEditPrompt — whole-series edit confirmation sheet/dialog (Plan 06-06).
 *
 * D-08/D-09: Editing a recurring occurrence must confirm before submitting the
 * whole-series PATCH (which PUTs the master VEVENT back to Fastmail without a
 * RECURRENCE-ID, updating all occurrences). This prompt gates that submit.
 *
 * Trigger: EventForm calls setOpen(true) when in edit mode with occurrence.hasRrule===true.
 * Confirm: "Update series" — runs the existing whole-series PATCH; no new privilege.
 * Cancel: Escape or "Cancel" button — returns to the form without submitting.
 *
 * Layout (Surface 6 — UI-SPEC):
 *   - Phone (≤767px): bottom sheet (full-screen overlay, slide from below)
 *   - Tablet/desktop (≥768px): centered dialog (max-width 480px)
 *
 * Accessibility:
 *   - role="dialog", aria-modal="true", aria-labelledby → heading
 *   - Focus trap: Tab/Shift+Tab cycle between Cancel and Update series
 *   - Escape key fires Cancel
 *
 * Security: T-03-15 — all text rendered as plain-text JSX children.
 * NEVER use dangerouslySetInnerHTML here.
 */

import { useEffect, useRef } from 'react';
import { useFocusTrap } from '../hooks/useFocusTrap.js';

// ── Component ─────────────────────────────────────────────────────────────────

interface SeriesEditPromptProps {
  open: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

export function SeriesEditPrompt({ open, onConfirm, onCancel }: SeriesEditPromptProps) {
  const dialogRef = useRef<HTMLDivElement>(null);
  const headingId = 'series-edit-prompt-heading';

  // Focus trap — focus the dialog when it opens
  useEffect(() => {
    if (open && dialogRef.current) {
      dialogRef.current.focus();
    }
  }, [open]);

  // Escape key listener — cancel without submitting
  useEffect(() => {
    if (!open) return;
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onCancel();
      }
    };
    document.addEventListener('keydown', onKeyDown);
    return () => document.removeEventListener('keydown', onKeyDown);
  }, [open, onCancel]);

  // Focus trap: Tab / Shift+Tab cycles within dialog (IN-05: shared via useFocusTrap)
  const handleDialogKeyDown = useFocusTrap(dialogRef);

  if (!open) return null;

  const isPhone = typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches;

  const dialogStyle: React.CSSProperties = isPhone
    ? {
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        background: 'var(--color-surface-raised)',
        borderRadius: 'var(--space-3) var(--space-3) 0 0',
        boxShadow: '0 -4px 24px rgba(0,0,0,0.12)',
        padding: 'var(--space-6)',
        zIndex: 400,
        fontFamily: 'var(--font-family-base)',
      }
    : {
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        background: 'var(--color-surface-raised)',
        borderRadius: 'var(--space-2)',
        boxShadow: '0 8px 32px rgba(0,0,0,0.16)',
        padding: 'var(--space-6)',
        width: '100%',
        maxWidth: '480px',
        zIndex: 400,
        fontFamily: 'var(--font-family-base)',
      };

  return (
    <>
      {/* Backdrop */}
      <div
        onClick={onCancel}
        aria-hidden="true"
        style={{
          position: 'fixed',
          inset: 0,
          background: 'var(--color-overlay)',
          zIndex: 399,
        }}
      />

      {/* Dialog */}
      <div
        ref={dialogRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby={headingId}
        tabIndex={-1}
        onKeyDown={handleDialogKeyDown}
        style={dialogStyle}
      >
        {/* Heading */}
        <h2
          id={headingId}
          style={{
            margin: '0 0 var(--space-3) 0',
            fontSize: 'var(--text-heading-size)',
            fontWeight: 'var(--text-heading-weight)',
            lineHeight: 'var(--text-heading-line-height)',
            color: 'var(--color-text-primary)',
          }}
        >
          {/* Plain text — XSS guard (T-03-15) */}
          Edit recurring series
        </h2>

        {/* Body */}
        <p
          style={{
            margin: '0 0 var(--space-6) 0',
            fontSize: 'var(--text-body-size)',
            fontWeight: 'var(--text-body-weight)',
            lineHeight: 'var(--text-body-line-height)',
            color: 'var(--color-text-secondary)',
          }}
        >
          {/* Plain text — XSS guard (T-03-15) */}
          This will update all occurrences of this event.
        </p>

        {/* Actions */}
        <div
          style={{
            display: 'flex',
            justifyContent: 'flex-end',
            gap: 'var(--space-3)',
            alignItems: 'center',
          }}
        >
          {/* Cancel — ghost style */}
          <button
            onClick={onCancel}
            style={{
              background: 'none',
              border: 'none',
              cursor: 'pointer',
              minHeight: '44px',
              padding: '0 var(--space-4)',
              borderRadius: 'var(--space-1)',
              fontSize: 'var(--text-label-size)',
              fontWeight: 600,
              color: 'var(--color-text-secondary)',
              fontFamily: 'var(--font-family-base)',
            }}
          >
            {/* Plain text — XSS guard (T-03-15) */}
            Cancel
          </button>

          {/* Update series — accent-filled (NOT destructive — this is an edit) */}
          <button
            onClick={onConfirm}
            style={{
              background: 'var(--color-member-0)',
              border: 'none',
              cursor: 'pointer',
              minHeight: '44px',
              padding: '0 var(--space-4)',
              borderRadius: 'var(--space-1)',
              fontSize: 'var(--text-label-size)',
              fontWeight: 600,
              color: '#ffffff',
              fontFamily: 'var(--font-family-base)',
            }}
          >
            {/* Plain text — XSS guard (T-03-15) */}
            Update series
          </button>
        </div>
      </div>
    </>
  );
}
