// Teilnehmer-Startseite — zeigt echte Treffen aus der API.
// In leichter Sprache geschrieben.

function ParticipantHome({ onJoin, onJoinError }) {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [joining, setJoining] = React.useState(false);

  // Erstmal laden + dann alle 10s aktualisieren
  React.useEffect(() => {
    let cancelled = false;
    let timer = null;

    async function load() {
      if (!window.Api?.isConfigured()) {
        if (!cancelled) {
          setData({ running: [], scheduled: [] });
          setLoading(false);
          setError('Backend nicht konfiguriert.');
        }
        return;
      }
      try {
        const d = await window.Api.listMeetings();
        if (!cancelled) {
          setData(d);
          setError(null);
          setLoading(false);
        }
      } catch (e) {
        if (!cancelled) {
          setError(e.message);
          setLoading(false);
        }
      }
    }
    load();
    timer = setInterval(load, 10000);
    return () => { cancelled = true; if (timer) clearInterval(timer); };
  }, []);

  const join = async (meeting) => {
    if (joining) return;
    setJoining(true);
    try {
      const conn = await window.Api.joinMeeting(meeting.id);
      onJoin(conn);
    } catch (e) {
      setJoining(false);
      onJoinError?.(e.message || 'Verbindung fehlgeschlagen');
    }
  };

  const runningAll = data?.running || [];
  // Beitreten geht nur wenn das Treffen läuft UND der Moderator wirklich
  // im Raum ist. Sonst behandeln wir es wie "kommt gleich".
  const joinable = runningAll.filter(m => m.moderatorPresent);
  const runningWithoutMod = runningAll.filter(m => !m.moderatorPresent);
  const scheduled = data?.scheduled || [];
  const now = Date.now();

  // "Es geht gleich los": entweder running aber Moderator noch nicht da,
  // oder scheduled innerhalb der nächsten 30 Min / max. 60 Min vorbei.
  const aboutToStart = runningWithoutMod[0] || scheduled.find(m => {
    if (!m.scheduledAt) return false;
    const t = new Date(m.scheduledAt).getTime();
    return t - now < 30 * 60 * 1000 && t - now > -60 * 60 * 1000;
  });

  // Determine current meeting status for aria-live announcement
  const statusText = loading ? 'Treffen werden geladen'
    : joinable.length > 0 ? 'Ein Treffen läuft gerade. Du kannst jetzt mit-machen.'
    : aboutToStart ? 'Ein Treffen fängt gleich an.'
    : scheduled.length > 0 ? 'Es gibt geplante Treffen.'
    : 'Gerade kein Treffen geplant.';

  return (
    <div className="main main--home">
      {/* Live region for meeting status changes */}
      <div className="sr-only" aria-live="polite" role="status">
        {statusText}
      </div>

      <div className="home-grid">
        {loading ? (
          <div className="home-hero">
            <h1 className="h-display" data-focus-target tabIndex="-1">Einen Moment...</h1>
            <p className="ls-text"><span className="ls-line">Wir schauen, ob es ein Treffen gibt.</span></p>
          </div>
        ) : joinable.length > 0 ? (
          <RunningHero meeting={joinable[0]} onJoin={() => join(joinable[0])} joining={joining}/>
        ) : aboutToStart ? (
          <AboutToStartHero meeting={aboutToStart}/>
        ) : scheduled.length > 0 ? (
          <NextScheduledHero meeting={scheduled[0]}/>
        ) : (
          <NoMeetingHero/>
        )}

        {/* Seite-Illustration */}
        <div className="home-illus" aria-hidden="true">
          {joinable.length > 0 ? <IllusCommunity/> : <IllusWaiting/>}
        </div>
      </div>

      {/* Liste weiterer geplanter Treffen — nur zeigen, wenn es
          wirklich Einträge gibt (sonst leere Überschrift) */}
      {(() => {
        const more = scheduled.slice(joinable.length > 0 || aboutToStart ? 0 : 1);
        if (more.length === 0) return null;
        return (
          <section className="next-meetings" aria-labelledby="next-meetings-heading">
            <h2 className="h-1" id="next-meetings-heading" style={{ marginBottom: 20 }}>
              {joinable.length > 0 ? 'Die nächsten Treffen' : 'Das sind die nächsten Treffen'}
            </h2>
            {more.map((m) => (
              <ScheduledRow key={m.id} meeting={m}/>
            ))}
          </section>
        );
      })()}

      {error && !loading && (
        <div className="muted" role="alert" style={{ marginTop: 24, fontSize: 14, textAlign: 'center' }}>
          {error}
        </div>
      )}
    </div>
  );
}

