// HivePage.jsx — full-page hive detail (CP-7 inline view)

function findHiveFallback(hiveId) {
  const all = Object.values((DATA && DATA.hives) || {}).flat();
  const row = all.find((item) => item.id === hiveId) || all[0] || null;
  if (!row) return null;
  return {
    id: row.id,
    name: `Улей ${row.id}`,
    zone_id: row.zone_id || null,
    status: row.state || "ok",
    activity_per_min: row.departures_per_min || null,
    gate_status: row.gate_status || null,
    gate_device_id: row.gate_device_id || "C771-3308-1100",
  };
}

function HivePage({ onClose, hiveId }) {
  const [tab, setTab] = React.useState("telemetry");
  const [gateHive, setGateHive] = React.useState(null);
  const [gateDeviceStatus, setGateDeviceStatus] = React.useState("ok");
  const HiveGateControl = window.HiveGateControl;
  const TelemetryChart = window.TelemetryChart;
  const resolvedHiveId = hiveId || "B-06";

  React.useEffect(() => {
    let cancelled = false;
    async function load() {
      let hive = null;
      try {
        hive = await Keeper.api.hive(resolvedHiveId);
      } catch (_) {
        hive = findHiveFallback(resolvedHiveId);
      }
      if (cancelled) return;
      setGateHive(hive);

      if (!hive?.gate_device_id) return;
      try {
        const gateDevice = await Keeper.api.device(hive.gate_device_id);
        if (!cancelled) setGateDeviceStatus(gateDevice?.status || "ok");
      } catch (_) {
        if (!cancelled) setGateDeviceStatus(hive?.status || "ok");
      }
    }
    load();
    return () => { cancelled = true; };
  }, [resolvedHiveId]);

  return (
    <div className="page" data-screen-label="07 Улей B-09">
      <div className="page-head">
        <div style={{display:"flex",alignItems:"center",gap:14}}>
          <button className="btn btn--secondary btn--sm" onClick={onClose}><i className="ri-arrow-left-line"></i>К карте</button>
          <span className="tri lg tri-att"></span>
          <div>
            <div className="page-title" style={{fontSize:22}}>Улей B-09</div>
            <div className="page-sub">Зона AB1 · 6 станция · колония 41 дн. · обновлено 14:38</div>
          </div>
        </div>
        <div className="actions">
          <button className="btn btn--secondary"><i className="ri-history-line"></i>История</button>
          <button className="btn btn--secondary"><i className="ri-tools-line"></i>Калибровать</button>
          <button className="btn btn--primary"><i className="ri-task-add-line"></i>Создать задачу</button>
        </div>
      </div>

      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr 1fr",gap:12}}>
        <div className="kpi"><div className="kpi-lbl">Активность<i className="ri-pulse-line"></i></div><div className="kpi-val">74<span className="kpi-unit">/мин</span></div><div className="kpi-delta dn">▼ 18 % за 3 дня</div></div>
        <div className="kpi"><div className="kpi-lbl">Темп. в улье<i className="ri-temp-hot-line"></i></div><div className="kpi-val">22,1<span className="kpi-unit">°C</span></div><div className="kpi-delta">норма 21–25</div></div>
        <div className="kpi"><div className="kpi-lbl">Влажность<i className="ri-drop-line"></i></div><div className="kpi-val">68<span className="kpi-unit">%</span></div><div className="kpi-delta">норма</div></div>
        <div className="kpi"><div className="kpi-lbl">Возраст колонии<i className="ri-calendar-line"></i></div><div className="kpi-val">41<span className="kpi-unit">дн.</span></div><div className="kpi-delta dn">→ замена 12 фев</div></div>
      </div>

      <div className="tab-bar">
        <button className={"tab"+(tab==="telemetry"?" active":"")} onClick={()=>setTab("telemetry")}>Телеметрия</button>
        <button className={"tab"+(tab==="commands"?" active":"")} onClick={()=>setTab("commands")}>Команды</button>
        <button className={"tab"+(tab==="config"?" active":"")} onClick={()=>setTab("config")}>Конфигурация</button>
        <button className={"tab"+(tab==="history"?" active":"")} onClick={()=>setTab("history")}>История</button>
      </div>

      {tab==="telemetry" && (
        <>
        <div className="page-row row-2">
          <div className="card">
            {/* [TASK_START:T007] */}
            {TelemetryChart ? (
              <TelemetryChart
                title="Активность за период"
                source="hive"
                hiveId={resolvedHiveId}
                unitLabel="выл./мин"
                accent="#FF7A00"
                defaultRange="24h"
                ranges={["1h", "6h", "24h", "7d"]}
                showStaleBadge={false}
              />
            ) : (
              <div className="telemetry-state">Компонент графика не загружен</div>
            )}
            {/* [TASK_COMPLETE:T007] */}
          </div>
          <div className="card">
            <h3 className="card-title">Леток · задвижка</h3>
            <div className="toggle-row"><div><b>Открыта</b><span>Расписание: 06:00–11:00, 18:00–21:00</span></div><div className="switch on"></div></div>
            <div className="toggle-row"><div><b>Авторежим</b><span>Следовать расписанию опыления</span></div><div className="switch on"></div></div>
            <div style={{padding:"10px 12px",background:"#FFF8F1",border:"1px solid #FFE7CF",borderRadius:8,fontSize:13,color:"#a04200",display:"flex",gap:8,marginTop:14}}>
              <i className="ri-alert-line" style={{fontSize:16,marginTop:2}}></i>
              <div>Активность падает 3-й день. Возраст колонии — 41 день. Запланируйте замену до 12 февраля.</div>
            </div>
          </div>
        </div>
        {/* [TASK_START:T008] */}
        {HiveGateControl && gateHive?.gate_device_id && (
          <div className="card">
            <HiveGateControl hive={gateHive} gateDeviceStatus={gateDeviceStatus} />
          </div>
        )}
        {/* [TASK_COMPLETE:T008] */}
        </>
      )}

      {tab==="history" && (
        <div className="card">
          <h3 className="card-title">Журнал событий</h3>
          <div className="history">
            <div className="h-row"><time>14:32</time><span>Активность ниже нормы 3-й час</span></div>
            <div className="h-row"><time>9 фев</time><span>Снижение активности на 18 %</span></div>
            <div className="h-row"><time>7 фев</time><span>Калибровка датчика активности · П. Сидоров</span></div>
            <div className="h-row"><time>14 янв</time><span>Установка колонии · М. Кузьмин</span></div>
            <div className="h-row"><time>10 янв</time><span>OTA v3.0.2 на задвижке</span></div>
          </div>
        </div>
      )}

      {tab==="commands" && (
        <div className="card">
          <h3 className="card-title">Последние команды</h3>
          <table>
            <thead><tr><th>Время</th><th>Действие</th><th>Кем</th><th>Статус</th></tr></thead>
            <tbody>
              <tr><td>14:18</td><td><b>Открыть задвижку</b></td><td>авто (правило)</td><td><span className="status status--ok"><span className="dot"></span>Выполнено</span></td></tr>
              <tr><td>11:00</td><td><b>Закрыть задвижку</b></td><td>авто (расписание)</td><td><span className="status status--ok"><span className="dot"></span>Выполнено</span></td></tr>
              <tr><td>06:00</td><td><b>Открыть задвижку</b></td><td>авто (расписание)</td><td><span className="status status--ok"><span className="dot"></span>Выполнено</span></td></tr>
              <tr><td>9 фев 22:14</td><td><b>Калибровка датчика</b></td><td>П. Сидоров</td><td><span className="status status--ok"><span className="dot"></span>Выполнено</span></td></tr>
            </tbody>
          </table>
        </div>
      )}

      {tab==="config" && (
        <div className="card">
          <h3 className="card-title">Конфигурация устройства</h3>
          <table>
            <tbody>
              <tr><td style={{color:"var(--fg-muted)",width:200}}>ID задвижки</td><td className="id-mono">E990-1213-AA5C</td></tr>
              <tr><td style={{color:"var(--fg-muted)"}}>Прошивка</td><td className="id-mono">v3.0.2 (стабильная)</td></tr>
              <tr><td style={{color:"var(--fg-muted)"}}>Связь</td><td>RSSI −68 dBm · 2,1 КБ/ч</td></tr>
              <tr><td style={{color:"var(--fg-muted)"}}>Батарея</td><td>71 % · ~84 дн.</td></tr>
              <tr><td style={{color:"var(--fg-muted)"}}>Расписание опыления</td><td>06:00–11:00, 18:00–21:00 (по умолч.)</td></tr>
              <tr><td style={{color:"var(--fg-muted)"}}>Установлено</td><td>14 янв 2026 · М. Кузьмин</td></tr>
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}
window.HivePage = HivePage;