function ProjectDetail({ projectId, onNavigate }) {
  const { t } = useI18n();
  const { address, connect } = useWallet();
  const [project, setProject] = React.useState(null);
  const [notFound, setNotFound] = React.useState(false);
  const [loadError, setLoadError] = React.useState(null);
  const [selectedEventId, setSelectedEventId] = React.useState(null);

  function loadProject() {
    setProject(null);
    setNotFound(false);
    setLoadError(null);
    fetch(`/api/projects/${projectId}`, { credentials: 'include' })
      .then(async (r) => {
        if (r.status === 404) { setNotFound(true); return null; }
        const body = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(body.error || `Failed to load project (HTTP ${r.status}).`);
        return body;
      })
      .then((data) => {
        if (data) {
          setProject(data);
          setSelectedEventId(data.events[0]?.id ?? null);
        }
      })
      .catch((e) => setLoadError(e.message || String(e)));
  }

  React.useEffect(() => {
    if (!address) return;
    loadProject();
  }, [address, projectId]);

  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 (notFound) {
    return <div className="container py-48"><div className="h3">{t('detail.notFound')}</div></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={loadProject}>{t('common.retry')}</button>
      </div>
    );
  }

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

  const chainName = project.chain === 'polygon' ? 'Polygon' : 'Ethereum';
  const selectedEvent = project.events.find((e) => e.id === selectedEventId) || null;

  return (
    <div>
      <HashTicker />
      <div className="container py-48">
        {/* Breadcrumb */}
        <div className="row gap-8 mb-24 tiny" style={{ textTransform:'none', letterSpacing: 0.04 }}>
          <a onClick={() => onNavigate('dashboard')} style={{cursor:'pointer'}}>{t('common.dashboard')}</a>
          <span>›</span>
          <span className="ink-2">{project.title}</span>
        </div>

        {/* Header */}
        <div className="between mb-48" style={{ alignItems:'flex-start', flexWrap:'wrap', gap: 24 }}>
          <div style={{ maxWidth: 640 }}>
            <div className="row gap-12 mb-16" style={{ flexWrap:'wrap' }}>
              <StatusBadge status={project.status} />
              {project.chain && <ChainBadge chain={project.chain} />}
              <span className="tiny" style={{ textTransform:'none', letterSpacing:0.04 }}>{t('detail.started')} {fmtDate(project.createdAt, { dateOnly:true })}</span>
              {project.sealedAt && <span className="tiny" style={{ textTransform:'none', letterSpacing:0.04 }}>· {t('detail.sealed')} {fmtDate(project.sealedAt, { dateOnly:true })}</span>}
            </div>
            <h1 className="h2 serif">{project.title}</h1>
            <p className="ink-2 mt-16" style={{ fontSize: 16 }}>{project.subtitle}</p>
          </div>
          <div className="row gap-12">
            {project.status === 'sealed' ? (
              <>
                <button className="btn btn-secondary" onClick={() => onNavigate('certificate:' + project.id)}>
                  {t('detail.openCert')}
                </button>
                <button className="btn btn-primary">
                  {t('common.shareURL')}
                </button>
              </>
            ) : (
              <>
                <button className="btn btn-secondary" onClick={() => onNavigate('upload')}>{t('detail.addEvent')}</button>
                <button className="btn btn-primary" onClick={() => onNavigate('upload')}>{t('detail.sealOn', { chain: chainName })}</button>
              </>
            )}
          </div>
        </div>

        {/* Meta panel */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap: 0, marginBottom: 48 }}>
          <MetaCell label={t('detail.meta.events')} value={project.stats.events} first />
          <MetaCell label={t('detail.meta.aiOps')} value={project.stats.aiOps} accent="seal" />
          <MetaCell label={t('detail.meta.humanEdits')} value={project.stats.humanEdits} accent="verified" />
          <MetaCell label={t('detail.meta.duration')} value={project.stats.duration} />
          <MetaCell label={t('detail.meta.collaborators')} value={project.stats.collaborators} last />
        </div>

        {/* Two-column: timeline + inspector */}
        <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 48 }}>
          {/* Timeline */}
          <div>
            <div className="between mb-24">
              <h3 className="h3 serif">{t('detail.timeline')}</h3>
              <span className="tiny" style={{ textTransform:'none', letterSpacing:0.04 }}>{project.events.length} {t('common.entries')}</span>
            </div>
            <div className="timeline">
              {project.events.map((e) => (
                <TimelineEntry
                  key={e.id}
                  event={e}
                  selected={selectedEventId === e.id}
                  onClick={() => setSelectedEventId(e.id)}
                />
              ))}
            </div>
          </div>

          {/* Inspector */}
          <div>
            <div className="mb-24">
              <div className="eyebrow">{t('detail.inspector')}</div>
              <div className="tiny mt-8" style={{ textTransform:'none', letterSpacing:0.02, color:'var(--muted)' }}>{t('detail.inspector.hint')}</div>
            </div>
            <EventInspector event={selectedEvent} project={project} onNavigate={onNavigate} />
          </div>
        </div>
      </div>
    </div>
  );
}