function RunningHero({ meeting, onJoin, joining }) {
  return (
    <div className="home-hero live" role="region" aria-label="Laufendes Treffen">
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <span className="eyebrow live" style={{ background: 'rgba(255,255,255,0.18)', color: 'white' }}>
          <span className="dot" style={{ background: '#FF8888' }} aria-hidden="true"></span>
          Das Treffen läuft gerade
        </span>
      </div>

      <h1 className="h-display" data-focus-target tabIndex="-1" style={{ color: 'white' }}>{meeting.title}</h1>

      <p className="ls-text" style={{ color: 'rgba(255,255,255,0.9)' }}>
        <span className="ls-line">Wir reden gerade mit-einander.</span>
        <span className="ls-line">Du kannst mit-machen.</span>
        <span className="ls-line">Klicke auf den weissen Knopf.</span>
      </p>

      <button
        className="btn btn-huge"
        onClick={onJoin}
        disabled={joining}
        style={{ background: 'white', color: 'var(--blue-800)', alignSelf: 'flex-start', opacity: joining ? 0.6 : 1 }}
        aria-label="Jetzt am Treffen teilnehmen"
      >
        <Icon.Play size={28}/>
        {joining ? 'Verbinde...' : 'Jetzt mit-machen'}
      </button>

      <div style={{ display: 'flex', gap: 24, marginTop: 8, fontSize: 17, color: 'rgba(255,255,255,0.85)', flexWrap: 'wrap' }}>
        <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
          <Icon.Clock size={20} aria-hidden="true"/> <span>Läuft seit {timeSince(meeting.startedAt)}</span>
        </span>
      </div>
    </div>
  );
}

function AboutToStartHero({ meeting }) {
  return (
    <div className="home-hero live" role="region" aria-label="Treffen beginnt gleich">
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <span className="eyebrow" style={{ background: 'rgba(255,255,255,0.18)', color: 'white' }}>
          <Icon.Clock size={18} aria-hidden="true"/> Es geht gleich los
        </span>
      </div>

      <h1 className="h-display" data-focus-target tabIndex="-1" style={{ color: 'white' }}>{meeting.title}</h1>

      <p className="ls-text" style={{ color: 'rgba(255,255,255,0.9)' }}>
        <span className="ls-line">Das Treffen fängt gleich an.</span>
        <span className="ls-line">Bitte warte einen kleinen Moment.</span>
        <span className="ls-line">Die Seite zeigt dir,</span>
        <span className="ls-line">wenn es los geht.</span>
      </p>

      <div style={{ display: 'flex', gap: 24, marginTop: 8, fontSize: 17, color: 'rgba(255,255,255,0.85)', flexWrap: 'wrap' }}>
        <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
          <Icon.Calendar size={20} aria-hidden="true"/> <span>Geplant für {formatTime(meeting.scheduledAt)} Uhr</span>
        </span>
      </div>
    </div>
  );
}

