/* ============================================================
   HOCHZEITSPLANER — Daten-Tab (PDF Import)
   ============================================================ */

function ImportView({ baseData, currentData, override, onApply, onReset }) {
  const [state, setState] = React.useState({ status: "idle" }); // idle | parsing | ready | applied | error
  const [parsed, setParsed] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [filename, setFilename] = React.useState(null);
  const fileInputRef = React.useRef(null);
  const [dragging, setDragging] = React.useState(false);

  const handleFile = async (file) => {
    if (!file) return;
    if (!file.name.toLowerCase().endsWith(".pdf")) {
      setError("Bitte eine PDF-Datei auswählen.");
      setState({ status: "error" });
      return;
    }
    setFilename(file.name);
    setState({ status: "parsing" });
    setError(null);
    try {
      const result = await parsePdfFile(file);
      setParsed(result);
      setState({ status: "ready" });
    } catch (e) {
      console.error(e);
      setError("PDF konnte nicht gelesen werden: " + e.message);
      setState({ status: "error" });
    }
  };

  const onDrop = (e) => {
    e.preventDefault();
    setDragging(false);
    const file = e.dataTransfer.files[0];
    if (file) handleFile(file);
  };

  const apply = () => {
    onApply(parsed);
    setState({ status: "applied" });
    setTimeout(() => setState({ status: "idle" }), 2000);
    setParsed(null);
    setFilename(null);
  };

  const reset = () => {
    if (!confirm("Wirklich alle importierten Daten löschen und zur Original-Version zurückkehren?")) return;
    onReset();
  };

  const lastSavedAt = override?._meta?.savedAt;

  return (
    <div>
      <SectionHead
        eyebrow="Daten verwalten"
        title="<em>PDF</em> hochladen"
        sub="Lade die aktuellste Numbers-PDF, der Planer aktualisiert sich automatisch"
      />

      {/* Current state info */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 0,
        border: "1px solid var(--rule)",
        background: "var(--paper)",
        marginBottom: 32,
      }}>
        <div style={{ padding: 24, borderRight: "1px solid var(--rule)" }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Aktuelle Quelle</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 28 }}>
            {override ? "PDF-Import" : "Original-Daten"}
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-mute)", marginTop: 8 }}>
            {override
              ? (lastSavedAt ? `Importiert: ${new Date(lastSavedAt).toLocaleString("de-DE")}` : "PDF-Daten aktiv")
              : "Daten aus data.js"}
          </div>
        </div>
        <div style={{ padding: 24, display: "flex", alignItems: "center", justifyContent: "flex-end" }}>
          {override && (
            <button onClick={reset} style={btnSecondary}>
              Zurücksetzen
            </button>
          )}
        </div>
      </div>

      {/* Drop zone */}
      {state.status !== "ready" && (
        <div
          onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
          onDragLeave={() => setDragging(false)}
          onDrop={onDrop}
          onClick={() => fileInputRef.current?.click()}
          style={{
            border: `2px dashed ${dragging ? "var(--wine)" : "var(--rule)"}`,
            background: dragging ? "rgba(122,41,41,0.04)" : "var(--paper)",
            padding: "64px 40px",
            textAlign: "center",
            cursor: "pointer",
            transition: "border-color 0.15s, background 0.15s",
            marginBottom: 32,
          }}
        >
          <input
            ref={fileInputRef}
            type="file"
            accept=".pdf,application/pdf"
            onChange={(e) => handleFile(e.target.files[0])}
            style={{ display: "none" }}
          />
          {state.status === "parsing" ? (
            <>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 36, marginBottom: 8 }}>Lese PDF…</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-mute)" }}>
                {filename}
              </div>
            </>
          ) : state.status === "applied" ? (
            <>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 36, marginBottom: 8, color: "var(--sage)" }}>
                ✓ Übernommen
              </div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-mute)" }}>
                Die Planer-Daten wurden aktualisiert.
              </div>
            </>
          ) : (
            <>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 44, marginBottom: 12, letterSpacing: "-0.02em" }}>
                PDF hier ablegen
              </div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--ink-soft)", marginBottom: 20 }}>
                oder klicken um auszuwählen
              </div>
              <div style={{
                display: "inline-block",
                padding: "10px 24px",
                background: "var(--ink)",
                color: "var(--paper)",
                fontSize: 11,
                fontFamily: "var(--font-body)",
                textTransform: "uppercase",
                letterSpacing: "0.18em",
              }}>
                Datei wählen
              </div>
              <div style={{ marginTop: 24, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-mute)" }}>
                Aus Numbers: <em>Datei → Exportieren → PDF</em>
              </div>
            </>
          )}
        </div>
      )}

      {/* Error */}
      {state.status === "error" && (
        <div className="alert" style={{ marginBottom: 24 }}>
          <strong>Fehler.</strong> {error}
          <div style={{ marginTop: 8 }}>
            <button onClick={() => setState({ status: "idle" })} style={btnSecondary}>
              Erneut versuchen
            </button>
          </div>
        </div>
      )}

      {/* Preview & apply */}
      {state.status === "ready" && parsed && (
        <ImportPreview
          parsed={parsed}
          currentData={currentData}
          onApply={apply}
          onCancel={() => { setParsed(null); setState({ status: "idle" }); setFilename(null); }}
          filename={filename}
        />
      )}

      {/* How it works */}
      <div style={{ marginTop: 64, padding: 24, background: "var(--paper)", border: "1px solid var(--rule)" }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>So funktioniert's</div>
        <ol style={{ paddingLeft: 20, fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.7 }}>
          <li>In Numbers das Wedding-Budget öffnen → <em>Datei → Exportieren als → PDF</em></li>
          <li>Die PDF hier hochladen oder hereinziehen</li>
          <li>Vorschau prüfen — Änderungen werden markiert</li>
          <li>Übernehmen — die Daten werden im Browser gespeichert (localStorage)</li>
        </ol>
        <div style={{ marginTop: 16, fontSize: 12, color: "var(--ink-mute)", lineHeight: 1.6 }}>
          <strong>Hinweis:</strong> Reiseplan und Deko-Detailliste sind statisch in <code>data.js</code> hinterlegt und ändern sich nicht durch den Import. Sie haben in der PDF kein einheitliches Format, das verlässlich automatisch parsbar wäre.
        </div>
      </div>
    </div>
  );
}

