// Einstellungen — Datensicherung (Backup & Restore)
// Liest/schreibt ausschließlich über window.RFDB (reine Server-Anbindung,
// kein lokaler Cache — siehe db.js). Export/Import laufen komplett gegen
// den Server; ein Import wartet auf dessen Bestätigung, bevor irgendetwas
// als "fertig" gilt.

const { useState: useStateBkp, useEffect: useEffectBkp, useRef: useRefBkp, useMemo: useMemoBkp } = React;

const RF_PREFIX = 'rf-';
const LAST_EXPORT_KEY = 'rf-last-export';
const BACKUP_VERSION = 2;
const BACKUP_APP     = 'RentFlow Manager';

// ─────────────────────────────────────────────────────────────
// Helpers
// ─────────────────────────────────────────────────────────────
function collectBackup() {
  const data = {};
  if (window.RFDB) {
    window.RFDB.keys().forEach(k => {
      if (k === LAST_EXPORT_KEY) return;
      const raw = window.RFDB.getRaw(k);
      if (raw !== null) data[k] = raw;
    });
  }
  return {
    app: BACKUP_APP,
    version: BACKUP_VERSION,
    exportedAt: new Date().toISOString(),
    data,
  };
}

function countItems(parsed) {
  // parsed.data is the { 'rf-rentals-v2': <raw-or-JSON>, ... } payload.
  // Old backups stored already-parsed objects; new backups store the raw
  // stringified form. Tolerate both.
  const rawD = (parsed && parsed.data) || {};
  const d = {};
  Object.entries(rawD).forEach(([k, v]) => {
    if (typeof v === 'string') {
      try { d[k] = JSON.parse(v); } catch { d[k] = v; }
    } else {
      d[k] = v;
    }
  });
  const len = (k) => Array.isArray(d[k]) ? d[k].length : 0;
  const tasksLen = d['rf-tasks'] && Array.isArray(d['rf-tasks'].items) ? d['rf-tasks'].items.length : 0;
  const workflowsLen = (() => {
    const w = d['rf-workflows'];
    return w && typeof w === 'object' ? Object.keys(w).length : 0;
  })();
  const genDocsCount = (() => {
    const g = d['rf-gendocs'];
    if (!g || typeof g !== 'object') return 0;
    return Object.values(g).reduce((s, v) => s + (Array.isArray(v) ? v.length : 0), 0);
  })();
  return {
    equipment: len('rf-equipment-v2'),
    accessories: len('rf-accessories'),
    rentals:   len('rf-rentals-v2'),
    events:    len('rf-events-v2'),
    emails:    len('rf-emails-v1'),
    protocols: len('rf-protocols'),
    quicktexts: len('rf-quicktexts-v2'),
    workflows: workflowsLen,
    reviews:   len('rf-reviews'),
    tasks:     tasksLen,
    docs:      genDocsCount,
    transactions: len('rf-transactions'),
    hasCompany: !!d['rf-company'],
    hasLogistik: !!d['rf-logistik'],
    installedAt: d['rf-installed-at'] || null,
    keyCount:  Object.keys(rawD).length,
  };
}

function bytesize(obj) {
  try { return new Blob([JSON.stringify(obj)]).size; }
  catch { return 0; }
}

function fmtBytes(n) {
  if (!n) return '—';
  if (n < 1024) return n + ' B';
  if (n < 1024 * 1024) return (n / 1024).toFixed(1).replace('.', ',') + ' KB';
  return (n / (1024 * 1024)).toFixed(2).replace('.', ',') + ' MB';
}

