const { useState, useEffect, useMemo } = React;
const LEADS = window.LECTUAL_LEADS;

const bandColor = (v) => (v >= 70 ? 'var(--protected)' : v >= 45 ? 'var(--accent)' : 'var(--warning)');
const bandName = (v) => (v >= 85 ? 'Filing-ready' : v >= 70 ? 'Strong' : v >= 45 ? 'Building' : 'Early');

function Echo({ size = 20 }) {
  return (
    <span className="echo" style={{ fontSize: size }}>
      Lectua<span className="gl"><span className="sh" aria-hidden="true">l</span><span className="fg" style={{ color: 'var(--accent)' }}>l</span></span>
    </span>
  );
}

function Gauge({ value, size = 104, stroke = 11 }) {
  const r = (size - stroke) / 2, C = 2 * Math.PI * r;
  const [disp, setDisp] = useState(0);
  useEffect(() => {
    let raf; const start = performance.now(), dur = 850;
    const tick = (t) => { const p = Math.min(1, (t - start) / dur), e = 1 - Math.pow(1 - p, 3); setDisp(Math.round(value * e)); if (p < 1) raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf);
  }, [value]);
  return (
    <div className="gauge" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--border-2)" strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={bandColor(value)} strokeWidth={stroke} strokeLinecap="round" strokeDasharray={C} strokeDashoffset={C * (1 - disp / 100)} />
      </svg>
      <div className="gv"><b style={{ fontSize: size * 0.30 }}>{disp}</b><span>/100</span></div>
    </div>
  );
}

const I = {
  leads: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h12" strokeLinecap="round" /></svg>,
  pipe: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 9h18" /></svg>,
  brief: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3l1.7 4.5L18 9l-4.3 1.4L12 15l-1.7-4.6L6 9l4.3-1.5z" strokeLinejoin="round" /></svg>,
  clients: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="8" r="4" /><path d="M4 20c0-4 4-6 8-6s8 2 8 6" strokeLinecap="round" /></svg>,
  dead: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9" /><path d="M12 8v4l3 2" strokeLinecap="round" /></svg>,
  search: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4-4" strokeLinecap="round" /></svg>,
};

function Rail() {
  return (
    <div className="rail">
      <div className="brand"><span className="appmark" style={{ width: 28, height: 28 }}><svg width="16" height="16" viewBox="0 0 32 32"><path d="M10 7v18h8" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="square" /><path d="M16 7v18h8" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="square" opacity=".42" /></svg></span><Echo size={18} /></div>
      <a className="on" href="#">{I.leads} Leads</a>
      <a href="#">{I.pipe} Pipeline</a>
      <a href="#">{I.brief} Briefs</a>
      <div className="seg">Workspace</div>
      <a href="#">{I.clients} Clients</a>
      <a href="#">{I.dead} Deadlines</a>
      <div className="me"><div className="mav">DW</div><div><div className="nm">Dana Whitfield</div><div className="ro">Trademark attorney</div></div></div>
    </div>
  );
}

function LeadList({ leads, selId, onSelect, filter, setFilter, query, setQuery }) {
  const counts = useMemo(() => {
    const c = { All: LEADS.length, Hot: 0, New: 0, Nurturing: 0 };
    LEADS.forEach((l) => { c[l.status]++; }); return c;
  }, []);
  const tabs = ['All', 'Hot', 'New', 'Nurturing'];
  return (
    <div className="leadcol scrollbar-thin">
      <div className="tabs">
        {tabs.map((t) => (
          <button key={t} className={'tab' + (filter === t ? ' on' : '')} onClick={() => setFilter(t)}>{t}<span className="ct">{counts[t]}</span></button>
        ))}
      </div>
      <div className="search" style={{ width: '100%', marginBottom: 14 }}>{I.search}<input placeholder="Search leads…" value={query} onChange={(e) => setQuery(e.target.value)} /></div>
      {leads.length === 0 && <div style={{ padding: '30px 6px', color: 'var(--ink-3)', fontSize: 14 }}>No leads match.</div>}
      {leads.map((l) => (
        <div key={l.id} className={'lead' + (selId === l.id ? ' on' : '')} onClick={() => onSelect(l.id)}>
          <div className="av" style={{ background: l.avatarColor }}>{l.name[0]}</div>
          <div><div className="nm">{l.name}</div><div className="co">{l.company} · {l.sector}</div></div>
          <div className="meta">{l.last}<br /><span className={'stbadge ' + l.status}>{l.status}</span></div>
          <div className="sc" style={{ color: bandColor(l.score) }}>{l.score}</div>
        </div>
      ))}
    </div>
  );
}

