/* global React, Icon, Avatar, Btn, SERVICES */
// Taxai — message renderer with 3 presentation styles (flat / bubble / compact).
const AssistantMark = ({ size = 30 }) => (
  <div style={{ width: size, height: size, borderRadius: 'var(--r-sm)', background: 'var(--ink-950)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: size * 0.46, color: '#fff' }}>T<span style={{ color: 'var(--red-400)' }}>a</span></span>
  </div>
);

function Blocks({ blocks }) {
  return (
    <div className="af" style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--fg-1)' }}>
      {blocks.map((b, i) => {
        if (b.type === 'p') return <p key={i} style={{ margin: i === 0 ? '0 0 12px' : '12px 0' }}>{b.text}</p>;
        if (b.type === 'h') return <div key={i} style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, margin: '18px 0 8px' }}>{b.text}</div>;
        if (b.type === 'ul') return (
          <ul key={i} style={{ margin: '8px 0', paddingLeft: 0, listStyle: 'none', display: 'grid', gap: 8 }}>
            {b.items.map((it, j) => (
              <li key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--brand)', marginTop: 9, flexShrink: 0 }} />
                <span>{it}</span>
              </li>
            ))}
          </ul>
        );
        if (b.type === 'note') return (
          <div key={i} className="af-alert af-alert--info" style={{ marginTop: 14, fontSize: 13.5 }}>
            <Icon name="info" size={17} /><span>{b.text}</span>
          </div>
        );
        return null;
      })}
    </div>
  );
}

function EscalateCard({ service, onBook }) {
  const svc = SERVICES.find((s) => s.id === service) || SERVICES[0];
  return (
    <div style={{ marginTop: 16, border: '1px solid var(--red-100)', background: 'var(--red-50)', borderRadius: 'var(--r-lg)', padding: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <span style={{ width: 34, height: 34, borderRadius: 'var(--r-md)', background: 'var(--brand)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="user-round-check" size={18} />
        </span>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15.5, color: 'var(--red-700)' }}>Nên gặp chuyên gia</div>
          <div style={{ fontSize: 12.5, color: 'var(--red-600)', fontWeight: 600 }}>Đề xuất: {svc.label}</div>
        </div>
      </div>
      <p style={{ margin: '0 0 14px', fontSize: 14, lineHeight: 1.55, color: 'var(--red-800)' }}>
        Tình huống này cần đánh giá trên hồ sơ thực tế. Đặt lịch 1-1 với chuyên gia để có phương án chính xác và an toàn pháp lý.
      </p>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <Btn variant="primary" icon="calendar-check" glow onClick={() => onBook(service)}>Đặt lịch chuyên gia</Btn>
        <Btn variant="secondary" icon="messages-square" onClick={() => onBook(service)} style={{ background: '#fff' }}>Xem danh sách chuyên gia</Btn>
      </div>
    </div>
  );
}

function BookingConfirm({ msg }) {
  return (
    <div style={{ margin: '20px auto', maxWidth: 560, border: '1px solid var(--success)', background: 'var(--success-bg)', borderRadius: 'var(--r-lg)', padding: '16px 18px', display: 'flex', gap: 12 }}>
      <span style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--success)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name="check" size={20} />
      </span>
      <div className="af" style={{ fontSize: 14 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: '#0E6B3C' }}>Đã đặt lịch thành công</div>
        <div style={{ color: '#0E6B3C', marginTop: 4, lineHeight: 1.5 }}>
          {msg.expert} · {msg.day} lúc {msg.slot}. Mã đặt lịch <span className="mono" style={{ fontWeight: 600 }}>{msg.code}</span>. Chuyên gia sẽ liên hệ trước 15 phút.
        </div>
      </div>
    </div>
  );
}

function Message({ msg, tweaks, profile, onBook }) {
  if (msg.role === 'system') return <BookingConfirm msg={msg} />;
  const style = tweaks.chatStyle;
  const isUser = msg.role === 'user';

  // BUBBLE style
  if (style === 'bubble') {
    return (
      <div style={{ display: 'flex', justifyContent: isUser ? 'flex-end' : 'flex-start', gap: 10, marginBottom: 18 }}>
        {!isUser && <AssistantMark size={30} />}
        <div style={{ maxWidth: isUser ? '78%' : '82%' }}>
          <div style={{
            background: isUser ? 'var(--brand)' : 'var(--surface)', color: isUser ? '#fff' : 'var(--fg-1)',
            border: isUser ? 'none' : '1px solid var(--border-1)', borderRadius: 'var(--r-lg)',
            borderTopRightRadius: isUser ? 4 : 'var(--r-lg)', borderTopLeftRadius: isUser ? 'var(--r-lg)' : 4,
            padding: isUser ? '11px 15px' : '14px 17px', boxShadow: isUser ? 'none' : 'var(--shadow-sm)',
          }}>
            {isUser ? <span style={{ fontSize: 15, lineHeight: 1.5 }}>{msg.text}</span> : <Blocks blocks={msg.blocks} />}
          </div>
          {!isUser && msg.escalate && <EscalateCard service={msg.service} onBook={onBook} />}
        </div>
        {isUser && <Avatar name={profile.name || 'Bạn'} size={30} bg="var(--ink-700)" />}
      </div>
    );
  }

  // COMPACT style — no avatars, tight, indented role label
  if (style === 'compact') {
    return (
      <div style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: isUser ? 'var(--fg-3)' : 'var(--brand)', marginBottom: 6 }}>
          {isUser ? 'Bạn' : 'Taxai'}
        </div>
        {isUser
          ? <div style={{ fontSize: 15.5, lineHeight: 1.55, color: 'var(--fg-1)', fontWeight: 500 }}>{msg.text}</div>
          : <Blocks blocks={msg.blocks} />}
        {!isUser && msg.escalate && <EscalateCard service={msg.service} onBook={onBook} />}
      </div>
    );
  }

  // FLAT style (default, Claude-like) — avatar + name, no bubble
  return (
    <div style={{ display: 'flex', gap: 14, marginBottom: 26 }}>
      {isUser ? <Avatar name={profile.name || 'Bạn'} size={30} bg="var(--ink-700)" /> : <AssistantMark size={30} />}
      <div style={{ flex: 1, minWidth: 0, paddingTop: 2 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13.5, marginBottom: 6, color: 'var(--fg-1)' }}>{isUser ? (profile.name || 'Bạn') : 'Taxai'}</div>
        {isUser
          ? <div style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--fg-1)' }}>{msg.text}</div>
          : <Blocks blocks={msg.blocks} />}
        {!isUser && msg.escalate && <EscalateCard service={msg.service} onBook={onBook} />}
      </div>
    </div>
  );
}

function TypingRow({ tweaks }) {
  const dots = (
    <div style={{ display: 'inline-flex', gap: 4, alignItems: 'center', padding: '4px 0' }}>
      {[0, 1, 2].map((i) => (
        <span key={i} style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--ink-300)', animation: `taxaiBlink 1.2s ${i * 0.18}s infinite ease-in-out` }} />
      ))}
    </div>
  );
  if (tweaks.chatStyle === 'compact') {
    return <div style={{ marginBottom: 20 }}><div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--brand)', marginBottom: 6 }}>Taxai</div>{dots}</div>;
  }
  return (
    <div style={{ display: 'flex', gap: 14, marginBottom: 26 }}>
      <AssistantMark size={30} />
      <div style={{ paddingTop: 6 }}>{dots}</div>
    </div>
  );
}

Object.assign(window, { Message, TypingRow });