function fmtDateTimeDE(iso) {
  if (!iso) return null;
  try {
    const d = new Date(iso);
    if (isNaN(d.getTime())) return null;
    const pad = (n) => String(n).padStart(2, '0');
    return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()} · ${pad(d.getHours())}:${pad(d.getMinutes())}`;
  } catch { return null; }
}

function downloadJSON(filename, payload) {
  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filename;
  document.body.appendChild(a); a.click();
  setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
}

function backupFilename() {
  const d = new Date();
  const pad = (n) => String(n).padStart(2, '0');
  return `rentflow-backup-${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}.json`;
}

// ─────────────────────────────────────────────────────────────
// Mini stat row inside the export summary card
// ─────────────────────────────────────────────────────────────
function StatLine({ label, value, t, last }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      padding: '9px 0',
      borderBottom: !last ? `0.5px solid ${t.sep}` : 'none',
    }}>
      <span style={{ fontSize: 13, color: t.textSec }}>{label}</span>
      <span style={{ fontSize: 14, color: t.text, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{value}</span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Confirm-import sheet contents
// ─────────────────────────────────────────────────────────────
function ImportConfirm({ open, parsed, fileName, t, onCancel, onConfirm, busy }) {
  if (!open) return null;
  const stats = parsed ? countItems(parsed) : null;
  const when = parsed ? fmtDateTimeDE(parsed.exportedAt) : null;

  return (
    <Sheet open={open} onClose={onCancel} maxHeight="78%">
      <div style={{ padding: '4px 20px 8px' }}>
        <div style={{ fontSize: 22, fontWeight: 700, color: t.text, letterSpacing: -0.4 }}>Sicherung importieren?</div>
        <div style={{ fontSize: 13, color: t.textSec, marginTop: 4, lineHeight: 1.45 }}>
          Alle aktuellen Daten werden ersetzt. Diese Aktion kann nicht rückgängig gemacht werden.
        </div>
      </div>

      <div style={{ padding: '0 16px' }}>
        <div style={{
          background: t.card, borderRadius: 14, padding: '12px 14px',
          boxShadow: t.shadowCard,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 8, borderBottom: `0.5px solid ${t.sep}` }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8, background: '#34C75922',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icon d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6 M9 13l2 2 4-4" color="#34C759" size={16} sw={1.9}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: t.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{fileName || 'backup.json'}</div>
              {when && <div style={{ fontSize: 11, color: t.textSec, marginTop: 1 }}>Erstellt am {when}</div>}
            </div>
          </div>
          {stats && (
            <div style={{ paddingTop: 4 }}>
              <StatLine t={t} label="Equipment" value={stats.equipment}/>
              <StatLine t={t} label="Zubehör" value={stats.accessories}/>
              <StatLine t={t} label="Mietverträge" value={stats.rentals}/>
              <StatLine t={t} label="Termine" value={stats.events}/>
              <StatLine t={t} label="Posteingang" value={stats.emails}/>
              <StatLine t={t} label="Protokolle" value={stats.protocols}/>
              <StatLine t={t} label="Schnelltexte" value={stats.quicktexts}/>
              <StatLine t={t} label="Workflows" value={stats.workflows}/>
              <StatLine t={t} label="Kundenbewertungen" value={stats.reviews}/>
              <StatLine t={t} label="Aufgaben" value={stats.tasks}/>
              <StatLine t={t} label="Buchungen (Finanzen)" value={stats.transactions}/>
              <StatLine t={t} label="Dokumente" value={stats.docs}/>
              <StatLine t={t} label="Logistik" value={stats.hasLogistik ? 'enthalten' : '—'}/>
              <StatLine t={t} label="Firmenprofil" value={stats.hasCompany ? 'enthalten' : '—'} last/>
            </div>
          )}
        </div>
      </div>

      <div style={{ padding: '16px 16px 24px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <Pressable onClick={busy ? undefined : onConfirm} scale={busy ? 1 : 0.97}>
          <div style={{
            background: '#FF3B30', color: '#fff', padding: '14px 16px',
            borderRadius: 12, textAlign: 'center', fontSize: 15, fontWeight: 600,
            opacity: busy ? 0.6 : 1,
          }}>{busy ? 'Wird importiert…' : 'Jetzt überschreiben & importieren'}</div>
        </Pressable>
        <Pressable onClick={busy ? undefined : onCancel} scale={busy ? 1 : 0.97}>
          <div style={{
            background: t.chipStrong, color: t.text, padding: '14px 16px',
            borderRadius: 12, textAlign: 'center', fontSize: 15, fontWeight: 600,
            opacity: busy ? 0.6 : 1,
          }}>Abbrechen</div>
        </Pressable>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// Main view
// ─────────────────────────────────────────────────────────────
function BackupView({ t, onBack, onClose, toast }) {
  // Tick to refresh sizes / stats after operations
  const [tick, setTick] = useStateBkp(0);
  const refresh = () => setTick(x => x + 1);

  const fileRef = useRefBkp(null);
  const [pending, setPending] = useStateBkp(null); // { parsed, fileName }
  const [resetOpen, setResetOpen] = useStateBkp(false);
  const [busy, setBusy] = useStateBkp(false); // Import/Reset läuft gerade (wartet auf Server)

  const snapshot = useMemoBkp(() => collectBackup(), [tick]);
  const stats    = useMemoBkp(() => countItems(snapshot), [snapshot]);
  const size     = useMemoBkp(() => bytesize(snapshot),   [snapshot]);
  const lastExport = window.RFDB ? window.RFDB.get(LAST_EXPORT_KEY) : null;
  const lastExportFmt = fmtDateTimeDE(lastExport && lastExport.at);

  // ── Export
  const doExport = () => {
    const payload = collectBackup();
    downloadJSON(backupFilename(), payload);
    if (window.RFDB) {
      window.RFDB.set(LAST_EXPORT_KEY, { at: payload.exportedAt }).catch(() => {});
    }
    refresh();
    toast && toast('Sicherung exportiert');
  };

  // ── Import: file picker
  const openPicker = () => { fileRef.current && fileRef.current.click(); };
  const onFile = (e) => {
    const f = e.target.files && e.target.files[0];
    e.target.value = ''; // allow re-pick of the same file
    if (!f) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      try {
        const parsed = JSON.parse(ev.target.result);
        if (!parsed || typeof parsed !== 'object' || !parsed.data || typeof parsed.data !== 'object') {
          toast && toast('Datei ist kein gültiges Backup');
          return;
        }
        // Must contain at least one rf- key
        const rfKeys = Object.keys(parsed.data).filter(k => k.startsWith(RF_PREFIX));
        if (rfKeys.length === 0) {
          toast && toast('Datei enthält keine RentFlow-Daten');
          return;
        }
        setPending({ parsed, fileName: f.name });
      } catch {
        toast && toast('Datei konnte nicht gelesen werden');
      }
    };
    reader.onerror = () => toast && toast('Datei konnte nicht gelesen werden');
    reader.readAsText(f);
  };

  // ── Restore confirmed — läuft komplett server-seitig (reset + bulk) und
  // wartet auf die Bestätigung, BEVOR neu geladen wird. Kein Reload "auf gut
  // Glück" mehr, der den Import durch einen noch nicht fertigen Server-Stand
  // wieder überschreiben könnte.
  const applyImport = () => {
    if (!pending || busy || !window.RFDB) return;
    const { parsed } = pending;
    setBusy(true);
    window.RFDB.importAll(parsed.data)
      .then(() => {
        setPending(null);
        toast && toast('Sicherung wiederhergestellt');
        // Server hat den Import jetzt bestätigt — sicher, hier neu zu laden.
        window.location.reload();
      })
      .catch((err) => {
        console.error(err);
        setBusy(false);
        toast && toast('Import fehlgeschlagen — bitte erneut versuchen');
        // Sheet bleibt offen, damit der Nutzer es erneut versuchen kann,
        // statt stillschweigend einen halbfertigen Stand zu übernehmen.
      });
  };

  // ── Hard reset: a TRUE factory wipe. Läuft server-seitig; erst NACH
  // Bestätigung durch den Server wird neu geladen.
  const doReset = () => {
    if (busy || !window.RFDB) return;
    setResetOpen(false);
    setBusy(true);
    window.RFDB.resetAll()
      .then(() => {
        toast && toast('Auf Werkszustand zurückgesetzt');
        window.location.reload();
      })
      .catch((err) => {
        console.error(err);
        setBusy(false);
        toast && toast('Zurücksetzen fehlgeschlagen — bitte erneut versuchen');
      });
  };

  return (
    <div>
      <SubHeader title="Datensicherung" onBack={onBack} onClose={onClose} t={t}/>

      {/* Hero: status / last export */}
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{
          background: t.card, borderRadius: 16, padding: 14,
          display: 'flex', alignItems: 'center', gap: 12,
          boxShadow: t.shadowCard,
        }}>
          <div style={{
            width: 48, height: 48, borderRadius: 12, flexShrink: 0,
            background: lastExport ? '#34C75922' : '#FF950022',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon
              d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4 M7 10l5 5 5-5 M12 15V3"
              color={lastExport ? '#34C759' : '#FF9500'} size={24} sw={1.9}/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: t.text, letterSpacing: -0.2 }}>
              {lastExportFmt ? 'Letzte Sicherung' : 'Noch keine Sicherung'}
            </div>
            <div style={{ fontSize: 12, color: t.textSec, marginTop: 2, lineHeight: 1.4 }}>
              {lastExportFmt
                ? lastExportFmt
                : 'Erstelle ein Backup um deine Daten zu sichern.'}
            </div>
          </div>
        </div>
      </div>

      {/* Datenbestand */}
      <GroupLabel t={t}>Aktueller Datenbestand</GroupLabel>
      <GroupCard t={t}>
        <div style={{ padding: '4px 14px' }}>
          <StatLine t={t} label="Equipment"    value={stats.equipment}/>
          <StatLine t={t} label="Zubehör"      value={stats.accessories}/>
          <StatLine t={t} label="Mietverträge" value={stats.rentals}/>
          <StatLine t={t} label="Termine"      value={stats.events}/>
          <StatLine t={t} label="Posteingang"  value={stats.emails}/>
          <StatLine t={t} label="Protokolle"   value={stats.protocols}/>
          <StatLine t={t} label="Schnelltexte" value={stats.quicktexts}/>
          <StatLine t={t} label="Workflows"    value={stats.workflows}/>
          <StatLine t={t} label="Kundenbewertungen" value={stats.reviews}/>
          <StatLine t={t} label="Aufgaben"     value={stats.tasks}/>
          <StatLine t={t} label="Buchungen (Finanzen)" value={stats.transactions}/>
          <StatLine t={t} label="Dokumente"    value={stats.docs}/>
          <StatLine t={t} label="Backup-Grösse" value={fmtBytes(size)} last/>
        </div>
      </GroupCard>

      {/* Export */}
      <GroupLabel t={t}>Sicherung erstellen</GroupLabel>
      <div style={{ padding: '0 16px' }}>
        <Pressable onClick={doExport} scale={0.985}>
          <div style={{
            background: t.accent, color: '#fff',
            padding: '14px 16px', borderRadius: 14,
            display: 'flex', alignItems: 'center', gap: 12,
            boxShadow: t.shadowCard,
          }}>
            <Icon d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4 M7 10l5 5 5-5 M12 15V3" color="#fff" size={20} sw={2}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: -0.1 }}>Backup exportieren</div>
              <div style={{ fontSize: 12, opacity: 0.85, marginTop: 1 }}>Als .json-Datei herunterladen</div>
            </div>
          </div>
        </Pressable>
      </div>
      <HintLine t={t}>
        Enthält alle Mietverträge, Equipment, Termine, Dokumente, Protokolle und das Firmenprofil.
        Bewahre die Datei an einem sicheren Ort auf — z.B. iCloud Drive.
      </HintLine>

      {/* Import */}
      <GroupLabel t={t}>Sicherung wiederherstellen</GroupLabel>
      <div style={{ padding: '0 16px' }}>
        <Pressable onClick={openPicker} scale={0.985}>
          <div style={{
            background: t.card, color: t.text,
            padding: '14px 16px', borderRadius: 14,
            display: 'flex', alignItems: 'center', gap: 12,
            boxShadow: t.shadowCard,
            border: `0.5px solid ${t.sep}`,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 9, background: t.accentSoft,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icon d="M21 9v10a2 2 0 01-2 2H5a2 2 0 01-2-2V9 M17 14l-5-5-5 5 M12 9v12" color={t.accent} size={18} sw={2}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: -0.1 }}>Backup importieren</div>
              <div style={{ fontSize: 12, color: t.textSec, marginTop: 1 }}>.json-Datei vom Gerät auswählen</div>
            </div>
            <Icon d={icons.chev} color={t.textTer} size={15} sw={2.2}/>
          </div>
        </Pressable>
        <input ref={fileRef} type="file" accept="application/json,.json" onChange={onFile} style={{ display: 'none' }}/>
      </div>
      <HintLine t={t}>
        Beim Import werden alle aktuellen Daten in der App ersetzt. Du wirst vorher gefragt.
      </HintLine>

      {/* Gefahrenzone */}
      <GroupLabel t={t}>Gefahrenzone</GroupLabel>
      <GroupCard t={t}>
        <ListRow t={t} last
          title="App auf Werkszustand zurücksetzen"
          sub="Löscht ALLE Daten unwiderruflich — Equipment, Mieter, Termine, Buchungen, Aufgaben, E‑Mails, Dokumente, Kategorien, Logistik, Firmenprofil und alle Einstellungen. Die App startet wie frisch installiert."
          right={
            <Pressable onClick={() => setResetOpen(true)} scale={0.95}>
              <div style={{
                padding: '7px 12px', borderRadius: 9,
                background: t.redSoft, color: t.red,
                fontSize: 13, fontWeight: 600,
              }}>Werkszustand</div>
            </Pressable>
          }
        />
      </GroupCard>

      <div style={{ height: 24 }}/>

      {/* Sheets */}
      <ImportConfirm open={!!pending} parsed={pending && pending.parsed}
        fileName={pending && pending.fileName} t={t} busy={busy}
        onCancel={() => setPending(null)} onConfirm={applyImport}/>

      <Confirm open={resetOpen}
        title="App auf Werkszustand zurücksetzen?"
        message="Alle Daten — Equipment, Mieter, Termine, Buchungen, Aufgaben, E-Mails, Dokumente, Firmenprofil und Einstellungen — werden unwiderruflich gelöscht und die App auf den Werkszustand zurückgesetzt. Wenn du die Daten behalten möchtest, exportiere vorher eine Sicherung."
        confirmLabel="Werkszustand"
        onCancel={() => setResetOpen(false)}
        onConfirm={busy ? () => {} : doReset}/>
    </div>
  );
}

Object.assign(window, { BackupView });