const { useState, useEffect, useRef } = React;

// Line-style icons for scenarios (match the site's visual language — no emoji)
const SI = {
  doc: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h4"/></svg>,
  wallet: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h12"/><path d="M3 7h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/><circle cx="17" cy="13" r="1.5"/></svg>,
  car: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l1.5-5A2 2 0 0 1 8.4 6.5h7.2a2 2 0 0 1 1.9 1.5L19 13"/><path d="M3 18v-4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4"/><path d="M6 18v2M18 18v2"/><circle cx="7" cy="15.5" r="1"/><circle cx="17" cy="15.5" r="1"/></svg>,
  gift: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 9h16v4H4z"/><path d="M5 13v8h14v-8"/><path d="M12 9v12"/><path d="M8 9a2.5 2.5 0 1 1 0-5C13 4 12 9 12 9s-1-5 4-5a2.5 2.5 0 1 1 0 5z"/></svg>,
  wrench: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a4 4 0 0 0 5 5l-2.4 2.4 3.5 3.5a2.1 2.1 0 0 1-3 3l-3.5-3.5-2.4 2.4a4 4 0 0 1-5-5z"/></svg>,
  file: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 8h6M9 12h6M9 16h4"/></svg>,
};

const DEMO_TOPICS = [
  {
    id: 'smz', icon: SI.doc, name: 'Легализация (СМЗ)',
    messages: [
      { side: 'driver', text: 'ребята почему у меня парк 15% забирает а у напарника 3? как так выходит' },
      { side: 'bot', text: 'У тебя статус самозанятого пока не подтверждён в системе — поэтому 15%. С подтверждённым статусом — 3%. Разница на 1 000 заказов: около 12 000 ₽ в месяц.\n\nПоправим за 10 минут: открой «Мой налог», зарегистрируйся по паспорту и пришли справку из приложения. Дальше статус подтяну сам.' },
      { side: 'driver', text: 'а 4% налог это сверху еще снимут?' },
      { side: 'bot', text: 'Нет, не сверху. Эти 4% уже включены в комиссию — Яндекс сам удерживает их с каждого заказа и перечисляет за тебя в налоговую в конце месяца. Тебе отдельно ничего платить и подавать не нужно.' },
    ],
  },
  {
    id: 'payouts', icon: SI.wallet, name: 'Выплаты',
    messages: [
      { side: 'driver', text: 'на балансе 8 400 а вывести могу 0 рублей. почему так?' },
      { side: 'bot', text: 'Привет, Руслан. Баланс 8 400 ₽, но к выводу сейчас 0 ₽: 1 200 ₽ — гарантийный остаток парка (вернётся в конце месяца), а оставшиеся 7 200 ₽ ты уже выводил сегодня в 09:14.\n\nЛимит вывода — раз в сутки. Следующий доступен после 03:00. Прислать уведомление, когда деньги откроются?' },
      { side: 'driver', text: 'а почему комиссия 1.5%? раньше же без процентов было' },
      { side: 'bot', text: 'Статус самозанятого сейчас «не подтверждён» — система ставит стандартный тариф 1,5%. После подтверждения комиссия становится 0%, обычно подтягивается за сутки после регистрации в «Мой налог».\n\nПроверить статус прямо сейчас?' },
    ],
  },
  {
    id: 'onboarding', icon: SI.car, name: 'Подключение',
    messages: [
      { side: 'driver', text: 'здраствуйте хочу к вам в парк. правда первый раз буду таксовать, простите если че напутаю' },
      { side: 'bot', text: 'Привет. Не переживай — проведу за руку, у новичков всегда одни и те же затыки.\n\nЧтобы понять, подходишь ли по требованиям:\n• права категории B со стажем от 3 лет\n• самозанятость (если нет — оформим в чате за 10 минут)\n• авто до 7 лет, четырёхдверное\n\nЧто из этого уже есть?' },
      { side: 'driver', text: 'права 4 года, смз нет, машина киа рио 2019' },
      { side: 'bot', text: 'Подходишь по всем пунктам. Самозанятость оформим прямо сейчас — это единственное, что отделяет тебя от первой смены, занимает 10 минут.\n\nСкачивай «Мой налог» (App Store / Google Play) и пиши, как откроешь — дальше пошагово.' },
    ],
  },
  {
    id: 'bonus', icon: SI.gift, name: 'Бонусы',
    messages: [
      { side: 'driver', text: 'если приведу друга мне чтото будет?' },
      { side: 'bot', text: 'Да. Получаешь 1% от заработка друга — пока он работает в парке, без ограничений по сроку. В среднем один активный реферал приносит 2 500–4 000 ₽ в месяц.\n\nУсловие одно: при подключении друг должен указать, что пришёл от тебя. Просто регистрация в Яндекс.Про не считается.' },
      { side: 'driver', text: 'а сразу как зарегается начнет капать?' },
      { side: 'bot', text: 'Не сразу — отчисления стартуют после его 50-й оплаченной поездки. Это страховка от неактивных рефералов. У водителя на полной смене — 3–4 дня.' },
    ],
  },
  {
    id: 'order', icon: SI.wrench, name: 'Проблема с заказом',
    messages: [
      { side: 'driver', text: 'второй день одни дешевые заказы дают по 150-200р, что за дела' },
      { side: 'bot', text: 'Посмотрел статистику: за последние 24 часа средний чек по тебе 187 ₽ против 340 ₽ по парку. Причина — рейтинг просел до 4,71 после двух отмен 5 апреля.\n\nЧтобы вернуть нормальные заказы:\n• 10 поездок без отмен подряд — алгоритм пересчитает приоритет за сутки\n• выйти в утренний пик 7:00–10:00, там «дешёвых» по определению нет\n\nПроверим вечером, как пойдёт?' },
    ],
  },
  {
    id: 'docs', icon: SI.file, name: 'Документы',
    messages: [
      { side: 'driver', text: 'мне путевой на сегодня и узнать готова лицензия или нет' },
      { side: 'bot', text: 'Путевой на 7 мая сформировал — держи PDF. Медосмотр пройден в 06:08, техосмотр действует до 23.05.\n\nПо лицензии: пришла из Минтранса вчера в 17:42, серия АА №104822. Включил в реестр, заказы по тарифу «Комфорт» уже доступны.' },
    ],
  },
];

