function Dashboard({ onNavigate }) {
  const { t } = useI18n();
  const { address, connect } = useWallet();
  const [projects, setProjects] = React.useState(null);
  const [loadError, setLoadError] = React.useState(null);
  const [filter, setFilter] = React.useState('all');

  function loadProjects() {
    setLoadError(null);
    fetch('/api/projects', { credentials: 'include' })
      .then(async (r) => {
        const body = await r.json().catch(() => []);
        if (!r.ok) throw new Error((body && body.error) || `Failed to load projects (HTTP ${r.status}).`);
        setProjects(body);
      })
      .catch((e) => setLoadError(e.message || String(e)));
  }

  React.useEffect(() => {
    if (!address) { setProjects(null); return; }
    loadProjects();
  }, [address]);

  if (!address) {
    return (
      <div className="container py-48 text-center">
        <p className="ink-2 mb-24">{t('wallet.connectPrompt')}</p>
        <button className="btn btn-primary" onClick={connect}>{t('wallet.connect')}</button>
      </div>
    );
  }

  if (loadError) {
    return (
      <div className="container py-48 text-center">
        <p style={{ color: 'var(--error)' }} className="mb-24">{loadError}</p>
        <button className="btn btn-secondary" onClick={loadProjects}>{t('common.retry')}</button>
      </div>
    );
  }

  if (!projects) {
    return <div className="container py-48"><HashTicker /></div>;
  }

  const filtered = projects.filter((p) => filter === 'all' || p.status === filter);

  const totalSealed = projects.filter((p) => p.status === 'sealed').length;
  const totalEvents = projects.reduce((s, p) => s + p.events.length, 0);
  const totalHuman  = projects.reduce((s, p) => s + (p.stats?.humanEdits || 0), 0);
  const totalAI     = projects.reduce((s, p) => s + (p.stats?.aiOps || 0), 0);

  return (
    <div>
      <HashTicker />
      <div className="container py-48">
        {/* Header */}
        <div className="between mb-32" style={{ alignItems:'flex-end' }}>
          <div>
            <div className="eyebrow mb-8">{t('dashboard.eyebrow', { name: address.slice(0, 6) + '…' + address.slice(-4) })}</div>
            <h1 className="h2 serif">
              {t('dashboard.title.a')} <em className="accent">{t('dashboard.title.b')}</em>
            </h1>
          </div>
          <button className="btn btn-primary btn-lg" onClick={() => onNavigate('upload')}>
            {t('dashboard.cta')}
          </button>
        </div>

        {/* Stats strip */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24, marginBottom: 48 }}>
          <StatCell label={t('dashboard.stat.sealed')} value={totalSealed} sub={t('dashboard.stat.sealed.sub', { n: projects.length })} />
          <StatCell label={t('dashboard.stat.events')} value={totalEvents} sub={t('dashboard.stat.events.sub')} />
          <StatCell label={t('dashboard.stat.human')} value={totalHuman} sub={t('dashboard.stat.human.sub')} color="verified" />
          <StatCell label={t('dashboard.stat.ai')} value={totalAI} sub={t('dashboard.stat.ai.sub')} color="seal" />
        </div>

        {/* Filter */}
        <div className="between mb-24">
          <div className="seg">
            <div className={'seg-item' + (filter === 'all' ? ' active' : '')} onClick={() => setFilter('all')}>{t('dashboard.filter.all')} · {projects.length}</div>
            <div className={'seg-item' + (filter === 'sealed' ? ' active' : '')} onClick={() => setFilter('sealed')}>{t('dashboard.filter.sealed')} · {projects.filter(p=>p.status==='sealed').length}</div>
            <div className={'seg-item' + (filter === 'in-progress' ? ' active' : '')} onClick={() => setFilter('in-progress')}>{t('dashboard.filter.inProgress')} · {projects.filter(p=>p.status==='in-progress').length}</div>
            <div className={'seg-item' + (filter === 'draft' ? ' active' : '')} onClick={() => setFilter('draft')}>{t('dashboard.filter.drafts')} · {projects.filter(p=>p.status==='draft').length}</div>
          </div>
          <div className="tiny">{t('dashboard.sortedBy')}</div>
        </div>

        {/* Lifeline list */}
        <div className="col gap-16">
          {filtered.map(p => (
            <LifelineRow key={p.id} project={p} onOpen={() => onNavigate('project:' + p.id)} />
          ))}
        </div>
      </div>
    </div>
  );
}

