import React from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { DatePickerComponent, TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import CustomSelectUploadEventModal from './CustomSelectUploadEventModal';
import { updateEvent, detachEventOccurrence } from '../apiEvents';
// Holiday exceptions are now created in the backend

type CustomEventData = {
  title: string;
  startDate: Date | null;
  startTime: Date | null;
  endTime: Date | null;
  type: string;
  description: string;
  repeat: boolean;
  weekdays: number[];
  repeatUntil: Date | null;
  skipHolidays: boolean;
  media?: { id: string; path: string; name: string } | null;
  slideshowInterval?: number;
  pageProgress?: boolean;
  autoProgress?: boolean;
  websiteUrl?: string;
  // Video-specific fields
  autoplay?: boolean;
  loop?: boolean;
  volume?: number;
  muted?: boolean;
};

// Typ für initialData erweitern, damit Id unterstützt wird
type CustomEventModalProps = {
  open: boolean;
  onClose: () => void;
  onSave: (eventData: CustomEventData) => void;
  initialData?: Partial<CustomEventData> & { 
    Id?: string; 
    OccurrenceOfId?: string;
    isSingleOccurrence?: boolean;
    occurrenceDate?: Date;
  };
  groupName: string | { id: string | null; name: string };
  groupColor?: string;
  editMode?: boolean;
  // Removed unused blockHolidays and isHolidayRange
};

const weekdayOptions = [
  { value: 0, label: 'Montag' },
  { value: 1, label: 'Dienstag' },
  { value: 2, label: 'Mittwoch' },
  { value: 3, label: 'Donnerstag' },
  { value: 4, label: 'Freitag' },
  { value: 5, label: 'Samstag' },
  { value: 6, label: 'Sonntag' },
];

const typeOptions = [
  { value: 'presentation', label: 'Präsentation' },
  { value: 'website', label: 'Website' },
  { value: 'video', label: 'Video' },
  { value: 'message', label: 'Nachricht' },
  { value: 'webuntis', label: 'WebUntis' },
];

const CustomEventModal: React.FC<CustomEventModalProps> = ({
  open,
  onClose,
  onSave,
  initialData = {},
  groupName,
  groupColor,
  editMode,
}) => {
  const [title, setTitle] = React.useState(initialData.title || '');
  const [startDate, setStartDate] = React.useState(initialData.startDate || null);
  const [startTime, setStartTime] = React.useState(
    initialData.startTime || new Date(0, 0, 0, 9, 0)
  );
  const [endTime, setEndTime] = React.useState(initialData.endTime || new Date(0, 0, 0, 9, 30));
  const [type, setType] = React.useState(initialData.type ?? 'presentation');
  const [description, setDescription] = React.useState(initialData.description || '');
  // Initialize recurrence state - force to false/empty for single occurrence editing
  const isSingleOccurrence = initialData.isSingleOccurrence || false;
  const [repeat, setRepeat] = React.useState(isSingleOccurrence ? false : (initialData.repeat || false));
  const [weekdays, setWeekdays] = React.useState<number[]>(isSingleOccurrence ? [] : (initialData.weekdays || []));
  const [repeatUntil, setRepeatUntil] = React.useState(isSingleOccurrence ? null : (initialData.repeatUntil || null));
  // Default to true so recurrences skip holidays by default, but false for single occurrences
  const [skipHolidays, setSkipHolidays] = React.useState(
    isSingleOccurrence ? false : (initialData.skipHolidays !== undefined ? initialData.skipHolidays : true)
  );
  const [errors, setErrors] = React.useState<{ [key: string]: string }>({});
  // --- KORREKTUR: Media, SlideshowInterval, WebsiteUrl aus initialData übernehmen ---
  const [media, setMedia] = React.useState<{ id: string; path: string; name: string } | null>(
    initialData.media ?? null
  );
  // General settings state for presentation
  // Removed unused generalLoaded and setGeneralLoaded
  // Removed unused generalLoaded/generalSlideshowInterval/generalPageProgress/generalAutoProgress

  // Per-event state
  const [slideshowInterval, setSlideshowInterval] = React.useState<number>(
    initialData.slideshowInterval ?? 10
  );
  const [pageProgress, setPageProgress] = React.useState<boolean>(
    initialData.pageProgress ?? true
  );
  const [autoProgress, setAutoProgress] = React.useState<boolean>(
    initialData.autoProgress ?? true
  );
  const [websiteUrl, setWebsiteUrl] = React.useState<string>(initialData.websiteUrl ?? '');
  
  // Video-specific state with system defaults loading
  const [autoplay, setAutoplay] = React.useState<boolean>(initialData.autoplay ?? true);
  const [loop, setLoop] = React.useState<boolean>(initialData.loop ?? true);
  const [volume, setVolume] = React.useState<number>(initialData.volume ?? 0.8);
  const [muted, setMuted] = React.useState<boolean>(initialData.muted ?? false);
  const [videoDefaultsLoaded, setVideoDefaultsLoaded] = React.useState<boolean>(false);
  const [isSaving, setIsSaving] = React.useState(false);
  
  const [mediaModalOpen, setMediaModalOpen] = React.useState(false);

  // Load system video defaults once when opening for a new video event
  React.useEffect(() => {
    if (open && !editMode && !videoDefaultsLoaded) {
      (async () => {
        try {
          const api = await import('../apiSystemSettings');
          const keys = ['video_autoplay', 'video_loop', 'video_volume', 'video_muted'] as const;
          const [autoplayRes, loopRes, volumeRes, mutedRes] = await Promise.all(
            keys.map(k => api.getSetting(k).catch(() => ({ value: null } as { value: string | null })))
          );
          
          // Only apply defaults if not already set from initialData
          if (initialData.autoplay === undefined) {
            setAutoplay(autoplayRes.value == null ? true : autoplayRes.value === 'true');
          }
          if (initialData.loop === undefined) {
            setLoop(loopRes.value == null ? true : loopRes.value === 'true');
          }
          if (initialData.volume === undefined) {
            const volParsed = volumeRes.value == null ? 0.8 : parseFloat(String(volumeRes.value));
            setVolume(Number.isFinite(volParsed) ? volParsed : 0.8);
          }
          if (initialData.muted === undefined) {
            setMuted(mutedRes.value == null ? false : mutedRes.value === 'true');
          }
          
          setVideoDefaultsLoaded(true);
        } catch {
          // Silently fall back to hard-coded defaults
          setVideoDefaultsLoaded(true);
        }
      })();
    }
  }, [open, editMode, videoDefaultsLoaded, initialData]);

  React.useEffect(() => {
    if (open) {
      const isSingleOccurrence = initialData.isSingleOccurrence || false;
      
      setTitle(initialData.title || '');
      setStartDate(initialData.startDate || null);
      setStartTime(initialData.startTime || new Date(0, 0, 0, 9, 0));
      setEndTime(initialData.endTime || new Date(0, 0, 0, 9, 30));
      setType(initialData.type ?? 'presentation');
      setDescription(initialData.description || '');
      
      // For single occurrence editing, force recurrence settings to be disabled
      if (isSingleOccurrence) {
        setRepeat(false);
        setWeekdays([]);
        setRepeatUntil(null);
        setSkipHolidays(false);
      } else {
        setRepeat(initialData.repeat || false);
        setWeekdays(initialData.weekdays || []);
        setRepeatUntil(initialData.repeatUntil || null);
        setSkipHolidays(initialData.skipHolidays !== undefined ? initialData.skipHolidays : true);
      }
      
      // --- KORREKTUR: Media, SlideshowInterval, WebsiteUrl aus initialData übernehmen ---
      setMedia(initialData.media ?? null);
      setSlideshowInterval(initialData.slideshowInterval ?? 10);
      setPageProgress(initialData.pageProgress ?? true);
      setAutoProgress(initialData.autoProgress ?? true);
      setWebsiteUrl(initialData.websiteUrl ?? '');
      
      // Video fields - use initialData values when editing
      if (editMode) {
        setAutoplay(initialData.autoplay ?? true);
        setLoop(initialData.loop ?? true);
        setVolume(initialData.volume ?? 0.8);
        setMuted(initialData.muted ?? false);
      }
    }
  }, [open, initialData, editMode]);

  const handleSave = async () => {
    if (isSaving) {
      return;
    }

    const newErrors: { [key: string]: string } = {};
    if (!title.trim()) newErrors.title = 'Titel ist erforderlich';
    if (!startDate) newErrors.startDate = 'Startdatum ist erforderlich';
    if (!startTime) newErrors.startTime = 'Startzeit ist erforderlich';
    if (!endTime) newErrors.endTime = 'Endzeit ist erforderlich';
    if (!type) newErrors.type = 'Termintyp ist erforderlich';

    // Vergangenheitsprüfung - für Einzeltermine strikt, für Serien flexibler
    const startDateTime =
      startDate && startTime
        ? new Date(
            startDate.getFullYear(),
            startDate.getMonth(),
            startDate.getDate(),
            startTime.getHours(),
            startTime.getMinutes()
          )
        : null;
    const isPast = startDateTime && startDateTime < new Date();

    if (isPast) {
      if (isSingleOccurrence || !repeat) {
        // Einzeltermine oder nicht-wiederkehrende Events dürfen nicht in der Vergangenheit liegen
        newErrors.startDate = 'Termine in der Vergangenheit sind nicht erlaubt!';
      } else if (repeat && repeatUntil && repeatUntil < new Date()) {
        // Wiederkehrende Events sind erlaubt, wenn das End-Datum in der Zukunft liegt
        newErrors.repeatUntil = 'Terminserien mit End-Datum in der Vergangenheit sind nicht erlaubt!';
      }
      // Andernfalls: Wiederkehrende Serie ohne End-Datum oder mit End-Datum in der Zukunft ist erlaubt
    }

    if (type === 'presentation') {
      if (!media) newErrors.media = 'Bitte eine Präsentation auswählen';
      if (!slideshowInterval || slideshowInterval < 1)
        newErrors.slideshowInterval = 'Intervall angeben';
    }
    if (type === 'website') {
      if (!websiteUrl.trim()) newErrors.websiteUrl = 'Webseiten-URL ist erforderlich';
    }
    if (type === 'video') {
      if (!media) newErrors.media = 'Bitte ein Video auswählen';
    }

    const parsedMediaId = media?.id ? Number(media.id) : null;
    if (
      (type === 'presentation' || type === 'video') &&
      (!Number.isFinite(parsedMediaId) || (parsedMediaId as number) <= 0)
    ) {
      newErrors.media = 'Ausgewähltes Medium ist ungültig. Bitte Datei erneut auswählen.';
    }
    // Holiday blocking logic removed (blockHolidays, isHolidayRange no longer used)

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    setIsSaving(true);

    const group_id = typeof groupName === 'object' && groupName !== null ? groupName.id : groupName;

    // Build recurrence rule if repeat is enabled
    let recurrenceRule = null;
    let recurrenceEnd = null;
    if (repeat && weekdays.length > 0) {
      // Convert weekdays to RRULE format (0=Monday -> MO)
      const rruleDays = weekdays.map(day => {
        const dayNames = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'];
        return dayNames[day];
      }).join(',');
      
      recurrenceRule = `FREQ=WEEKLY;BYDAY=${rruleDays}`;
      if (repeatUntil) {
        const untilDate = new Date(repeatUntil);
        untilDate.setHours(23, 59, 59);
        recurrenceEnd = untilDate.toISOString();
        // Note: RRULE UNTIL should be in UTC format for consistency
        const untilUTC = untilDate.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
        recurrenceRule += `;UNTIL=${untilUTC}`;
      }
    }

    const payload: CustomEventData & { [key: string]: unknown } = {
      group_id,
      title,
      description,
      start:
        startDate && startTime
          ? new Date(
              startDate.getFullYear(),
              startDate.getMonth(),
              startDate.getDate(),
              startTime.getHours(),
              startTime.getMinutes()
            ).toISOString()
          : null,
      end:
        startDate && endTime
          ? new Date(
              startDate.getFullYear(),
              startDate.getMonth(),
              startDate.getDate(),
              endTime.getHours(),
              endTime.getMinutes()
            ).toISOString()
          : null,
      type,
      startDate,
      startTime,
      endTime,
      repeat: isSingleOccurrence ? false : repeat,
      weekdays: isSingleOccurrence ? [] : weekdays,
      repeatUntil: isSingleOccurrence ? null : repeatUntil,
      skipHolidays: isSingleOccurrence ? false : skipHolidays,
      event_type: type,
      is_active: 1,
      created_by: 1,
      recurrence_rule: isSingleOccurrence ? null : recurrenceRule,
      recurrence_end: isSingleOccurrence ? null : recurrenceEnd,
    };

    if (type === 'presentation') {
      payload.event_media_id = parsedMediaId as number;
      payload.slideshow_interval = slideshowInterval;
      payload.page_progress = pageProgress;
      payload.auto_progress = autoProgress;
    }

    if (type === 'website') {
      payload.website_url = websiteUrl;
    }

    if (type === 'video') {
      payload.event_media_id = parsedMediaId as number;
      payload.autoplay = autoplay;
      payload.loop = loop;
      payload.volume = volume;
      payload.muted = muted;
    }

    try {
      let res;
      if (editMode && initialData && typeof initialData.Id === 'string') {
        // Check if this is a recurring event occurrence that should be detached
        const shouldDetach = isSingleOccurrence && 
                           initialData.OccurrenceOfId && 
                           !isNaN(Number(initialData.OccurrenceOfId));
        
        if (shouldDetach) {
          // DETACH single occurrence from recurring series
          
          // Use occurrenceDate from initialData, or fall back to startDate
          const sourceDate = initialData.occurrenceDate || startDate;
          if (!sourceDate) {
            setErrors({ api: 'Fehler: Kein Datum für Einzeltermin verfügbar' });
            return;
          }
          
          const occurrenceDate = sourceDate instanceof Date 
            ? sourceDate.toISOString().split('T')[0]
            : new Date(sourceDate).toISOString().split('T')[0];
          
          try {
            // Use the master event ID (OccurrenceOfId) for detaching
            const masterId = Number(initialData.OccurrenceOfId);
            res = await detachEventOccurrence(masterId, occurrenceDate, payload);
          } catch (error) {
            console.error('Detach operation failed:', error);
            setErrors({ api: `API Fehler: ${error instanceof Error ? error.message : String(error)}` });
            return;
          }
        } else {
          // UPDATE entire event/series OR standalone event
          res = await updateEvent(initialData.Id, payload);
        }
      } else {
        // CREATE
        const createResponse = await fetch('/api/events', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });

        let createData: { success?: boolean; error?: string } = {};
        try {
          createData = await createResponse.json();
        } catch {
          createData = { error: `HTTP ${createResponse.status}` };
        }

        if (!createResponse.ok) {
          setErrors({
            api:
              createData.error ||
              `Fehler beim Speichern (HTTP ${createResponse.status})`,
          });
          return;
        }

        res = createData;
      }
      
      if (res.success) {
        onSave(payload);
        onClose(); // <--- Box nach erfolgreichem Speichern schließen
      } else {
        setErrors({ api: res.error || 'Fehler beim Speichern' });
      }
    } catch {
      setErrors({ api: 'Netzwerkfehler beim Speichern' });
    } finally {
      setIsSaving(false);
    }

  };

  // Vergangenheitsprüfung (außerhalb von handleSave, damit im Render verfügbar)
  const startDateTime =
    startDate && startTime
      ? new Date(
          startDate.getFullYear(),
          startDate.getMonth(),
          startDate.getDate(),
          startTime.getHours(),
          startTime.getMinutes()
        )
      : null;
  const isPast = !!(startDateTime && startDateTime < new Date());
  
  // Button sollte nur für Einzeltermine in der Vergangenheit deaktiviert werden
  // Wiederkehrende Serien können bearbeitet werden, auch wenn der Starttermin vergangen ist
  const shouldDisableButton = isPast && (isSingleOccurrence || !repeat);

  return (
    <DialogComponent
      target="#root"
      visible={open}
      width="800px"
      header={() => (
        <div
          style={{
            background: groupColor || '#f5f5f5',
            padding: '8px 16px',
            borderRadius: '6px 6px 0 0',
            color: '#fff',
            fontWeight: 600,
            fontSize: 20,
            display: 'flex',
            alignItems: 'center',
          }}
        >
          {editMode 
            ? (isSingleOccurrence ? 'Einzeltermin bearbeiten' : 'Terminserie bearbeiten')
            : 'Neuen Termin anlegen'}
          {groupName && (
            <span style={{ fontWeight: 400, fontSize: 16, marginLeft: 16, color: '#fff' }}>
              für Raumgruppe: <b>{typeof groupName === 'object' ? groupName.name : groupName}</b>
            </span>
          )}
        </div>
      )}
      showCloseIcon={true}
      close={onClose}
      isModal={true}
      footerTemplate={() => (
        <div className="flex gap-2 justify-end">
          <button className="e-btn e-danger" onClick={onClose}>
            Schließen
          </button>
          <button
            className="e-btn e-success"
            onClick={handleSave}
            disabled={shouldDisableButton || isSaving} // <--- Button nur für Einzeltermine in Vergangenheit deaktivieren
          >
            {isSaving ? 'Speichert...' : 'Termin(e) speichern'}
          </button>
        </div>
      )}
    >
      <div style={{ padding: '24px' }}>
        {errors.api && (
          <div
            style={{
              marginBottom: 12,
              color: '#721c24',
              background: '#f8d7da',
              border: '1px solid #f5c6cb',
              borderRadius: 4,
              padding: '8px 12px',
              fontSize: 13,
            }}
          >
            {errors.api}
          </div>
        )}
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: 260 }}>
            {/* ...Titel, Beschreibung, Datum, Zeit... */}
            <div style={{ marginBottom: 12 }}>
              <TextBoxComponent
                placeholder="Titel"
                floatLabelType="Auto"
                value={title}
                change={e => setTitle(e.value)}
              />
              {errors.title && <div style={{ color: 'red', fontSize: 12 }}>{errors.title}</div>}
            </div>
            <div style={{ marginBottom: 12 }}>
              <TextBoxComponent
                placeholder="Beschreibung"
                floatLabelType="Auto"
                multiline={true}
                value={description}
                change={e => setDescription(e.value)}
              />
            </div>
            <div style={{ marginBottom: 12 }}>
              <DatePickerComponent
                placeholder="Startdatum"
                floatLabelType="Auto"
                value={startDate ?? undefined}
                change={e => setStartDate(e.value)}
              />
              {errors.startDate && (
                <div style={{ color: 'red', fontSize: 12 }}>{errors.startDate}</div>
              )}
              {isPast && (isSingleOccurrence || !repeat) && (
                <span
                  style={{
                    color: 'orange',
                    fontWeight: 600,
                    marginLeft: 8,
                    display: 'inline-block',
                    background: '#fff3cd',
                    borderRadius: 4,
                    padding: '2px 8px',
                    border: '1px solid #ffeeba',
                  }}
                >
                  ⚠️ Termin liegt in der Vergangenheit!
                </span>
              )}
              {isPast && repeat && !isSingleOccurrence && (
                <span
                  style={{
                    color: 'blue',
                    fontWeight: 600,
                    marginLeft: 8,
                    display: 'inline-block',
                    background: '#e3f2fd',
                    borderRadius: 4,
                    padding: '2px 8px',
                    border: '1px solid #90caf9',
                  }}
                >
                  ℹ️ Bearbeitung einer Terminserie (Startdatum kann in Vergangenheit liegen)
                </span>
              )}
            </div>
            <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
              <div style={{ flex: 1 }}>
                <TimePickerComponent
                  placeholder="Startzeit"
                  floatLabelType="Auto"
                  value={startTime}
                  step={30}
                  change={e => setStartTime(e.value)}
                />
                {errors.startTime && (
                  <div style={{ color: 'red', fontSize: 12 }}>{errors.startTime}</div>
                )}
              </div>
              <div style={{ flex: 1 }}>
                <TimePickerComponent
                  placeholder="Endzeit"
                  floatLabelType="Auto"
                  value={endTime}
                  step={30}
                  change={e => setEndTime(e.value)}
                />
                {errors.endTime && (
                  <div style={{ color: 'red', fontSize: 12 }}>{errors.endTime}</div>
                )}
              </div>
            </div>
          </div>
          <div style={{ flex: 1, minWidth: 260 }}>
            {/* ...Wiederholung, MultiSelect, Wiederholung bis, Ferien... */}
            {isSingleOccurrence && (
              <div style={{ marginBottom: 12, padding: '8px 12px', backgroundColor: '#e8f4fd', borderRadius: 4, border: '1px solid #bee5eb' }}>
                <span style={{ fontSize: '14px', color: '#0c5460', fontWeight: 500 }}>
                  ℹ️ Bearbeitung eines Einzeltermins - Wiederholungsoptionen nicht verfügbar
                </span>
              </div>
            )}
            <div style={{ marginBottom: 12 }}>
              <CheckBoxComponent
                label="Wiederholender Termin"
                checked={repeat}
                change={e => setRepeat(e.checked)}
                disabled={isSingleOccurrence}
              />
            </div>
            <div style={{ marginBottom: 12 }}>
              <MultiSelectComponent
                key={repeat ? 'enabled' : 'disabled'}
                dataSource={weekdayOptions}
                fields={{ text: 'label', value: 'value' }}
                placeholder="Wochentage"
                value={weekdays}
                change={e => setWeekdays(e.value as number[])}
                disabled={!repeat || isSingleOccurrence}
                showDropDownIcon={true}
                closePopupOnSelect={false}
              />
            </div>
            <div style={{ marginBottom: 12 }}>
              <DatePickerComponent
                key={repeat ? 'enabled' : 'disabled'}
                placeholder="Wiederholung bis"
                floatLabelType="Auto"
                value={repeatUntil ?? undefined}
                change={e => setRepeatUntil(e.value)}
                disabled={!repeat || isSingleOccurrence}
              />
            </div>
            <div style={{ marginBottom: 12 }}>
              <CheckBoxComponent
                label="Ferientage berücksichtigen"
                checked={skipHolidays}
                change={e => setSkipHolidays(e.checked)}
                disabled={!repeat || isSingleOccurrence}
              />
            </div>
          </div>
        </div>

        {/* NEUER ZWEISPALTIGER BEREICH für Termintyp und Zusatzfelder */}
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', marginTop: 8 }}>
          <div style={{ flex: 1, minWidth: 260 }}>
            <div style={{ marginBottom: 12, marginTop: 16 }}>
              <DropDownListComponent
                dataSource={typeOptions}
                fields={{ text: 'label', value: 'value' }}
                placeholder="Termintyp"
                value={type}
                change={e => setType(e.value as string)}
                style={{ width: '100%' }}
              />
              {errors.type && <div style={{ color: 'red', fontSize: 12 }}>{errors.type}</div>}
            </div>
          </div>
          <div style={{ flex: 1, minWidth: 260 }}>
            <div style={{ marginBottom: 12, minHeight: 60 }}>
              {type === 'presentation' && (
                <div>
                  <div style={{ marginBottom: 8, marginTop: 16 }}>
                    <button
                      className="e-btn"
                      onClick={() => setMediaModalOpen(true)}
                      style={{ width: '100%' }}
                    >
                      Medium auswählen/hochladen
                    </button>
                  </div>
                  <div style={{ marginBottom: 8 }}>
                    <b>Ausgewähltes Medium:</b>{' '}
                    {media ? (
                      media.path
                    ) : (
                      <span style={{ color: '#888' }}>Kein Medium ausgewählt</span>
                    )}
                  </div>
                  {errors.media && <div style={{ color: 'red', fontSize: 12 }}>{errors.media}</div>}
                  {errors.slideshowInterval && (
                    <div style={{ color: 'red', fontSize: 12 }}>{errors.slideshowInterval}</div>
                  )}
                  <TextBoxComponent
                    placeholder="Slideshow-Intervall (Sekunden)"
                    floatLabelType="Auto"
                    type="number"
                    value={String(slideshowInterval)}
                    change={e => setSlideshowInterval(Number(e.value))}
                  />
                  <div style={{ marginTop: 8 }}>
                    <CheckBoxComponent
                      label="Seitenfortschritt anzeigen"
                      checked={pageProgress}
                      change={e => setPageProgress(e.checked || false)}
                    />
                  </div>
                  <div style={{ marginTop: 8 }}>
                    <CheckBoxComponent
                      label="Automatischer Fortschritt"
                      checked={autoProgress}
                      change={e => setAutoProgress(e.checked || false)}
                    />
                  </div>
                </div>
              )}
              {type === 'website' && (
                <div>
                  <TextBoxComponent
                    placeholder="Webseiten-URL"
                    floatLabelType="Always"
                    value={websiteUrl}
                    change={e => setWebsiteUrl(e.value)}
                  />
                </div>
              )}
              {type === 'video' && (
                <div>
                  <div style={{ marginBottom: 8, marginTop: 16 }}>
                    <button
                      className="e-btn"
                      onClick={() => setMediaModalOpen(true)}
                      style={{ width: '100%' }}
                    >
                      Video auswählen/hochladen
                    </button>
                  </div>
                  <div style={{ marginBottom: 8 }}>
                    <b>Ausgewähltes Video:</b>{' '}
                    {media ? (
                      media.path
                    ) : (
                      <span style={{ color: '#888' }}>Kein Video ausgewählt</span>
                    )}
                  </div>
                  {errors.media && <div style={{ color: 'red', fontSize: 12 }}>{errors.media}</div>}
                  <div style={{ marginTop: 8 }}>
                    <CheckBoxComponent
                      label="Automatisch abspielen"
                      checked={autoplay}
                      change={e => setAutoplay(e.checked || false)}
                    />
                  </div>
                  <div style={{ marginTop: 8 }}>
                    <CheckBoxComponent
                      label="In Schleife abspielen"
                      checked={loop}
                      change={e => setLoop(e.checked || false)}
                    />
                  </div>
                  <div style={{ marginTop: 8 }}>
                    <label style={{ display: 'block', marginBottom: 4, fontWeight: 500, fontSize: '14px' }}>
                      Lautstärke
                    </label>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                      <TextBoxComponent
                        placeholder="0.0 - 1.0"
                        floatLabelType="Never"
                        type="number"
                        value={String(volume)}
                        change={e => setVolume(Math.max(0, Math.min(1, Number(e.value))))}
                        style={{ flex: 1 }}
                      />
                      <CheckBoxComponent
                        label="Ton aus"
                        checked={muted}
                        change={e => setMuted(e.checked || false)}
                      />
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      {mediaModalOpen && (
        <CustomSelectUploadEventModal
          open={mediaModalOpen}
          onClose={() => setMediaModalOpen(false)}
          onSelect={({ id, path, name }) => {
            setMedia({ id, path, name });
            setErrors(prev => {
              if (!prev.media) return prev;
              const next = { ...prev };
              delete next.media;
              return next;
            });
            setMediaModalOpen(false);
          }}
          selectedFileId={null}
        />
      )}
    </DialogComponent>
  );
};

export default CustomEventModal;