/* Refill PWA — for sjåfører som fyller automatene.
 *
 * Optimalisert for Android nettbrett-landscape. 3 hovedmodi:
 *   1. Oversikt — alle automater med tomme flasker, kryss av hvilke å fylle
 *   2. Plan — viser bil-last + ADR + rute + Google Maps-link
 *   3. Stop — utfør én og én automat-besøk, registrer fyllinger, signer
 */

const RefillPage = ({ lang, tenant, dataVersion, onPickTenant }) => {
  const [mode, setMode] = React.useState('overview');   // overview | plan | stop | list | route
  const [activePlan, setActivePlan] = React.useState(null);
  const [activeStop, setActiveStop] = React.useState(null);
  const [routeIds, setRouteIds] = React.useState(null);  // manuelt valgte → kjørerute

  // Superadmin med "alle tenants" — vis tenant-velger inline i stedet for å blokkere
  if (!tenant || tenant.id === '__all__') {
    const tenants = (DATA.TENANTS || []).filter(t => t.id !== '__all__');
    return (
      <div className="page" style={{ maxWidth: 720, margin: '0 auto' }}>
        <div className="page-head">
          <div>
            <h1 className="page-title">{lang === 'no' ? 'Påfylling' : 'Refill'}</h1>
            <div className="page-sub">
              {lang === 'no'
                ? 'Velg hvilken tenant du vil planlegge påfylling for'
                : 'Pick the tenant to plan refill for'}
            </div>
          </div>
        </div>
        <div className="panel" style={{ padding: 16 }}>
          {tenants.length === 0 ? (
            <div className="empty">{lang === 'no' ? 'Ingen tenants enda' : 'No tenants yet'}</div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {tenants.map(tn => {
                const automats = (DATA.machines || []).filter(m => m.tenantId === tn.id);
                const empties = automats.reduce((s, m) => s + (m.emptyCount || 0), 0);
                return (
                  <div key={tn.id} className="row between"
                       onClick={() => onPickTenant && onPickTenant(tn)}
                       style={{ padding: 14, cursor: 'pointer',
                                background: 'var(--surface-2)',
                                border: '1px solid var(--border)',
                                borderRadius: 8 }}>
                    <div>
                      <div style={{ fontWeight: 600 }}>{tn.name}</div>
                      <div className="muted" style={{ fontSize: 12 }}>
                        {automats.length} {lang === 'no' ? 'automater' : 'automats'}
                        {empties > 0 && (
                          <span style={{ color: 'var(--warn)', marginLeft: 6 }}>
                            · {empties} {lang === 'no' ? 'tomme flasker' : 'empty bottles'}
                          </span>
                        )}
                      </div>
                    </div>
                    <button className="btn primary sm">→</button>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="page" style={{ maxWidth: 1100, margin: '0 auto' }}>
      <div className="page-head">
        <div>
          <h1 className="page-title">
            {lang === 'no' ? 'Fylling' : 'Refill'}
            <span className="muted" style={{ marginLeft: 12, fontSize: 13 }}>{tenant.name}</span>
          </h1>
          <div className="page-sub">
            {lang === 'no' ? 'Påfyll-rutine for automater med tomme flasker' : 'Refill routine'}
          </div>
        </div>
        <div className="row">
          <button className={'btn' + (mode === 'route' ? ' primary' : '')}
                  onClick={() => setMode('route')}>
            <Icon name="map" size={14} />{lang === 'no' ? 'Kjørerute' : 'Route'}
          </button>
          <button className="btn" onClick={() => setMode('list')}>
            <Icon name="list" size={14} />{lang === 'no' ? 'Tidligere planer' : 'Past plans'}
          </button>
        </div>
      </div>

      {mode === 'route' && (
        <RoutePlanner tenant={tenant} lang={lang} dataVersion={dataVersion}
                      presetIds={routeIds}
                      onPlanCreated={p => { setActivePlan(p); setMode('plan'); }}
                      onBack={() => { setRouteIds(null); setMode('overview'); }} />
      )}
      {mode === 'overview' && (
        <RefillOverview tenant={tenant} lang={lang} dataVersion={dataVersion}
                         onPlanCreated={p => { setActivePlan(p); setMode('plan'); }}
                         onMakeRoute={ids => { setRouteIds(ids); setMode('route'); }} />
      )}
      {mode === 'plan' && activePlan && (
        <RefillPlanView planId={activePlan.plan_id} lang={lang}
                         onStartStop={s => { setActiveStop(s); setMode('stop'); }}
                         onBack={() => setMode('overview')} />
      )}
      {mode === 'stop' && activeStop && activePlan && (
        <RefillStopView plan={activePlan} stop={activeStop} lang={lang}
                         onDone={() => setMode('plan')} />
      )}
      {mode === 'list' && (
        <RefillPlanList tenant={tenant} lang={lang}
                         onOpen={p => { setActivePlan(p); setMode('plan'); }}
                         onBack={() => setMode('overview')} />
      )}
    </div>
  );
};

/* === Oversikt: tomme flasker per automat → velg hvilke å fylle === */
const RefillOverview = ({ tenant, lang, dataVersion, onPlanCreated, onMakeRoute }) => {
  const [data, setData] = React.useState(null);
  const [selected, setSelected] = React.useState(new Set());
  const [truckLoaded, setTruckLoaded] = React.useState({});
  const [estimate, setEstimate] = React.useState(null);   // backend estimate-respons
  const [startGPS, setStartGPS] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [estimating, setEstimating] = React.useState(false);
  const [err, setErr] = React.useState(null);
  // Filter/sortering av utkjøringslista + åpen service-seksjon
  const [areaFilter, setAreaFilter] = React.useState('');
  const [sortKey, setSortKey] = React.useState('priority'); // priority|location|empties
  const [sortDir, setSortDir] = React.useState(1);          // 1 stigende, -1 synkende
  const [serviceOpen, setServiceOpen] = React.useState(null); // automat_id | null

  const refresh = React.useCallback(async () => {
    try { setData(await window.api.refillOverview(tenant.id)); }
    catch (e) { setErr(e.message); }
  }, [tenant.id]);
  React.useEffect(() => { refresh(); }, [refresh]);

  // Når automatene endres: nullstill estimate så bruker MÅ trykke "Beregn"
  React.useEffect(() => { setEstimate(null); }, [selected]);

  // GPS: hent posisjon
  const getGPS = () => {
    if (!navigator.geolocation) return alert('GPS ikke tilgjengelig');
    navigator.geolocation.getCurrentPosition(
      pos => setStartGPS({ lat: pos.coords.latitude, lon: pos.coords.longitude, address: 'Min posisjon' }),
      err => alert('GPS feil: ' + err.message),
      { enableHighAccuracy: true, timeout: 10000 },
    );
  };

  const toggle = (aid) => {
    const next = new Set(selected);
    if (next.has(aid)) next.delete(aid); else next.add(aid);
    setSelected(next);
  };

  const updateLoad = (code, delta) => {
    setTruckLoaded(prev => {
      const n = Math.max(0, (prev[code] || 0) + delta);
      return n === 0 ? Object.fromEntries(Object.entries(prev).filter(([k]) => k !== code)) : { ...prev, [code]: n };
    });
  };

  const runEstimate = async () => {
    if (selected.size === 0) {
      alert(lang === 'no' ? 'Velg minst én automat' : 'Pick at least one');
      return;
    }
    setEstimating(true); setErr(null);
    try {
      const r = await window.api.refillEstimate({
        tenant_id: tenant.id,
        automat_ids: [...selected],
        start: startGPS || undefined,
      });
      setEstimate(r);
      // Auto-fyll truckLoaded med anbefalt last
      setTruckLoaded(r.recommended || {});
    } catch (e) { setErr(e.message); }
    setEstimating(false);
  };

  const createPlan = async () => {
    if (selected.size === 0) return alert(lang === 'no' ? 'Velg minst én automat' : 'Pick at least one');
    setBusy(true); setErr(null);
    try {
      const p = await window.api.refillCreatePlan({
        tenant_id: tenant.id,
        automat_ids: [...selected],
        truck_loaded: truckLoaded,
        start: startGPS || undefined,
      });
      onPlanCreated(p);
    } catch (e) { setErr(e.message); }
    setBusy(false);
  };

  if (!data) return <div className="empty">⏳ Laster…</div>;

  // Filter (område) + sortering (lokasjon/tomme, stigende/synkende)
  const areas = [...new Map((data.automats || [])
    .filter(a => a.area_id)
    .map(a => [a.area_id, a.area_name])).entries()];
  let list = data.automats;
  if (areaFilter === '__none__') list = list.filter(a => !a.area_id);
  else if (areaFilter) list = list.filter(a => a.area_id === areaFilter);
  list = [...list].sort((x, y) => {
    if (sortKey === 'location') return sortDir * String(x.location).localeCompare(String(y.location), 'no');
    if (sortKey === 'empties') return sortDir * ((x.empty_count || 0) - (y.empty_count || 0));
    return -((x.fill_priority || 0) - (y.fill_priority || 0));
  });
  const sortBtn = (key, label) => (
    <button className={'btn sm' + (sortKey === key ? ' primary' : '')}
      onClick={() => {
        if (sortKey === key) setSortDir(d => -d);
        else { setSortKey(key); setSortDir(1); }
      }}>
      {label} {sortKey === key ? (sortDir === 1 ? '↑' : '↓') : '⇅'}
    </button>
  );

  return (
    // Mobil: .refill-grid stabler Lastebilen-panelet under lista (styles.css)
    <div className="refill-grid">
      <div className="panel">
        <div className="panel-head">
          <h3>{lang === 'no' ? 'Automater som trenger påfyll' : 'Automats needing refill'}</h3>
          <span className="muted mono" style={{ fontSize: 12 }}>
            {data.totals.automats_with_empties} av {data.automats.length}
          </span>
        </div>
        {/* Filter + sortering */}
        <div className="row" style={{ gap: 6, padding: '8px 12px', flexWrap: 'wrap',
              borderBottom: '1px solid var(--border)' }}>
          <select className="input" style={{ width: 'auto', minWidth: 150 }}
                  value={areaFilter} onChange={e => setAreaFilter(e.target.value)}>
            <option value="">{lang === 'no' ? 'Vis alle områder' : 'All areas'}</option>
            {areas.map(([id, name]) => <option key={id} value={id}>{name}</option>)}
            <option value="__none__">{lang === 'no' ? 'Uten område' : 'No area'}</option>
          </select>
          {sortBtn('location', lang === 'no' ? 'Lokasjon' : 'Location')}
          {sortBtn('empties', lang === 'no' ? 'Tomme' : 'Empties')}
          <div className="grow" />
          {onMakeRoute && (
            <button className="btn sm primary" disabled={selected.size === 0}
                    onClick={() => onMakeRoute([...selected])}>
              🧭 {lang === 'no' ? `Lag kjørerute (${selected.size})` : `Make route (${selected.size})`}
            </button>
          )}
        </div>
        <div style={{ padding: 8 }}>
          {list.map(a => (
            <div key={a.automat_id} onClick={() => toggle(a.automat_id)} style={{
              padding: 12, marginBottom: 8, borderRadius: 6, cursor: 'pointer',
              background: selected.has(a.automat_id) ? 'var(--accent-soft)' : 'var(--surface-2)',
              border: '1px solid ' + (selected.has(a.automat_id) ? 'var(--accent)' : 'var(--border)'),
            }}>
              <div className="row between" style={{ alignItems: 'flex-start' }}>
                <div>
                  <div style={{ fontWeight: 600 }}>
                    {selected.has(a.automat_id) ? '✓ ' : '○ '}{a.location}
                    {a.area_name && <span className="pill info" style={{ marginLeft: 6, fontSize: 9.5 }}>{a.area_name}</span>}
                  </div>
                  <div className="muted mono" style={{ fontSize: 11 }}>{a.automat_id}</div>
                </div>
                <div className="col" style={{ alignItems: 'flex-end' }}>
                  <span className={'pill ' + (a.fill_priority > 80 ? 'danger' : a.fill_priority > 40 ? 'warn' : 'empty')}>
                    {a.fill_priority}
                  </span>
                  <span className="muted" style={{ fontSize: 11, marginTop: 2 }}>
                    {a.empty_count} {lang === 'no' ? 'tomme' : 'empty'}
                  </span>
                </div>
              </div>
              {Object.keys(a.empty_by_code || {}).length > 0 && (
                <div style={{ marginTop: 8, fontSize: 12 }}>
                  {Object.entries(a.empty_by_code).map(([code, n]) => (
                    <span key={code} className="pill" style={{ marginRight: 4, fontSize: 10 }}>
                      {n}× {code}
                    </span>
                  ))}
                </div>
              )}
              {/* Alarmer → automaten trenger SERVICE på utkjøringen */}
              {(a.alarms || []).length > 0 && (
                <div style={{ marginTop: 8 }}>
                  {a.alarms.map((al, i) => (
                    <div key={i} style={{ fontSize: 11.5, color: al.severity === 'high' || al.severity === 'critical' ? 'var(--danger)' : 'var(--warn)' }}>
                      ⚠ {al.message}
                    </div>
                  ))}
                </div>
              )}
              {/* Gassensor-frist (årlig kalibrering) */}
              {a.gas_sensor_days_left != null && a.gas_sensor_days_left <= 60 && (
                <div style={{ marginTop: 4, fontSize: 11.5,
                      color: a.gas_sensor_days_left < 0 ? 'var(--danger)' : 'var(--warn)' }}>
                  🔧 {a.gas_sensor_days_left < 0
                    ? (lang === 'no' ? `Gassensor-kalibrering FORFALT (${-a.gas_sensor_days_left} dager siden)` : 'Gas sensor calibration OVERDUE')
                    : (lang === 'no' ? `Gassensor-kalibrering om ${a.gas_sensor_days_left} dager` : `Gas sensor cal. in ${a.gas_sensor_days_left} days`)}
                </div>
              )}
              {/* Service: registrer + historikk */}
              <div style={{ marginTop: 8 }} onClick={e => e.stopPropagation()}>
                <button className="btn sm" onClick={() =>
                  setServiceOpen(serviceOpen === a.automat_id ? null : a.automat_id)}>
                  🛠 Service {serviceOpen === a.automat_id ? '▴' : '▾'}
                </button>
                {serviceOpen === a.automat_id && (
                  <ServicePanel automatId={a.automat_id} lang={lang}
                                onChanged={refresh} />
                )}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="panel">
        <div className="panel-head"><h3>{lang === 'no' ? 'Lastebilen' : 'The truck'}</h3></div>
        <div style={{ padding: 12 }}>
          <div style={{ marginBottom: 10 }}>
            <div className="muted" style={{ fontSize: 11 }}>{lang === 'no' ? 'Startpunkt (lager)' : 'Start point'}</div>
            <button className="btn sm" onClick={getGPS}>
              📍 {startGPS ? 'GPS satt' : (lang === 'no' ? 'Bruk min posisjon' : 'Use my GPS')}
            </button>
            {startGPS && (
              <div className="muted mono" style={{ fontSize: 10, marginTop: 4 }}>
                {startGPS.lat.toFixed(5)}, {startGPS.lon.toFixed(5)}
              </div>
            )}
          </div>

          {/* Beregn-behov-knapp */}
          {!estimate && (
            <button className="btn primary" onClick={runEstimate}
                    disabled={estimating || selected.size === 0}
                    style={{ width: '100%', marginBottom: 10 }}>
              {estimating
                ? '⏳ ' + (lang === 'no' ? 'Beregner…' : 'Calculating…')
                : '🧮 ' + (lang === 'no'
                  ? `Beregn behov (${selected.size} automater)`
                  : `Calculate needs (${selected.size})`)}
            </button>
          )}

          {/* Breakdown-tabell etter estimate */}
          {estimate && (
            <div style={{
              padding: 10, marginBottom: 10, background: 'var(--surface-2)',
              border: '1px solid var(--border)', borderRadius: 6,
            }}>
              <div className="row between" style={{ marginBottom: 6 }}>
                <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase' }}>
                  {lang === 'no' ? 'Forslag basert på historikk' : 'Suggestion'}
                </span>
                <button className="btn sm" onClick={() => setEstimate(null)}>↻</button>
              </div>
              <table style={{ width: '100%', fontSize: 11, borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ color: 'var(--text-faint)' }}>
                    <th style={{ textAlign: 'left' }}>Type</th>
                    <th style={{ textAlign: 'right' }}>{lang === 'no' ? 'Tomme' : 'Empty'}</th>
                    <th style={{ textAlign: 'right' }}>{lang === 'no' ? 'Overhead' : 'Overhead'}</th>
                    <th style={{ textAlign: 'right' }}>{lang === 'no' ? 'Anbefalt' : 'Recommend'}</th>
                  </tr>
                </thead>
                <tbody>
                  {Object.keys(estimate.recommended || {}).sort().map(code => (
                    <tr key={code}>
                      <td className="mono" style={{ fontSize: 10.5 }}>{code}</td>
                      <td style={{ textAlign: 'right' }}>{estimate.empties_now[code] || 0}</td>
                      <td style={{ textAlign: 'right', color: 'var(--accent)' }}>
                        +{estimate.overhead[code] || 0}
                      </td>
                      <td style={{ textAlign: 'right', fontWeight: 600 }}>
                        {estimate.recommended[code]}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <div className="muted" style={{ fontSize: 10, marginTop: 6, fontStyle: 'italic' }}>
                {lang === 'no'
                  ? `Basert på snitt-salg samme ukedag siste 4 uker · +10% sikkerhet`
                  : 'Based on 4-week avg same weekday + 10% safety'}
              </div>
              {estimate.adr_estimate?.adr_warning && (
                <div style={{ marginTop: 6, fontSize: 10.5, color: 'var(--warn)' }}>
                  ⚠ {estimate.adr_estimate.message}
                </div>
              )}
              {estimate.route?.estimated_drive_min > 0 && (
                <div className="muted" style={{ fontSize: 10, marginTop: 4 }}>
                  {lang === 'no' ? 'Estimert kjøretid' : 'Estimated drive'}:
                  {' '}{Math.round(estimate.route.estimated_drive_min / 60 * 10) / 10}t
                  {' · '}{estimate.route.total_km} km
                </div>
              )}
            </div>
          )}

          <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>
            {lang === 'no' ? 'Flasker på bilen (juster fritt)' : 'Truck load (edit freely)'}
          </div>
          {(window.DATA?.BOTTLE_TYPES || []).map(b => {
            const n = truckLoaded[b.id] || 0;
            const rec = estimate?.recommended?.[b.id] || 0;
            const diff = n - rec;
            return (
              <div key={b.id} className="row between" style={{ padding: '4px 0', fontSize: 12.5 }}>
                <span>
                  {b.name}
                  {estimate && rec > 0 && (
                    <span className="muted" style={{ fontSize: 10, marginLeft: 4 }}>
                      (anbefalt {rec})
                    </span>
                  )}
                </span>
                <div className="row" style={{ gap: 4 }}>
                  <button className="btn sm" onClick={() => updateLoad(b.id, -1)}>−</button>
                  <span style={{
                    minWidth: 24, textAlign: 'center', fontWeight: 600,
                    color: estimate && rec > 0 && diff < 0 ? 'var(--warn)' : 'inherit',
                  }}>{n}</span>
                  <button className="btn sm" onClick={() => updateLoad(b.id, 1)}>+</button>
                </div>
              </div>
            );
          })}

          {/* Live ADR-status */}
          <ADRWidget loaded={truckLoaded} lang={lang} />

          {err && <div style={{ marginTop: 10, color: 'var(--danger)', fontSize: 12 }}>❌ {err}</div>}
          <button className="btn primary large" onClick={createPlan} disabled={busy || selected.size === 0 || Object.keys(truckLoaded).length === 0}
                  style={{ width: '100%', marginTop: 12 }}>
            {busy ? '⏳' : (lang === 'no'
              ? `🚚 Lag plan (${selected.size} stops)`
              : `Create plan (${selected.size} stops)`)}
          </button>
        </div>
      </div>
    </div>
  );
};

const ADRWidget = ({ loaded, lang }) => {
  // Backend gjør faktisk beregning, men frontend gjør en rask estimat
  const WEIGHTS = {
    stal5kg:5, stal11kg:11, lettstal10kg:10, komp5kg:5, komp10kg:10,
    aluminium11kg:11, comf10kg:10,
    stal5kg_i:5, stal11kg_i:11, komp5kg_i:5, komp10kg_i:10,
  };
  let gas = 0;
  // Vekt utledes fra v2-koden (11kg_steel, 5kg_comp …) via bottleHelpers —
  // WEIGHTS er kun fallback for gamle v1-koder, deretter 10 kg (2026-09-05;
  // før falt alle v2-koder til 10 kg og ADR-prosenten ble feil for 5/11 kg).
  Object.entries(loaded).forEach(([code, n]) => {
    const kg = (window.bottleHelpers && window.bottleHelpers.weightKg(code)) || WEIGHTS[code] || 10;
    gas += kg * n;
  });
  const LIMIT = 333;
  const pct = (gas / LIMIT) * 100;
  const tone = pct > 100 ? 'danger' : pct > 80 ? 'warn' : 'ok';
  return (
    <div style={{
      marginTop: 10, padding: 10, borderRadius: 6,
      background: 'var(--surface)', border: '1px solid var(--border)',
    }}>
      <div className="muted" style={{ fontSize: 10, textTransform: 'uppercase' }}>ADR-status</div>
      <div className="row between" style={{ marginTop: 4 }}>
        <span style={{ fontWeight: 600 }}>{gas} kg gass</span>
        <Pill tone={tone}>{pct.toFixed(0)}% av LQ ({LIMIT} kg)</Pill>
      </div>
      <div style={{ marginTop: 4, height: 6, background: 'var(--surface-3)', borderRadius: 3, overflow: 'hidden' }}>
        <div style={{
          width: Math.min(100, pct) + '%', height: '100%',
          background: tone === 'danger' ? 'var(--danger)' : tone === 'warn' ? 'var(--warn)' : 'var(--success)',
        }} />
      </div>
      {pct > 100 && (
        <div style={{ marginTop: 6, fontSize: 11, color: 'var(--danger)' }}>
          ⚠ Over LQ-grensen — krever full ADR-dokumentasjon
        </div>
      )}
    </div>
  );
};

/* === Plan-view: rute, kart-link, stops, ADR === */
const RefillPlanView = ({ planId, lang, onStartStop, onBack }) => {
  const [plan, setPlan] = React.useState(null);
  const [showManifest, setShowManifest] = React.useState(false);
  const refresh = React.useCallback(async () => {
    try { setPlan(await window.api.refillGetPlan(planId)); }
    catch (e) { console.error(e); }
  }, [planId]);
  React.useEffect(() => { refresh(); const id = setInterval(refresh, 15000); return () => clearInterval(id); }, [refresh]);

  if (!plan) return <div className="empty">⏳ Laster plan…</div>;

  return (
    <div>
      <div className="row" style={{ gap: 8, marginBottom: 12 }}>
        <button className="btn sm" onClick={onBack}>← Tilbake</button>
        {plan.google_maps_url && (
          <a className="btn primary" href={plan.google_maps_url} target="_blank" rel="noopener">
            🗺 {lang === 'no' ? 'Åpne i Google Maps' : 'Open in Google Maps'}
          </a>
        )}
        <div className="grow" />
        <span className="pill ok">{plan.status}</span>
      </div>

      <div className="split-7-5">
        <div className="panel">
          <div className="panel-head"><h3>{lang === 'no' ? 'Stop-rekkefølge' : 'Stop order'}</h3></div>
          <div style={{ padding: 8 }}>
            {plan.stops.map((s, i) => (
              <div key={s.stop_id} style={{
                padding: 12, marginBottom: 8, borderRadius: 6,
                background: s.status === 'completed' ? 'var(--success-soft)'
                          : s.status === 'in_progress' ? 'var(--info-soft)' : 'var(--surface-2)',
                border: '1px solid var(--border)',
              }}>
                <div className="row between">
                  <div>
                    <span style={{ fontWeight: 700, marginRight: 8 }}>{i + 1}.</span>
                    <span style={{ fontWeight: 600 }}>{s.location}</span>
                  </div>
                  {s.status === 'pending' ? (
                    <button className="btn primary sm" onClick={() => onStartStop(s)}>
                      Start →
                    </button>
                  ) : s.status === 'in_progress' ? (
                    <button className="btn sm" onClick={() => onStartStop(s)}>Fortsett →</button>
                  ) : (
                    <span className="pill ok">✓ Fullført</span>
                  )}
                </div>
                <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
                  {s.planned_empty_shelves.length} {lang === 'no' ? 'tomme hyller' : 'empty shelves'}
                  {' · '}
                  {Object.entries(s.suggested_bottles || {}).map(([c, n]) => `${n}× ${c}`).join(', ')}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="col" style={{ gap: 12 }}>
          {/* Digitalt fraktbrev — vis ved kontroll */}
          <button className="btn large" onClick={() => setShowManifest(true)}>
            📄 {lang === 'no' ? 'Vis digitalt fraktbrev' : 'Show manifest'}
          </button>
          {showManifest && (
            <FraktbrevModal planId={planId} lang={lang}
                            onClose={() => setShowManifest(false)} />
          )}
          {/* Rute-sammendrag */}
          <div className="panel">
            <div className="panel-head"><h3>Rute</h3></div>
            <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <KVPRow label={lang === 'no' ? 'Avstand' : 'Distance'} value={`${plan.estimated_distance_km || '—'} km`} />
              <KVPRow label={lang === 'no' ? 'Kjøretid' : 'Drive time'} value={`${plan.schedule?.drive_min || 0} min`} />
              <KVPRow label={lang === 'no' ? 'Antall stops' : 'Stops'} value={plan.stops.length} />
              <KVPRow label={lang === 'no' ? 'Total arbeidstid' : 'Total work'} value={`${plan.schedule?.total_work_hours || 0} t`} />
              {plan.schedule?.needs_break && (
                <div style={{ marginTop: 6, padding: 6, fontSize: 11, color: 'var(--warn)',
                                background: 'var(--warn-soft)', borderRadius: 4 }}>
                  ⚠ {plan.schedule.warning}
                </div>
              )}
            </div>
          </div>

          {/* ADR */}
          <div className="panel">
            <div className="panel-head"><h3>ADR</h3></div>
            <div style={{ padding: 12, fontSize: 12 }}>
              <KVPRow label="Total gass" value={`${plan.adr.total_gas_kg} kg`} />
              <KVPRow label="Total brutto" value={`${plan.adr.total_gross_kg} kg`} />
              <KVPRow label="LQ-grense" value={`${plan.adr.adr_lq_limit_kg} kg`} />
              <div style={{ marginTop: 8 }}>
                <Pill tone={plan.adr.adr_over_limit ? 'danger' : plan.adr.adr_warning ? 'warn' : 'ok'}>
                  {plan.adr.message}
                </Pill>
              </div>
            </div>
          </div>

          {/* Sign-knapp hvis alt fullført */}
          {plan.stops.every(s => s.status === 'completed') && !plan.signed_at && (
            <SignaturePad planId={planId} lang={lang} onSigned={refresh} />
          )}
          {plan.signed_at && (
            <div className="panel" style={{ padding: 12, textAlign: 'center', color: 'var(--success)' }}>
              ✓ Signert {new Date(plan.signed_at).toLocaleString('no-NO')}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

/* === Stop-view: åpne dører + registrer fylling + ferdigstill === */
const RefillStopView = ({ plan, stop, lang, onDone }) => {
  const [phase, setPhase] = React.useState('arrive');   // arrive | filling | done
  const [fillEvents, setFillEvents] = React.useState([]);
  const [busy, setBusy] = React.useState(false);
  const [manifest, setManifest] = React.useState(null);
  const [showManifest, setShowManifest] = React.useState(false);
  const [fillStatus, setFillStatus] = React.useState(null);   // dør-for-dør + sum
  const [rescanBusy, setRescanBusy] = React.useState(null);   // dørnr | null

  // Live under fylling: dør-for-dør-status (deteksjon pr. lukket dør) +
  // fraktbrev/bil-beholdning — poll hvert 3. sekund.
  React.useEffect(() => {
    if (phase !== 'filling') return;
    let alive = true;
    const tick = async () => {
      try {
        const [m, fs] = await Promise.all([
          window.api.refillManifest(plan.plan_id),
          window.api.refillFillStatus(plan.plan_id, stop.stop_id),
        ]);
        if (!alive) return;
        setManifest(m);
        setFillStatus(fs);
        setFillEvents((m.events || []).filter(e => e.stop_id === stop.stop_id));
      } catch { /* neste poll */ }
    };
    tick();
    const iv = setInterval(tick, 3000);
    return () => { alive = false; clearInterval(iv); };
  }, [phase, plan.plan_id, stop.stop_id]);

  const rescan = async (door) => {
    setRescanBusy(door);
    try {
      const r = await window.api.refillRescan(plan.plan_id, stop.stop_id, door);
      alert(r.instruction || 'Dør åpnet for re-skann');
    } catch (e) { alert(e.message); }
    finally { setRescanBusy(null); }
  };

  const arrive = async () => {
    setBusy(true);
    let coords = {};
    if (navigator.geolocation) {
      await new Promise((res) => {
        navigator.geolocation.getCurrentPosition(
          p => { coords = { arrived_lat: p.coords.latitude, arrived_lon: p.coords.longitude }; res(); },
          () => res(), { timeout: 5000 }
        );
      });
    }
    try {
      const r = await window.api.refillArrive(plan.plan_id, stop.stop_id, coords);
      alert((lang === 'no' ? 'Åpnet ' : 'Opened ') + r.doors_opened.length + ' dører');
      setPhase('filling');
    } catch (e) { alert(e.message); }
    setBusy(false);
  };

  const completeStop = async () => {
    setBusy(true);
    try {
      // SIGNERING: sjåføren bekrefter avstemmingssummen med denne knappen
      const body = fillStatus && fillStatus.summary
        ? { confirm_empties_out: fillStatus.summary.empties_out,
            confirm_fulls_in: fillStatus.summary.fulls_in }
        : {};
      await window.api.refillCompleteStop(plan.plan_id, stop.stop_id, body);
      setPhase('done');
      setTimeout(onDone, 1500);
    } catch (e) { alert(e.message); }
    setBusy(false);
  };

  return (
    <div className="panel" style={{ padding: 20 }}>
      <h2 style={{ margin: '0 0 16px', fontSize: 18 }}>
        {stop.location}
        <span className="muted mono" style={{ fontSize: 12, marginLeft: 8 }}>{stop.automat_id}</span>
      </h2>

      {phase === 'arrive' && (
        <>
          <div style={{ padding: 16, background: 'var(--info-soft)', borderRadius: 8, marginBottom: 12 }}>
            <strong>{lang === 'no' ? 'Ved automaten?' : 'At the machine?'}</strong>
            <div style={{ fontSize: 12, marginTop: 4 }}>
              {lang === 'no'
                ? `Trykk under for å åpne ${stop.planned_empty_shelves.length} tomme dører.`
                : `Press to open ${stop.planned_empty_shelves.length} empty doors.`}
            </div>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <button className="btn" onClick={onDone}>← Avbryt</button>
            <button className="btn primary large" onClick={arrive} disabled={busy}>
              {busy ? '⏳' : '🚪 ' + (lang === 'no' ? 'Åpne dører' : 'Open doors')}
            </button>
          </div>
        </>
      )}

      {phase === 'filling' && (
        <>
          <div style={{ padding: 12, background: 'var(--warn-soft)', borderRadius: 8, marginBottom: 12 }}>
            <strong>📦 {lang === 'no' ? 'Bytt ut flaskene' : 'Replace bottles'}</strong>
            <div style={{ fontSize: 12, marginTop: 4 }}>
              {lang === 'no'
                ? 'Når du lukker en dør registreres flasken automatisk. Sjekk listen under.'
                : 'Closing a door auto-registers the new bottle.'}
            </div>
          </div>

          <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>
            {lang === 'no' ? 'SKAL INN (forslag etter salgsfaktor)' : 'Fill suggestion'}:
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 12 }}>
            {Object.entries(stop.suggested_bottles || {}).map(([code, n]) => (
              <span key={code} className="pill info" style={{ fontSize: 12 }}>{n}× {code.replace('_', ' ')}</span>
            ))}
          </div>

          {/* Dør-for-dør: hva automaten DETEKTERTE da hver dør ble lukket.
              Feil? → «Skann på nytt» åpner døra og erstatter registreringen. */}
          <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>
            {lang === 'no' ? 'Dører (deteksjon ved lukking)' : 'Doors'}:
          </div>
          <div style={{ maxHeight: 220, overflow: 'auto', marginBottom: 12,
                        border: '1px solid var(--border)', borderRadius: 6 }}>
            {!fillStatus && (
              <div className="muted" style={{ padding: 10, fontSize: 11.5 }}>⏳</div>
            )}
            {fillStatus && fillStatus.doors.map(d => (
              <div key={d.door} className="row between"
                   style={{ padding: '7px 10px', fontSize: 12, gap: 8,
                            borderBottom: '1px solid var(--border)',
                            background: d.done ? 'transparent' : 'var(--warn-soft)' }}>
                <div style={{ flex: 1 }}>
                  <b>{lang === 'no' ? 'Dør' : 'Door'} {d.door}</b>{' '}
                  {d.was === 'empty_bottle'
                    ? <span className="muted">({lang === 'no' ? 'tomflaske' : 'empty bottle'}: {d.was_bottle})</span>
                    : <span className="muted">({lang === 'no' ? 'ledig' : 'vacant'})</span>}
                  <div style={{ fontSize: 11.5 }}>
                    {d.removed_empty && <span>📤 {lang === 'no' ? 'tom ut' : 'empty out'}: {d.removed_empty} · </span>}
                    {d.done
                      ? <span style={{ color: 'var(--success)' }}>📥 {d.inserted}
                          {d.detection_score != null && window.isSuperView && window.isSuperView()
                            && ` (${Math.round(d.detection_score * 100)}%)`}</span>
                      : <span style={{ color: 'var(--warn)' }}>⏳ {lang === 'no' ? 'åpen — venter på lukking' : 'open'}</span>}
                  </div>
                </div>
                {d.done && !fillStatus.confirmed && (
                  <button className="btn sm" disabled={rescanBusy != null}
                          onClick={() => rescan(d.door)}>
                    {rescanBusy === d.door ? '⏳' : '🔄'} {lang === 'no' ? 'Skann på nytt' : 'Rescan'}
                  </button>
                )}
              </div>
            ))}
          </div>

          {/* Avstemming: sum når alle dører er lukket → SIGNERING */}
          {fillStatus && (
            <div style={{ padding: 12, borderRadius: 8, marginBottom: 12,
                  background: fillStatus.all_done ? 'var(--success-soft)' : 'var(--surface-2)',
                  border: '1px solid ' + (fillStatus.all_done ? 'var(--success)' : 'var(--border)') }}>
              <b>{lang === 'no' ? 'Avstemming' : 'Reconciliation'}:</b>{' '}
              📤 {fillStatus.summary.empties_out} {lang === 'no' ? 'tomme hentet ut' : 'empties out'} · {' '}
              📥 {fillStatus.summary.fulls_in} {lang === 'no' ? 'fulle fylt på' : 'fulls in'}
              {!fillStatus.all_done && (
                <div className="muted" style={{ fontSize: 11.5, marginTop: 4 }}>
                  {lang === 'no'
                    ? `${fillStatus.doors.filter(d => !d.done).length} dør(er) gjenstår — lukk alle før signering.`
                    : 'Close all doors before signing.'}
                </div>
              )}
            </div>
          )}

          {/* Bil-beholdning nå (digitalt fraktbrev, kortversjon) */}
          {manifest && (
            <div style={{ padding: 10, background: 'var(--surface-2)', borderRadius: 6,
                          marginBottom: 12, fontSize: 12 }}>
              🚚 <b>{lang === 'no' ? 'På bilen nå' : 'On truck'}:</b>{' '}
              {Object.entries(manifest.current.full).map(([c, n]) => `${n}× ${c}`).join(', ') || (lang === 'no' ? 'ingen fulle' : 'none')}
              {Object.keys(manifest.current.empties).length > 0 && (
                <> · {lang === 'no' ? 'tomme' : 'empties'}: {Object.entries(manifest.current.empties).map(([c, n]) => `${n}× ${c}`).join(', ')}</>
              )}
              <span className="muted"> · {manifest.current.gas_kg} kg gass</span>
              <button className="btn sm" style={{ marginLeft: 8 }}
                      onClick={() => setShowManifest(true)}>
                📄 {lang === 'no' ? 'Fraktbrev' : 'Manifest'}
              </button>
            </div>
          )}

          <div className="row" style={{ gap: 8 }}>
            <button className="btn primary large" onClick={completeStop}
                    disabled={busy || !(fillStatus && fillStatus.all_done)}>
              {busy ? '⏳' : '✍ ' + (lang === 'no'
                ? 'Signer — tallene stemmer' : 'Sign — numbers correct')}
            </button>
          </div>
          <div className="muted" style={{ fontSize: 10.5, marginTop: 6 }}>
            {lang === 'no'
              ? 'Stemmer ikke tallene? Trykk «Skann på nytt» på døra som er feil — ny deteksjon erstatter registreringen i fraktbrevet.'
              : 'Wrong numbers? Rescan the door — new detection replaces the entry.'}
          </div>
        </>
      )}

      {showManifest && (
        <FraktbrevModal planId={plan.plan_id} lang={lang}
                        onClose={() => setShowManifest(false)} />
      )}

      {phase === 'done' && (
        <div style={{ textAlign: 'center', padding: 20 }}>
          <div style={{ fontSize: 32 }}>✓</div>
          <div style={{ marginTop: 8 }}>{lang === 'no' ? 'Stop fullført' : 'Stop completed'}</div>
        </div>
      )}
    </div>
  );
};

/* === DIGITALT FRAKTBREV — vis ved kontroll av mengde på bilen ===
   Live beholdning (fulle + tomme per type, kg gass, ADR-status), startlast,
   og full hendelseslogg: hver flaske inn/ut med automat, dør og tidspunkt. */
const FraktbrevModal = ({ planId, lang, onClose }) => {
  const no = lang === 'no';
  const [m, setM] = React.useState(null);
  React.useEffect(() => {
    let alive = true;
    window.api.refillManifest(planId)
      .then(x => { if (alive) setM(x); })
      .catch(e => { if (alive) setM({ error: e.message }); });
    return () => { alive = false; };
  }, [planId]);

  const Row = ({ k, v }) => (
    <div className="row between" style={{ padding: '4px 0', fontSize: 12.5 }}>
      <span className="muted">{k}</span><span>{v}</span>
    </div>
  );
  const LoadTable = ({ title, full, empties }) => (
    <div style={{ flex: 1, minWidth: 200 }}>
      <div className="section-title" style={{ marginBottom: 6 }}>{title}</div>
      {Object.entries(full || {}).map(([c, n]) => (
        <Row key={c} k={c.replace('_', ' ')} v={`${n} stk (full)`} />
      ))}
      {Object.entries(empties || {}).map(([c, n]) => (
        <Row key={c + '_e'} k={c.replace('_', ' ')} v={`${n} stk (TOM)`} />
      ))}
      {Object.keys(full || {}).length === 0 && Object.keys(empties || {}).length === 0 && (
        <div className="muted" style={{ fontSize: 12 }}>—</div>
      )}
    </div>
  );

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} style={{ zIndex: 100 }} />
      <div style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
                    zIndex: 101, width: 'min(640px,95vw)', maxHeight: '90vh', overflow: 'auto',
                    padding: 22, background: 'var(--surface)', border: '1px solid var(--border)',
                    borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)' }}>
        <div className="row between" style={{ marginBottom: 12 }}>
          <h3 style={{ margin: 0 }}>📄 {no ? 'Digitalt fraktbrev' : 'Digital manifest'}</h3>
          <button className="icon-btn" onClick={onClose}><Icon name="close" size={14} /></button>
        </div>
        {!m ? <div className="empty">⏳</div>
          : m.error ? <div style={{ color: 'var(--danger)' }}>❌ {m.error}</div>
          : (
            <>
              <div style={{ padding: 12, background: 'var(--surface-2)', borderRadius: 8, marginBottom: 14 }}>
                <Row k={no ? 'Plan' : 'Plan'} v={m.plan_id} />
                <Row k={no ? 'Opprettet' : 'Created'} v={(m.created_at || '').replace('T', ' ').slice(0, 16)} />
                <Row k={no ? 'Sjåfør/ansvarlig' : 'Driver'} v={m.created_by || '—'} />
                <Row k="Status" v={m.status} />
                <Row k={no ? 'Gass på bilen NÅ' : 'Gas on truck'} v={
                  <b style={{ color: m.current.adr_over_limit ? 'var(--danger)' : 'var(--success)' }}>
                    {m.current.gas_kg} kg {m.current.adr_over_limit ? '· OVER ADR-fritak (333 kg)' : '· innenfor ADR-fritak'}
                  </b>} />
              </div>
              <div className="row" style={{ gap: 20, flexWrap: 'wrap', marginBottom: 14 }}>
                <LoadTable title={no ? 'PÅ BILEN NÅ' : 'ON TRUCK NOW'}
                           full={m.current.full} empties={m.current.empties} />
                <LoadTable title={no ? 'STARTLAST' : 'INITIAL LOAD'}
                           full={m.initial.full} empties={m.initial.empties} />
              </div>
              <div className="section-title" style={{ marginBottom: 6 }}>
                {no ? `Hendelseslogg (${m.events.length})` : `Event log (${m.events.length})`}
              </div>
              <div style={{ maxHeight: 240, overflow: 'auto', border: '1px solid var(--border)', borderRadius: 6 }}>
                {m.events.length === 0 && <div className="muted" style={{ padding: 10, fontSize: 12 }}>
                  {no ? 'Ingen hendelser ennå.' : 'No events yet.'}</div>}
                {m.events.map((e, i) => (
                  <div key={i} style={{ padding: '5px 10px', fontSize: 11.5, fontFamily: 'var(--font-mono)',
                        borderBottom: '1px solid var(--border)' }}>
                    {(e.occurred_at || '').replace('T', ' ').slice(0, 16)} · {e.location} · {no ? 'dør' : 'door'} {e.door} · {' '}
                    {e.event_type === 'insert_full' ? (no ? 'FULL INN' : 'FULL IN') : e.event_type === 'remove_empty' ? (no ? 'TOM UT' : 'EMPTY OUT') : e.event_type} · {e.bottle_code || ''}
                  </div>
                ))}
              </div>
            </>
          )}
      </div>
    </>
  );
};

/* === Signatur-pad === */
const SignaturePad = ({ planId, lang, onSigned }) => {
  const canvasRef = React.useRef(null);
  const [drawing, setDrawing] = React.useState(false);
  const [busy, setBusy] = React.useState(false);

  React.useEffect(() => {
    const c = canvasRef.current;
    if (!c) return;
    const ctx = c.getContext('2d');
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#fff';
    ctx.lineCap = 'round';
  }, []);

  // Canvas-koordinatrommet er 400x120, men CSS-bredden er 100 % — skaler
  // pekerkoordinatene, ellers tegnes signaturen forskjøvet på smal skjerm.
  const _pos = (e, c, r) => {
    const cx = (e.touches?.[0]?.clientX ?? e.clientX) - r.left;
    const cy = (e.touches?.[0]?.clientY ?? e.clientY) - r.top;
    return [cx * (c.width / r.width), cy * (c.height / r.height)];
  };
  const start = (e) => {
    setDrawing(true);
    const c = canvasRef.current;
    const r = c.getBoundingClientRect();
    const ctx = c.getContext('2d');
    const [x, y] = _pos(e, c, r);
    ctx.beginPath();
    ctx.moveTo(x, y);
  };
  const move = (e) => {
    if (!drawing) return;
    // (ingen preventDefault: touchAction:'none' på canvas hindrer scrolling,
    // og React 18 registrerer touchmove passivt — kallet ville bare støye)
    const c = canvasRef.current;
    const r = c.getBoundingClientRect();
    const ctx = c.getContext('2d');
    const [x, y] = _pos(e, c, r);
    ctx.lineTo(x, y);
    ctx.stroke();
  };
  const end = () => setDrawing(false);
  const clear = () => {
    const c = canvasRef.current;
    c.getContext('2d').clearRect(0, 0, c.width, c.height);
  };

  const sign = async () => {
    setBusy(true);
    try {
      const dataUrl = canvasRef.current.toDataURL('image/png');
      await window.api.refillSignPlan(planId, { signature_data_url: dataUrl });
      onSigned();
    } catch (e) { alert(e.message); }
    setBusy(false);
  };

  return (
    <div className="panel" style={{ padding: 12 }}>
      <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>
        {lang === 'no' ? 'Signer for å fullføre runden' : 'Sign to complete'}
      </div>
      <canvas ref={canvasRef} width={400} height={120}
              style={{ width: '100%', height: 120, background: '#222', borderRadius: 4, touchAction: 'none' }}
              onMouseDown={start} onMouseMove={move} onMouseUp={end} onMouseLeave={end}
              onTouchStart={start} onTouchMove={move} onTouchEnd={end} />
      <div className="row" style={{ gap: 6, marginTop: 8 }}>
        <button className="btn sm" onClick={clear}>{lang === 'no' ? 'Tøm' : 'Clear'}</button>
        <button className="btn primary" onClick={sign} disabled={busy} style={{ flex: 1 }}>
          {busy ? '⏳' : '✓ ' + (lang === 'no' ? 'Signer' : 'Sign')}
        </button>
      </div>
    </div>
  );
};

/* === Liste av tidligere planer === */
const RefillPlanList = ({ tenant, lang, onOpen, onBack }) => {
  const [plans, setPlans] = React.useState([]);
  React.useEffect(() => {
    window.api.refillListPlans({ tenant_id: tenant.id })
      .then(setPlans).catch(console.error);
  }, [tenant.id]);
  return (
    <div className="panel">
      <div className="panel-head">
        <button className="btn sm" onClick={onBack}>← Ny plan</button>
        <h3 style={{ margin: 0 }}>Tidligere planer</h3>
      </div>
      <table className="tbl">
        <thead><tr><th>Opprettet</th><th>Status</th><th>Stops</th><th>Avstand</th><th>Signert</th><th></th></tr></thead>
        <tbody>
          {plans.map(p => (
            <tr key={p.plan_id}>
              <td className="mono" style={{ fontSize: 11.5 }}>
                {new Date(p.created_at).toLocaleString('no-NO', { dateStyle: 'short', timeStyle: 'short' })}
              </td>
              <td><span className={'pill ' + (p.status === 'completed' ? 'ok' : 'warn')}>{p.status}</span></td>
              <td>{p.n_stops}</td>
              <td>{p.estimated_distance_km ? `${p.estimated_distance_km} km` : '—'}</td>
              <td>{p.signed ? '✓' : '—'}</td>
              <td><button className="btn sm" onClick={() => onOpen(p)}>Åpne →</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

/* === Service pr. automat: historikk + registrering (fra utkjøringslista) ===
   Gassensor-kalibrering setter automatisk neste frist (+12 mnd, årlig test) —
   service_watch varsler når fristen nærmer seg. */
const ServicePanel = ({ automatId, lang, onChanged }) => {
  const no = lang === 'no';
  const [hist, setHist] = React.useState(null);
  const [kind, setKind] = React.useState('service');
  const [notes, setNotes] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const load = React.useCallback(async () => {
    try { setHist(await window.api.serviceHistory(automatId)); }
    catch (e) { setHist({ error: e.message, entries: [] }); }
  }, [automatId]);
  React.useEffect(() => { load(); }, [load]);

  const KIND_LABELS = {
    gassensor_kalibrering: no ? 'Gassensor-kalibrering (årlig)' : 'Gas sensor calibration',
    service: no ? 'Generell service' : 'Service',
    reparasjon: no ? 'Reparasjon' : 'Repair',
    annet: no ? 'Annet' : 'Other',
  };

  const submit = async () => {
    setBusy(true);
    try {
      await window.api.serviceCreate(automatId, { kind, notes: notes || null });
      setNotes('');
      await load();
      if (onChanged) await onChanged();
    } catch (e) { alert(e.message); }
    finally { setBusy(false); }
  };

  return (
    <div style={{ marginTop: 8, padding: 10, background: 'var(--surface)',
                  border: '1px solid var(--border)', borderRadius: 6 }}>
      {hist && hist.gas_sensor_next_service && (
        <div style={{ fontSize: 11.5, marginBottom: 8 }}>
          🔧 {no ? 'Neste gassensor-kalibrering' : 'Next gas sensor cal.'}:{' '}
          <b style={{ color: hist.gas_sensor_days_left < 0 ? 'var(--danger)'
                       : hist.gas_sensor_days_left <= 30 ? 'var(--warn)' : 'inherit' }}>
            {hist.gas_sensor_next_service.slice(0, 10)}
          </b>
          {hist.gas_sensor_days_left != null && ` (${hist.gas_sensor_days_left} ${no ? 'dager' : 'days'})`}
        </div>
      )}
      {/* Registrer utført service */}
      <div className="row" style={{ gap: 6, flexWrap: 'wrap', marginBottom: 10 }}>
        <select className="input" style={{ width: 'auto' }} value={kind}
                onChange={e => setKind(e.target.value)}>
          {Object.entries(KIND_LABELS).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
        </select>
        <input className="input" style={{ flex: 1, minWidth: 140 }}
               placeholder={no ? 'Notat (hva ble gjort?)' : 'Notes'}
               value={notes} onChange={e => setNotes(e.target.value)} />
        <button className="btn sm primary" disabled={busy} onClick={submit}>
          {busy ? '⏳' : '✓'} {no ? 'Registrer utført' : 'Register'}
        </button>
      </div>
      {/* Historikk */}
      {hist === null ? <div className="muted" style={{ fontSize: 11 }}>⏳</div>
        : (hist.entries || []).length === 0
          ? <div className="muted" style={{ fontSize: 11 }}>{no ? 'Ingen service registrert ennå.' : 'No service yet.'}</div>
          : (
            <div style={{ maxHeight: 180, overflow: 'auto' }}>
              {hist.entries.map(e => (
                <div key={e.id} style={{ fontSize: 11.5, padding: '5px 0',
                      borderTop: '1px solid var(--border)' }}>
                  <b>{(e.performed_at || '').slice(0, 10)}</b> · {KIND_LABELS[e.kind] || e.kind}
                  {e.next_due && <span className="muted"> → {no ? 'neste' : 'next'} {e.next_due.slice(0, 10)}</span>}
                  <div className="muted">{e.notes || ''} {e.performed_by ? `— ${e.performed_by}` : ''}</div>
                </div>
              ))}
            </div>
          )}
    </div>
  );
};

/* === Kjørerute-planlegger ===
   Velg OMRÅDE → automatene sorteres nærmeste-nabo fra depotet, hvert stopp
   får en påfyllingsmiks etter automatens salgsfaktor, og navigasjonen deles
   i Google Maps-etapper. To modus: ≤330 kg pr. tur (ADR-fri, retur til depot
   mellom turene) eller ADR full last (kjøre-/hviletidsplan). */
const RoutePlanner = ({ tenant, lang, dataVersion, onBack, presetIds, onPlanCreated }) => {
  const no = lang === 'no';
  const areas = React.useMemo(
    () => (DATA.AREAS || []).filter(a => a.tenant_id === tenant.id),
    [tenant.id, dataVersion]);
  const depotAreas = areas.filter(a => a.depot_lat != null && a.depot_lon != null);
  const [areaId, setAreaId] = React.useState('');
  const [startBase, setStartBase] = React.useState('');   // area_id for START-base
  const [endBase, setEndBase] = React.useState('');       // area_id for SLUTT-base
  const [planMode, setPlanMode] = React.useState('light');   // light | adr
  const [maxKg, setMaxKg] = React.useState(330);
  const [plan, setPlan] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const area = areas.find(a => a.id === areaId);
  const hasDepot = area && area.depot_lat != null && area.depot_lon != null;
  const hasSelection = presetIds && presetIds.length > 0;

  const load = async (m) => {
    if (!areaId && !hasSelection) {
      setErr(no ? 'Velg område (eller automater i lista) først' : 'Pick an area first');
      return;
    }
    if (hasSelection && !areaId && !startBase) {
      setErr(no ? 'Velg start-base for utvalget' : 'Pick a start base');
      return;
    }
    setBusy(true); setErr(null); setPlanMode(m);
    try {
      const params = { mode: m, max_load_kg: maxKg };
      if (areaId) params.area_id = areaId;
      if (hasSelection) params.automat_ids = presetIds.join(',');
      if (startBase) params.start_area_id = startBase;
      if (endBase) params.end_area_id = endBase;
      const p = await window.api.routePlan(tenant.id, params);
      setPlan(p);
    } catch (e) { setErr(e.message); setPlan(null); }
    finally { setBusy(false); }
  };

  const fmtT = (min) => {
    const h = Math.floor(min / 60), m = Math.round(min % 60);
    return h > 0 ? `${h} t ${m} min` : `${m} min`;
  };

  return (
    <div>
      <div className="panel" style={{ marginBottom: 14 }}>
        <div className="panel-body">
          {hasSelection && (
            <div className="pill info" style={{ marginBottom: 10 }}>
              {presetIds.length} {no ? 'manuelt valgte automater fra lista' : 'manually selected'}
            </div>
          )}
          <div className="row" style={{ gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
            {!hasSelection && (
              <div>
                <div className="muted" style={{ fontSize: 11.5, marginBottom: 4 }}>
                  {no ? 'Ansvarsområde' : 'Area'}
                </div>
                <select className="input" style={{ minWidth: 200 }} value={areaId}
                        onChange={e => { setAreaId(e.target.value); setPlan(null); }}>
                  <option value="">{no ? '— velg område —' : '— pick area —'}</option>
                  {areas.map(a => (
                    <option key={a.id} value={a.id}>
                      {a.name} ({a.automat_count}){a.responsible_name ? ` · ${a.responsible_name}` : ''}
                    </option>
                  ))}
                </select>
              </div>
            )}
            <div>
              <div className="muted" style={{ fontSize: 11.5, marginBottom: 4 }}>
                {no ? 'Start-base' : 'Start base'}
              </div>
              <select className="input" style={{ minWidth: 150 }} value={startBase}
                      onChange={e => { setStartBase(e.target.value); setPlan(null); }}>
                <option value="">{no ? (areaId ? '(områdets base)' : '— velg —') : '— pick —'}</option>
                {depotAreas.map(a => (
                  <option key={a.id} value={a.id}>{a.depot_address || a.name}</option>
                ))}
              </select>
            </div>
            <div>
              <div className="muted" style={{ fontSize: 11.5, marginBottom: 4 }}>
                {no ? 'Slutt-base (omlasting)' : 'End base'}
              </div>
              <select className="input" style={{ minWidth: 150 }} value={endBase}
                      onChange={e => { setEndBase(e.target.value); setPlan(null); }}>
                <option value="">{no ? '(samme som start)' : '(same as start)'}</option>
                {depotAreas.map(a => (
                  <option key={a.id} value={a.id}>{a.depot_address || a.name}</option>
                ))}
              </select>
            </div>
            <div>
              <div className="muted" style={{ fontSize: 11.5, marginBottom: 4 }}>
                {no ? 'Maks kg gass pr. tur (ADR-fri)' : 'Max kg per trip'}
              </div>
              <input className="input" type="number" style={{ width: 90 }}
                     value={maxKg} onChange={e => setMaxKg(Number(e.target.value) || 330)} />
            </div>
            <button className="btn primary" disabled={busy || (!areaId && !hasSelection)}
                    onClick={() => load('light')}>
              {busy && planMode === 'light' ? '⏳ ' : ''}{no ? `Naviger ≤ ${maxKg} kg-turer` : `Navigate ≤ ${maxKg} kg trips`}
            </button>
            <button className="btn" disabled={busy || (!areaId && !hasSelection)}
                    onClick={() => load('adr')}>
              {busy && planMode === 'adr' ? '⏳ ' : ''}{no ? 'ADR-kjøring (full last)' : 'ADR (full load)'}
            </button>
            <div className="grow" />
            <button className="btn" onClick={onBack}>{no ? '← Tilbake' : '← Back'}</button>
          </div>
          {area && (
            <div className="muted" style={{ fontSize: 11.5, marginTop: 8 }}>
              {hasDepot
                ? `${no ? 'Depot' : 'Depot'}: ${area.depot_address || `${area.depot_lat}, ${area.depot_lon}`}`
                : (no ? '⚠ Området mangler depot/fyllestasjon — ruta starter på første automat. Sett depot under Områder.'
                      : '⚠ Area has no depot — route starts at first machine.')}
              {area.responsible_name && ` · ${no ? 'Ansvarlig' : 'Responsible'}: ${area.responsible_name}${area.responsible_mobile ? ` (${area.responsible_mobile})` : ''}`}
            </div>
          )}
          {err && <div style={{ color: 'var(--danger)', fontSize: 12.5, marginTop: 8 }}>❌ {err}</div>}
        </div>
      </div>

      {plan && (
        <>
          {/* Totaler — inkl. estimert kjøre-/arbeidstid for kjøre-/hviletid */}
          <div className="kpi-grid" style={{ marginBottom: 14 }}>
            <div className="kpi"><div className="kpi-label">{no ? 'Stopp' : 'Stops'}</div>
              <div className="kpi-value">{plan.totals.stops}</div></div>
            <div className="kpi"><div className="kpi-label">{no ? 'Flasker å fylle' : 'Bottles'}</div>
              <div className="kpi-value">{plan.totals.bottles_total}
                <span className="unit"> ({plan.totals.empties_to_collect} {no ? 'tomme hentes' : 'empties'})</span></div></div>
            <div className="kpi"><div className="kpi-label">{no ? 'Last (gass)' : 'Load (gas)'}</div>
              <div className="kpi-value">{plan.totals.weight_kg}<span className="unit"> kg</span></div></div>
            <div className="kpi"><div className="kpi-label">{no ? 'Distanse' : 'Distance'}</div>
              <div className="kpi-value">{plan.totals.distance_km}<span className="unit"> km</span></div></div>
            <div className="kpi"><div className="kpi-label">{no ? 'Kjøretid' : 'Drive time'}</div>
              <div className="kpi-value" style={{ fontSize: 17 }}>{fmtT(plan.totals.drive_min)}</div>
              <div style={{ marginTop: 2 }}>
                {plan.timing_source === 'google_routes'
                  ? <span className="pill ok" style={{ fontSize: 9.5 }}>⏱ Google Routes</span>
                  : <span className="pill warn" style={{ fontSize: 9.5 }}>≈ {no ? 'estimat' : 'estimate'}</span>}
              </div></div>
            <div className="kpi"><div className="kpi-label">{no ? 'Arbeidstid (kjøring + lasting)' : 'Work time'}</div>
              <div className="kpi-value" style={{ fontSize: 17 }}>{fmtT(plan.totals.work_min)}</div>
              <div className="muted" style={{ fontSize: 10.5 }}>
                {no ? 'maks 9 t kjøring / 12 t arbeidsdag' : 'max 9h drive / 12h work'}
              </div></div>
          </div>

          {plan.note && (
            <div className="panel" style={{ marginBottom: 14 }}>
              <div className="panel-body" style={{ fontSize: 12.5 }}>ℹ️ {plan.note}</div>
            </div>
          )}

          {/* Start utkjøringen: oppretter fylleplan med digitalt fraktbrev —
              bilen lastes med totalene, hvert stopp får forslags-miksen. */}
          {onPlanCreated && (
            <div className="panel" style={{ marginBottom: 14 }}>
              <div className="panel-body row" style={{ gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
                <button className="btn primary large" disabled={busy}
                  onClick={async () => {
                    setBusy(true); setErr(null);
                    try {
                      const suggested = {};
                      plan.stops.forEach(s => {
                        suggested[s.automat_id] = Object.fromEntries(
                          (s.fill || []).map(f => [f.bottle_code, f.count]));
                      });
                      const r = await window.api.refillCreatePlan({
                        tenant_id: tenant.id,
                        automat_ids: plan.stops.map(s => s.automat_id),
                        truck_loaded: { ...plan.totals.bottles_by_code },
                        suggested_by_automat: suggested,
                        truck_max_kg: planMode === 'light' ? maxKg : null,
                        notes: `Kjørerute (${planMode === 'light' ? `≤${maxKg} kg-turer` : 'ADR'}) — ` +
                               `${plan.totals.stops} stopp, ${plan.totals.weight_kg} kg gass`,
                      });
                      onPlanCreated(r);
                    } catch (e) { setErr(e.message); }
                    finally { setBusy(false); }
                  }}>
                  🚚 {no ? 'Start utkjøring (lag digitalt fraktbrev)' : 'Start route (create manifest)'}
                </button>
                <span className="muted" style={{ fontSize: 11.5 }}>
                  {no ? `Bilen lastes med ${plan.totals.bottles_total} flasker (${plan.totals.weight_kg} kg). Fraktbrevet oppdateres automatisk når automatene detekterer inn-/utlevering.`
                      : 'Truck loaded with plan totals; manifest auto-updates on detection.'}
                </span>
              </div>
            </div>
          )}

          {/* Navigasjon: turer (light) eller etapper + hvileplan (ADR) */}
          {plan.mode === 'light' && plan.trips && (
            <div className="panel" style={{ marginBottom: 14 }}>
              <div className="panel-head"><h3>{no ? `Turer (maks ${maxKg} kg)` : 'Trips'}</h3></div>
              <div className="panel-body">
                {plan.trips.map((t, i) => (
                  <div key={i} className="row" style={{ gap: 10, padding: '8px 0', flexWrap: 'wrap',
                        borderBottom: i < plan.trips.length - 1 ? '1px solid var(--border)' : 'none' }}>
                    <span className="pill info">{no ? 'Tur' : 'Trip'} {i + 1}</span>
                    <span style={{ fontSize: 12.5 }}>{t.stops} {no ? 'stopp' : 'stops'} · {t.bottles} {no ? 'flasker' : 'bottles'} · <b>{t.weight_kg} kg</b></span>
                    <div className="grow" />
                    {t.nav_urls.map((u, j) => (
                      <button key={j} className="btn sm primary"
                              onClick={() => window.open(u, '_blank')}>
                        🧭 {no ? 'Etappe' : 'Leg'} {t.nav_urls.length > 1 ? `${j + 1}/${t.nav_urls.length}` : ''}
                      </button>
                    ))}
                  </div>
                ))}
                <div className="muted" style={{ fontSize: 11, marginTop: 8 }}>
                  {no ? 'Hver tur starter og slutter på depotet (hent ny last). Google Maps tar maks 9 stopp pr. lenke — etappene fortsetter der forrige sluttet.'
                      : 'Each trip starts/ends at the depot. Google Maps caps ~9 stops per link.'}
                </div>
              </div>
            </div>
          )}

          {plan.mode === 'adr' && (
            <div className="panel" style={{ marginBottom: 14 }}>
              <div className="panel-head"><h3>{no ? 'Navigasjon + kjøre-/hviletid' : 'Navigation + rest plan'}</h3></div>
              <div className="panel-body">
                <div className="row" style={{ gap: 8, flexWrap: 'wrap', marginBottom: 10 }}>
                  {(plan.nav_urls || []).map((u, j) => (
                    <button key={j} className="btn sm primary" onClick={() => window.open(u, '_blank')}>
                      🧭 {no ? 'Etappe' : 'Leg'} {j + 1}/{plan.nav_urls.length}
                    </button>
                  ))}
                  {plan.days_needed > 1 && (
                    <span className="pill warn">{no ? `Estimert ${plan.days_needed} dager` : `${plan.days_needed} days`}</span>
                  )}
                </div>
                {(plan.rest_plan || []).length > 0 ? (
                  <div>
                    {plan.rest_plan.map((r, i) => (
                      <div key={i} style={{ padding: '7px 0', fontSize: 12.5,
                            borderBottom: '1px solid var(--border)' }}>
                        {r.type === 'pause45' ? '☕' : '🛏'} <b>{r.type === 'pause45' ? (no ? '45 min pause' : '45 min break') : (no ? 'Døgnhvile' : 'Daily rest')}</b>
                        {' '}{no ? 'etter stopp' : 'after stop'} #{r.after_stop} ({r.at}) — <span className="muted">{r.reason}</span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="muted" style={{ fontSize: 12 }}>
                    ✓ {no ? 'Ruta er innenfor 4,5 t kjøring — ingen pålagte pauser.' : 'Within 4.5h driving — no mandated breaks.'}
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Stoppliste i kjørerekkefølge med påfyllingsmiks pr. automat */}
          <div className="panel">
            <div className="panel-head"><h3>{no ? 'Kjørerekkefølge' : 'Stop order'}</h3></div>
            <div className="panel-body no-pad">
              <table className="tbl">
                <thead><tr>
                  <th>#</th><th>{no ? 'Automat' : 'Machine'}</th>
                  <th className="num">{no ? 'Fra forrige' : 'From prev'}</th>
                  <th>{no ? 'Fyll (etter salgsfaktor)' : 'Fill (by sales factor)'}</th>
                  <th className="num">kg</th>
                  <th className="num">{no ? 'Tomme' : 'Empties'}</th>
                  <th className="num">{no ? 'Lasting' : 'Service'}</th>
                </tr></thead>
                <tbody>
                  {plan.stops.map((s, i) => (
                    <tr key={s.automat_id}>
                      <td className="mono">{i + 1}</td>
                      <td>
                        <div style={{ fontWeight: 500 }}>{s.location}</div>
                        <div className="muted" style={{ fontSize: 10.5 }}>
                          {no ? 'faktor' : 'factor'}: {Object.entries(s.factor).slice(0, 3)
                            .map(([c, f]) => `${Math.round(f * 100)}% ${c.replace('_', ' ')}`).join(', ')}
                        </div>
                      </td>
                      <td className="num" style={{ whiteSpace: 'nowrap' }}>
                        {s.distance_km_from_prev} km · {s.drive_min_from_prev} min
                      </td>
                      <td>
                        <div className="row" style={{ gap: 4, flexWrap: 'wrap' }}>
                          {s.fill.map(f => (
                            <span key={f.bottle_code} className="pill info" style={{ fontSize: 10.5 }}>
                              {f.count}× {f.bottle_code.replace('_', ' ')}
                            </span>
                          ))}
                          {s.fill.length === 0 && <span className="muted" style={{ fontSize: 11 }}>{no ? 'full' : 'full'}</span>}
                        </div>
                      </td>
                      <td className="num">{s.weight_kg}</td>
                      <td className="num" style={{ color: s.empties_to_collect > 0 ? 'var(--danger)' : 'inherit' }}>
                        {s.empties_to_collect}
                      </td>
                      <td className="num">{s.service_min} min</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              {(plan.skipped || []).length > 0 && (
                <div style={{ padding: '10px 16px', fontSize: 11.5, color: 'var(--warn)' }}>
                  ⚠ {plan.skipped.map(s => `${s.automat_id}: ${s.reason}`).join(' · ')}
                </div>
              )}
            </div>
          </div>
        </>
      )}
    </div>
  );
};

Object.assign(window, { RefillPage, RoutePlanner });