// Demo dashboard — interactive lead table with intent signals
function DemoDashboard() {
  const { COMPANIES, SIGNAL_TYPES } = window.PIPELANE_DATA;
  const [tab, setTab] = React.useState('leads');
  const [selectedRow, setSelectedRow] = React.useState(0);
  const [filter, setFilter] = React.useState('all');

  // Build deterministic rows from companies
  const rows = React.useMemo(() => {
    return COMPANIES.slice(0, 8).map((c, i) => {
      const seed = (i * 7 + 11) % 100;
      const score = [94, 87, 82, 78, 71, 64, 58, 51][i];
      const sigCount = (i % 3) + 1;
      const sigs = [];
      for (let s = 0; s < sigCount; s++) {
        sigs.push(SIGNAL_TYPES[(i * 3 + s) % SIGNAL_TYPES.length]);
      }
      return {
        ...c,
        score,
        signals: sigs,
        owner: ['SK', 'MR', 'JT', 'AL', 'PD', 'NH', 'BC', 'EM'][i],
      };
    });
  }, []);

  const filtered = filter === 'all' ? rows : rows.filter(r => r.score >= 80);

  return (
    <div className="dashboard">
      <div className="dash-bar">
        <span className="dash-dot" />
        <span className="dash-dot" />
        <span className="dash-dot" />
        <span className="dash-url mono">app.pipelane.com / pipeline</span>
      </div>
      <div className="dash-body">
        <aside className="dash-side">
          <div className="section-label">Workspace</div>
          <a className={tab === 'leads' ? 'active' : ''} onClick={() => setTab('leads')}>
            <Icon name="target" /> Leads
          </a>
          <a><Icon name="building" /> Accounts</a>
          <a><Icon name="signal" /> Signals</a>
          <a><Icon name="send" /> Sequences</a>
          <a><Icon name="link" /> CRM Sync</a>
          <div className="section-label" style={{ marginTop: 12 }}>Saved Views</div>
          <a><Icon name="dot" /> Hot · Series B</a>
          <a><Icon name="dot" /> CRM migrating</a>
          <a><Icon name="dot" /> $50M+ revenue</a>
        </aside>
        <main className="dash-main">
          <div className="dash-cards">
            <div className="dash-card">
              <div className="label">Qualified today</div>
              <div className="val mono">142</div>
              <div className="delta mono">↑ 5.2× vs avg</div>
            </div>
            <div className="dash-card">
              <div className="label">Avg intent score</div>
              <div className="val mono">71.4</div>
              <div className="delta mono">↑ 8 pts this week</div>
            </div>
            <div className="dash-card">
              <div className="label">Pipeline value</div>
              <div className="val mono">$2.4M</div>
              <div className="delta mono">↑ $410K added</div>
            </div>
          </div>
          <div className="dash-main-head">
            <h4>Qualified leads · 142</h4>
            <div className="dash-filters">
              <button className={`dash-chip ${filter === 'all' ? 'active' : ''}`} onClick={() => setFilter('all')}>
                All
              </button>
              <button className={`dash-chip ${filter === 'hot' ? 'active' : ''}`} onClick={() => setFilter('hot')}>
                Score &ge; 80
              </button>
              <span className="dash-chip">Industry: any</span>
              <span className="dash-chip">+ Filter</span>
            </div>
          </div>
          <table className="dash-table">
            <thead>
              <tr>
                <th>Account</th>
                <th>Intent score</th>
                <th>Signals</th>
                <th>Revenue</th>
                <th>Owner</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((r, i) => (
                <tr
                  key={r.domain}
                  className={selectedRow === i ? 'selected' : ''}
                  onClick={() => setSelectedRow(i)}
                >
                  <td>
                    <div className="name">{r.name}</div>
                    <div className="domain mono">{r.domain}</div>
                  </td>
                  <td>
                    <ScoreCell score={r.score} />
                  </td>
                  <td>
                    <div className="signals">
                      {r.signals.map((s, idx) => (
                        <span key={idx} className={`signal-pill ${s.kind}`}>{s.tag}</span>
                      ))}
                    </div>
                  </td>
                  <td className="mono" style={{ color: 'var(--mute-2)', fontSize: 12 }}>{r.revenue}</td>
                  <td>
                    <Avatar initials={r.owner} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </main>
      </div>
    </div>
  );
}

function ScoreCell({ score }) {
  const color = score >= 80 ? 'var(--accent)' : score >= 65 ? 'var(--warn)' : 'var(--mute-2)';
  const circumference = 2 * Math.PI * 11;
  const offset = circumference - (score / 100) * circumference;
  return (
    <div className="dash-score">
      <div className="ring-mini">
        <svg width="28" height="28" viewBox="0 0 28 28">
          <circle cx="14" cy="14" r="11" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="2.5" />
          <circle
            cx="14" cy="14" r="11" fill="none"
            stroke={color}
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeDasharray={circumference}
            strokeDashoffset={offset}
            transform="rotate(-90 14 14)"
            style={{ transition: 'stroke-dashoffset 0.6s' }}
          />
        </svg>
      </div>
      <span style={{ color }}>{score}</span>
    </div>
  );
}

function Avatar({ initials }) {
  const colors = {
    SK: '#7CFF6B', MR: '#FFB347', JT: '#FF5F4D', AL: '#9F8FFF',
    PD: '#7CFF6B', NH: '#FFB347', BC: '#9F8FFF', EM: '#FF5F4D',
  };
  return (
    <div style={{
      width: 26, height: 26, borderRadius: '50%',
      background: colors[initials] + '33',
      color: colors[initials],
      display: 'grid', placeItems: 'center',
      fontFamily: 'JetBrains Mono, monospace',
      fontSize: 10, fontWeight: 600,
    }}>
      {initials}
    </div>
  );
}

function Icon({ name }) {
  const paths = {
    target: <><circle cx="8" cy="8" r="6" /><circle cx="8" cy="8" r="3" /><circle cx="8" cy="8" r="1" fill="currentColor" /></>,
    building: <><rect x="3" y="2" width="10" height="12" /><line x1="6" y1="5" x2="6" y2="5" /><line x1="6" y1="8" x2="6" y2="8" /><line x1="10" y1="5" x2="10" y2="5" /><line x1="10" y1="8" x2="10" y2="8" /></>,
    signal: <><path d="M2 11 L6 6 L9 9 L14 3" /><circle cx="14" cy="3" r="1.5" fill="currentColor" /></>,
    send: <><path d="M2 8 L14 2 L11 14 L8 9 Z" /><line x1="2" y1="8" x2="8" y2="9" /></>,
    link: <><path d="M6 10 L4 12 A2 2 0 0 1 4 8 L7 5" /><path d="M10 6 L12 4 A2 2 0 0 1 12 8 L9 11" /></>,
    dot: <><circle cx="8" cy="8" r="2" fill="currentColor" /></>,
  };
  return (
    <svg className="ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
}

window.DemoDashboard = DemoDashboard;