/* Innstillinger for legacy-automater — leser og skriver til v1 Firestore settings-doc.

Brukes for å konfigurere Vipps-credentials, admin-mobile-nummer, lyd-/lys-
toggler, gass-alarm-flagg, etc. for v1-automater som fortsatt kjører
RPi-stacken og leser sine settings fra Firestore.
*/

const LegacySettings = ({ machine, lang }) => {
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [fields, setFields] = React.useState({});
  const [edits, setEdits] = React.useState({});
  const [saving, setSaving] = React.useState(false);
  const [savedAt, setSavedAt] = React.useState(null);

  React.useEffect(() => {
    let cancelled = false;
    setLoading(true);
    window.api.legacyGetSettings(machine.id).then(r => {
      if (cancelled) return;
      setFields(r.fields || {});
      setLoading(false);
    }).catch(e => { setError(e.message); setLoading(false); });
    return () => { cancelled = true; };
  }, [machine.id]);

  const set = (k, v) => setEdits(prev => ({ ...prev, [k]: v }));
  const val = (k) => (edits[k] !== undefined ? edits[k] : fields[k]);

  const save = async (keys) => {
    setSaving(true); setError(null);
    const updates = {};
    keys.forEach(k => { if (edits[k] !== undefined) updates[k] = edits[k]; });
    if (Object.keys(updates).length === 0) {
      setSaving(false);
      alert('Ingen endringer å lagre');
      return;
    }
    try {
      await window.api.legacySaveSettings(machine.id, updates);
      setFields(prev => ({ ...prev, ...updates }));
      setEdits(prev => { const c = { ...prev }; keys.forEach(k => delete c[k]); return c; });
      setSavedAt(new Date().toLocaleTimeString('no-NO'));
    } catch (e) { setError(e.message); }
    setSaving(false);
  };

  if (loading) return <div className="empty">Laster v1-settings…</div>;

  return (
    <>
      <div style={{
        padding: 12, marginBottom: 14,
        background: 'var(--info-soft)', borderRadius: 'var(--radius)',
        borderLeft: '3px solid var(--info)', fontSize: 12.5, color: 'var(--text-dim)',
      }}>
        ℹ Disse innstillingene skrives direkte til v1 Firestore <code>locations/{machine.firestoreLocId}/settings/…</code>.
        v1 RPi leser dem live via snapshot-listener og oppdateres uten omstart.
        <br /><strong>Sensitive felt</strong> (vipps-credentials, admin-mobile) — endre med varsomhet.
      </div>

      {error && <div className="error-banner" style={{ marginBottom: 10 }}>{error}</div>}
      {savedAt && <div className="pill ok" style={{ marginBottom: 10 }}>✓ Lagret {savedAt}</div>}

      <div className="split-2">
        {/* --- VIPPS --- */}
        <div className="panel">
          <div className="panel-head"><h3>Vipps eCommerce</h3></div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <SettingField label="vipps_url" hint="api.vipps.no (prod) eller apitest.vipps.no"
              value={val('vipps_url')} onChange={v => set('vipps_url', v)} />
            <SettingField label="vipps_client_id"
              value={val('vipps_client_id')} onChange={v => set('vipps_client_id', v)} />
            <SettingField label="vipps_client_secret" secret
              value={val('vipps_client_secret')} onChange={v => set('vipps_client_secret', v)} />
            <SettingField label="vipps_Ocp_Apim_Subscription_Key" secret
              value={val('vipps_Ocp_Apim_Subscription_Key')}
              onChange={v => set('vipps_Ocp_Apim_Subscription_Key', v)} />
            <SettingField label="vipps_Ocp_Apim_Subscription_Key2" secret
              value={val('vipps_Ocp_Apim_Subscription_Key2')}
              onChange={v => set('vipps_Ocp_Apim_Subscription_Key2', v)} />
            <SettingField label="vipps_MerchantSerialNumber"
              value={val('vipps_MerchantSerialNumber')}
              onChange={v => set('vipps_MerchantSerialNumber', v)} />
            <button className="btn primary" disabled={saving}
              onClick={() => save([
                'vipps_url', 'vipps_client_id', 'vipps_client_secret',
                'vipps_Ocp_Apim_Subscription_Key',
                'vipps_Ocp_Apim_Subscription_Key2',
                'vipps_MerchantSerialNumber',
              ])}>
              {saving ? 'Lagrer…' : 'Lagre Vipps-innstillinger'}
            </button>
          </div>
        </div>

        {/* --- DRIFT --- */}
        <div className="col" style={{ gap: 16 }}>
          <div className="panel">
            <div className="panel-head"><h3>Admin & varsling</h3></div>
            <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <SettingField label="admin_mobile (komma-separert)"
                value={(val('admin_mobile') || []).join(', ')}
                onChange={v => set('admin_mobile', v.split(',').map(s => s.trim()).filter(Boolean))} />
              <SettingNumber label="predict_accept_limit (0-99)"
                value={val('predict_accept_limit')}
                onChange={v => set('predict_accept_limit', v)} />
              <SettingNumber label="num_groups (1-4)"
                value={val('num_groups')}
                onChange={v => set('num_groups', v)} />
              <SettingNumber label="stockpage_timeout_min"
                value={val('stockpage_timeout_min')}
                onChange={v => set('stockpage_timeout_min', v)} />
              <SettingNumber label="receiptpage_timeout_min"
                value={val('receiptpage_timeout_min')}
                onChange={v => set('receiptpage_timeout_min', v)} />
              <SettingField label="receipt_templ" hint="receipt.html"
                value={val('receipt_templ')}
                onChange={v => set('receipt_templ', v)} />
              <button className="btn primary" disabled={saving}
                onClick={() => save([
                  'admin_mobile', 'predict_accept_limit', 'num_groups',
                  'stockpage_timeout_min', 'receiptpage_timeout_min', 'receipt_templ',
                ])}>
                {saving ? 'Lagrer…' : 'Lagre admin-innstillinger'}
              </button>
            </div>
          </div>

          <div className="panel">
            <div className="panel-head"><h3>Drift-flagg</h3></div>
            <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <BoolToggle label="maintenance_mode" value={val('maintenance_mode')}
                onChange={v => set('maintenance_mode', v)} />
              <BoolToggle label="gas_alarm_enabled" value={val('gas_alarm_enabled')}
                onChange={v => set('gas_alarm_enabled', v)} />
              <BoolToggle label="check_open_doors" value={val('check_open_doors')}
                onChange={v => set('check_open_doors', v)} />
              <button className="btn primary" disabled={saving}
                onClick={() => save([
                  'maintenance_mode', 'gas_alarm_enabled', 'check_open_doors',
                ])}>
                {saving ? 'Lagrer…' : 'Lagre flagg'}
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* --- Rå felt for inspeksjon --- */}
      <details style={{ marginTop: 16 }}>
        <summary style={{ cursor: 'pointer', color: 'var(--text-faint)', fontSize: 12.5 }}>
          Vis alle felt i settings-doc (rå)
        </summary>
        <pre style={{
          marginTop: 10, padding: 12, background: 'var(--surface-2)',
          borderRadius: 'var(--radius)', fontSize: 11.5, maxHeight: 400, overflow: 'auto',
        }}>{JSON.stringify(fields, null, 2)}</pre>
      </details>
    </>
  );
};