function NextScheduledHero({ meeting }) {
  return (
    <div className="home-hero" role="region" aria-label="Nächstes geplantes Treffen">
      <span className="eyebrow">
        <Icon.Calendar size={18} aria-hidden="true"/>
        Gerade kein Treffen
      </span>

      <h1 className="h-display" data-focus-target tabIndex="-1">Hallo, schön<br/>dass du da bist.</h1>

      <p className="ls-text">
        <span className="ls-line">Hier kannst du dich</span>
        <span className="ls-line">mit anderen Menschen treffen.</span>
        <span className="ls-line">Ihr redet mit-einander.</span>
        <span className="ls-line">Über die Kamera am Computer.</span>
      </p>

      <div className="card-warm" style={{ padding: 28, borderRadius: 28 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 12 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 16,
            background: 'var(--blue-700)', color: 'white',
            display: 'grid', placeItems: 'center'
          }} aria-hidden="true">
            <Icon.Calendar size={28}/>
          </div>
          <div>
            <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              Das nächste Treffen
            </div>
            <div className="h-2" style={{ marginTop: 4 }}>{meeting.title}</div>
          </div>
        </div>
        <p className="ls-text">
          <span className="ls-line">Am <strong>{formatDay(meeting.scheduledAt)}</strong></span>
          <span className="ls-line">Um <strong>{formatTime(meeting.scheduledAt)} Uhr</strong></span>
        </p>
      </div>
    </div>
  );
}

function NoMeetingHero() {
  return (
    <div className="home-hero" role="region" aria-label="Kein Treffen geplant">
      <span className="eyebrow">
        <Icon.Calendar size={18} aria-hidden="true"/>
        Gerade kein Treffen
      </span>

      <h1 className="h-display" data-focus-target tabIndex="-1">Hallo, schön<br/>dass du da bist.</h1>

      <p className="ls-text">
        <span className="ls-line">Hier kannst du dich</span>
        <span className="ls-line">mit anderen Menschen treffen.</span>
        <span className="ls-line">Ihr redet mit-einander.</span>
        <span className="ls-line">Über die Kamera am Computer.</span>
      </p>

      <div className="card-warm" style={{ padding: 28, borderRadius: 28 }}>
        <p className="ls-text" style={{ margin: 0 }}>
          <span className="ls-line">Es ist gerade kein Treffen geplant.</span>
          <span className="ls-line">Schau bald wieder vorbei.</span>
        </p>
      </div>
    </div>
  );
}

function ScheduledRow({ meeting }) {
  const dt = meeting.scheduledAt ? new Date(meeting.scheduledAt) : null;
  const day = dt ? String(dt.getDate()).padStart(2, '0') : '–';
  const month = dt ? ['Jan','Feb','Mrz','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][dt.getMonth()] : '';
  return (
    <article className="meeting-row" aria-label={meeting.title + (dt ? ', am ' + formatDayTime(meeting.scheduledAt) : '')}>
      <div className="meeting-day" aria-hidden="true">
        <span className="d">{day}</span>
        <span className="m">{month}</span>
      </div>
      <div className="meeting-info">
        <div className="title">{meeting.title}</div>
        <div className="time">
          <span><Icon.Clock size={18} aria-hidden="true"/> {formatDayTime(meeting.scheduledAt)}</span>
          <span><Icon.Pin size={18} aria-hidden="true"/> Online</span>
        </div>
      </div>
    </article>
  );
}

// ── Datums-Helpers ────────────────────────────────────────────────────────
function formatTime(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
}
function formatDay(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  const days = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];
  const months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
  return `${days[d.getDay()]}, ${d.getDate()}. ${months[d.getMonth()]}`;
}
function formatDayTime(iso) {
  if (!iso) return '';
  return `${formatDay(iso)}, ${formatTime(iso)} Uhr`;
}
function timeSince(iso) {
  if (!iso) return '';
  const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
  if (diff < 1) return 'wenigen Sekunden';
  if (diff === 1) return '1 Minute';
  if (diff < 60) return `${diff} Minuten`;
  const h = Math.floor(diff / 60);
  return h === 1 ? '1 Stunde' : `${h} Stunden`;
}

Object.assign(window, { ParticipantHome });