// =============================================================
//  Preview/Diff component
// =============================================================
function ImportPreview({ parsed, currentData, onApply, onCancel, filename }) {
  // Compute diffs
  const weddingDiffs = diffCategories(currentData.wedding.categories, parsed.wedding);
  const honeymoonDiffs = diffCategories(currentData.honeymoon.categories, parsed.honeymoon);
  const wsDiff = diffSavingsCount(currentData.weddingSavings, parsed.weddingSavings);
  const hsDiff = diffSavingsCount(currentData.honeymoonSavings, parsed.honeymoonSavings);
  const hcDiff = diffSavingsCount(currentData.householdCredit, parsed.householdCredit);

  const hasAnyChange =
    weddingDiffs.changed > 0 || honeymoonDiffs.changed > 0 ||
    wsDiff.changed || hsDiff.changed || hcDiff.changed;

  return (
    <div style={{ marginBottom: 32 }}>
      <div style={{
        padding: "18px 24px",
        background: "var(--paper)",
        border: "1px solid var(--rule)",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: 0,
        borderBottom: "none",
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 4 }}>Vorschau · {filename}</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 24 }}>
            {hasAnyChange ? "Änderungen erkannt" : "Keine Änderungen"}
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button onClick={onCancel} style={btnSecondary}>Abbrechen</button>
          <button onClick={onApply} style={btnPrimary} disabled={!hasAnyChange}>
            {hasAnyChange ? "Übernehmen" : "Identisch"}
          </button>
        </div>
      </div>

      <DiffSection
        title="Hochzeitsbudget"
        before={currentData.wedding.categories}
        after={parsed.wedding}
        diffs={weddingDiffs}
      />
      <DiffSection
        title="Flitterwochen-Budget"
        before={currentData.honeymoon.categories}
        after={parsed.honeymoon}
        diffs={honeymoonDiffs}
      />
      <SavingsDiffBlock
        title="Sparplan Hochzeit"
        before={currentData.weddingSavings}
        after={parsed.weddingSavings}
        diff={wsDiff}
      />
      <SavingsDiffBlock
        title="Sparplan Flitterwochen"
        before={currentData.honeymoonSavings}
        after={parsed.honeymoonSavings}
        diff={hsDiff}
      />
      <SavingsDiffBlock
        title="Haushaltskredit"
        before={currentData.householdCredit}
        after={parsed.householdCredit}
        diff={hcDiff}
      />
    </div>
  );
}

function diffCategories(before, after) {
  const rows = [];
  let changed = 0;
  for (const a of after) {
    const b = before.find((x) => x.name === a.name);
    if (!b) {
      rows.push({ name: a.name, kind: "new", before: null, after: a });
      changed++;
    } else if (b.budget !== a.budget || b.paid !== a.paid) {
      rows.push({
        name: a.name,
        kind: "changed",
        before: b,
        after: a,
        budgetDelta: a.budget - b.budget,
        paidDelta: a.paid - b.paid,
      });
      changed++;
    } else {
      rows.push({ name: a.name, kind: "same", before: b, after: a });
    }
  }
  return { rows, changed };
}