const SettingField = ({ label, value, onChange, secret, hint }) => {
  const [show, setShow] = React.useState(false);
  return (
    <div className="field">
      <label>{label}{hint && <span style={{ color: 'var(--text-faint)', fontWeight: 400 }}> · {hint}</span>}</label>
      <div style={{ display: 'flex', gap: 4 }}>
        <input className="input" style={{ flex: 1 }}
          type={secret && !show ? 'password' : 'text'}
          value={value || ''}
          onChange={e => onChange(e.target.value)} />
        {secret && (
          <button className="btn sm" onClick={() => setShow(s => !s)}>
            {show ? 'skjul' : 'vis'}
          </button>
        )}
      </div>
    </div>
  );
};

const SettingNumber = ({ label, value, onChange }) => (
  <div className="field">
    <label>{label}</label>
    <input className="input" type="number" value={value ?? ''}
      onChange={e => onChange(e.target.value === '' ? null : +e.target.value)} />
  </div>
);

const BoolToggle = ({ label, value, onChange }) => (
  <div className="row between" style={{ padding: '4px 0' }}>
    <span style={{ fontSize: 12.5 }}>{label}</span>
    <div
      onClick={() => onChange(!value)}
      style={{
        width: 44, height: 24, borderRadius: 12, flexShrink: 0,
        background: value ? 'var(--accent)' : 'var(--surface-3)',
        border: '1px solid var(--border)',
        position: 'relative', cursor: 'pointer', transition: 'background .15s',
      }}>
      <div style={{
        position: 'absolute', top: 1, left: value ? 21 : 1, width: 20, height: 20,
        background: value ? '#1a1100' : 'var(--text-faint)', borderRadius: '50%',
        transition: 'left .15s',
      }} />
    </div>
  </div>
);

Object.assign(window, { LegacySettings });