function MetaCell({ label, value, first, last, accent }) {
  const color = accent === 'seal' ? 'var(--primary-active)' : accent === 'verified' ? 'var(--success)' : 'var(--ink)';
  return (
    <div style={{
      padding: '20px 24px',
      borderLeft: first ? '1px solid var(--hairline)' : 'none',
      borderRight: '1px solid var(--hairline)',
      borderTop: '1px solid var(--hairline)',
      borderBottom: '1px solid var(--hairline)',
    }}>
      <div className="tiny">{label}</div>
      <div className="mt-8 serif" style={{ fontSize: 32, lineHeight: 1, color, letterSpacing:'-0.01em' }}>{value}</div>
    </div>
  );
}

function TimelineEntry({ event, selected, onClick }) {
  const cls = event.kind === 'commit' ? 'seal' : event.who === 'human' ? 'verified' : '';
  return (
    <div
      className={'timeline-item ' + cls}
      onClick={onClick}
      style={{
        cursor:'pointer',
        padding: '10px 14px 10px 10px',
        marginLeft: -14,
        borderRadius: 6,
        background: selected ? 'var(--surface-soft)' : 'transparent',
        transition: 'background 0.15s',
        borderLeft: selected ? '1px solid var(--muted-soft)' : '1px solid transparent',
      }}
    >
      <EventBadge event={event} compact={false} />
    </div>
  );
}

function EventInspector({ event, project, onNavigate }) {
  const { t } = useI18n();
  if (!event) return null;
  const meta = window.EVENT_KIND_META[event.kind];
  const chainName = project.chain === 'polygon' ? 'Polygon' : 'Ethereum';

  return (
    <div className="card" style={{ padding: 28 }}>
      <div className="row between mb-24">
        <div className="row gap-12">
          <div style={{
            width: 44, height: 44, borderRadius: 8,
            background: event.who === 'ai' ? 'color-mix(in oklab, var(--primary) 12%, var(--canvas))' : event.who === 'human' ? 'color-mix(in oklab, var(--accent-teal) 14%, var(--canvas))' : 'var(--surface-card)',
            color: event.who === 'ai' ? 'var(--primary-active)' : event.who === 'human' ? 'color-mix(in oklab, var(--accent-teal) 80%, var(--ink))' : 'var(--ink)',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <EventGlyph kind={event.kind} size={24} />
          </div>
          <div>
            <div className="tiny">{meta.label}</div>
            <div className="h4 mt-4">{event.label}</div>
          </div>
        </div>
      </div>

      <div className="col gap-24">
        <InspectorRow label={t('detail.insp.timestamp')}>
          <span className="mono" style={{ fontSize: 13 }}>{fmtTimeUTC(event.ts)}</span>
        </InspectorRow>

        <InspectorRow label={t('detail.insp.actor')}>
          <div className="row gap-8">
            {event.who === 'ai' && <span className="badge badge-ai">{t('common.actorAI')}</span>}
            {event.who === 'human' && <span className="badge badge-human">{t('common.actorHuman')}</span>}
            {event.who === 'chain' && <span className="badge">{t('common.actorChain')}</span>}
            {event.model && <span className="mono small">{event.model}</span>}
          </div>
        </InspectorRow>

        {event.count && (
          <InspectorRow label={t('detail.insp.filesBundled')}>
            <span className="mono" style={{ fontSize: 13 }}>{t('detail.insp.filesInDir', { n: event.count })}</span>
          </InspectorRow>
        )}

        <InspectorRow label={t('detail.insp.sha')}>
          <div className="hash-block">{event.hash}</div>
        </InspectorRow>

        {event.signature && (
          <InspectorRow label={t('detail.insp.signature')}>
            <div className="hash-block" style={{ fontSize: 11 }}>{event.signature}</div>
            <div className="tiny ink-3 mt-4">{t('detail.insp.signatureHint')}</div>
          </InspectorRow>
        )}

        {event.kind === 'commit' && <SampleCommitBlock project={project} event={event} chainName={chainName} onNavigate={onNavigate} />}
      </div>
    </div>
  );
}

function InspectorRow({ label, children }) {
  return (
    <div className="col gap-8">
      <div className="tiny">{label}</div>
      {children}
    </div>
  );
}

function SampleCommitBlock({ project, event, chainName, onNavigate }) {
  const { t } = useI18n();
  return (
    <div className="col gap-16">
      <div className="verify-result match" style={{ padding: 20 }}>
        <div className="row gap-12 mb-8">
          <span className="dot-verified" />
          <span className="mono" style={{ fontSize: 12, letterSpacing:'0.06em' }}>{t('detail.insp.sealedOn', { chain: chainName.toUpperCase() })}</span>
        </div>
        <div className="small">{t('detail.insp.sealedNote')}</div>
      </div>
      <div className="col gap-8">
        <div className="tiny">{t('detail.insp.transaction')}</div>
        <div className="hash-block">{event.hash}</div>
      </div>
      <a
        className="btn btn-secondary btn-sm"
        style={{ alignSelf:'flex-start' }}
        href={'#tx:' + event.hash}
        onClick={(e) => { e.preventDefault(); onNavigate('tx:' + event.hash); }}
      >
        {t('common.viewExplorer')}
      </a>
    </div>
  );
}

window.ProjectDetail = ProjectDetail;