// Rules.jsx
function Rules() {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Правила автоматизации</div>
          <div className="page-sub">7 активных · 2 на паузе · последнее срабатывание 6 фев в 11:42</div>
        </div>
        <div className="actions">
          <button className="btn btn--secondary"><i className="ri-history-line"></i>Журнал</button>
          <button className="btn btn--primary"><i className="ri-add-line"></i>Новое правило</button>
        </div>
      </div>

      <div className="card">
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
          <div>
            <h3 className="card-title" style={{margin:0}}>Закрыть ульи при перегреве</h3>
            <div style={{fontSize:12,color:"var(--fg-muted)",marginTop:4}}>Срабатывало 4 раза за 30 дн · последнее 6 фев</div>
          </div>
          <div style={{display:"flex",gap:10,alignItems:"center"}}>
            <span className="status status--ok"><span className="dot"></span>Активно</span>
            <div className="switch on"></div>
          </div>
        </div>

        <div style={{display:"flex",flexDirection:"column",gap:10}}>
          <Row kw="когда" kwBg="#242D36" kwFg="#fff" chips={[
            {ic:"ri-temp-hot-line",t:"Температура воздуха"}, {t:"> 32 °C"}, {t:"в течение 15 мин"}
          ]} />
          <Row kw="и" kwBg="#26972B" kwFg="#fff" chips={[
            {ic:"ri-map-pin-line",t:"Зона"}, {t:"AB1, AB2"}
          ]} />
          <Row kw="тогда" kwBg="#FFB300" kwFg="#1D1C1D" action chips={[
            {ic:"ri-lock-line",t:"Закрыть задвижки"}, {t:"все ульи зоны"}
          ]} />
          <Row kw="уведомить" kwBg="#007BFB" kwFg="#fff" chips={[
            {t:"Главного агронома"}, {t:"Telegram, Email"}
          ]} />
        </div>
      </div>

      <div className="card">
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
          <div>
            <h3 className="card-title" style={{margin:0}}>Закрыть ульи при химобработке</h3>
            <div style={{fontSize:12,color:"var(--fg-muted)",marginTop:4}}>Ручной триггер · последний запуск 28 янв</div>
          </div>
          <div style={{display:"flex",gap:10,alignItems:"center"}}>
            <span className="status status--muted"><span className="dot"></span>На паузе</span>
            <div className="switch"></div>
          </div>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:10}}>
          <Row kw="когда" kwBg="#242D36" kwFg="#fff" chips={[
            {ic:"ri-flask-line",t:"Запущена обработка"}, {t:"любая зона"}
          ]} />
          <Row kw="тогда" kwBg="#FFB300" kwFg="#1D1C1D" action chips={[
            {ic:"ri-lock-line",t:"Закрыть все задвижки"}, {t:"на 4 часа"}
          ]} />
        </div>
      </div>
    </div>
  );
}

function Row({ kw, kwBg, kwFg, chips, action }) {
  return (
    <div style={{display:"flex",alignItems:"center",gap:8,fontSize:13,flexWrap:"wrap"}}>
      <span style={{padding:"4px 10px",borderRadius:6,background:kwBg,color:kwFg,font:"700 11px Inter",textTransform:"uppercase",letterSpacing:".05em"}}>{kw}</span>
      {chips.map((c, i) => (
        <span key={i} style={{
          padding:"6px 10px",borderRadius:6,
          border: action ? "1px solid #FFB300" : "1px dashed #C2CCD8",
          background: action ? "#FFF4D6" : "var(--n-50)",
          font:"500 13px Inter",color:"var(--fg-strong)",
          display:"inline-flex",gap:6,alignItems:"center"
        }}>
          {c.ic && <i className={c.ic}></i>}{c.t}
        </span>
      ))}
      <button style={{padding:"5px 10px",borderRadius:6,background:"var(--n-100)",color:"var(--fg-muted)",fontSize:12,border:"none",cursor:"pointer"}}>+</button>
    </div>
  );
}

window.Rules = Rules;