/* Client Card — 60/40 layout, sticky header, 3 status axes, 6 tabs, RBAC.
   Spec: monolith-docs/client-card/layout-and-tabs.md */
const { useState: useStateCC } = React;

function ClientCard({ client, role, onBack, onOpenDeal, onAddActivity, onToast }) {
  const D = window.MonolitData;
  const RB = window.MonolitRBAC;
  const [tab, setTab] = useStateCC('overview');
  const archived = client.systemStatus === 'archived';
  const isViewer = role === 'Viewer';
  const readOnly = archived || isViewer;
  const clientDeals = D.deals.filter(d => d.clientId === client.id);
  const activeDeals = clientDeals.filter(dealIsActive);

  // Badge rule: only Comments / Deals(active) / Files; 0 → hidden; >99 → 99+
  const badge = (n) => (n > 0 ? (n > 99 ? '99+' : n) : undefined);
  const tabs = [
    { id: 'overview', label: 'Overview' },
    { id: 'activity', label: 'Activity' },
    { id: 'comments', label: 'Comments', count: badge(D.clientComments.length) },
    { id: 'deals',    label: 'Deals',    count: badge(activeDeals.length) },
    { id: 'files',    label: 'Files',    count: badge(D.clientFiles.length) },
    ...(RB.can(role, 'audit.view') ? [{ id: 'audit', label: 'Audit' }] : []),
  ];

  return (
    <React.Fragment>
      <div className="mn-page-h" style={{ paddingBottom: 0 }}>
        <button className="mn-drawer-back" onClick={onBack} type="button">
          <Icon name="arrow-left" size="xs" /> Back to clients
        </button>
        <div className="mn-page-actions">
          <Button variant="quiet" size="md" icon="copy" title="Copy link">Copy link</Button>
          {!readOnly ? <Button variant="ghost" size="md" icon="more-horizontal">Actions</Button> : null}
          {archived && RB.can(role, 'clients.archive') ? <Button variant="secondary" size="md" icon="archive-restore">Restore</Button> : null}
        </div>
      </div>

      <div className="mn-leadcard">
        <div className="mn-leadcard-l">
          <header className="mn-lead-header">
            <div className="mn-lead-id-row">
              <span className="mn-lead-id">{client.id}</span>
              <span className="mn-mono mn-muted" style={{ fontSize: 12 }}>·</span>
              <span className="mn-mono mn-muted" style={{ fontSize: 12 }}>created {new Date(client.createdAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</span>
              <span className="mn-mono mn-muted" style={{ fontSize: 12 }}>·</span>
              <span className="mn-mono mn-muted" style={{ fontSize: 12 }}>updated {relTime(new Date(client.updatedAt))}</span>
              {archived ? <span className="mn-chip mn-chip--sys-archived" style={{ marginLeft: 6 }}><Icon name="archive" size="xs" stroke="2" />Archived</span> : null}
              {client.createdFromLead ? (
                <span className="mn-chip mn-chip--fromlead" style={{ marginLeft: archived ? 0 : 6 }}>
                  <Icon name="git-branch" size="xs" stroke="2" />from lead {client.originalLeadId}
                </span>
              ) : null}
            </div>
            <div className="mn-lead-title-row">
              <Avatar user={{ initials: client.name.split(' ').map(w => w[0]).join('').slice(0, 2), color: client.owner ? client.owner.color : 'slate' }} size={56} />
              <div style={{ flex: 1 }}>
                <h1 className="mn-lead-title">{client.name}</h1>
                <div className="mn-lead-co">
                  {client.account ? `${client.account} · ` : ''}{client.city}, {client.country}
                  <span className="mn-mono" style={{ fontSize: 12, color: 'var(--text-3)', marginLeft: 8 }}>local {clientTime(client.tzOffset)}</span>
                </div>
              </div>
              <div className="mn-row" style={{ gap: 8 }}>
                <BizStatusChip status={client.businessStatus} size="lg" onClick={!readOnly && RB.can(role, 'clients.status.business') ? () => {} : undefined} />
                <ActStatusChip status={client.activityStatus} size="lg" />
              </div>
            </div>
            <div className="mn-lead-meta-row">
              <div className="mn-row">
                <span className="mn-eyebrow" style={{ margin: 0 }}>Open pipeline</span>
                {activeDeals.length > 0
                  ? <span className="mn-mono" style={{ fontSize: 13 }}>€{(client.openDealsValue / 1000).toFixed(0)}k · {activeDeals.length} deal{activeDeals.length > 1 ? 's' : ''}</span>
                  : <span className="mn-chip mn-chip--nonext">No active deals</span>}
              </div>
              <div className="mn-row" style={{ marginLeft: 'auto' }}>
                <span className="mn-eyebrow" style={{ margin: 0 }}>Owner</span>
                {client.owner ? (
                  <span className="mn-row" style={{ gap: 6 }}>
                    <Avatar user={client.owner} size={22} />
                    <span style={{ font: 'var(--font-weight-medium) 13px/16px var(--font-sans)' }}>{client.owner.name}</span>
                  </span>
                ) : (
                  <span className="mn-chip mn-chip--noowner"><Icon name="user-x" size="xs" stroke="2" />No owner</span>
                )}
              </div>
            </div>
            <div className="mn-lead-quick">
              <Button variant="ghost" size="md" icon="phone" disabled={readOnly}>Call</Button>
              <Button variant="ghost" size="md" icon="mail" disabled={readOnly}>Email</Button>
              <Button variant="ghost" size="md" icon="plus-square" disabled={readOnly || !RB.can(role, 'activities.create')} onClick={onAddActivity}>Add activity</Button>
              <Button variant="ghost" size="md" icon="calendar-plus" disabled={readOnly}>Schedule</Button>
              <Button variant="ghost" size="md" icon="briefcase" disabled={readOnly || !RB.can(role, 'deals.create')}>Create deal</Button>
              <div className="mn-toolbar-spacer" />
              {!readOnly ? <Button variant="quiet" size="md" icon="pencil">Edit details</Button> : null}
            </div>
          </header>

          {archived ? (
            <div className="mn-robanner" style={{ marginTop: 12 }}>
              <Icon name="archive" size="sm" />This client is archived — the card is read-only. Restore to resume work.
            </div>
          ) : isViewer ? (
            <div className="mn-robanner" style={{ marginTop: 12 }}>
              <Icon name="eye" size="sm" />Read-only access — your role is Viewer.
            </div>
          ) : null}

          <Tabs items={tabs} value={tab} onChange={setTab} />

          {tab === 'overview' ? <ClientOverviewTab client={client} deals={activeDeals} /> :
           tab === 'activity' ? <ClientActivityTab readOnly={readOnly} onAddActivity={onAddActivity} /> :
           tab === 'comments' ? <ClientCommentsTab readOnly={readOnly} /> :
           tab === 'deals' ?    <ClientDealsTab deals={clientDeals} readOnly={readOnly} canCreate={RB.can(role, 'deals.create')} onOpenDeal={onOpenDeal} /> :
           tab === 'files' ?    <ClientFilesTab readOnly={readOnly} /> :
           <ClientAuditTab />}
        </div>

        <aside className="mn-leadcard-r">
          <Card title="Contact" eyebrow="Reachable channels" padding="md">
            <dl className="mn-kv">
              <dt>Email</dt><dd>{client.email}</dd>
              <dt>Phone</dt><dd>{client.phone}</dd>
              <dt>Location</dt><dd>{client.city}, {client.country}</dd>
              {client.website ? <React.Fragment><dt>Website</dt><dd>{client.website}</dd></React.Fragment> : null}
              <dt>Source</dt><dd><span style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-mono)', color: 'var(--text-2)' }}>{client.source.type}</span> · {client.source.name}</dd>
            </dl>
          </Card>

          <Card title="Status" eyebrow="Three independent axes" padding="md">
            <dl className="mn-kv">
              <dt>Business</dt><dd><BizStatusChip status={client.businessStatus} size="md" /></dd>
              <dt>Activity</dt><dd><ActStatusChip status={client.activityStatus} size="md" /></dd>
              <dt>System</dt><dd>
                {archived
                  ? <span className="mn-chip mn-chip--sys-archived"><Icon name="archive" size="xs" stroke="2" />Archived</span>
                  : <span className="mn-chip mn-chip--neutral">Active</span>}
              </dd>
            </dl>
          </Card>

          <Card title="Value" eyebrow="Deals & revenue" padding="md">
            <dl className="mn-kv">
              <dt>Total revenue</dt><dd className="mono">€{client.totalRevenue.toLocaleString('en-GB')}</dd>
              <dt>Won deals</dt><dd>{client.wonDeals} of {client.totalDeals}</dd>
              <dt>Open pipeline</dt><dd className="mono">€{client.openDealsValue.toLocaleString('en-GB')}</dd>
              <dt>Last deal</dt><dd>{client.lastDealDate ? relTime(new Date(client.lastDealDate)) : '—'}</dd>
            </dl>
          </Card>

          <Card title="Tags" eyebrow="Classification" padding="md"
                action={!readOnly ? <IconButton icon="plus" size="sm" title="Add tag" /> : null}>
            {client.tags.length > 0 ? (
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {client.tags.map((t) => <span key={t} className="mn-chip mn-chip--tag">{t}</span>)}
              </div>
            ) : (
              <span style={{ font: 'var(--font-weight-default) 12px/16px var(--font-sans)', color: 'var(--text-3)' }}>No tags yet.</span>
            )}
          </Card>

          <Card title="Details" eyebrow="Metadata" padding="md">
            <dl className="mn-kv">
              <dt>Public ID</dt><dd className="mono">{client.id}</dd>
              {client.jobTitle ? <React.Fragment><dt>Job title</dt><dd>{client.jobTitle}</dd></React.Fragment> : null}
              <dt>Activities</dt><dd>{client.activityCount}</dd>
              <dt>From lead</dt><dd>{client.createdFromLead ? <span className="mono">{client.originalLeadId}</span> : 'No'}</dd>
              <dt>Created</dt><dd>{new Date(client.createdAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</dd>
            </dl>
          </Card>

          {!isViewer && (window.MonolitRBAC.can(role, 'clients.archive') || !archived) ? (
            <Card title="Actions" eyebrow="Ownership & lifecycle" padding="md">
              <div className="mn-stack">
                {window.MonolitRBAC.can(role, 'clients.assign') ? <Button variant="ghost" size="md" icon="user-plus" fullWidth disabled={archived}>Reassign owner</Button> : null}
                {window.MonolitRBAC.can(role, 'clients.archive')
                  ? (archived
                      ? <Button variant="secondary" size="md" icon="archive-restore" fullWidth>Restore client</Button>
                      : <Button variant="ghost" size="md" icon="archive" fullWidth>Archive client</Button>)
                  : null}
              </div>
            </Card>
          ) : null}
        </aside>
      </div>
    </React.Fragment>
  );
}

function ClientOverviewTab({ client, deals }) {
  const D = window.MonolitData;
  return (
    <div className="mn-stack-lg" style={{ paddingTop: 16 }}>
      <Card title="Summary" eyebrow="What we know">
        <p style={{ font: 'var(--font-weight-default) 14px/22px var(--font-sans)', color: 'var(--text-1)', margin: 0 }}>
          {client.account || client.name} {client.businessStatus === 'customer'
            ? `has been a customer since ${new Date(client.createdAt).toLocaleDateString('en-GB', { month: 'long', year: 'numeric' })} with €${client.totalRevenue.toLocaleString('en-GB')} in won deals.`
            : 'is a confirmed contact being developed toward a first deal.'}
          {deals.length > 0 ? ` Currently ${deals.length} open deal${deals.length > 1 ? 's' : ''} worth €${client.openDealsValue.toLocaleString('en-GB')}.` : ''}
        </p>
      </Card>
      <Card title="Latest activity" eyebrow="Most recent" action={<Button variant="quiet" size="sm" iconRight="arrow-right">Go to feed</Button>}>
        <div className="mn-feed">
          {D.clientActivity.slice(1, 3).map((a) => <FeedItem key={a.id} a={a} />)}
        </div>
      </Card>
    </div>
  );
}

function ClientActivityTab({ readOnly, onAddActivity }) {
  const D = window.MonolitData;
  return (
    <div style={{ paddingTop: 16 }}>
      <Card title="Activity timeline" eyebrow="Upcoming & overdue first, then history"
            action={<div className="mn-row"><Button variant="ghost" size="sm" icon="filter">All types</Button>{!readOnly ? <Button variant="primary" size="sm" icon="plus" onClick={onAddActivity}>Add activity</Button> : null}</div>}>
        <div className="mn-feed">
          {D.clientActivity.map((a) => (
            a.type === 'task' ? (
              <div key={a.id} className="mn-feed-item">
                <span className="mn-feed-icon" style={{ background: 'var(--primary-low)', color: 'var(--primary-low-on)' }}><Icon name="check-square" size="sm" /></span>
                <div style={{ flex: 1 }}>
                  <div className="mn-feed-h">
                    <span className="mn-feed-who">{a.who.name}</span>
                    <span className="mn-feed-at">· task due {new Date(a.task.due).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}</span>
                    <span className={`mn-chip mn-chip--pr-${a.task.priority}`} style={{ marginLeft: 6 }}>{a.task.priority}</span>
                  </div>
                  <div className="mn-feed-body">{a.summary}</div>
                </div>
              </div>
            ) : <FeedItem key={a.id} a={a} />
          ))}
        </div>
      </Card>
    </div>
  );
}

function ClientCommentsTab({ readOnly }) {
  const D = window.MonolitData;
  return (
    <div style={{ paddingTop: 16 }}>
      <Card title="Comments" eyebrow="Team-internal notes">
        <div className="mn-stack-lg">
          {D.clientComments.map((c, i) => (
            <div key={i} className="mn-row" style={{ alignItems: 'flex-start', gap: 10 }}>
              <Avatar user={c.who} size={28} />
              <div style={{ flex: 1 }}>
                <div className="mn-feed-h">
                  <span className="mn-feed-who">{c.who.name}</span>
                  <span className="mn-feed-at">· {c.at}</span>
                </div>
                <div className="mn-feed-body">{c.body}</div>
              </div>
            </div>
          ))}
        </div>
        {!readOnly ? (
          <div style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--border-1)' }}>
            <Input fullWidth icon="message-square" placeholder="Add a comment… @ to mention" />
          </div>
        ) : null}
      </Card>
    </div>
  );
}

function ClientDealsTab({ deals, readOnly, canCreate, onOpenDeal }) {
  const sorted = deals.slice().sort((a, b) => (dealIsActive(b) ? 1 : 0) - (dealIsActive(a) ? 1 : 0));
  return (
    <div style={{ paddingTop: 16 }}>
      <Card title="Deals" eyebrow={`${deals.length} linked · active first`}
            action={!readOnly && canCreate ? <Button variant="primary" size="sm" icon="plus">Create deal</Button> : null}>
        {sorted.length > 0 ? sorted.map((d) => (
          <div key={d.id} className="mn-row mn-row--clickable" style={{ padding: '10px 4px', borderBottom: '1px dashed var(--border-1)', justifyContent: 'space-between', cursor: 'pointer' }}
               onClick={() => onOpenDeal && onOpenDeal(d.id)}>
            <div className="mn-row" style={{ gap: 10 }}>
              <span className="mn-feed-icon"><Icon name="briefcase" size="sm" /></span>
              <div>
                <div style={{ font: 'var(--font-weight-strong) 13px/18px var(--font-sans)' }}>{d.name}</div>
                <div style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: 'var(--text-3)' }}>{d.id} · Owner: {d.owner ? d.owner.name : 'unassigned'}{d.expectedClose && dealIsActive(d) ? ` · close ${new Date(d.expectedClose).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}` : ''}</div>
              </div>
            </div>
            <div className="mn-row">
              {fmtMoney(d) ? <span className="mn-mono" style={{ fontSize: 13, color: 'var(--text-1)' }}>{fmtMoney(d)}</span> : null}
              <DealStageChip stage={d.stage} />
            </div>
          </div>
        )) : (
          <div className="mn-empty" style={{ padding: 24 }}>
            <Icon name="briefcase" size="lg" />
            <div className="mn-empty-msg">No deals yet.</div>
            {!readOnly && canCreate ? <Button variant="primary" size="sm" icon="plus">Create deal</Button> : null}
          </div>
        )}
      </Card>
    </div>
  );
}

