// inb-context.jsx — Inbox right rail blocks

const InbCustomerBlock = ({ conversation, lang, privacyMode }) => {
  const t = window.INBOX_I18N[lang];
  const g = conversation.guest;
  const name = privacyMode ? window.INB.maskName(g.name) : g.name;
  return (
    <section className="inb-ctx-card">
      <div className="inb-ctx-title">{t.customer}</div>
      {g.linkedGuestId ? (
        <>
          <div className="inb-customer-head">
            <InbAvatar name={g.name} handle={g.handle} size={44} privacyMode={privacyMode} />
            <div><h3>{name}</h3><p>{g.segment} · {g.country}</p></div>
          </div>
          <div className="inb-customer-grid">
            <div><span>Visits</span><b>{g.visits}</b></div>
            <div><span>LTV</span><b>€{g.ltv.toLocaleString('en-US')}</b></div>
            <div><span>Lang</span><b>{g.lang.toUpperCase()}</b></div>
            <div><span>Guest ID</span><b>{g.linkedGuestId}</b></div>
          </div>
          {conversation.booking && <div className="inb-current-booking">{conversation.booking.cabin} · {conversation.booking.dates} · {conversation.booking.state}</div>}
          <button className="inb-link">{t.openProfile}</button>
        </>
      ) : (
        <div className="inb-no-guest">
          <p>{t.noGuest}</p>
          <button>{t.linkGuest}</button>
          <button>{t.createGuest}</button>
        </div>
      )}
    </section>
  );
};

const responseTone = (min) => {
  if (min === null || min === undefined) return 'warn';
  if (min < 30) return 'pos';
  if (min <= 120) return 'warn';
  return 'neg';
};

const InbSpark = ({ values = [] }) => {
  const w = 180, h = 42, pad = 3;
  const pts = values.map((v, i) => `${pad + (i / Math.max(values.length - 1, 1)) * (w - pad * 2)},${h - pad - v * (h - pad * 2)}`).join(' ');
  return <svg className="inb-spark" viewBox={`0 0 ${w} ${h}`}><polyline points={pts} fill="none" stroke="currentColor" strokeWidth="2"/><polygon points={`${pad},${h-pad} ${pts} ${w-pad},${h-pad}`} /></svg>;
};

const InbConvAnalyticsBlock = ({ conversation, lang }) => {
  const t = window.INBOX_I18N[lang];
  const a = conversation.analytics;
  const tone = responseTone(a.firstResponseMin);
  return (
    <section className="inb-ctx-card">
      <div className="inb-ctx-title">{t.analytics}</div>
      <div className="inb-mini-kpis">
        <div><span>{t.firstResponse}</span><b className={tone}>{a.firstResponseMin == null ? '—' : `${a.firstResponseMin}m`}</b></div>
        <div><span>Messages</span><b>{conversation.messages.length}</b></div>
        <div><span>{t.duration}</span><b>{a.totalMin}m</b></div>
      </div>
      <div className="inb-sentiment">
        <div><span>{t.sentiment}</span><b>{a.sentiment}</b></div>
        <InbSpark values={a.sentimentTrend} />
      </div>
    </section>
  );
};

const InbComplianceBlock = ({ conversation, lang, onHighlight }) => {
  const t = window.INBOX_I18N[lang];
  const c = conversation.analytics.compliance;
  return (
    <section className="inb-ctx-card">
      <div className="inb-ctx-title">{t.standards}<span>{c.score}/{c.total}</span></div>
      <div className="inb-standards">
        {(c.items.length ? c.items : [{ rule: 'No manager reply yet', pass: false, note: 'Ожидает ответа' }]).map((item, i) => (
          <button key={i} className={`inb-standard ${item.pass ? 'pass' : 'fail'}`} onClick={() => item.msg && onHighlight(item.msg)}>
            <b>{item.pass ? '✓' : '⚠'}</b>
            <span>{item.rule}</span>
            <em>{item.note}</em>
          </button>
        ))}
      </div>
    </section>
  );
};

const InbSuggestionsBlock = ({ conversation, composer, onInsert, lang }) => {
  const t = window.INBOX_I18N[lang];
  const suggestions = conversation.analytics.suggestions || [];
  return (
    <section className={`inb-ctx-card ${composer ? 'inb-suggest-active' : ''}`}>
      <div className="inb-ctx-title">{t.suggestions}<span>{suggestions.length}</span></div>
      {suggestions.length === 0 ? <p className="inb-muted">No suggestions right now</p> : suggestions.map((s) => (
        <div className="inb-suggestion" key={s.id}>
          <p>{s.text}</p>
          {s.insertable && <button onClick={() => onInsert(s.snippet)}>{t.insert}</button>}
        </div>
      ))}
    </section>
  );
};

const InbActionsBlock = ({ lang }) => {
  const t = window.INBOX_I18N[lang];
  return (
    <section className="inb-ctx-card">
      <div className="inb-ctx-title">{t.actions}</div>
      <div className="inb-actions">
        {t.actionButtons.map((label) => <button key={label}>{label}</button>)}
      </div>
    </section>
  );
};

const InbContext = ({ conversation, lang, privacyMode, composer, onInsert, onHighlight }) => (
  <aside className="inb-context">
    <InbCustomerBlock conversation={conversation} lang={lang} privacyMode={privacyMode} />
    <InbConvAnalyticsBlock conversation={conversation} lang={lang} />
    <InbComplianceBlock conversation={conversation} lang={lang} onHighlight={onHighlight} />
    <InbSuggestionsBlock conversation={conversation} composer={composer} onInsert={onInsert} lang={lang} />
    <InbActionsBlock lang={lang} />
  </aside>
);

window.InbContext = InbContext;
window.InbCustomerBlock = InbCustomerBlock;
window.InbConvAnalyticsBlock = InbConvAnalyticsBlock;
window.InbComplianceBlock = InbComplianceBlock;
window.InbSuggestionsBlock = InbSuggestionsBlock;
window.InbActionsBlock = InbActionsBlock;