import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

import { ipcChannels } from '../../shared/ipc/contracts';
import type { DisplayInfo, PresentationSettings } from '../../shared/types/presentationSettings';
import { getDndApi } from '../shared/dndApi';
import { Button } from '../shared/ui/controls';

import styles from './EditorApp.module.css';
import { useEditorI18n } from './i18n/EditorI18nContext';
import modalStyles from './PresentationSettingsModal.module.css';

export function PresentationSettingsModal({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const { t } = useEditorI18n();
  const api = getDndApi();
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [displays, setDisplays] = useState<DisplayInfo[]>([]);
  const [draft, setDraft] = useState<PresentationSettings>({ displayId: null, fullScreen: true });

  useEffect(() => {
    if (!open) return;
    let cancelled = false;
    setLoading(true);
    void (async () => {
      try {
        const [{ displays: list }, { settings }] = await Promise.all([
          api.invoke(ipcChannels.windows.listDisplays, {}),
          api.invoke(ipcChannels.preferences.getPresentation, {}),
        ]);
        if (cancelled) return;
        setDisplays(list);
        setDraft(settings);
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [api, open]);

  if (!open) return null;

  const save = async () => {
    setSaving(true);
    try {
      const primaryId = displays.find((d) => d.isPrimary)?.id ?? null;
      const settings: PresentationSettings = {
        ...draft,
        displayId: draft.displayId === primaryId ? null : draft.displayId,
      };
      await api.invoke(ipcChannels.preferences.setPresentation, { settings });
      onClose();
    } finally {
      setSaving(false);
    }
  };

  const isDisplaySelected = (d: DisplayInfo) =>
    draft.displayId === d.id || (draft.displayId === null && d.isPrimary);

  const displayLabel = (d: DisplayInfo) => {
    const primary = d.isPrimary ? ` (${t('settings.presentation.primary')})` : '';
    return `${d.label}${primary} — ${d.width}×${d.height}`;
  };

  return createPortal(
    <>
      <div className={styles.modalBackdrop} aria-hidden onClick={onClose} />
      <div
        className={[styles.modalDialog, modalStyles.dialog].join(' ')}
        role="dialog"
        aria-modal="true"
        data-testid="presentation-settings-modal"
      >
        <div className={styles.modalHeader}>
          <div className={styles.modalTitle}>{t('settings.presentation.title')}</div>
          <button
            type="button"
            aria-label={t('common.close')}
            onClick={onClose}
            className={styles.modalClose}
          >
            ×
          </button>
        </div>
        <div>
          <p className={modalStyles.hint}>{t('settings.presentation.hint')}</p>
          <section className={modalStyles.section}>
            <div className={modalStyles.sectionTitle}>{t('settings.presentation.display')}</div>
            {loading ? (
              <div className={modalStyles.loading}>{t('settings.presentation.loading')}</div>
            ) : (
              <div className={modalStyles.list} role="radiogroup" aria-label={t('settings.presentation.display')}>
                {displays.map((d) => (
                  <label key={d.id} className={modalStyles.row}>
                    <input
                      type="radio"
                      name="presentation-display"
                      checked={isDisplaySelected(d)}
                      onChange={() => setDraft((prev) => ({ ...prev, displayId: d.id }))}
                      data-testid={`presentation-display-${d.id}`}
                    />
                    <span>{displayLabel(d)}</span>
                  </label>
                ))}
              </div>
            )}
          </section>
          <label className={modalStyles.fullScreenRow}>
            <input
              type="checkbox"
              checked={draft.fullScreen}
              onChange={(e) => setDraft((prev) => ({ ...prev, fullScreen: e.target.checked }))}
              data-testid="presentation-fullscreen"
            />
            <span>{t('settings.presentation.fullScreen')}</span>
          </label>
        </div>
        <div className={styles.modalFooter}>
          <Button variant="ghost" onClick={onClose} disabled={saving}>
            {t('common.cancel')}
          </Button>
          <Button variant="primary" onClick={() => void save()} disabled={loading || saving} data-testid="presentation-settings-save">
            {t('common.save')}
          </Button>
        </div>
      </div>
    </>,
    document.body,
  );
}