// components/os-primitives.jsx — Landscape OS shared chrome (Phase 01)
// Reuses window.EmptyState from drawers.jsx. Never fabricates KPI zeros.

function askRinpo(seed) {
  var text = seed || '';
  if (window.RinpoRuntime) {
    window.RinpoRuntime.open({ tab: 'chat', seed: text, source: 'os_prompt', surface: 'store' });
    return;
  }
  if (window.HAPStore && typeof window.HAPStore.openRinpoChat === 'function') {
    window.HAPStore.openRinpoChat(text);
    return;
  }
  if (window.HAPRouter) HAPRouter.nav('#/phone?tab=chat');
}

function PageHeader({ eyebrow, title, note, actions }) {
  return (
    <header className="os-page-header">
      {eyebrow ? <span className="eyebrow">{eyebrow}</span> : null}
      <h1 className="serif">{title}</h1>
      {note ? <p>{note}</p> : null}
      {actions ? <div className="os-hero__ctas">{actions}</div> : null}
    </header>
  );
}

function SectionHeader({ eyebrow, title, action }) {
  return (
    <div className="os-section-header">
      <div>
        {eyebrow ? <span className="eyebrow">{eyebrow}</span> : null}
        <h2 className="serif">{title}</h2>
      </div>
      {action || null}
    </div>
  );
}

function MetricCard({ label, value, note, unavailable }) {
  if (unavailable) {
    return (
      <div className="os-metric os-metric--unavailable" role="status">
        <div className="os-metric__label">{label}</div>
        <div className="os-metric__value">DATA NOT AVAILABLE</div>
        {note ? <div style={{ fontSize: '.74rem', color: 'var(--muted)' }}>{note}</div> : null}
      </div>
    );
  }
  return (
    <div className="os-metric">
      <div className="os-metric__label">{label}</div>
      <div className="os-metric__value">{value}</div>
      {note ? <div style={{ fontSize: '.74rem', color: 'var(--muted)' }}>{note}</div> : null}
    </div>
  );
}

function ProjectCard({ title, note, href, empty }) {
  if (empty) {
    return (
      <div className="os-project-card os-project-card--empty">
        <StatusBadge label="No project" tone="empty" />
        <p style={{ margin: 0 }}>No garden project yet.</p>
      </div>
    );
  }
  return (
    <a className="os-project-card" href={href || '#/garden'}>
      <h3>{title}</h3>
      {note ? <p style={{ color: 'var(--muted)', margin: 0 }}>{note}</p> : null}
    </a>
  );
}

function NeedCard({ title, note, href, icon }) {
  return (
    <a className="os-need-card" href={href}>
      {icon ? <Icon name={icon} size={18} style={{ color: 'var(--primary)' }} /> : null}
      <h3>{title}</h3>
      {note ? <p>{note}</p> : null}
    </a>
  );
}

function StatusBadge({ label, tone }) {
  return <span className={'os-status' + (tone === 'empty' ? ' os-status--empty' : '')}>{label}</span>;
}

function OsEmptyBand({ icon, title, note, cta, secondary }) {
  return (
    <div className="os-empty-band">
      <div>
        <div>
          {icon ? <Icon name={icon} size={20} style={{ color: 'var(--moss)' }} /> : null}
          <h3 className="serif" style={{ fontSize: '1.2rem', marginTop: 6 }}>{title}</h3>
          {note ? <p style={{ color: 'var(--muted)', marginTop: 4 }}>{note}</p> : null}
        </div>
        <div className="os-empty-actions">
          {cta ? <a className="btn btn--primary" href={cta.href} onClick={cta.onClick}>{cta.label}</a> : null}
          {secondary ? (
            secondary.onClick
              ? <button type="button" className="btn btn--ghost" onClick={secondary.onClick}>{secondary.label}</button>
              : <a className="btn btn--ghost" href={secondary.href}>{secondary.label}</a>
          ) : null}
        </div>
      </div>
    </div>
  );
}

function RinpoPrompt({ text, seed }) {
  return (
    <p className="os-rinpo-line">
      {text || 'Need a hand?'}{' '}
      <button type="button" onClick={function () { askRinpo(seed); }}>Ask RINPO</button>
    </p>
  );
}

Object.assign(window, {
  PageHeader: PageHeader,
  SectionHeader: SectionHeader,
  MetricCard: MetricCard,
  ProjectCard: ProjectCard,
  NeedCard: NeedCard,
  StatusBadge: StatusBadge,
  OsEmptyBand: OsEmptyBand,
  RinpoPrompt: RinpoPrompt,
  askRinpo: askRinpo,
});