function diffSavingsCount(before, after) {
  if (before.length !== after.length) return { changed: true, count: Math.abs(before.length - after.length), beforeCount: before.length, afterCount: after.length, beforeTotal: savingsTotal(before), afterTotal: savingsTotal(after) };
  // Same length; check sums
  const bs = savingsTotal(before);
  const as_ = savingsTotal(after);
  return { changed: bs !== as_, count: 0, beforeCount: before.length, afterCount: after.length, beforeTotal: bs, afterTotal: as_ };
}
function savingsTotal(rows) {
  return rows.reduce((a, r) => a + r.sheep + r.shepard, 0);
}

function DiffSection({ title, before, after, diffs }) {
  const changedCount = diffs.changed;
  return (
    <div style={{ border: "1px solid var(--rule)", borderTop: "none", background: "var(--paper)" }}>
      <div style={{ padding: "14px 24px", borderBottom: "1px solid var(--rule-soft)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 20 }}>{title}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: changedCount ? "var(--terra)" : "var(--ink-mute)" }}>
          {changedCount ? `${changedCount} Änderung${changedCount === 1 ? "" : "en"}` : "unverändert"}
        </div>
      </div>
      <div style={{ padding: "0 24px" }}>
        {diffs.rows.map((r, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr 1fr 1fr",
            gap: 16,
            padding: "10px 0",
            borderBottom: i < diffs.rows.length - 1 ? "1px solid var(--rule-soft)" : "none",
            alignItems: "center",
            fontSize: 13,
            opacity: r.kind === "same" ? 0.55 : 1,
          }}>
            <div style={{ fontWeight: r.kind === "same" ? 400 : 500 }}>
              {r.kind === "new" && <span style={tagBadge("new")}>NEU</span>}
              {r.kind === "changed" && <span style={tagBadge("changed")}>ΔΔ</span>}
              {r.name}
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-mute)" }}>
              {r.before ? fmtEUR(r.before.budget) : "—"} → <span style={{ color: "var(--ink)" }}>{fmtEUR(r.after.budget)}</span>
              {r.kind === "changed" && r.budgetDelta !== 0 && (
                <span style={{ color: r.budgetDelta > 0 ? "var(--terra)" : "var(--sage)", marginLeft: 6 }}>
                  ({r.budgetDelta > 0 ? "+" : ""}{fmtEUR(r.budgetDelta)})
                </span>
              )}
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-mute)" }}>
              {r.before ? fmtEUR(r.before.paid) : "—"} → <span style={{ color: "var(--ink)" }}>{fmtEUR(r.after.paid)}</span>
              {r.kind === "changed" && r.paidDelta !== 0 && (
                <span style={{ color: r.paidDelta > 0 ? "var(--wine)" : "var(--ink-mute)", marginLeft: 6 }}>
                  ({r.paidDelta > 0 ? "+" : ""}{fmtEUR(r.paidDelta)})
                </span>
              )}
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-mute)", textAlign: "right" }}>
              Budget · Bezahlt
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SavingsDiffBlock({ title, before, after, diff }) {
  return (
    <div style={{ border: "1px solid var(--rule)", borderTop: "none", background: "var(--paper)" }}>
      <div style={{ padding: "14px 24px", borderBottom: "1px solid var(--rule-soft)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 20 }}>{title}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: diff.changed ? "var(--terra)" : "var(--ink-mute)" }}>
          {diff.changed ? "geändert" : "unverändert"}
        </div>
      </div>
      <div style={{ padding: "16px 24px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Vorher</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>
            {diff.beforeCount} Einträge · {fmtEUR(diff.beforeTotal)} kumuliert
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Aus PDF</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>
            {diff.afterCount} Einträge · {fmtEUR(diff.afterTotal)} kumuliert
            {diff.changed && (
              <span style={{ color: diff.afterTotal > diff.beforeTotal ? "var(--sage)" : "var(--terra)", marginLeft: 8 }}>
                ({diff.afterTotal - diff.beforeTotal > 0 ? "+" : ""}{fmtEUR(diff.afterTotal - diff.beforeTotal)})
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

const btnPrimary = {
  background: "var(--ink)",
  color: "var(--paper)",
  border: "1px solid var(--ink)",
  fontFamily: "var(--font-body)",
  fontSize: 11,
  letterSpacing: "0.18em",
  textTransform: "uppercase",
  padding: "10px 18px",
  cursor: "pointer",
};
const btnSecondary = {
  background: "transparent",
  color: "var(--ink-soft)",
  border: "1px solid var(--rule)",
  fontFamily: "var(--font-body)",
  fontSize: 11,
  letterSpacing: "0.18em",
  textTransform: "uppercase",
  padding: "10px 18px",
  cursor: "pointer",
};
const tagBadge = (kind) => ({
  display: "inline-block",
  padding: "2px 6px",
  fontSize: 9,
  fontFamily: "var(--font-mono)",
  letterSpacing: "0.1em",
  marginRight: 8,
  borderRadius: 2,
  background: kind === "new" ? "var(--sage-soft)" : "var(--gold-soft)",
  color: kind === "new" ? "var(--sage)" : "var(--gold-deep)",
});

Object.assign(window, { ImportView });