// Clients data + admin page

const SER_CLIENTS = [
  {
    id: 'intratuin',
    name: 'Intratuin',
    username: 'intratuin',
    contact: 'l.peters@intratuin.nl',
    status: 'active',
    lastLogin: '2 dagen geleden',
    tools: ['teksten-intratuin', 'alt-tekst', 'sc-scraper'],
    addedBy: 'Joost van Dijk',
    addedAt: '12 jan 2026',
  },
  {
    id: 'klantx',
    name: 'Klant X B.V.',
    username: 'klantx',
    contact: 'marketing@klantx.nl',
    status: 'active',
    lastLogin: '4 uur geleden',
    tools: ['seo-ab', 'sc-scraper', 'autoriteit', 'alt-tekst'],
    addedBy: 'Sanne de Vries',
    addedAt: '03 mrt 2026',
  },
  {
    id: 'pilot-co',
    name: 'Pilot Co.',
    username: 'pilotco',
    contact: 'tom@pilot.co',
    status: 'pending',
    lastLogin: '—',
    tools: ['ai-overview', 'aio-fast'],
    addedBy: 'Joost van Dijk',
    addedAt: '24 apr 2026',
  },
  {
    id: 'demo',
    name: 'Demo Klant',
    username: 'demo',
    contact: 'demo@example.com',
    status: 'inactive',
    lastLogin: '3 weken geleden',
    tools: ['alt-tekst'],
    addedBy: 'Joost van Dijk',
    addedAt: '02 nov 2025',
  },
];

window.SER_CLIENTS = SER_CLIENTS;

const { useState: useStateAdmin } = React;