function Brief({ lead }) {
  const [busy, setBusy] = useState(false);
  const regen = () => { setBusy(true); setTimeout(() => setBusy(false), 950); };
  const b = lead.brief;
  return (
    <div className="dcard brief-ai">
      <div className="ct"><span className="ai-ic"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3l1.7 4.5L18 9l-4.3 1.4L12 15l-1.7-4.6L6 9l4.3-1.5z" strokeLinejoin="round" /></svg></span>AI pre-call brief
        <button className="regen" onClick={regen}>↻ {busy ? 'Generating…' : 'Regenerate'}</button>
      </div>
      <div className={busy ? 'shim' : ''} style={{ opacity: busy ? 0.5 : 1, transition: 'opacity .2s', borderRadius: 8 }}>
        <div className="brief-sec">
          <div className="h"><svg className="ic" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><circle cx="12" cy="12" r="9" /><path d="M12 8v4l3 2" strokeLinecap="round" /></svg>Why now</div>
          <p>{b.whyNow}</p>
        </div>
        <div className="brief-sec">
          <div className="h"><svg className="ic" viewBox="0 0 24 24" fill="none" stroke="var(--protected)" strokeWidth="2"><path d="M5 12l4 4 10-10" strokeLinecap="round" strokeLinejoin="round" /></svg>Strengths</div>
          <ul>{b.strengths.map((s, i) => <li key={i}><span className="b" style={{ background: 'var(--protected)' }}></span>{s}</li>)}</ul>
        </div>
        <div className="brief-sec">
          <div className="h"><svg className="ic" viewBox="0 0 24 24" fill="none" stroke="var(--warning)" strokeWidth="2"><path d="M12 3l9 16H3z" strokeLinejoin="round" /><path d="M12 10v4" strokeLinecap="round" /></svg>Watch-outs</div>
          <ul>{b.watch.map((s, i) => <li key={i}><span className="b" style={{ background: 'var(--warning)' }}></span>{s}</li>)}</ul>
        </div>
        <div className="brief-sec">
          <div className="h"><svg className="ic" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><path d="M8 10h8M8 14h5M21 12a9 9 0 0 1-13 8l-5 1 1-5A9 9 0 1 1 21 12z" strokeLinecap="round" strokeLinejoin="round" /></svg>Suggested opener</div>
          <div className="opener">“{b.opener}”</div>
        </div>
        <div className="pkg"><span className="pl">Recommended</span><span className="pv">{b.pkg}</span></div>
      </div>
    </div>
  );
}

function LeadDetail({ lead }) {
  const [onCall, setOnCall] = useState(false);
  useEffect(() => { setOnCall(false); }, [lead.id]);
  const dims = Object.entries(lead.dims);
  return (
    <div className="detailcol scrollbar-thin" key={lead.id}>
      <div className="d-head">
        <div className="av" style={{ background: lead.avatarColor }}>{lead.name[0]}</div>
        <div style={{ flex: 1 }}>
          <div className="nm">{lead.name}</div>
          <div className="co">{lead.company} · {lead.sector}</div>
          <div className="em">{lead.email} · via {lead.source}</div>
        </div>
        <span className={'stbadge ' + lead.status} style={{ fontSize: 11, padding: '5px 10px' }}>{lead.status}</span>
      </div>

      <div className="dcard">
        <div className="ct">Readiness breakdown</div>
        <div className="breakdown">
          <div style={{ textAlign: 'center' }}>
            <Gauge value={lead.score} />
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: bandColor(lead.score), fontWeight: 700, marginTop: 6 }}>{bandName(lead.score)}</div>
          </div>
          <div className="dims">
            {dims.map(([k, v]) => (
              <div className="dimrow" key={k}>
                <span className="dn">{k}</span>
                <span className="track"><span className="fill" style={{ width: v + '%', background: bandColor(v) }}></span></span>
                <span className="pv">{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <Brief lead={lead} />

      <div className="dcard">
        <div className="ct">Activity</div>
        <div className="timeline">
          {lead.timeline.map((t, i) => (
            <div className="tlrow" key={i}><span className="tdot" style={{ background: i === 0 ? 'var(--accent)' : 'var(--border-2)' }}></span><div><div className="tw">{t.w.toUpperCase()}</div><div className="tt">{t.t}</div></div></div>
          ))}
        </div>
      </div>

      <div className="actions">
        <button className={'btn ' + (onCall ? 'btn-secondary' : 'btn-primary')} style={{ flex: 1 }} onClick={() => setOnCall((v) => !v)}>
          {onCall ? <React.Fragment><span className="dot" style={{ background: 'var(--danger)' }}></span> On call · live</React.Fragment> : <React.Fragment>Start call <span className="ar">→</span></React.Fragment>}
        </button>
        <button className="btn btn-secondary">Send intake</button>
        <button className="btn btn-secondary" aria-label="Add note">＋</button>
      </div>
    </div>
  );
}

function App() {
  const [selId, setSelId] = useState(LEADS[0].id);
  const [filter, setFilter] = useState('All');
  const [query, setQuery] = useState('');
  const leads = useMemo(() => LEADS.filter((l) =>
    (filter === 'All' || l.status === filter) &&
    (l.name.toLowerCase().includes(query.toLowerCase()) || l.company.toLowerCase().includes(query.toLowerCase()))
  ), [filter, query]);
  const lead = LEADS.find((l) => l.id === selId) || LEADS[0];
  const avg = Math.round(LEADS.reduce((s, l) => s + l.score, 0) / LEADS.length);

  return (
    <div className="app">
      <Rail />
      <div className="main">
        <div className="topbar">
          <h1>Inbound leads</h1>
          <div className="sp"></div>
          <div className="search">{I.search}<input placeholder="Search everything…" /></div>
          <button className="btn btn-secondary btn-sm">Export</button>
          <button className="btn btn-primary btn-sm">＋ New intake</button>
        </div>
        <div className="stats">
          <div className="st"><div className="l">New this week</div><b>18</b><span className="d">▲ 5 vs last</span></div>
          <div className="st"><div className="l">Avg readiness</div><b style={{ color: 'var(--protected)' }}>{avg}</b><span className="d">Strong intake</span></div>
          <div className="st"><div className="l">Booked → call</div><b>42%</b><span className="d">▲ 6pts</span></div>
          <div className="st"><div className="l">Open pipeline</div><b>$96k</b><span className="d">12 active</span></div>
        </div>
        <div className="split">
          <LeadList leads={leads} selId={selId} onSelect={setSelId} filter={filter} setFilter={setFilter} query={query} setQuery={setQuery} />
          <LeadDetail lead={lead} />
        </div>
      </div>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);