// Logs, Guides, Tickets, Login — wired to the API.

function LogsPage() {
  const [statusFilter, setStatusFilter] = React.useState("all");
  const { data: logs, refresh } = useApi(`/api/logs?status=${statusFilter}`, [statusFilter]);
  const list = logs || [];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Logs</h1>
          <p>Every action, recorded.</p>
        </div>
        <button className="btn" onClick={refresh}><Ico.Refresh className="icon"/> Refresh</button>
      </div>

      <div className="grid grid-4" style={{ marginBottom: 24 }}>
        <Stat label="Events" value={String(list.length)} icon={<Ico.List/>}/>
        <Stat label="OK"       value={String(list.filter(l=>l.status==='ok').length)}   icon={<Ico.Check/>}/>
        <Stat label="Warnings" value={String(list.filter(l=>l.status==='warn').length)} icon={<Ico.Bell/>}/>
        <Stat label="Failures" value={String(list.filter(l=>l.status==='fail').length)} icon={<Ico.Shield/>}/>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="flex gap-8">
            {["all", "ok", "warn", "fail"].map(s => (
              <span key={s} className={`pill ${statusFilter === s ? 'gold' : ''}`} style={{ cursor: 'pointer', padding: '6px 14px' }} onClick={() => setStatusFilter(s)}>{s}</span>
            ))}
          </div>
        </div>
        <table className="table">
          <thead><tr><th>Time</th><th>Actor</th><th>Action</th><th>Target</th><th>IP</th><th>Meta</th><th>Status</th></tr></thead>
          <tbody>
            {list.map((l) => (
              <tr key={l.id}>
                <td className="mono" style={{ color: 'var(--text-dimmer)', fontSize: 12 }}>{fmtTime(l.ts)}</td>
                <td>
                  {l.actor === 'system' || l.actor === 'admin'
                    ? <span className="pill amber">{l.actor}</span>
                    : <div className="user"><Avatar name={l.actor} size={22}/><span style={{ fontSize: 12.5 }}>{l.actor}</span></div>}
                </td>
                <td className="mono" style={{ fontSize: 12, color: (l.action||'').startsWith('auth') ? '#8a93f5' : (l.action||'').startsWith('key') ? 'var(--accent)' : 'var(--text)' }}>{l.action}</td>
                <td className="mono" style={{ fontSize: 12, color: 'var(--text-dim)' }}>{l.target}</td>
                <td className="mono" style={{ fontSize: 11.5, color: 'var(--text-dimmer)' }}>{l.ip||'—'}</td>
                <td style={{ fontSize: 12, color: 'var(--text-dim)' }}>{l.meta||''}</td>
                <td>
                  {l.status === 'ok' && <span className="pill green"><span className="dot"/>ok</span>}
                  {l.status === 'fail' && <span className="pill red"><span className="dot"/>fail</span>}
                  {l.status === 'warn' && <span className="pill amber"><span className="dot"/>warn</span>}
                </td>
              </tr>
            ))}
            {!list.length && <tr><td colSpan="7" style={{ textAlign:'center', color:'var(--text-dimmer)', padding:32 }}>No events.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function GuidesPage({ isAdmin }) {
  const { data: guides, refresh } = useApi('/api/guides');
  const list = guides || [];
  const [activeId, setActiveId] = React.useState(null);
  const [editing, setEditing] = React.useState(null);
  React.useEffect(()=>{ if (!activeId && list.length) setActiveId(list[0].id); }, [guides]);

  const guide = list.find(g => g.id === activeId);
  const cats = Array.from(new Set(list.map(g => g.category).filter(Boolean)));

  const remove = async (id) => {
    if (!confirm('Delete this guide?')) return;
    try { await api.del('/api/guides/'+id); refresh(); setActiveId(null); } catch (e) { toast(e.message,'err'); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Guides</h1>
          <p>{isAdmin ? "Write guides for your users." : "How to get started."}</p>
        </div>
        {isAdmin && <button className="btn btn-primary" onClick={()=>setEditing({})}><Ico.Plus className="icon"/> New guide</button>}
      </div>

      {!list.length ? (
        <div className="card"><EmptyState
          icon={<Ico.Book/>}
          title={isAdmin?'No guides yet':'Nothing here yet'}
          desc={isAdmin?'Write a guide to help your resellers onboard, set up the API, or understand HWID resets.':'When the admin publishes guides, they show up here.'}
          action={isAdmin && <button className="btn btn-primary" onClick={()=>setEditing({})}><Ico.Plus className="icon"/> Write the first guide</button>}
        /></div>
      ) : (
      <div className="grid" style={{ gridTemplateColumns: '300px 1fr', gap: 16 }}>
        <div className="card">
          {cats.map(cat => (
            <div key={cat}>
              <div className="sidebar-section">{cat}</div>
              {list.filter(g => g.category === cat).map(g => (
                <div key={g.id} onClick={() => setActiveId(g.id)} style={{
                  padding: '8px 14px', cursor: 'pointer',
                  background: activeId === g.id ? 'var(--accent-soft)' : 'transparent',
                  borderLeft: activeId === g.id ? '2px solid var(--accent)' : '2px solid transparent',
                }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: activeId === g.id ? 'var(--accent)' : 'var(--text)' }}>{g.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-dimmer)', marginTop: 2 }}>{g.read_min} min read</div>
                </div>
              ))}
            </div>
          ))}
        </div>

        {guide ? (
          <div className="card">
            <div style={{
              height: 160, background: `linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, transparent), color-mix(in oklab, var(--accent) 4%, transparent))`,
              borderBottom: '1px solid var(--border)', padding: 32, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
            }}>
              <span className="pill gold" style={{ alignSelf: 'flex-start', marginBottom: 14 }}>{guide.category}</span>
              <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em' }}>{guide.title}</div>
              <div style={{ color: 'var(--text-dim)', fontSize: 13, marginTop: 6 }}>Updated {fmtDate(guide.updated_at)} · {guide.read_min} min read</div>
            </div>
            <div className="card-pad" style={{ padding: '32px 36px', maxWidth: 720 }}>
              {isAdmin && (
                <div className="flex gap-8" style={{ marginBottom: 20 }}>
                  <button className="btn btn-sm" onClick={()=>setEditing(guide)}><Ico.Edit className="icon" width={12} height={12}/> Edit</button>
                  <button className="btn btn-sm btn-ghost" style={{ color: 'var(--danger)' }} onClick={()=>remove(guide.id)}><Ico.Trash className="icon" width={12} height={12}/> Delete</button>
                </div>
              )}
              <div style={{ fontSize: 14, lineHeight: 1.75, color: 'var(--text-dim)', whiteSpace: 'pre-wrap' }}>{guide.body}</div>
            </div>
          </div>
        ) : <div className="card card-pad" style={{ color: 'var(--text-dimmer)' }}>Select a guide.</div>}
      </div>
      )}

      {editing && <EditGuideModal guide={editing} onClose={()=>setEditing(null)} onSaved={()=>{ setEditing(null); refresh(); }}/>}
    </div>
  );
}

function EditGuideModal({ guide, onClose, onSaved }) {
  const isNew = !guide.id;
  const [f, setF] = React.useState({ title: guide.title||'', category: guide.category||'General', body: guide.body||'', read_min: guide.read_min||4 });
  const save = async () => {
    try {
      if (isNew) await api.post('/api/guides', f); else await api.patch('/api/guides/'+guide.id, f);
      toast('Saved'); onSaved();
    } catch (e) { toast(e.message,'err'); }
  };
  return (
    <Modal open onClose={onClose} title={isNew?'New guide':`Edit ${guide.title}`} width={640}>
      <div className="flex-col gap-12">
        <div className="grid grid-2" style={{ gap: 12 }}>
          <div className="field"><label>Title</label><input className="input" value={f.title} onChange={e=>setF({...f,title:e.target.value})}/></div>
          <div className="field"><label>Category</label><input className="input" value={f.category} onChange={e=>setF({...f,category:e.target.value})}/></div>
        </div>
        <div className="field"><label>Read time (min)</label><input className="input mono" type="number" value={f.read_min} onChange={e=>setF({...f,read_min:+e.target.value})}/></div>
        <div className="field"><label>Body (plain text or markdown)</label>
          <textarea className="textarea" rows="14" value={f.body} onChange={e=>setF({...f,body:e.target.value})}/>
        </div>
        <div className="flex gap-8" style={{ justifyContent: 'flex-end' }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={save}>{isNew?'Create':'Save'}</button>
        </div>
      </div>
    </Modal>
  );
}

function TicketsPage({ isAdmin, me }) {
  const { data: tickets, refresh } = useApi('/api/tickets');
  const list = tickets || [];
  const [activeId, setActiveId] = React.useState(null);
  const [newOpen, setNewOpen] = React.useState(false);
  React.useEffect(()=>{ if (!activeId && list.length) setActiveId(list[0].id); }, [tickets]);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Support</h1>
          <p>{isAdmin ? 'Open tickets from users.' : 'Need help? Open a ticket.'}</p>
        </div>
        {!isAdmin && <button className="btn btn-primary" onClick={()=>setNewOpen(true)}><Ico.Plus className="icon"/> New ticket</button>}
      </div>

      {isAdmin && (
        <div className="grid grid-4" style={{ marginBottom: 24 }}>
          <Stat label="Open"     value={String(list.filter(t=>t.status==='open').length)} icon={<Ico.Chat/>}/>
          <Stat label="Pending"  value={String(list.filter(t=>t.status==='pending').length)} icon={<Ico.Refresh/>}/>
          <Stat label="Resolved" value={String(list.filter(t=>t.status==='resolved').length)} icon={<Ico.Check/>}/>
          <Stat label="Total"    value={String(list.length)} icon={<Ico.List/>}/>
        </div>
      )}

      <div className="grid" style={{ gridTemplateColumns: '320px 1fr', gap: 16 }}>
        <div className="card">
          <div className="card-head"><h3>{isAdmin?'Queue':'Your conversations'}</h3></div>
          {list.map(t => (
            <div key={t.id} onClick={() => setActiveId(t.id)} style={{
              padding: '14px 18px', cursor: 'pointer', borderBottom: '1px solid var(--border)',
              background: activeId === t.id ? 'color-mix(in oklab, var(--accent) 6%, transparent)' : 'transparent',
              borderLeft: activeId === t.id ? '3px solid var(--accent)' : '3px solid transparent',
            }}>
              <div className="flex-between" style={{ marginBottom: 4 }}>
                <span className="mono" style={{ fontSize: 12, fontWeight: 700, color: 'var(--accent)' }}>#{t.id}</span>
                <span className={`pill ${t.status === 'open' ? 'amber' : t.status === 'pending' ? 'blue' : 'green'}`}><span className="dot"/>{t.status}</span>
              </div>
              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>{t.subject}</div>
              <div className="flex-between" style={{ fontSize: 11, color: 'var(--text-dimmer)' }}>
                <span>{isAdmin?t.user:''}</span>
                <span>{fmtTime(t.updated_at)}</span>
              </div>
            </div>
          ))}
          {!list.length && <div style={{ padding: 18, color: 'var(--text-dimmer)', textAlign:'center' }}>No tickets.</div>}
        </div>

        <div>{activeId ? <TicketDetail id={activeId} isAdmin={isAdmin} me={me} onAnyChange={refresh}/> : <div className="card card-pad" style={{ color:'var(--text-dimmer)' }}>Select a ticket</div>}</div>
      </div>

      {newOpen && <NewTicketModal onClose={()=>setNewOpen(false)} onCreated={(id)=>{ setNewOpen(false); refresh(); setActiveId(id); }}/>}
    </div>
  );
}

function TicketDetail({ id, isAdmin, me, onAnyChange }) {
  const { data, refresh } = useApi('/api/tickets/'+id, [id]);
  const [body, setBody] = React.useState('');
  const send = async () => {
    if (!body.trim()) return;
    try { await api.post(`/api/tickets/${id}/messages`, { body }); setBody(''); refresh(); onAnyChange&&onAnyChange(); }
    catch (e) { toast(e.message,'err'); }
  };
  const setStatus = async (status) => {
    try { await api.patch('/api/tickets/'+id, { status }); refresh(); onAnyChange&&onAnyChange(); }
    catch (e) { toast(e.message,'err'); }
  };
  if (!data) return <div className="card card-pad">Loading…</div>;
  const { ticket: t, messages } = data;
  return (
    <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
      <div className="card-head">
        <div>
          <div className="flex gap-8">
            <span className="mono" style={{ color: 'var(--accent)', fontWeight: 700 }}>#{t.id}</span>
            <h3 style={{ margin: 0 }}>{t.subject}</h3>
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>
            Opened by <b>{t.user}</b> · {fmtTime(t.created_at)}
          </div>
        </div>
        <div className="flex gap-8">
          <span className={`pill ${t.status === 'open' ? 'amber' : t.status === 'pending' ? 'blue' : 'green'}`}><span className="dot"/>{t.status}</span>
        </div>
      </div>
      <div className="card-pad flex-col" style={{ gap: 12 }}>
        {messages.map(m => (
          <div key={m.id} style={{
            display: 'flex', gap: 12, padding: 14,
            background: m.is_staff ? 'color-mix(in oklab, var(--accent) 6%, transparent)' : 'var(--bg-card-2)',
            border: m.is_staff ? '1px solid color-mix(in oklab, var(--accent) 30%, transparent)' : '1px solid var(--border)',
            borderRadius: 'var(--r-md)',
          }}>
            <Avatar name={m.author} size={32}/>
            <div style={{ flex: 1 }}>
              <div className="flex-between">
                <div><b style={{ fontSize: 13 }}>{m.author}</b> {m.is_staff?<span className="pill gold" style={{ marginLeft: 6 }}>admin</span>:null}</div>
                <span style={{ fontSize: 11, color: 'var(--text-dimmer)' }}>{fmtTime(m.created_at)}</span>
              </div>
              <div style={{ fontSize: 13.5, color: 'var(--text)', marginTop: 6, lineHeight: 1.6, whiteSpace:'pre-wrap' }}>{m.body}</div>
            </div>
          </div>
        ))}
        <div style={{ padding: 14, background: 'var(--bg-card-2)', border: '1px solid var(--border)', borderRadius: 'var(--r-md)' }}>
          <textarea className="textarea" style={{ background: 'transparent', border: 'none', padding: 0 }} placeholder="Write a reply…" value={body} onChange={e=>setBody(e.target.value)}/>
          <div className="flex-between mt-12">
            <div className="flex gap-8">
              {t.status !== 'resolved' && <button className="btn btn-sm" onClick={()=>setStatus('resolved')}>Mark resolved</button>}
              {isAdmin && t.status === 'resolved' && <button className="btn btn-sm" onClick={()=>setStatus('open')}>Re-open</button>}
            </div>
            <button className="btn btn-sm btn-primary" onClick={send}><Ico.Arrow className="icon" width={12} height={12}/> Send</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function NewTicketModal({ onClose, onCreated }) {
  const [subject, setSubject] = React.useState('');
  const [body, setBody] = React.useState('');
  const submit = async () => {
    if (!subject.trim() || !body.trim()) return toast('Subject and message required','warn');
    try { const r = await api.post('/api/tickets', { subject, body }); onCreated(r.id); }
    catch (e) { toast(e.message,'err'); }
  };
  return (
    <Modal open onClose={onClose} title="New support ticket">
      <div className="flex-col gap-12">
        <div className="field"><label>Subject</label><input className="input" value={subject} onChange={e=>setSubject(e.target.value)} placeholder="What's up?"/></div>
        <div className="field"><label>Message</label><textarea className="textarea" rows="8" value={body} onChange={e=>setBody(e.target.value)} placeholder="Describe what's going on…"/></div>
        <div className="flex gap-8" style={{ justifyContent: 'flex-end' }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={submit}>Submit</button>
        </div>
      </div>
    </Modal>
  );
}

function LoginPage({ onLogin }) {
  const [mode, setMode] = React.useState('login');   // login | register
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [discordEnabled, setDiscordEnabled] = React.useState(false);
  const [localEnabled, setLocalEnabled] = React.useState(true);
  const [busy, setBusy] = React.useState(false);
  const [banner, setBanner] = React.useState(null);

  React.useEffect(() => {
    api.get('/api/auth/config').then(c => { setDiscordEnabled(c.discordEnabled); setLocalEnabled(c.localEnabled !== false); }).catch(()=>{});
    const params = new URLSearchParams(location.search);
    const err = params.get('oauth_error');
    if (err) {
      setBanner({ kind: 'err', text: err });
      const u = new URL(location.href); u.searchParams.delete('oauth_error');
      history.replaceState(null, '', u.toString());
    }
  }, []);

  const submit = async (e) => {
    e && e.preventDefault();
    setBusy(true);
    try {
      await api.post(`/api/auth/${mode}`, { username, password });
      toast(mode==='login'?'Signed in':'Account created');
      onLogin();
    } catch (e) { toast(e.message,'err'); }
    setBusy(false);
  };

  const [showLocal, setShowLocal] = React.useState(false);
  const localOnly = localEnabled && !discordEnabled;
  const showLocalForm = localOnly || showLocal;

  return (
    <div className="auth-shell">
      <div className="auth-card">
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <Logo size={56}/>
          <div style={{ marginTop: 14, fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em' }}>Emulated<span style={{ color: 'var(--accent)' }}>.vip</span></div>
        </div>

        {banner && (
          <div style={{
            marginBottom: 14, padding: '10px 12px', borderRadius: 'var(--r-md)',
            background: 'rgba(255,77,98,0.10)', border: '1px solid rgba(255,77,98,0.35)',
            color: '#ffb7c1', fontSize: 12.5, textAlign: 'center'
          }}>{banner.text}</div>
        )}

        {discordEnabled && (
          <>
            <h2 style={{ margin: 0, fontSize: 20, textAlign: 'center', fontWeight: 800, letterSpacing: '-0.02em' }}>Sign in to continue</h2>
            <p style={{ textAlign: 'center', color: 'var(--text-dim)', margin: '6px 0 18px', fontSize: 13 }}>One click with your Discord account.</p>
            <a className="btn btn-discord btn-lg" href="/api/auth/discord" style={{ width: '100%', justifyContent: 'center', padding: '14px', textDecoration: 'none' }}>
              <Ico.Discord className="icon" width={20} height={20}/> Continue with Discord
            </a>
            {localEnabled && (
              <div style={{ textAlign: 'center', marginTop: 16, fontSize: 12, color: 'var(--text-dimmer)' }}>
                or <a style={{ color: 'var(--accent)', cursor: 'pointer' }} onClick={()=>setShowLocal(s=>!s)}>{showLocal?'hide':'use a username & password'}</a>
              </div>
            )}
          </>
        )}

        {showLocalForm && (
          <>
            {discordEnabled && (
              <div className="flex gap-8 mt-16" style={{ alignItems: 'center' }}>
                <div style={{ flex: 1, height: 1, background: 'var(--border)' }}/>
                <span style={{ color: 'var(--text-dimmer)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>username & password</span>
                <div style={{ flex: 1, height: 1, background: 'var(--border)' }}/>
              </div>
            )}
            {!discordEnabled && (
              <>
                <h2 style={{ margin: 0, fontSize: 20, textAlign: 'center', fontWeight: 800, letterSpacing: '-0.02em' }}>{mode==='login'?'Sign in':'Sign up'}</h2>
                <p style={{ textAlign: 'center', color: 'var(--text-dim)', margin: '6px 0 16px', fontSize: 13 }}>
                  {mode==='login'
                    ? <>New here? <a style={{color:'var(--accent)',cursor:'pointer'}} onClick={()=>setMode('register')}>Make an account</a>.</>
                    : <>Got an account? <a style={{color:'var(--accent)',cursor:'pointer'}} onClick={()=>setMode('login')}>Sign in</a>.</>}
                </p>
              </>
            )}
            <form onSubmit={submit} className="flex-col gap-12 mt-12">
              <div className="field"><label>Username</label>
                <input className="input" value={username} onChange={e=>setUsername(e.target.value)} autoFocus required minLength="3"/>
              </div>
              <div className="field"><label>Password</label>
                <input className="input" type="password" value={password} onChange={e=>setPassword(e.target.value)} required minLength="8"/>
              </div>
              <button type="submit" className="btn btn-primary btn-lg" disabled={busy} style={{ justifyContent: 'center' }}>
                {busy?'…':(mode==='login'?'Sign in':'Create account')}
              </button>
              {discordEnabled && (
                <button type="button" className="btn btn-ghost btn-sm" onClick={()=>setMode(m=>m==='login'?'register':'login')} style={{ justifyContent: 'center' }}>
                  {mode==='login'?'No account? Create one':'Have an account? Sign in'}
                </button>
              )}
            </form>
          </>
        )}

        {!discordEnabled && !localEnabled && (
          <div style={{ padding: 16, color: 'var(--text-dim)', textAlign: 'center' }}>
            No sign-in methods configured.
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { LogsPage, GuidesPage, TicketsPage, LoginPage });