function ClientFilesTab({ readOnly }) {
  const D = window.MonolitData;
  return (
    <div style={{ paddingTop: 16 }}>
      <Card title="Files" eyebrow={`${D.clientFiles.length} attached`}
            action={!readOnly ? <Button variant="primary" size="sm" icon="paperclip">Upload</Button> : null}>
        <div className="mn-stack">
          {D.clientFiles.map((f) => (
            <div key={f.name} className="mn-row" style={{ padding: '10px 4px', borderBottom: '1px dashed var(--border-1)', gap: 10 }}>
              <span className="mn-feed-icon"><Icon name={f.type === 'image' ? 'image' : 'file-text'} size="sm" /></span>
              <div style={{ flex: 1 }}>
                <div style={{ font: 'var(--font-weight-strong) 13px/18px var(--font-sans)' }}>{f.name}</div>
                <div style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: 'var(--text-3)' }}>{f.size} · {f.who} · {f.at}</div>
              </div>
              <IconButton icon="download" size="sm" title="Download" />
              {!readOnly ? <IconButton icon="trash-2" size="sm" title="Delete" danger /> : null}
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function ClientAuditTab() {
  const D = window.MonolitData;
  return (
    <div style={{ paddingTop: 16 }}>
      <Card title="Audit log" eyebrow="Immutable · per-entity catalog">
        <table className="mn-table" style={{ marginTop: -8 }}>
          <thead>
            <tr><th>Time</th><th>Event</th><th>Detail</th><th>By</th></tr>
          </thead>
          <tbody>
            {D.clientAudit.map((a, i) => (
              <tr key={i}>
                <td><span className="mn-mono" style={{ fontSize: 12, color: 'var(--text-3)' }}>{a.at}</span></td>
                <td><span className="mn-mono" style={{ fontSize: 12, color: 'var(--text-2)' }}>{a.evt}</span></td>
                <td>{a.detail}</td>
                <td>{a.who}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

Object.assign(window, { ClientCard });