// Animated scenarios — auto-play with controls
const SCENARIOS = [
  {
    id: "leak",
    title: "Протечка",
    short: "Кран перекрыт за 2 секунды",
    color: "var(--leak)",
    icon: "drop",
    steps: [
      { t: "00:00", icon: "drop", text: "Датчик под мойкой касается воды", who: "Датчик протечки" },
      { t: "00:01", icon: "valve", text: "Сервер посылает команду на кран", who: "Локальный сервер" },
      { t: "00:02", icon: "check", text: "Кран перекрыт, насосная станция выключена", who: "Кран Aqara" },
      { t: "00:03", icon: "phone", text: "Уведомление в Telegram и звонок", who: "Telegram-бот" },
    ],
  },
  {
    id: "away",
    title: "Ушли из дома",
    short: "Один тап — дом готов остаться один",
    color: "var(--ink-2)",
    icon: "key",
    steps: [
      { t: "Нажали", icon: "key", text: "Сценарий «Ушёл» активирован", who: "Виджет в телефоне" },
      { t: "+1с", icon: "bulb", text: "Свет во всех комнатах выключен", who: "12 точек освещения" },
      { t: "+2с", icon: "thermo", text: "Отопление в эко-режиме +18°", who: "Термоголовки" },
      { t: "+3с", icon: "shield", text: "Охрана включена, окна на контроле", who: "Датчики открытия" },
    ],
  },
  {
    id: "morning",
    title: "Утро",
    short: "Дом просыпается вместе с вами",
    color: "var(--accent)",
    icon: "sun",
    steps: [
      { t: "07:00", icon: "sun", text: "Сервер ловит рассвет", who: "Сценарий по времени" },
      { t: "07:00", icon: "thermo", text: "Гостиная и кухня — на +22°", who: "Климат-контроль" },
      { t: "07:02", icon: "bulb", text: "Плавный свет в кухне (10% → 60%)", who: "Диммер" },
      { t: "07:30", icon: "mic", text: "«Алиса, прогноз погоды»", who: "Голос" },
    ],
  },
  {
    id: "night",
    title: "Ночь",
    short: "Мягкая подсветка, тихий климат",
    color: "var(--ink-2)",
    icon: "moon",
    steps: [
      { t: "23:00", icon: "moon", text: "Активируется «Ночь»", who: "Время + датчик присутствия" },
      { t: "23:00", icon: "bulb", text: "Свет везде, кроме спальни, выключен", who: "Освещение" },
      { t: "02:14", icon: "motion", text: "Движение в коридоре — подсветка 20%", who: "Датчик движения" },
      { t: "02:16", icon: "bulb", text: "Через 60с — выключение", who: "Авто-таймер" },
    ],
  },
  {
    id: "humidity",
    title: "Влажность ночью",
    short: "Увлажнитель сам держит комфорт",
    color: "var(--good)",
    icon: "humid",
    steps: [
      { t: "22:00–08:00", icon: "moon", text: "Активен ночной сценарий влажности", who: "Расписание" },
      { t: "<30%", icon: "humid", text: "Влажность в спальне ниже 30%", who: "Датчик влажности" },
      { t: "+1с", icon: "cloud-off", text: "Сервер понимает: воздух слишком сухой", who: "Локальный сервер" },
      { t: "+2с", icon: "fan", text: "Включается увлажнитель воздуха", who: "Умная розетка / реле" },
      { t: ">45%", icon: "humid", text: "Влажность поднялась выше 45%", who: "Датчик влажности" },
      { t: "стоп", icon: "check", text: "Увлажнитель выключается автоматически", who: "Сценарий РазумДом" },
    ],
  },
  {
    id: "smoke",
    title: "Дым",
    short: "Система предупреждает сразу",
    color: "var(--warn)",
    icon: "smoke",
    steps: [
      { t: "00:00", icon: "smoke", text: "Датчик дыма фиксирует задымление", who: "Датчик дыма" },
      { t: "00:01", icon: "cloud-off", text: "Сервер запускает сценарий безопасности", who: "Локальный сервер" },
      { t: "00:02", icon: "bulb", text: "Включается свет и звуковое оповещение", who: "Сирена / освещение" },
      { t: "00:03", icon: "phone", text: "Уведомление уходит в Telegram и на телефон", who: "РазумДом" },
      { t: "00:04", icon: "fan", text: "Можно подключить вытяжку или отключение опасной нагрузки", who: "Дополнительный сценарий" },
    ],
  },
];

