// Contracts — architecture support, not the full detail workspace yet.

function ContractsPage({ data }) {
  const [statusFilter, setStatusFilter] = React.useState('all');
  const contracts = data.contracts;
  const counts = {
    all: contracts.length,
    active: contracts.filter(c => c.status === 'Active').length,
    renewal: contracts.filter(c => c.reminder === 'expiring').length,
    review: contracts.filter(c => c.reminder === 'review').length,
    signed: contracts.filter(c => c.status === 'Signed').length,
  };
  const filtered = contracts.filter(c => {
    if (statusFilter === 'active'  && c.status !== 'Active') return false;
    if (statusFilter === 'renewal' && c.reminder !== 'expiring') return false;
    if (statusFilter === 'review'  && c.reminder !== 'review') return false;
    if (statusFilter === 'signed'  && c.status !== 'Signed') return false;
    return true;
  });

  const totalValue = contracts.reduce((s, c) => s + (c.valueNum || 0), 0);
  const activeValue = contracts.filter(c => c.status === 'Active').reduce((s, c) => s + (c.valueNum || 0), 0);

  return (
    <main className="main" data-screen-label="03 Contracts">
      <div className="page-header-row">
        <div>
          <h1 className="greeting" style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
            Contracts
            <span style={{ fontSize: 20, color: 'var(--text-tertiary)', fontWeight: 500, letterSpacing: '-0.01em' }}>{contracts.length}</span>
          </h1>
          <div className="date-line">
            <b>${(activeValue/1000).toFixed(0)}K active</b> · {counts.renewal} renewal due · {counts.review} in review
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-white btn-sm">
            <Icon name="paperclip" size={15} strokeWidth={1.75} />
            <span>Upload contract</span>
          </button>
          <button className="btn btn-primary btn-sm">
            <Icon name="plus" size={15} strokeWidth={2} />
            <span>New contract</span>
          </button>
        </div>
      </div>

      {/* Two KPI + illustration row */}
      <div className="hi-row" style={{ marginTop: 4 }}>
        <div className="hi-card">
          <div className="hi-rail green" />
          <div className="hi-head">
            <div className="hi-title-block">
              <div className="lbl" style={{ color: 'var(--success-solid)' }}>Active value</div>
              <div className="num tabular">${(activeValue/1000).toFixed(0)}K</div>
              <div className="sub">Across {counts.active} active contracts</div>
            </div>
            <div className="hi-glyph green"><Icon name="dollar" size={22} strokeWidth={1.75} /></div>
          </div>
          <Sparkline points={[40,42,48,55,62,68,75,82,90,96,102,110]} color="var(--success-solid)" width={280} height={44} />
        </div>

        <div className="hi-card">
          <div className="hi-rail" style={{ background: 'linear-gradient(180deg, #FFB25C, var(--warning-solid))' }} />
          <div className="hi-head">
            <div className="hi-title-block">
              <div className="lbl" style={{ color: 'var(--label-yellow)' }}>Renewals due</div>
              <div className="num">{counts.renewal}</div>
              <div className="sub">Reach out to renew before expiry</div>
            </div>
            <div className="hi-glyph" style={{ background: 'rgba(239,157,14,0.10)', color: 'var(--label-yellow)' }}>
              <Icon name="clock" size={22} strokeWidth={1.75} />
            </div>
          </div>
          <div className="hi-list">
            {contracts.filter(c => c.reminder === 'expiring').map(c => (
              <div className="hi-item" key={c.id}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--warning-solid)' }} />
                <b className="truncate" style={{ maxWidth: 200 }}>{c.title}</b>
                <span className="rt">{c.expiresIn.replace('Expires in ', '')}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="hi-card" style={{ padding: '18px 20px', gap: 6 }}>
          <div className="hi-head">
            <div className="hi-title-block">
              <div className="lbl">Reminder</div>
              <div className="sub" style={{ marginTop: 4 }}>
                Renewal reminders trigger <b style={{ color: 'var(--text-primary)' }}>30, 14, and 3 days</b> before expiry, and are surfaced in Home &amp; Projects.
              </div>
            </div>
            <ContractReminderIllus size={104} />
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 'auto' }}>
            <button className="btn btn-white btn-sm">Configure</button>
          </div>
        </div>
      </div>

      {/* Filter */}
      <div className="filter-bar" style={{ marginTop: 16 }}>
        <Tabs
          value={statusFilter}
          onChange={setStatusFilter}
          items={[
            { key: 'all',     label: 'All',         count: counts.all },
            { key: 'active',  label: 'Active',      count: counts.active,  tone: 'green' },
            { key: 'renewal', label: 'Renewal due', count: counts.renewal, tone: 'yellow' },
            { key: 'review',  label: 'In review',   count: counts.review,  tone: 'blue' },
            { key: 'signed',  label: 'Signed',      count: counts.signed },
          ]}
        />
        <div className="filter-spacer" />
        <Input
          placeholder="Search contracts…"
          leadIcon={<Icon name="search" size={16} strokeWidth={1.75} />}
          style={{ minWidth: 220, flex: '0 1 280px' }}
        />
        <Select label="Sort" value="Expiry soonest" />
      </div>

      {/* List */}
      <Card style={{ marginTop: 12 }}>
        <div style={{ padding: 4 }}>
          {filtered.map((c) => (
            <ContractRow key={c.id} c={c} clients={data.clients} projects={data.projects} />
          ))}
        </div>
      </Card>

      <div className="date-line" style={{ marginTop: 14, textAlign: 'center', color: 'var(--text-tertiary)' }}>
        Contract detail workspace is coming next. This view supports the architecture &amp; reminders for now.
      </div>
    </main>
  );
}

function ContractRow({ c, clients, projects }) {
  const client = clients[c.client];
  const project = projects.find(p => p.id === c.project);
  return (
    <a className="contract-row" href={`#/contracts/${c.id}`}>
      <div className="c-lead">
        <div className="c-kind">
          <Icon name="contracts" size={18} strokeWidth={1.75} />
        </div>
        <div style={{ minWidth: 0 }}>
          <div className="c-title">{c.title}</div>
          <div className="c-meta">
            <span className="c-id">{c.id}</span>
            {client && client.short !== '·' && <ClientChip client={client} />}
            {project && (
              <span style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em', whiteSpace: 'nowrap' }}>
                · {project.name}
              </span>
            )}
          </div>
        </div>
      </div>
      <div>
        <Label tone={c.tone} dot size="sm">{c.status}</Label>
        {c.reminder && (
          <div style={{ marginTop: 6 }}>
            <span className={`reminder-chip ${c.reminder}`}>
              {c.reminder === 'expiring' && <Icon name="clock" size={11} strokeWidth={2} />}
              {c.reminder === 'review'   && <Icon name="edit"  size={11} strokeWidth={2} />}
              {c.expiresIn.replace('Expires in ', '').replace('Renews in ', '').replace('Draft with legal','In legal')}
            </span>
          </div>
        )}
      </div>
      <div className="c-value">{c.value}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--text-tertiary)', fontSize: 12 }}>
        <Icon name="paperclip" size={14} strokeWidth={1.75} />
        <span>{c.files} file{c.files === 1 ? '' : 's'}</span>
      </div>
      <div className="c-dates">
        <div><b>{c.start.split(',')[0]}</b> → {c.end}</div>
        <div style={{ marginTop: 2 }}>{c.expiresIn}</div>
      </div>
      <Icon name="chevronRight" size={14} strokeWidth={2} style={{ color: 'var(--text-tertiary)' }} />
    </a>
  );
}

Object.assign(window, { ContractsPage });