// ─────────────────────────────────────────────────────────────
// chat.jsx — Chat UI primitives
// ─────────────────────────────────────────────────────────────

function Bubble({ kind, name, time, children, accent }) {
  const isRight = kind === 'owner';
  return (
    <div className={`bubble-row ${isRight ? 'right' : 'left'}`}>
      <div className={`bubble ${kind}`} style={accent ? { '--accent': accent } : {}}>
        {name && <span className="meta-name">{name}</span>}
        <div>{children}</div>
        {time && <div className="timestamp">{time}</div>}
      </div>
    </div>
  );
}

function TypingBubble({ kind = 'owner' }) {
  return (
    <div className={`bubble-row ${kind === 'owner' ? 'right' : 'left'}`}>
      <div className={`bubble ${kind}`} style={{ padding: '10px 14px' }}>
        <div className="typing-dots">
          <span></span><span></span><span></span>
        </div>
      </div>
    </div>
  );
}

function BulletList({ items }) {
  return (
    <ul className="bullets">
      {items.map((it, i) => (
        <li key={i} className={it.pending ? 'pending' : ''}>{it.text || it}</li>
      ))}
    </ul>
  );
}

function ChatBanner({ title, label, time }) {
  return (
    <div className="chat-banner">
      <div className="sun"></div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div className="label">{label || 'Inicio de turno'}</div>
        <div className="title">{title}</div>
      </div>
      {time && <div style={{
        fontFamily: 'Plus Jakarta Sans, sans-serif',
        fontSize: 10,
        fontWeight: 700,
        opacity: 0.7,
        letterSpacing: '0.06em',
        flexShrink: 0,
      }}>{time}</div>}
    </div>
  );
}

// Action card — generic embedded card under a Sabrina bubble
function ActionCard({ eyebrow, accent = '#1a2d5a', children, foot }) {
  return (
    <div className="action-card" style={{ '--accent': accent }}>
      {eyebrow && (
        <div className="ac-eyebrow">
          <span className="dot"></span>
          {eyebrow}
        </div>
      )}
      {children}
      {foot && (
        <div className="ac-foot">
          <span className="check">✓</span>
          <span>{foot}</span>
        </div>
      )}
    </div>
  );
}

// Roster checklist card
function RosterCard() {
  const rows = [
    { name: 'Mateo Rodríguez', status: 'late', label: 'Llega 9 AM' },
    { name: 'Yulissa Peña', status: 'present', label: 'Presente' },
    { name: 'Genesis Tavárez', status: 'present', label: 'Presente' },
    { name: 'Anthony Báez', status: 'unknown', label: 'Sin respuesta' },
    { name: 'Ashley Núñez', status: 'unknown', label: 'Sin respuesta' },
    { name: 'Yarianny Mejía', status: 'present', label: 'Presente' },
    { name: 'Junior Hernández', status: 'present', label: 'Presente' },
    { name: 'Yariel Polanco', status: 'present', label: 'Presente' },
  ];
  return (
    <ActionCard eyebrow="Asistencia · 7:42 AM" accent="#1a2d5a">
      {rows.map((r, i) => (
        <div key={i} className="roster-row">
          <span className="name">{r.name}</span>
          <span className={`status ${r.status}`}>{r.label}</span>
        </div>
      ))}
    </ActionCard>
  );
}

// Payments card
function PaymentsCard() {
  const families = [
    { name: 'Anthony Báez', amount: 265, overdue: true, note: 'vencido 19 mayo' },
    { name: 'Yulissa Peña', amount: 245, overdue: false, note: 'esta semana' },
    { name: 'Junior Hernández', amount: 245, overdue: false, note: 'esta semana' },
  ];
  return (
    <ActionCard eyebrow="Cobros pendientes" accent="#2db54c" foot="3 mensajes redactados, listos para enviar">
      <div className="ac-row head">
        <span style={{flex: 1}}>Familia</span>
        <span>Monto</span>
      </div>
      {families.map((f, i) => (
        <div key={i} className="ac-row">
          <span className="label">
            {f.name}
            <div style={{
              fontSize: 10.5, fontWeight: 600,
              color: f.overdue ? '#e84040' : '#8088a1',
              letterSpacing: '0.04em',
              marginTop: 1,
            }}>{f.note}</div>
          </span>
          <span className={`val ${f.overdue ? 'warn' : ''}`}>${f.amount}</span>
        </div>
      ))}
      <div className="ac-total">
        <span className="l">Total esta semana</span>
        <span className="v">$755</span>
      </div>
    </ActionCard>
  );
}

// Weekly card
function WeeklyCard() {
  return (
    <ActionCard eyebrow="Resumen semanal · listo 7 AM" accent="#1a2d5a">
      <div className="weekly-stat">
        <span className="l">Asistencia</span>
        <span className="v good">96%</span>
      </div>
      <div className="weekly-stat">
        <span className="l">Incidentes menores</span>
        <span className="v">1</span>
      </div>
      <div className="weekly-stat">
        <span className="l">Reacciones alérgicas</span>
        <span className="v good">0</span>
      </div>
      <div className="weekly-stat">
        <span className="l">Cobros pendientes</span>
        <span className="v warn">$755</span>
      </div>
      <div className="weekly-stat">
        <span className="l">Estado OCFS</span>
        <span className="v good">Al día</span>
      </div>
    </ActionCard>
  );
}

// Alert pill — proactive
function AlertPill({ accent = '#f07d20', icon = '!', head, children }) {
  return (
    <div className="alert-pill" style={{ '--accent': accent }}>
      <div className="ap-head">
        <span className="ic">{icon}</span>
        {head}
      </div>
      <div className="ap-body">{children}</div>
    </div>
  );
}