function StatCell({ label, value, sub, color }) {
  const valueColor = color === 'verified' ? 'var(--success)' : color === 'seal' ? 'var(--primary-active)' : 'var(--ink)';
  return (
    <div className="card-flat" style={{ padding: 24 }}>
      <div className="tiny">{label}</div>
      <div className="serif mt-8" style={{ fontSize: 48, lineHeight: 1, color: valueColor, letterSpacing:'-0.02em' }}>{value}</div>
      <div className="small ink-3 mt-8">{sub}</div>
    </div>
  );
}

function LifelineRow({ project, onOpen }) {
  const { t } = useI18n();
  const events = project.events;
  const n = events.length;

  return (
    <div className="lifeline-card" onClick={onOpen}>
      <div className="between">
        <div style={{ minWidth: 0 }}>
          <div className="row gap-12" style={{ marginBottom: 8, flexWrap:'wrap' }}>
            <StatusBadge status={project.status} />
            {project.chain && <ChainBadge chain={project.chain} />}
            <span className="tiny" style={{ letterSpacing: 0.04, textTransform:'none' }}>· {t('dashboard.card.started')} {fmtDate(project.createdAt, { dateOnly: true })}</span>
          </div>
          <div className="serif" style={{ fontSize: 26, lineHeight: 1.15, letterSpacing:'-0.012em' }}>{project.title}</div>
          <div className="small ink-3 mt-8">{project.subtitle}</div>
        </div>
        <div className="col gap-8" style={{ alignItems:'flex-end', flexShrink: 0 }}>
          {project.status === 'sealed' ? (
            <>
              <span className="tiny">{t('dashboard.card.finalHash')}</span>
              <span className="mono" style={{ fontSize:12 }}><ShortHash hash={project.finalHash} len={8} /></span>
            </>
          ) : n > 0 ? (
            <>
              <span className="tiny">{t('dashboard.card.currentState')}</span>
              <span className="mono" style={{ fontSize:12 }}><ShortHash hash={events[events.length-1].hash} len={8} /></span>
            </>
          ) : null}
        </div>
      </div>

      {/* Lifeline track */}
      {n > 0 && (
        <div className="lifeline-track">
          <div className="lifeline-track-line" />
          {project.status === 'sealed' && <div className="lifeline-track-line-active" style={{ right: 0 }} />}
          {events.map((e, i) => {
            const pos = (i / Math.max(n - 1, 1)) * 100;
            const cls = e.kind === 'commit' ? 'commit' : (e.who === 'ai' ? 'ai' : 'human');
            return (
              <React.Fragment key={e.id}>
                <div className={'lifeline-node ' + cls} style={{ left: `calc(${pos}% )` }} title={e.label} />
                {(i === 0 || i === n - 1 || i === Math.floor(n/2)) && (
                  <div className="lifeline-node-label" style={{ left: `calc(${pos}%)` }}>
                    {window.EVENT_KIND_META[e.kind]?.label || e.kind}
                  </div>
                )}
              </React.Fragment>
            );
          })}
        </div>
      )}

      <div className="between mt-16" style={{ paddingTop: 16, borderTop:'1px dashed var(--hairline)' }}>
        <div className="row gap-24" style={{ flexWrap:'wrap' }}>
          <span className="tiny" style={{ textTransform:'none', letterSpacing:0.04, fontSize:12 }}>{project.stats.events} {t('common.events')}</span>
          <span className="tiny" style={{ color:'var(--primary-active)', textTransform:'none', letterSpacing:0.04, fontSize:12 }}>◆ {project.stats.aiOps} {t('common.actorAI')}</span>
          <span className="tiny" style={{ color:'color-mix(in oklab, var(--accent-teal) 80%, var(--ink))', textTransform:'none', letterSpacing:0.04, fontSize:12 }}>◇ {project.stats.humanEdits} {t('common.actorHuman')}</span>
          <span className="tiny" style={{ textTransform:'none', letterSpacing:0.04, fontSize:12 }}>· {project.stats.duration}</span>
        </div>
        <div className="row gap-8 tiny" style={{ textTransform:'none', letterSpacing:0.04, fontSize:12 }}>
          {t('dashboard.card.openDetail')} <IconArrowRight />
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;