const { useState, useEffect } = React;

function FaqPage() {
  const [items, setItems] = useState([]);
  const [siteName, setSiteName] = useState('WNM-Host');
  const [search, setSearch] = useState('');
  const [openId, setOpenId] = useState(null);
  const [loadError, setLoadError] = useState(false);

  useEffect(() => {
    fetch('/api/public/site-config').then(r => r.json()).then(c => setSiteName(c['site.name'] || 'WNM-Host')).catch(() => {});
    fetch('/api/public/faq')
      .then(r => { if (!r.ok) throw new Error('faq ' + r.status); return r.json(); })
      .then(setItems)
      .catch(() => setLoadError(true));
  }, []);

  const grouped = {};
  items.filter(i => {
    if (!search) return true;
    const q = search.toLowerCase();
    return i.question.toLowerCase().includes(q) || i.answer.toLowerCase().includes(q);
  }).forEach(i => {
    if (!grouped[i.category]) grouped[i.category] = [];
    grouped[i.category].push(i);
  });

  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="/status">Status</a>
            <a href="/klant" className="btn btn-sm">Klantenpaneel</a>
          </nav>
        </div>
      </header>
      <div className="section" style={{maxWidth: 900}}>
        <h2 className="center">Veelgestelde vragen</h2>
        <p className="lead">Zoek je een antwoord op een vraag? Wij hebben de meest gestelde vragen hier op een rij gezet.</p>
        <input
          value={search} onChange={e => setSearch(e.target.value)}
          placeholder="Zoek op trefwoord, bv. 'migratie'..."
          style={{maxWidth: 500, margin: '0 auto 30px', display: 'block', padding: '12px 16px', fontSize: 15}}
        />
        {loadError && <p className="center" style={{color: '#991b1b'}}>De vragen konden niet worden geladen. Probeer het later opnieuw.</p>}
        {!loadError && Object.keys(grouped).length === 0 && <p className="muted center">Geen vragen gevonden voor "{search}".</p>}
        {Object.entries(grouped).map(([cat, list]) => (
          <div key={cat} className="card mb-2">
            <h3 className="mt-0" style={{textTransform: 'capitalize'}}>{cat}</h3>
            {list.map(item => (
              <div key={item.id} style={{borderBottom: '1px solid var(--border)', padding: '12px 0'}}>
                <div style={{cursor: 'pointer', fontWeight: 600, display: 'flex', justifyContent: 'space-between'}} onClick={() => setOpenId(openId === item.id ? null : item.id)}>
                  <span>{item.question}</span>
                  <span style={{color: 'var(--muted)'}}>{openId === item.id ? '−' : '+'}</span>
                </div>
                {openId === item.id && <div style={{paddingTop: 10, color: 'var(--muted)', whiteSpace: 'pre-wrap'}}>{item.answer}</div>}
              </div>
            ))}
          </div>
        ))}
        <div className="card center mt-3" style={{background: 'var(--accent)', color: '#fff'}}>
          <h3 style={{color: '#fff', marginTop: 0}}>Vraag niet beantwoord?</h3>
          <p>Open een support ticket of mail ons direct.</p>
          <a href="/klant" className="btn" style={{background: '#fff', color: 'var(--accent)'}}>Ticket aanmaken</a>
        </div>
      </div>
    </>
  );
}

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