function DemoDialog() {
  const [activeId, setActiveId] = useState('smz');
  const [visible, setVisible] = useState(0);
  const [typing, setTyping] = useState(false);
  const msgRef = useRef(null);

  const active = DEMO_TOPICS.find(t => t.id === activeId);

  useEffect(() => { setVisible(0); setTyping(false); }, [activeId]);

  useEffect(() => {
    if (visible >= active.messages.length) return;
    const next = active.messages[visible];
    const isBot = next.side === 'bot';
    if (isBot) {
      setTyping(true);
      const t1 = setTimeout(() => { setTyping(false); setVisible(v => v + 1); }, 1100 + Math.random() * 400);
      return () => clearTimeout(t1);
    } else {
      const t1 = setTimeout(() => setVisible(v => v + 1), 700);
      return () => clearTimeout(t1);
    }
  }, [visible, activeId]);

  useEffect(() => {
    if (msgRef.current) msgRef.current.scrollTop = msgRef.current.scrollHeight;
  });

  const replay = () => setVisible(0);

  return (
    <section id="demo">
      <div className="wrap">
        <div className="section-head">
          <h2>Посмотрите, что бот <em>говорит водителям</em></h2>
        </div>
        <div className="tg-desk">
          <aside className="tg-sidebar">
            <div className="tg-sidebar-title">Сценарии</div>
            <div className="tg-sidebar-list">
              {DEMO_TOPICS.map(t => (
                <button key={t.id} onClick={() => setActiveId(t.id)}
                  className={'tg-sidebar-item ' + (t.id === activeId ? 'active' : '')}>
                  <span className="tg-sidebar-icon">{t.icon}</span>
                  <span className="tg-sidebar-name">{t.name}</span>
                </button>
              ))}
            </div>
          </aside>
          <div className="tg-pane">
            <div className="tg-pane-header">
              <div className="tg-pane-avatar">
                <svg viewBox="0 0 24 24" fill="none" width="40" height="40">
                  <circle cx="12" cy="12" r="12" fill="#2AABEE"/>
                  <path d="M5 11.5l13-5.2c.6-.2 1.1.1 1 .7l-2.2 10.1c-.1.5-.5.6-1 .4l-3-2.2-1.4 1.4c-.2.2-.3.2-.5.2l.2-3.1 5.8-5.3c.2-.2 0-.3-.3-.2l-7.2 4.5-3.1-1c-.6-.2-.7-.6.1-.9z" fill="#fff"/>
                </svg>
              </div>
              <div className="tg-pane-ident">
                <div className="tg-pane-name">Парк AI</div>
                <div className="tg-pane-status"><span className="tg-dot"/> Онлайн</div>
              </div>
              <button className="tg-pane-replay" onClick={replay} title="Повторить">
                <Icon.Refresh size={14}/>
              </button>
            </div>
            <div className="tg-pane-messages" ref={msgRef}>
              {active.messages.slice(0, visible).map((m, i) => (
                <div key={i} className={'tg-msg ' + (m.side === 'driver' ? 'tg-msg-out' : 'tg-msg-in')}>
                  <div className="tg-msg-body" style={{whiteSpace: 'pre-line'}}>{m.text}</div>
                  <div className="tg-msg-time">21:14</div>
                </div>
              ))}
              {typing && (
                <div className="tg-msg tg-msg-in tg-msg-typing">
                  <div className="tg-typing"><span/><span/><span/></div>
                </div>
              )}
            </div>
            <div className="tg-pane-input">
              <div className="tg-pane-input-field">Сообщение…</div>
              <div className="tg-pane-input-send"><Icon.Arrow size={16}/></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.DemoDialog = DemoDialog;
