import { useState } from 'react';
import { Activity, ScrollText, SlidersHorizontal, X } from 'lucide-react';
import { createPortal } from 'react-dom';
import SidebarPerfProbeMonitorTab from './perfProbe/SidebarPerfProbeMonitorTab';
import SidebarPerfProbeTogglesTab from './perfProbe/SidebarPerfProbeTogglesTab';
import SidebarPerfProbeLogsTab from './perfProbe/SidebarPerfProbeLogsTab';
import { resetPerfProbeFlags, type PerfProbeFlags } from '../../utils/perf/perfFlags';
import { clearPerfLiveOverlayPins } from '../../utils/perf/perfOverlayPins';
import { resetPerfOverlayAppearance } from '../../utils/perf/perfOverlayAppearance';
import { resetPerfOverlayMode } from '../../utils/perf/perfOverlayMode';

type TabId = 'monitor' | 'toggles' | 'logs';

interface Props {
  open: boolean;
  onClose: () => void;
  perfFlags: PerfProbeFlags;
  hotCacheEnabled: boolean;
  setHotCacheEnabled: (v: boolean) => void;
  normalizationEngine: string;
  setNormalizationEngine: (v: 'off' | 'loudness') => void;
  loggingMode: string;
  setLoggingMode: (v: 'off' | 'normal') => void;
}

export default function SidebarPerfProbeModal({
  open,
  onClose,
  perfFlags,
  hotCacheEnabled,
  setHotCacheEnabled,
  normalizationEngine,
  setNormalizationEngine,
  loggingMode,
  setLoggingMode,
}: Props) {
  const [tab, setTab] = useState<TabId>('monitor');

  if (!open) return null;

  const resetAll = () => {
    resetPerfProbeFlags();
    clearPerfLiveOverlayPins();
    resetPerfOverlayAppearance();
    resetPerfOverlayMode();
  };

  return createPortal(
    <div
      className="modal-overlay modal-overlay--perf-probe"
      onClick={() => onClose()}
      role="dialog"
      aria-modal="true"
      aria-labelledby="perf-probe-title"
    >
      <div
        className="modal-content sidebar-perf-modal"
        onClick={e => e.stopPropagation()}
      >
        <button type="button" className="modal-close" onClick={() => onClose()} aria-label="Close">
          <X size={18} />
        </button>

        <header className="sidebar-perf-modal__header">
          <h3 id="perf-probe-title" className="modal-title">Performance Probe</h3>
          <p className="sidebar-perf-modal__hint">
            Live metrics with optional on-screen overlays, plus diagnostic disable toggles.
          </p>
        </header>

        <div className="sidebar-perf-modal__tabs" role="tablist" aria-label="Performance probe sections">
          <button
            type="button"
            role="tab"
            aria-selected={tab === 'monitor'}
            className={`sidebar-perf-modal__tab${tab === 'monitor' ? ' sidebar-perf-modal__tab--active' : ''}`}
            onClick={() => setTab('monitor')}
          >
            <Activity size={15} />
            Monitor
          </button>
          <button
            type="button"
            role="tab"
            aria-selected={tab === 'toggles'}
            className={`sidebar-perf-modal__tab${tab === 'toggles' ? ' sidebar-perf-modal__tab--active' : ''}`}
            onClick={() => setTab('toggles')}
          >
            <SlidersHorizontal size={15} />
            Toggles
          </button>
          <button
            type="button"
            role="tab"
            aria-selected={tab === 'logs'}
            className={`sidebar-perf-modal__tab${tab === 'logs' ? ' sidebar-perf-modal__tab--active' : ''}`}
            onClick={() => setTab('logs')}
          >
            <ScrollText size={15} />
            Logs
          </button>
        </div>

        <div className={`sidebar-perf-modal__body${tab === 'logs' ? ' sidebar-perf-modal__body--logs' : ''}`}>
          {tab === 'monitor' && <SidebarPerfProbeMonitorTab />}
          {tab === 'toggles' && (
            <SidebarPerfProbeTogglesTab
              perfFlags={perfFlags}
              hotCacheEnabled={hotCacheEnabled}
              setHotCacheEnabled={setHotCacheEnabled}
              normalizationEngine={normalizationEngine}
              setNormalizationEngine={setNormalizationEngine}
              loggingMode={loggingMode}
              setLoggingMode={setLoggingMode}
            />
          )}
          {tab === 'logs' && <SidebarPerfProbeLogsTab />}
        </div>

        <div className="sidebar-perf-modal__actions">
          <button type="button" className="btn btn-ghost" onClick={resetAll}>
            Reset all
          </button>
          <button type="button" className="btn btn-primary" onClick={() => onClose()}>
            Close
          </button>
        </div>
      </div>
    </div>,
    document.body,
  );
}