function AdminPage({ onBack }) {
  const { TOOLS, SPECIALISMS, ToolIcons } = window.SER_DATA;
  const [clients, setClients] = useStateAdmin(SER_CLIENTS);
  const [selectedId, setSelectedId] = useStateAdmin(SER_CLIENTS[0].id);
  const [tab, setTab] = useStateAdmin('clients'); // 'clients' | 'staff' | 'audit'
  const [showAdd, setShowAdd] = useStateAdmin(false);

  const selected = clients.find(c => c.id === selectedId);

  const toggleTool = (toolId) => {
    setClients(prev => prev.map(c => {
      if (c.id !== selectedId) return c;
      const has = c.tools.includes(toolId);
      return { ...c, tools: has ? c.tools.filter(t => t !== toolId) : [...c.tools, toolId] };
    }));
  };

  const setAllForSpec = (specId, enable) => {
    const inSpec = TOOLS.filter(t => t.spec === specId).map(t => t.id);
    setClients(prev => prev.map(c => {
      if (c.id !== selectedId) return c;
      const set = new Set(c.tools);
      inSpec.forEach(id => enable ? set.add(id) : set.delete(id));
      return { ...c, tools: Array.from(set) };
    }));
  };

  const grouped = SPECIALISMS.map(s => ({ ...s, tools: TOOLS.filter(t => t.spec === s.id) }));

  return (
    <div className="page fade-up">
      <div className="page-header">
        <div className="page-title-stack">
          <span className="page-eyebrow">Admin · alleen team</span>
          <h1>Klantbeheer</h1>
          <p className="page-subtitle">Beheer klanten, hun tool-toegang en wachtwoorden. Wijzigingen zijn direct actief.</p>
        </div>
        <div style={{display:'flex', gap:8}}>
          <button className="btn btn-ghost" onClick={onBack}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            Terug naar Hub
          </button>
          <button className="btn btn-teal" onClick={() => setShowAdd(true)}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
            Nieuwe klant
          </button>
        </div>
      </div>

      <div className="filter-bar" style={{marginBottom:20}}>
        {[
          ['clients', 'Klanten', clients.length],
          ['staff',   'Team (Google SSO)', 8],
          ['audit',   'Audit log', 142],
        ].map(([id, label, count]) => (
          <button key={id} className={`filter-chip ${tab === id ? 'active' : ''}`} onClick={() => setTab(id)}>
            {label} <span className="count">{count}</span>
          </button>
        ))}
      </div>

      {tab === 'clients' && (
        <div style={{display:'grid', gridTemplateColumns:'320px 1fr', gap:20, alignItems:'start'}}>
          {/* Client list */}
          <div className="panel">
            <div className="panel-head">
              <h3>Klanten</h3>
              <span className="count">{clients.length}</span>
            </div>
            <div style={{display:'flex', flexDirection:'column', maxHeight: 'calc(100vh - 280px)', overflow:'auto'}}>
              {clients.map(c => (
                <button
                  key={c.id}
                  onClick={() => setSelectedId(c.id)}
                  style={{
                    background: selectedId === c.id ? 'var(--ink-25)' : 'transparent',
                    border:'none', borderBottom:'1px solid var(--ink-100)',
                    padding:'14px 18px', textAlign:'left', cursor:'pointer',
                    borderLeft: selectedId === c.id ? '3px solid var(--ser-teal)' : '3px solid transparent',
                    display:'flex', alignItems:'center', gap:12,
                  }}
                >
                  <div style={{width:32, height:32, borderRadius:8, background:'linear-gradient(135deg, var(--ser-navy), var(--ser-teal))', color:'white', display:'grid', placeItems:'center', fontWeight:700, fontSize:11, flexShrink:0}}>
                    {c.name.split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase()}
                  </div>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontSize:13, fontWeight:600, color:'var(--ink-900)'}}>{c.name}</div>
                    <div style={{fontSize:11, color:'var(--ink-400)', marginTop:2, display:'flex', alignItems:'center', gap:6}}>
                      <span className={`pill ${c.status === 'active' ? 'pill-success' : c.status === 'pending' ? 'pill-warn' : 'pill-neutral'}`} style={{padding:'1px 7px', fontSize:9}}>
                        <span className="pill-dot"></span>
                        {c.status}
                      </span>
                      <span>·</span>
                      <span>{c.tools.length} tools</span>
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* Detail */}
          {selected && (
            <div style={{display:'flex', flexDirection:'column', gap:16}}>
              <div className="panel">
                <div className="panel-head">
                  <h3>{selected.name}</h3>
                  <div style={{display:'flex', gap:6}}>
                    <button className="btn btn-sm btn-ghost">
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
                      Reset wachtwoord
                    </button>
                    <button className="btn btn-sm btn-ghost" style={{color:'var(--err)', borderColor:'rgba(229,57,53,0.3)'}}>Deactiveer</button>
                  </div>
                </div>
                <div className="panel-body" style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap:18}}>
                  <div>
                    <div style={{fontSize:11, color:'var(--ink-400)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600, marginBottom:4}}>Gebruikersnaam</div>
                    <div className="mono" style={{fontSize:13, color:'var(--ink-900)'}}>{selected.username}</div>
                  </div>
                  <div>
                    <div style={{fontSize:11, color:'var(--ink-400)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600, marginBottom:4}}>Contact</div>
                    <div style={{fontSize:13, color:'var(--ink-900)'}}>{selected.contact}</div>
                  </div>
                  <div>
                    <div style={{fontSize:11, color:'var(--ink-400)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600, marginBottom:4}}>Laatste login</div>
                    <div style={{fontSize:13, color:'var(--ink-900)'}}>{selected.lastLogin}</div>
                  </div>
                  <div>
                    <div style={{fontSize:11, color:'var(--ink-400)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600, marginBottom:4}}>Aangemaakt</div>
                    <div style={{fontSize:13, color:'var(--ink-900)'}}>{selected.addedAt}<br/><span style={{fontSize:11, color:'var(--ink-400)'}}>door {selected.addedBy}</span></div>
                  </div>
                </div>
              </div>

              <div className="panel">
                <div className="panel-head">
                  <h3>Tool-toegang</h3>
                  <span style={{fontSize:12, color:'var(--ink-500)'}}>
                    <strong style={{color:'var(--ink-900)'}}>{selected.tools.length}</strong> van {TOOLS.length} tools toegankelijk
                  </span>
                </div>
                <div className="panel-body" style={{display:'flex', flexDirection:'column', gap:18}}>
                  {grouped.map(g => {
                    const enabledCount = g.tools.filter(t => selected.tools.includes(t.id)).length;
                    const allOn = enabledCount === g.tools.length;
                    return (
                      <div key={g.id}>
                        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10}}>
                          <div style={{display:'flex', alignItems:'center', gap:10}}>
                            <span className={`pill ${g.pillClass}`}><span className="pill-dot"></span>{g.label}</span>
                            <span style={{fontSize:12, color:'var(--ink-500)'}}>{enabledCount}/{g.tools.length}</span>
                          </div>
                          <div style={{display:'flex', gap:6}}>
                            <button className="btn btn-sm btn-ghost" onClick={() => setAllForSpec(g.id, true)}>Alle aan</button>
                            <button className="btn btn-sm btn-ghost" onClick={() => setAllForSpec(g.id, false)}>Alle uit</button>
                          </div>
                        </div>
                        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:8}}>
                          {g.tools.map(t => {
                            const on = selected.tools.includes(t.id);
                            return (
                              <label key={t.id} style={{
                                display:'flex', alignItems:'center', gap:12,
                                padding:'10px 12px', borderRadius:8,
                                background: on ? 'var(--ser-teal-50)' : 'var(--ink-25)',
                                border: `1px solid ${on ? 'rgba(0,180,160,0.3)' : 'var(--ink-100)'}`,
                                cursor:'pointer',
                              }}>
                                <div style={{width:28, height:28, borderRadius:7, background: g.color, color:'white', display:'grid', placeItems:'center', flexShrink:0}}>
                                  {ToolIcons[t.icon]}
                                </div>
                                <div style={{flex:1, fontSize:12, fontWeight:600, color:'var(--ink-900)'}}>{t.name}</div>
                                <Switch on={on} onChange={() => toggleTool(t.id)} />
                              </label>
                            );
                          })}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              <div className="panel">
                <div className="panel-head"><h3>Recente activiteit</h3></div>
                <div className="panel-body" style={{padding:0}}>
                  <div className="table-wrap">
                    <table className="data">
                      <thead><tr><th>Tijd</th><th>Tool</th><th>Actie</th><th className="num">Rows</th></tr></thead>
                      <tbody>
                        <tr><td>2 uur geleden</td><td>Alt-tekst Generator</td><td>Run completed</td><td className="num">320</td></tr>
                        <tr><td>gisteren, 16:42</td><td>SC Data Scraper</td><td>Run completed</td><td className="num">18,944</td></tr>
                        <tr><td>3 dagen geleden</td><td>Autoriteit Benchmark</td><td>Run completed</td><td className="num">248</td></tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      )}

      {tab === 'staff' && (
        <div className="panel">
          <div className="panel-head">
            <h3>Team-leden</h3>
            <span style={{fontSize:12, color:'var(--ink-500)'}}>Iedereen met <code style={{fontFamily:'var(--font-mono)', background:'var(--ink-100)', padding:'1px 6px', borderRadius:4}}>@searchengineresults.nl</code> heeft volledige toegang via Google SSO</span>
          </div>
          <div className="panel-body" style={{padding:0}}>
            <div className="table-wrap">
              <table className="data">
                <thead><tr><th>Naam</th><th>E-mail</th><th>Rol</th><th>Laatste login</th><th></th></tr></thead>
                <tbody>
                  {[
                    ['Joost van Dijk', 'joost@searchengineresults.nl', 'Admin', 'nu',          'JV'],
                    ['Sanne de Vries',  'sanne@searchengineresults.nl', 'Admin', 'gisteren',    'SV'],
                    ['Mike Hendriks',   'mike@searchengineresults.nl', 'Member', '3 uur geleden','MH'],
                    ['Lisa van Es',     'lisa@searchengineresults.nl', 'Member', '2 dagen',     'LE'],
                    ['Tom Bakker',      'tom@searchengineresults.nl',  'Member', '5 dagen',     'TB'],
                  ].map((r, i) => (
                    <tr key={i}>
                      <td><div style={{display:'flex', alignItems:'center', gap:10}}><div style={{width:28, height:28, borderRadius:'50%', background:'linear-gradient(135deg, var(--ser-navy), var(--ser-teal))', color:'white', display:'grid', placeItems:'center', fontSize:11, fontWeight:700}}>{r[4]}</div>{r[0]}</div></td>
                      <td className="mono" style={{fontSize:12}}>{r[1]}</td>
                      <td><span className={`pill ${r[2] === 'Admin' ? 'pill-warn' : 'pill-neutral'}`}>{r[2]}</span></td>
                      <td>{r[3]}</td>
                      <td><button className="btn btn-sm btn-ghost">Beheer</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {tab === 'audit' && (
        <div className="panel">
          <div className="panel-head"><h3>Audit log</h3><span style={{fontSize:12, color:'var(--ink-500)'}}>Laatste 142 events</span></div>
          <div className="panel-body" style={{padding:0}}>
            <div className="table-wrap">
              <table className="data">
                <thead><tr><th>Tijd</th><th>Wie</th><th>Wat</th><th>Doel</th></tr></thead>
                <tbody>
                  <tr><td>14:22</td><td>Joost van Dijk</td><td>Tool toegang verleend</td><td>intratuin → Alt-tekst Generator</td></tr>
                  <tr><td>11:08</td><td>Sanne de Vries</td><td>Klant aangemaakt</td><td>Pilot Co.</td></tr>
                  <tr><td>gisteren 17:45</td><td>Joost van Dijk</td><td>Wachtwoord reset</td><td>klantx</td></tr>
                  <tr><td>gisteren 09:12</td><td>system</td><td>Klant geactiveerd</td><td>Klant X B.V.</td></tr>
                  <tr><td>03 mrt</td><td>Sanne de Vries</td><td>Klant aangemaakt</td><td>Klant X B.V.</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {showAdd && <AddClientModal onClose={() => setShowAdd(false)} />}
    </div>
  );
}

function Switch({ on, onChange }) {
  return (
    <button
      type="button"
      onClick={(e) => { e.preventDefault(); onChange(); }}
      style={{
        width:34, height:20, borderRadius:999,
        background: on ? 'var(--ser-teal)' : 'var(--ink-200)',
        border:'none', position:'relative', flexShrink:0,
        transition:'0.15s', cursor:'pointer',
      }}
    >
      <span style={{
        position:'absolute', top:2, left: on ? 16 : 2,
        width:16, height:16, borderRadius:'50%', background:'white',
        transition:'0.15s', boxShadow:'0 1px 3px rgba(0,0,0,0.2)',
      }}/>
    </button>
  );
}

function AddClientModal({ onClose }) {
  return (
    <div style={{position:'fixed', inset:0, background:'rgba(14,14,42,0.4)', backdropFilter:'blur(4px)', display:'grid', placeItems:'center', zIndex:100}} onClick={onClose}>
      <div className="panel" onClick={e => e.stopPropagation()} style={{width:480, maxWidth:'92vw'}}>
        <div className="panel-head">
          <h3>Nieuwe klant aanmaken</h3>
          <button className="icon-btn" onClick={onClose}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>
        <div className="panel-body">
          <div className="field"><label className="field-label">Klant naam</label><input className="input" placeholder="bv. Bol.com"/></div>
          <div className="field"><label className="field-label">Gebruikersnaam</label><input className="input mono" placeholder="bolcom"/></div>
          <div className="field"><label className="field-label">Contact e-mail</label><input className="input" placeholder="contact@klant.nl"/></div>
          <div className="field">
            <label className="field-label">Wachtwoord</label>
            <div style={{display:'flex', gap:8}}>
              <input className="input mono" defaultValue="Tx9-pK4w-Lm2q" />
              <button className="btn btn-ghost" type="button">Generate</button>
            </div>
            <span className="field-hint">Wordt 1× per e-mail verstuurd. Klant kan na eerste login wijzigen.</span>
          </div>
          <div style={{display:'flex', justifyContent:'flex-end', gap:8, marginTop:8}}>
            <button className="btn btn-ghost" onClick={onClose}>Annuleer</button>
            <button className="btn btn-teal" onClick={onClose}>Klant aanmaken</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.AdminPage = AdminPage;