const Scenarios = () => {
  const [active, setActive] = React.useState(0);
  const [step, setStep] = React.useState(0);
  const [playing, setPlaying] = React.useState(true);

  const sc = SCENARIOS[active];

  React.useEffect(() => {
    if (!playing) return;
    const t = setInterval(() => {
      setStep(p => {
        if (p + 1 >= sc.steps.length) {
          // hop to next scenario
          setTimeout(() => {
            setActive(a => (a + 1) % SCENARIOS.length);
            setStep(0);
          }, 1400);
          return p;
        }
        return p + 1;
      });
    }, 1500);
    return () => clearInterval(t);
  }, [playing, active, sc.steps.length]);

  React.useEffect(() => { setStep(0); }, [active]);

  return (
    <section id="scenarios" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", gap: 24, alignItems: "end" }} className="scn-head">
          <div>
            <span className="eyebrow">Сценарии</span>
            <h2 className="h-section" style={{ marginTop: 16, maxWidth: "18ch" }}>
              Как это выглядит<br />в реальной жизни.
            </h2>
          </div>
          <button onClick={() => setPlaying(p => !p)} className="btn btn-ghost" style={{ height: 40 }}>
            <RDIcon name={playing ? "minus" : "play"} size={14} />
            {playing ? "Пауза" : "Играть"}
          </button>
        </div>

        <div className="scn-tabs" style={{ marginTop: 36, display: "flex", gap: 8, flexWrap: "wrap" }}>
          {SCENARIOS.map((s, i) => (
            <button key={s.id}
              onClick={() => { setActive(i); setStep(0); }}
              style={{
                display: "inline-flex", alignItems: "center", gap: 10,
                padding: "10px 16px",
                borderRadius: 999,
                border: "1px solid " + (i === active ? "transparent" : "var(--line)"),
                background: i === active ? s.color : "var(--surface)",
                color: i === active ? "#fff" : "var(--ink-3)",
                fontSize: 14,
                cursor: "pointer",
                transition: "all 200ms",
                fontWeight: 500,
              }}>
              <RDIcon name={s.icon} size={16} stroke={1.8} />
              {s.title}
            </button>
          ))}
        </div>

        <div style={{
          marginTop: 32,
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 18,
        }} className="scn-grid">
          {/* Timeline */}
          <div className="card" style={{ padding: 28, background: "var(--surface)" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <h3 className="h-card" style={{ color: sc.color }}>{sc.title}</h3>
              <span className="mono" style={{ fontSize: 12, color: "var(--muted)", letterSpacing: "0.06em" }}>
                {String(step + 1).padStart(2, "0")} / {String(sc.steps.length).padStart(2, "0")}
              </span>
            </div>
            <p style={{ color: "var(--ink-3)", marginTop: 6 }}>{sc.short}</p>

            <div style={{ marginTop: 22, display: "grid", gap: 0 }}>
              {sc.steps.map((s, i) => {
                const done = i < step;
                const cur = i === step;
                return (
                  <div key={i} style={{
                    display: "grid",
                    gridTemplateColumns: "70px 32px 1fr",
                    gap: 14,
                    padding: "16px 0",
                    borderTop: i === 0 ? "none" : "1px dashed var(--line)",
                    alignItems: "flex-start",
                    opacity: i > step ? 0.35 : 1,
                    transition: "opacity 250ms",
                  }}>
                    <div className="mono" style={{
                      fontSize: 12, letterSpacing: "0.04em", color: "var(--muted)",
                      padding: "6px 0",
                    }}>{s.t}</div>
                    <div style={{
                      width: 32, height: 32, borderRadius: 999,
                      background: cur ? sc.color : done ? "var(--ink-2)" : "var(--bg-2)",
                      color: (cur || done) ? "#fff" : "var(--ink-3)",
                      display: "grid", placeItems: "center",
                      transition: "all 250ms",
                      position: "relative",
                    }}>
                      <RDIcon name={done ? "check" : s.icon} size={16} stroke={2} />
                      {cur && (
                        <span style={{
                          position: "absolute", inset: -2, borderRadius: 999,
                          border: `2px solid ${sc.color}`,
                          animation: "pulse-ring 1.4s ease-out infinite",
                        }} />
                      )}
                    </div>
                    <div>
                      <div style={{ fontSize: 15, color: "var(--ink-2)", fontWeight: 500 }}>{s.text}</div>
                      <div className="label" style={{ marginTop: 4 }}>{s.who}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Phone preview */}
          <div className="card" style={{ padding: 28, background: "var(--ink-2)", color: "#EEF3FA", display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 480 }}>
            <div>
              <div className="label" style={{ color: "rgba(238,243,250,0.55)" }}>Уведомление</div>
              <PhoneNotification scenario={sc} step={step} />
            </div>
            <div>
              <div className="label" style={{ color: "rgba(238,243,250,0.55)" }}>Что произошло</div>
              <div style={{ fontSize: 26, fontWeight: 500, marginTop: 10, letterSpacing: "-0.02em", lineHeight: 1.15 }}>
                {sc.steps[step]?.text}
              </div>
              <div style={{ marginTop: 18, display: "flex", gap: 10, flexWrap: "wrap" }}>
                <span style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  padding: "6px 12px",
                  background: "rgba(238,243,250,0.08)",
                  borderRadius: 999, fontSize: 12,
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: 99, background: sc.color }} />
                  {sc.title}
                </span>
                <span className="mono" style={{ fontSize: 11, color: "rgba(238,243,250,0.55)", letterSpacing: "0.08em", padding: "6px 0" }}>
                  ЛОКАЛЬНО · АВТОНОМНО
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .scn-grid { grid-template-columns: 1fr !important; }
          .scn-head { flex-direction: column; align-items: flex-start !important; }
        }
      `}</style>
    </section>
  );
};

const PhoneNotification = ({ scenario, step }) => {
  const s = scenario.steps[step];
  if (!s) return null;
  return (
    <div key={`${scenario.id}-${step}`} style={{
      marginTop: 14,
      background: "rgba(238,243,250,0.07)",
      border: "1px solid rgba(238,243,250,0.12)",
      borderRadius: 18,
      padding: 14,
      display: "flex", gap: 14, alignItems: "center",
      animation: "slide-in 350ms ease-out",
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 12,
        background: scenario.color, display: "grid", placeItems: "center",
        color: "#fff",
        flexShrink: 0,
      }}>
        <RDIcon name={s.icon} size={20} stroke={2} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
          <div style={{ fontWeight: 500, fontSize: 13 }}>РазумДом</div>
          <div className="mono" style={{ fontSize: 11, color: "rgba(238,243,250,0.55)" }}>{s.t}</div>
        </div>
        <div style={{ fontSize: 14, opacity: 0.92, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.text}</div>
      </div>
      <style>{`
        @keyframes slide-in {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
};

window.Scenarios = Scenarios;