/* Områder (regioner) — administrasjon av områder med områdeansvarlig, og
   tildeling av automater til område. Automatene sorteres i områder for
   enklere kontroll (filter/gruppering på oversikten + bulk-redigering). */

const AreasPage = ({ lang, tenant, dataVersion, onReload }) => {
  const no = lang === 'no';
  const activeTenant = tenant || { id: '__all__' };
  const [areas, setAreas] = React.useState(DATA.AREAS || []);
  const [editing, setEditing] = React.useState(null);    // null | 'new' | area
  const [busy, setBusy] = React.useState(false);

  const machines = React.useMemo(() => {
    const all = DATA.machines || [];
    if (activeTenant.id === '__all__') return all;
    return all.filter(m => m.tenantId === activeTenant.id);
  }, [activeTenant.id, dataVersion]);

  const tenantId = activeTenant.id !== '__all__' ? activeTenant.id
    : (machines[0] && machines[0].tenantId) || null;

  const refresh = React.useCallback(async () => {
    const list = await window.api.areasList(
      activeTenant.id !== '__all__' ? activeTenant.id : null);
    setAreas(list);
    DATA.AREAS = list;
  }, [activeTenant.id]);
  React.useEffect(() => { refresh().catch(() => {}); }, [refresh, dataVersion]);

  const assignArea = async (machineId, areaId) => {
    setBusy(true);
    try {
      await window.api.updateAutomat(machineId, { area_id: areaId });
      const m = (DATA.machines || []).find(x => x.id === machineId);
      if (m) {
        m.areaId = areaId || null;
        m.areaName = areaId ? (areas.find(a => a.id === areaId) || {}).name : null;
      }
      await refresh();
    } catch (e) { alert(e.message); }
    finally { setBusy(false); }
  };

  const remove = async (a) => {
    if (!confirm(no ? `Slette området «${a.name}»? Automatene beholdes.`
                    : `Delete area “${a.name}”? Machines are kept.`)) return;
    try { await window.api.areaDelete(a.id); await refresh(); }
    catch (e) { alert(e.message); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{no ? 'Områder' : 'Areas'}</h1>
          <div className="page-sub">
            {no ? 'Sortér automatene i områder med områdeansvarlig'
                : 'Group machines into areas with a responsible person'}
          </div>
        </div>
        <div className="row">
          <button className="btn primary" onClick={() => setEditing('new')}>
            <Icon name="plus" size={14} />{no ? 'Nytt område' : 'New area'}
          </button>
        </div>
      </div>

      <div className="split-7-5">
        {/* Områdeliste med ansvarlig */}
        <div className="panel">
          <div className="panel-head"><h3>{no ? 'Områder' : 'Areas'}</h3></div>
          <div className="panel-body no-pad">
            <table className="tbl">
              <thead>
                <tr>
                  <th>{no ? 'Område' : 'Area'}</th>
                  <th>{no ? 'Ansvarlig' : 'Responsible'}</th>
                  <th>{no ? 'Mobil' : 'Mobile'}</th>
                  <th className="num">{no ? 'Automater' : 'Machines'}</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {areas.map(a => (
                  <tr key={a.id}>
                    <td style={{ fontWeight: 500 }}>{a.name}</td>
                    <td>{a.responsible_name || '—'}</td>
                    <td className="mono" style={{ fontSize: 11.5 }}>{a.responsible_mobile || '—'}</td>
                    <td className="num">{a.automat_count}</td>
                    <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                      <button className="icon-btn" title={no ? 'Rediger' : 'Edit'}
                              onClick={() => setEditing(a)}><Icon name="edit" size={13} /></button>
                      <button className="icon-btn" title={no ? 'Slett' : 'Delete'}
                              onClick={() => remove(a)}><Icon name="close" size={13} /></button>
                    </td>
                  </tr>
                ))}
                {areas.length === 0 && (
                  <tr><td colSpan={5} className="muted" style={{ padding: 20, textAlign: 'center' }}>
                    {no ? 'Ingen områder ennå — opprett det første.' : 'No areas yet.'}
                  </td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        {/* Automat → område-tildeling */}
        <div className="panel">
          <div className="panel-head"><h3>{no ? 'Tildel automater' : 'Assign machines'}</h3></div>
          <div className="panel-body no-pad" style={{ maxHeight: 520, overflow: 'auto' }}>
            <table className="tbl">
              <thead>
                <tr><th>{no ? 'Automat' : 'Machine'}</th><th>{no ? 'Område' : 'Area'}</th></tr>
              </thead>
              <tbody>
                {machines.map(m => (
                  <tr key={m.id}>
                    <td>
                      <div style={{ fontWeight: 500, fontSize: 12.5 }}>{m.location}</div>
                      <div className="muted mono" style={{ fontSize: 10.5 }}>{m.id}</div>
                    </td>
                    <td>
                      <select className="input" disabled={busy} value={m.areaId || ''}
                              onChange={e => assignArea(m.id, e.target.value)}>
                        <option value="">{no ? '(uten område)' : '(no area)'}</option>
                        {areas.filter(a => a.tenant_id === m.tenantId).map(a => (
                          <option key={a.id} value={a.id}>{a.name}</option>
                        ))}
                      </select>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {editing && (
        <AreaEditModal lang={lang} area={editing === 'new' ? null : editing}
                       tenantId={tenantId}
                       onClose={() => setEditing(null)}
                       onDone={async () => { setEditing(null); await refresh(); if (onReload) await onReload(); }} />
      )}
    </div>
  );
};

const AreaEditModal = ({ lang, area, tenantId, onClose, onDone }) => {
  const no = lang === 'no';
  const [name, setName] = React.useState(area ? area.name : '');
  const [rName, setRName] = React.useState(area ? (area.responsible_name || '') : '');
  const [rMob, setRMob] = React.useState(area ? (area.responsible_mobile || '') : '');
  const [rMail, setRMail] = React.useState(area ? (area.responsible_email || '') : '');
  const [depotAddr, setDepotAddr] = React.useState(area ? (area.depot_address || '') : '');
  const [depotLat, setDepotLat] = React.useState(area && area.depot_lat != null ? String(area.depot_lat) : '');
  const [depotLon, setDepotLon] = React.useState(area && area.depot_lon != null ? String(area.depot_lon) : '');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const submit = async () => {
    if (!name.trim()) { setErr(no ? 'Navn kreves' : 'Name required'); return; }
    setBusy(true); setErr(null);
    try {
      const body = { name: name.trim(), responsible_name: rName || null,
                     responsible_mobile: rMob || null, responsible_email: rMail || null,
                     depot_address: depotAddr || null,
                     depot_lat: depotLat ? parseFloat(depotLat.replace(',', '.')) : null,
                     depot_lon: depotLon ? parseFloat(depotLon.replace(',', '.')) : null };
      if (area) await window.api.areaUpdate(area.id, body);
      else await window.api.areaCreate({ ...body, tenant_id: tenantId });
      onDone();
    } catch (e) { setErr(e.message); setBusy(false); }
  };

  const Field = ({ label, value, onChange, placeholder }) => (
    <div style={{ marginBottom: 12 }}>
      <div className="muted" style={{ fontSize: 11.5, marginBottom: 4 }}>{label}</div>
      <input className="input" value={value} placeholder={placeholder || ''}
             onChange={e => onChange(e.target.value)} />
    </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(440px,95vw)', padding: 20,
                    background: 'var(--surface)', border: '1px solid var(--border)',
                    borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)' }}>
        <h3 style={{ marginBottom: 14 }}>
          {area ? (no ? 'Rediger område' : 'Edit area') : (no ? 'Nytt område' : 'New area')}
        </h3>
        <Field label={no ? 'Navn' : 'Name'} value={name} onChange={setName}
               placeholder={no ? 'f.eks. Vestlandet' : 'e.g. West'} />
        <Field label={no ? 'Områdeansvarlig' : 'Responsible'} value={rName} onChange={setRName} />
        <Field label={no ? 'Mobil (varsler)' : 'Mobile'} value={rMob} onChange={setRMob}
               placeholder="+47 …" />
        <Field label="E-post" value={rMail} onChange={setRMail} />
        <div className="section-title" style={{ margin: '4px 0 8px' }}>
          {no ? 'Fyllestasjon / depot (kjøreruter)' : 'Depot (routes)'}
        </div>
        <Field label={no ? 'Adresse' : 'Address'} value={depotAddr} onChange={setDepotAddr}
               placeholder={no ? 'f.eks. Gasslageret, Bergen' : ''} />
        <div className="row" style={{ gap: 8 }}>
          <div style={{ flex: 1 }}>
            <Field label="Lat" value={depotLat} onChange={setDepotLat} placeholder="60.39" />
          </div>
          <div style={{ flex: 1 }}>
            <Field label="Lon" value={depotLon} onChange={setDepotLon} placeholder="5.32" />
          </div>
        </div>
        {err && <div style={{ color: 'var(--danger)', fontSize: 12.5, marginBottom: 10 }}>❌ {err}</div>}
        <div className="row" style={{ justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={busy}>{no ? 'Avbryt' : 'Cancel'}</button>
          <button className="btn primary" onClick={submit} disabled={busy}>
            {busy ? '⏳ ' : ''}{no ? 'Lagre' : 'Save'}
          </button>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { AreasPage, AreaEditModal });