// Bilingual incident report — THE screenshot moment
function IncidentReport() {
  return (
    <div className="incident-hero">
      <div className="ih-eyebrow">
        <span className="dot"></span>
        Reporte bilingüe · 4 segundos
      </div>

      {/* English OCFS report */}
      <div className="report-card en">
        <div className="rc-head">
          <div className="rc-flag">
            <span className="country">🇺🇸</span>
            NYS OCFS — Form FDC-INC
          </div>
          <div className="rc-stamp">FORMATO OFICIAL</div>
        </div>
        <div className="rc-title">Minor Incident Report</div>
        <div className="field">
          <span className="k">Date / Time</span>
          <span className="v">Tue, May 25 2026 · 10:14 AM</span>
        </div>
        <div className="field">
          <span className="k">Child</span>
          <span className="v">Mateo Rodríguez (age 4)</span>
        </div>
        <div className="field">
          <span className="k">License</span>
          <span className="v">NY-OCFS-FDC-554781 · Casita Sol</span>
        </div>
        <div className="field">
          <span className="k">Type</span>
          <span className="v">Injury — minor (no medical care required)</span>
        </div>
        <div className="field">
          <span className="k">Description</span>
          <span className="v">Child slipped during outdoor play in the back yard. Scraped right knee. Skin not broken below superficial layer.</span>
        </div>
        <div className="field">
          <span className="k">Action taken</span>
          <span className="v">Cleaned with saline. Adhesive bandage applied. Child returned to play within 8 minutes; no further distress.</span>
        </div>
        <div className="field">
          <span className="k">Reported by</span>
          <span className="v">Yarianny Castillo — Lead Teacher (CPR cert. expires 6/15/2026)</span>
        </div>
        <div className="rc-sign">
          <div>
            <div className="sig">Yarianny Castillo</div>
            <div className="sig-label">Staff signature · electronic</div>
          </div>
        </div>
      </div>

      {/* Tear divider */}
      <div className="tear-divider"></div>

      {/* Spanish parent message */}
      <div className="report-card es">
        <div className="rc-head">
          <div className="rc-flag">
            <span className="country">🇩🇴</span>
            Para Carmen — mamá de Mateo
          </div>
          <div style={{
            fontFamily: 'Plus Jakarta Sans',
            fontSize: 10,
            fontWeight: 700,
            color: '#8088a1',
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
          }}>WhatsApp · borrador</div>
        </div>
        <div className="rc-body">
          <p>Buenos días, Carmen 🌿</p>
          <p>Te escribo desde Casita Sol. Mateo se cayó en el patio hace un rato — un raspón en la rodilla, nada serio.
          Lo limpiamos, le pusimos una curita y ya volvió a jugar tranquilo.</p>
          <p>Está animado y comió bien. Cualquier cosa te aviso.
          Si quieres, cuando lo recojas te muestro la rodilla.</p>
          <p style={{ marginTop: 4, color: '#1a2d5a', fontWeight: 700 }}>— Maestra Yarianny y la maestra de Casita Sol</p>
        </div>
        <div className="rc-sign">
          <div>
            <div className="sig">Aprobado por la maestra</div>
            <div className="sig-label">Tu aprobación queda registrada</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Suggestion chips — the post-handoff sandbox starters.
// onPick fires the canned-reply intercept (cheap, no Anthropic calls).
// onRealApp jumps the visitor into the real KIDORA UI (auto-login as
// demo@kidora.app, redirect to /?demo=1). Rendered last as a primary
// filled-navy chip so it's visibly distinct from the canned chips.
function SuggestionChips({ onPick, onRealApp, realAppLoading }) {
  const chips = [
    { id: 'pay',       icon: <MoneyIcon size={20} />,  accent: '#e9f7eb', label: '¿Quién no ha pagado esta semana?' },
    { id: 'ocfs',      icon: <FolderIcon size={20} />, accent: '#e7eaf3', label: '¿Estoy al día con el OCFS?' },
    { id: 'inspector', icon: <AlertIcon size={20} />,  accent: '#fbe2e2', label: 'Llegó el inspector — dame los papeles' },
    { id: 'note',      icon: <NoteIcon size={20} />,   accent: '#fde9c8', label: 'Apunta: Yariel contó hasta 10' },
  ];
  return (
    <div className="chips-stack">
      {chips.map((c) => (
        <button
          key={c.id}
          className="chip-suggestion"
          onClick={() => onPick && onPick({ id: c.id, label: c.label })}
        >
          <span className="ic" style={{ background: c.accent }}>{c.icon}</span>
          <span className="lbl">{c.label}</span>
          <ArrowRightIcon size={14} color="#8088a1" />
        </button>
      ))}
      {onRealApp && (
        <button
          className="chip-realapp"
          onClick={onRealApp}
          disabled={realAppLoading}
        >
          <span className="lbl">
            {realAppLoading ? 'Abriendo Casita Sol…' : 'Probar la app real con Casita Sol'}
          </span>
          {!realAppLoading && <ArrowRightIcon size={14} color="#fff" />}
        </button>
      )}
    </div>
  );
}

function HandoffStrip({ minutes }) {
  return (
    <div className="handoff-strip">
      <div className="hs-num">
        {minutes}<span className="unit">min ahorrados</span>
      </div>
      <div className="hs-tagline">Una sola mañana, maestra.</div>
      <div className="hs-cta">Tu turno — pregúntame algo y mira lo que hago.</div>
    </div>
  );
}

Object.assign(window, {
  Bubble, TypingBubble, BulletList, ChatBanner,
  ActionCard, RosterCard, PaymentsCard, WeeklyCard,
  AlertPill, IncidentReport,
  SuggestionChips, HandoffStrip,
});