const { useState, useEffect } = React;

const STATUS_LABELS = {
  operational: { label: 'Operationeel', color: '#10b981' },
  degraded: { label: 'Verminderde prestaties', color: '#f59e0b' },
  partial_outage: { label: 'Gedeeltelijke storing', color: '#f59e0b' },
  major_outage: { label: 'Grote storing', color: '#ef4444' },
  maintenance: { label: 'Onderhoud', color: '#3b82f6' },
};

const INCIDENT_STATUS = {
  investigating: 'Onderzoek',
  identified: 'Geïdentificeerd',
  monitoring: 'Monitoring',
  resolved: 'Opgelost',
};

function fmt(s) {
  if (!s) return '';
  const d = new Date(s.replace(' ', 'T') + 'Z');
  return d.toLocaleDateString('nl-NL') + ' ' + d.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' });
}

function StatusPage() {
  const [data, setData] = useState({ services: [], incidents: [] });
  const [siteName, setSiteName] = useState('WNM-Host');
  const [loadError, setLoadError] = useState(false);

  useEffect(() => {
    fetch('/api/public/site-config').then(r => r.json()).then(c => setSiteName(c['site.name'] || 'WNM-Host')).catch(() => {});
    const load = () => fetch('/api/public/status')
      .then(r => { if (!r.ok) throw new Error('status ' + r.status); return r.json(); })
      .then(d => { setData(d); setLoadError(false); })
      .catch(() => setLoadError(true));
    load();
    const t = setInterval(load, 30000);
    return () => clearInterval(t);
  }, []);

  const allOk = data.services.every(s => s.status === 'operational');
  const activeIncidents = data.incidents.filter(i => i.status !== 'resolved');

  return (
    <>
      <header className="site-header">
        <div className="site-header-inner">
          <a href="/" className="brand" style={{textDecoration:'none'}}>{siteName}</a>
          <nav>
            <a href="/">Home</a>
            <a href="/faq">FAQ</a>
            <a href="/klant" className="btn btn-sm">Klantenpaneel</a>
          </nav>
        </div>
      </header>
      <div className="section" style={{maxWidth: 900}}>
        <h2 className="center">Service status</h2>

        {loadError && (
          <div className="card center mb-2" style={{background: '#fee2e2', borderColor: '#ef4444'}}>
            <p className="mb-0" style={{color: '#991b1b'}}>De statusgegevens konden niet worden geladen. We proberen het automatisch opnieuw.</p>
          </div>
        )}

        <div className="card center mb-2" style={{background: allOk ? '#d1fae5' : '#fef3c7', borderColor: allOk ? '#10b981' : '#f59e0b'}}>
          <h3 className="mt-0" style={{color: allOk ? '#065f46' : '#92400e'}}>
            {allOk ? '✓ Alle systemen operationeel' : 'Er zijn problemen, zie hieronder'}
          </h3>
          <p className="muted small mb-0">Laatste check: {new Date().toLocaleString('nl-NL')}</p>
        </div>

        <div className="card mb-2">
          <h3 className="mt-0">Services</h3>
          {data.services.map(s => {
            const meta = STATUS_LABELS[s.status] || STATUS_LABELS.operational;
            return (
              <div key={s.id} style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--border)'}}>
                <div>
                  <strong>{s.name}</strong>
                  {s.description && <div className="muted small">{s.description}</div>}
                </div>
                <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
                  <span style={{width: 10, height: 10, borderRadius: '50%', background: meta.color, display: 'inline-block'}}></span>
                  <span style={{color: meta.color, fontWeight: 600}}>{meta.label}</span>
                </div>
              </div>
            );
          })}
        </div>

        {activeIncidents.length > 0 && (
          <div className="card mb-2" style={{borderColor: 'var(--warning)'}}>
            <h3 className="mt-0">Actieve incidenten</h3>
            {activeIncidents.map(inc => (
              <div key={inc.id} className="card" style={{background: '#fffbeb', marginBottom: 12}}>
                <strong>{inc.title}</strong>
                {inc.service_name && <span className="muted"> · {inc.service_name}</span>}
                <div className="muted small">Gestart: {fmt(inc.started_at)}</div>
                <span className={`badge badge-${inc.status}`}>{INCIDENT_STATUS[inc.status] || inc.status}</span>
                {inc.updates && inc.updates.map(u => (
                  <div key={u.id} className="timeline-item admin mt-2">
                    <div className="small muted">{fmt(u.created_at)} · {INCIDENT_STATUS[u.status] || u.status}</div>
                    <div>{u.message}</div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        )}

        <div className="card">
          <h3 className="mt-0">Incidenten historie</h3>
          {data.incidents.length === 0 && <p className="muted">Geen incidenten gerapporteerd.</p>}
          {data.incidents.filter(i => i.status === 'resolved').slice(0, 10).map(inc => (
            <div key={inc.id} style={{padding: '10px 0', borderBottom: '1px solid var(--border)'}}>
              <strong>{inc.title}</strong>
              <div className="muted small">
                {fmt(inc.started_at)} {inc.resolved_at && '· opgelost: ' + fmt(inc.resolved_at)}
                {inc.service_name && ' • ' + inc.service_name}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

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