// Mitreden — Main App
//
// Routing:
//   /              → Teilnehmer-Ansicht (Participant)
//   /?admin=1      → Moderator-Ansicht (Admin-Login + Dashboard)

// ── Toast-System ─────────────────────────────────────────────────────────

const ToastContext = React.createContext(null);

function ToastProvider({ children }) {
  const [toasts, setToasts] = React.useState([]);

  const show = React.useCallback((message, type = 'error') => {
    const id = Math.random().toString(36).slice(2);
    setToasts(prev => [...prev, { id, message, type }]);
    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 6000);
  }, []);

  const dismiss = React.useCallback((id) => {
    setToasts(prev => prev.filter(t => t.id !== id));
  }, []);

  React.useEffect(() => {
    window.showToast = show;
    return () => { delete window.showToast; };
  }, [show]);

  return (
    <ToastContext.Provider value={show}>
      {children}
      <div className="toast-container" aria-live="assertive" role="alert">
        {toasts.map(t => (
          <div key={t.id} className={"toast toast--" + t.type}>
            <span className="toast-icon">
              {t.type === 'error' ? '!' : t.type === 'success' ? '✓' : 'i'}
            </span>
            <span className="toast-message">{t.message}</span>
            <button className="toast-close" onClick={() => dismiss(t.id)} aria-label="Schliessen">
              ✕
            </button>
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
}

function useToast() {
  return React.useContext(ToastContext);
}

// ── Confirm-Dialog ───────────────────────────────────────────────────────

function ConfirmDialog({ message, onConfirm, onCancel }) {
  const dialogRef = React.useRef(null);
  React.useEffect(() => {
    if (dialogRef.current) dialogRef.current.focus();
  }, []);

  return (
    <div className="confirm-overlay" role="dialog" aria-modal="true" aria-label="Bestaetigung">
      <div className="confirm-box" ref={dialogRef} tabIndex={-1}>
        <p className="confirm-message">{message}</p>
        <div className="confirm-actions">
          <button className="btn btn-secondary" onClick={onCancel}>Abbrechen</button>
          <button className="btn btn-primary" onClick={onConfirm}>Ja, weiter</button>
        </div>
      </div>
    </div>
  );
}

// ── Prompt-Dialog ────────────────────────────────────────────────────────

function PromptDialog({ message, defaultValue, onSubmit, onCancel }) {
  const [value, setValue] = React.useState(defaultValue || '');
  const inputRef = React.useRef(null);
  React.useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select();
    }
  }, []);

  return (
    <div className="confirm-overlay" role="dialog" aria-modal="true" aria-label="Eingabe">
      <div className="confirm-box">
        <p className="confirm-message">{message}</p>
        <div className="field" style={{ marginBottom: 16 }}>
          <input
            ref={inputRef}
            type="text"
            value={value}
            onChange={e => setValue(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter' && value.trim()) onSubmit(value.trim()); }}
            style={{ width: '100%' }}
          />
        </div>
        <div className="confirm-actions">
          <button className="btn btn-secondary" onClick={onCancel}>Abbrechen</button>
          <button className="btn btn-primary" onClick={() => onSubmit(value.trim())} disabled={!value.trim()}>OK</button>
        </div>
      </div>
    </div>
  );
}

window.ConfirmDialog = ConfirmDialog;
window.PromptDialog = PromptDialog;

// ── Offline-Banner ───────────────────────────────────────────────────────

function OfflineBanner() {
  const [offline, setOffline] = React.useState(!navigator.onLine);

  React.useEffect(() => {
    const goOffline = () => setOffline(true);
    const goOnline = () => setOffline(false);
    window.addEventListener('offline', goOffline);
    window.addEventListener('online', goOnline);
    return () => {
      window.removeEventListener('offline', goOffline);
      window.removeEventListener('online', goOnline);
    };
  }, []);

  if (!offline) return null;

  return (
    <div className="offline-banner" role="alert" aria-live="assertive">
      <span className="offline-icon">!</span>
      Du bist gerade nicht mit dem Internet verbunden.
    </div>
  );
}

// ── App ──────────────────────────────────────────────────────────────────

function isAdminRoute() {
  try {
    return new URLSearchParams(window.location.search).has('admin');
  } catch { return false; }
}

function App() {
  const [adminMode] = React.useState(isAdminRoute());
  const [call, setCall] = React.useState(null);
  const [isModerator, setIsModerator] = React.useState(false);
  const [joinError, setJoinError] = React.useState(null);

  function enterCall(conn, asModerator = false) {
    setCall(conn);
    setIsModerator(asModerator);
  }
  function leaveCall() {
    setCall(null);
    setIsModerator(false);
  }

  React.useEffect(() => {
    const heading = document.querySelector('[data-focus-target]');
    if (heading) heading.focus();
  }, [call, adminMode]);

  if (call) {
    return (
      <ToastProvider>
        <OfflineBanner/>
        <VideoCall
          connection={call}
          meeting={call.meeting}
          isModerator={isModerator}
          onLeave={leaveCall}
        />
      </ToastProvider>
    );
  }

  if (adminMode) {
    return (
      <ToastProvider>
        <OfflineBanner/>
        <AdminApp
          onEnterCall={(conn) => enterCall(conn, true)}
        />
      </ToastProvider>
    );
  }

  return (
    <ToastProvider>
      <OfflineBanner/>
      <div className="app">
        <a className="skip-link" href="#main-content">
          Zum Inhalt springen
        </a>
        <Topbar/>
        <main id="main-content">
          <ParticipantHome
            onJoin={(conn) => enterCall(conn, false)}
            onJoinError={(msg) => setJoinError(msg)}
          />
        </main>
        <footer className="site-footer">
          <a href="/impressum.html">Impressum</a>
          <span className="site-footer-dot">&middot;</span>
          <a href="/datenschutz.html">Datenschutz</a>
        </footer>
        {joinError && (
          <div
            role="alert"
            style={{
              position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)',
              background: 'var(--red)', color: 'white',
              padding: '14px 20px', borderRadius: 'var(--r-full)',
              fontSize: 15, fontWeight: 700, boxShadow: 'var(--shadow-md)',
              maxWidth: 'calc(100vw - 32px)',
            }}
          >
            {joinError}
            <button
              onClick={() => setJoinError(null)}
              style={{ marginLeft: 16, color: 'white', fontSize: 18 }}
              aria-label="Fehlermeldung schliessen"
            >&#10005;</button>
          </div>
        )}
      </div>
    </ToastProvider>
  );
}

function Topbar() {
  return (
    <header className="topbar" role="banner">
      <div className="brand">
        <div className="brand-mark" aria-hidden="true">
          <img src="/favicon.svg" width="30" height="30" alt=""/>
        </div>
        Mitreden
      </div>
    </header>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);