/* ============================================================
   chat_ui.jsx — общие детали чата: аватар специалиста, пузыри,
   «печатает», карточка загрузки файла и разбор документа.
   Используется экраном резюме; вынесено отдельно, чтобы любой
   будущий чат брал те же элементы, а не копировал их.
   ============================================================ */

function AdvisorDot({ size = 30, avatar }) {
  if (avatar) return (
    <img src={avatar} alt="" style={{
      width: size, height: size, borderRadius: '50%', flexShrink: 0, objectFit: 'cover',
      boxShadow: '0 4px 12px rgba(20,29,58,.22)',
    }} />
  );
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', flexShrink: 0,
      background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))',
      display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--indigo-900)',
      boxShadow: '0 4px 12px var(--amber-glow)',
    }}><Icon name="spark" size={Math.round(size * 0.57)} stroke={2.4} /></div>
  );
}

function Typing({ avatar }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, animation: 'fadeUp .3s ease both' }}>
      <AdvisorDot avatar={avatar} />
      <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: '4px 18px 18px 18px', padding: '14px 16px', display: 'flex', gap: 5, boxShadow: 'var(--shadow-1)' }}>
        {[0, 1, 2].map(i => (
          <span key={i} style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--text-3)', animation: `typing 1.1s infinite ${i * 0.15}s` }} />
        ))}
      </div>
    </div>
  );
}

function AiBubble({ children, avatar }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, animation: 'fadeUp .4s var(--ease-out) both' }}>
      <AdvisorDot avatar={avatar} />
      <div style={{
        maxWidth: '80%', background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: '4px 18px 18px 18px', padding: '12px 15px', fontSize: 14.5, lineHeight: 1.45,
        color: 'var(--text)', boxShadow: 'var(--shadow-1)',
      }}>{children}</div>
    </div>
  );
}

function UserBubble({ children, file }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', animation: 'slideInRight .35s var(--ease-out) both' }}>
      <div style={{
        maxWidth: '82%', borderRadius: '18px 4px 18px 18px', padding: file ? '10px 12px' : '12px 15px',
        background: 'linear-gradient(150deg,var(--indigo-500),var(--indigo-700))', color: '#fff',
        fontSize: 14.5, lineHeight: 1.4, fontWeight: 500, boxShadow: '0 6px 16px rgba(20,29,58,.25)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        {file && <span style={{ width: 34, height: 34, borderRadius: 9, background: 'rgba(255,255,255,.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="doc" size={18} stroke={2} /></span>}
        {children}
      </div>
    </div>
  );
}

/* Карточка «прикрепить файл»: заголовок и подпись задаёт экран. */
function AttachCard({ title, sub, icon = 'clip', onPick, onSkip, skipLabel }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, animation: 'popIn .4s var(--spring) both' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
        <AdvisorDot />
        <button onClick={onPick} style={{
          textAlign: 'left', maxWidth: '82%', width: '100%',
          background: 'linear-gradient(150deg,var(--brand-tint),var(--surface))',
          border: '1.5px dashed var(--border-2)', borderRadius: '4px 18px 18px 18px',
          padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12, boxShadow: 'var(--shadow-1)',
        }}>
          <span style={{ width: 42, height: 42, borderRadius: 12, flexShrink: 0, background: 'var(--brand-soft)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name={icon} size={20} stroke={2} />
          </span>
          <span style={{ flex: 1 }}>
            <span style={{ display: 'block', fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>{title}</span>
            <span style={{ display: 'block', fontSize: 12, color: 'var(--text-3)', marginTop: 2, lineHeight: 1.35 }}>{sub}</span>
          </span>
          <Icon name="arrow" size={18} stroke={2} style={{ color: 'var(--amber-deep)' }} />
        </button>
      </div>
      {onSkip && (
        <button onClick={onSkip} style={{
          alignSelf: 'flex-end', padding: '8px 14px', borderRadius: 'var(--r-full)',
          background: 'var(--surface)', border: '1px solid var(--border)',
          fontSize: 13, fontWeight: 700, color: 'var(--text-3)',
        }}>{skipLabel}</button>
      )}
    </div>
  );
}

/* «Читаю документ»: скелет строк, пока идёт разбор. */
function ParsingCard({ label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, animation: 'fadeUp .3s ease both' }}>
      <AdvisorDot />
      <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: '4px 18px 18px 18px', padding: '14px 16px', width: '78%', boxShadow: 'var(--shadow-1)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
          <span style={{ width: 26, height: 26, borderRadius: '50%', border: '2.5px solid var(--surface-3)', borderTopColor: 'var(--amber)', animation: 'ringRotate .8s linear infinite' }} />
          <span style={{ fontSize: 13.5, fontWeight: 700 }}>{label}…</span>
        </div>
        {[88, 64, 76].map((w, i) => (
          <div key={i} className="shimmer" style={{ height: 9, borderRadius: 6, width: w + '%', marginTop: 7 }} />
        ))}
      </div>
    </div>
  );
}

/* Живой ввод: человек печатает сам. Есть подсказки-чипы для тех,
   кому тяжело набирать текст — тап подставляет готовый вариант. */
function ChatInput({ ph, value, onChange, onSend, numeric, chips, lang, disabled }) {
  const ok = value && value.trim().length > 0;
  return (
    <div style={{ flexShrink: 0 }}>
      {chips && chips.length > 0 && (
        <div className="noscroll" style={{ display: 'flex', gap: 7, overflowX: 'auto', padding: '0 14px 8px' }}>
          {chips.map((c, i) => (
            <button key={i} onClick={() => onSend(c)} style={{
              padding: '8px 14px', borderRadius: 'var(--r-full)', flexShrink: 0, whiteSpace: 'nowrap',
              background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)',
              fontSize: 12.5, fontWeight: 700, color: 'var(--text-2)',
              animation: `chipFly .4s var(--spring) ${i * 0.05}s both`,
            }}>{c.label || tr(c, lang)}</button>
          ))}
        </div>
      )}
      <div style={{ padding: '2px 14px 10px', display: 'flex', alignItems: 'center', gap: 9 }}>
        <input
          value={value} disabled={disabled}
          onChange={e => onChange(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter' && ok) onSend(); }}
          inputMode={numeric ? 'numeric' : 'text'}
          placeholder={ph}
          style={{
            flex: 1, height: 46, borderRadius: 'var(--r-full)', background: 'var(--surface)',
            border: '1px solid var(--border)', padding: '0 18px', fontSize: 14.5, fontWeight: 500,
            color: 'var(--text)', boxShadow: 'var(--shadow-1)', outline: 'none', minWidth: 0,
            fontFamily: 'inherit',
          }} />
        <button onClick={() => ok && onSend()} disabled={!ok} style={{
          width: 46, height: 46, borderRadius: '50%', flexShrink: 0, display: 'flex',
          alignItems: 'center', justifyContent: 'center',
          background: ok ? 'linear-gradient(150deg,var(--amber-soft),var(--amber))' : 'var(--surface-2)',
          color: ok ? 'var(--indigo-900)' : 'var(--text-3)',
          border: ok ? 'none' : '1px solid var(--border)',
          boxShadow: ok ? '0 6px 16px var(--amber-glow)' : 'none',
          transition: 'all .2s var(--ease)',
        }}>
          <Icon name="send" size={19} stroke={2.2} />
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { AdvisorDot, Typing, AiBubble, UserBubble, AttachCard, ParsingCard, ChatInput });