// ──────────────────────────────────────────────────────────────
// Mietangebot Generator – React-App
// Persistenz erfolgt über die Server-API (/api/objekte).
// ──────────────────────────────────────────────────────────────

const { useState, useEffect, useRef } = React;

const VERMIETER = "Steinwert Immobilien GmbH, Austinstraße 56, 56075 Koblenz";

const DEFAULT_OBJEKT = {
  id: "",
  name: "",
  anschrift: "",
  lage: "",
  erstbezug: "",
  gesamtheizflaeche: "",
  gesamtgroesse: "",
  wohnflaeche: "",
  heizungsart: "",
  energieausweis: "liegt vor",
  energiekennwert: "",
  oeffentlicheFoerderung: "nein",
  zimmer: "",
  kueche: true,
  bad: true,
  balkon: false,
  staffelmiete: "nein",
  indexmiete: "ja",
  aufzug: "nein",
  garage: "nein",
  garageUntrennbar: "nein",
  garageUntervermietung: "nein",
  mietverhaeltnis: "Hauptmietverhältnis",
  modernisierungspauschale: "-",
  kabelGebuehren: "-",
  mietergarten: "-",
  betreuungskosten: "-",
  heizkosten: "",
  warmwasserInHeizkosten: "nein",
  warmwasserErzeugungHeizung: false,
  warmwasserOrt: "",
  warmwasserGastherme: "nein",
  kochgas: "nein",
  haushaltsenergie: "-",
  garageKosten: "",
  wohnraum: "leer",
  renovierung: "nein",
  bodenbelag: "ja",
  spuele: "nein",
  gemeinschaftswaschmaschine: "nein",
  sonstigeEinrichtung: "nein",
  artDerEinrichtung: "",
  mieten: [{ personenAnzahl: 5, kaltmiete: "", betriebskosten: "" }],
};

const HEIZUNGSARTEN = [
  "Gas – Zentralheizung", "Öl – Zentralheizung", "Kohle – Sammelheizung",
  "Gas – Direktverbraucher", "Öl – Direktverbraucher", "Kohle – Direktverbraucher",
  "Fernwärme", "Elektro – Sammelheizung", "Elektro – Direktverbraucher",
];

// ─── Server-Persistenz ─────────────────────────────────────────
async function loadObjekte() {
  try {
    const r = await fetch("/api/objekte");
    if (!r.ok) throw new Error("HTTP " + r.status);
    return await r.json();
  } catch (err) {
    console.error("loadObjekte:", err);
    alert("Fehler beim Laden der Daten vom Server: " + err.message);
    return [];
  }
}

async function saveObjekte(data) {
  try {
    const r = await fetch("/api/objekte", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    if (!r.ok) throw new Error("HTTP " + r.status);
    return await r.json();
  } catch (err) {
    console.error("saveObjekte:", err);
    alert("Fehler beim Speichern auf dem Server: " + err.message + "\n\nÄnderungen sind möglicherweise nicht persistent!");
    throw err;
  }
}

// ─── Styles ────────────────────────────────────────────────────
const font = "'Söhne', 'IBM Plex Sans', -apple-system, sans-serif";

const S = {
  app: { fontFamily: font, minHeight: "100vh", background: "#f5f4f0", color: "#1a1a1a" },
  header: { background: "#1a1a1a", color: "#fff", padding: "20px 28px", display: "flex", alignItems: "center", gap: 16 },
  logo: { fontSize: 22, fontWeight: 700, letterSpacing: "-0.5px" },
  tabs: { display: "flex", gap: 0, marginLeft: "auto" },
  tab: (active) => ({
    padding: "8px 20px", cursor: "pointer", fontSize: 14, fontWeight: active ? 600 : 400,
    color: active ? "#fff" : "#999", borderBottom: active ? "2px solid #e8c547" : "2px solid transparent",
    transition: "all 0.2s",
  }),
  main: { maxWidth: 960, margin: "0 auto", padding: "28px 20px" },
  card: { background: "#fff", borderRadius: 10, padding: "24px 28px", marginBottom: 20, boxShadow: "0 1px 4px rgba(0,0,0,0.06)" },
  cardTitle: { fontSize: 17, fontWeight: 700, marginBottom: 16, color: "#1a1a1a", borderBottom: "2px solid #e8c547", paddingBottom: 8, display: "inline-block" },
  grid: (cols = 2) => ({ display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: "12px 20px" }),
  label: { fontSize: 12, fontWeight: 600, color: "#666", marginBottom: 4, display: "block", textTransform: "uppercase", letterSpacing: "0.5px" },
  input: { width: "100%", padding: "8px 10px", border: "1px solid #ddd", borderRadius: 6, fontSize: 14, fontFamily: font, boxSizing: "border-box", outline: "none", transition: "border 0.2s" },
  select: { width: "100%", padding: "8px 10px", border: "1px solid #ddd", borderRadius: 6, fontSize: 14, fontFamily: font, boxSizing: "border-box", background: "#fff" },
  btn: (primary) => ({
    padding: "10px 24px", borderRadius: 8, border: "none", fontSize: 14, fontWeight: 600, cursor: "pointer", fontFamily: font,
    background: primary ? "#1a1a1a" : "#eee", color: primary ? "#fff" : "#333", transition: "all 0.2s",
  }),
  btnSmall: (color = "#e8c547") => ({
    padding: "5px 12px", borderRadius: 6, border: "none", fontSize: 12, fontWeight: 600, cursor: "pointer",
    background: color, color: color === "#e8c547" ? "#1a1a1a" : "#fff", fontFamily: font,
  }),
  objektItem: (selected) => ({
    padding: "12px 16px", borderRadius: 8, cursor: "pointer", marginBottom: 6, transition: "all 0.15s",
    background: selected ? "#1a1a1a" : "#f8f7f5", color: selected ? "#fff" : "#1a1a1a",
    border: selected ? "1px solid #1a1a1a" : "1px solid #e8e6e0",
  }),
  tag: { display: "inline-block", padding: "2px 8px", borderRadius: 4, fontSize: 11, fontWeight: 600, background: "#e8c547", color: "#1a1a1a", marginLeft: 8 },
};

function Field({ label, children, span }) {
  return (
    <div style={span ? { gridColumn: `span ${span}` } : {}}>
      <label style={S.label}>{label}</label>
      {children}
    </div>
  );
}

function Input({ value, onChange, placeholder, type = "text", style }) {
  return <input type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} style={{ ...S.input, ...style }} />;
}

function Select({ value, onChange, options }) {
  return (
    <select value={value} onChange={e => onChange(e.target.value)} style={S.select}>
      {options.map(o => typeof o === "string" ? <option key={o} value={o}>{o}</option> : <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  );
}

function RadioRow({ value, onChange, options }) {
  return (
    <div style={{ display: "flex", gap: 16, paddingTop: 4 }}>
      {options.map(o => (
        <label key={o} style={{ fontSize: 13, cursor: "pointer", display: "flex", alignItems: "center", gap: 4 }}>
          <input type="radio" checked={value === o} onChange={() => onChange(o)} /> {o}
        </label>
      ))}
    </div>
  );
}

// ─── Objekt Form ───
function ObjektForm({ objekt, onChange, onSave, onCancel }) {
  const u = (key) => (val) => onChange({ ...objekt, [key]: val });
  const mieten = objekt.mieten || [];

  const addMiete = () => onChange({ ...objekt, mieten: [...mieten, { personenAnzahl: mieten.length > 0 ? Math.max(...mieten.map(m => m.personenAnzahl)) + 1 : 1, kaltmiete: "", betriebskosten: "" }] });
  const updateMiete = (i, field, val) => {
    const nm = [...mieten];
    nm[i] = { ...nm[i], [field]: val };
    onChange({ ...objekt, mieten: nm });
  };
  const removeMiete = (i) => onChange({ ...objekt, mieten: mieten.filter((_, j) => j !== i) });

  return (
    <div>
      <div style={S.card}>
        <div style={S.cardTitle}>Grunddaten</div>
        <div style={S.grid(2)}>
          <Field label="Interner Name *"><Input value={objekt.name} onChange={u("name")} placeholder="z.B. Dortmund Hauptstr. 12" /></Field>
          <Field label="Anschrift Mietobjekt *"><Input value={objekt.anschrift} onChange={u("anschrift")} placeholder="Straße Nr, PLZ Ort" /></Field>
          <Field label="Lage der Wohnung"><Input value={objekt.lage} onChange={u("lage")} placeholder="z.B. 2. OG links" /></Field>
          <Field label="Erstbezug des Hauses"><Input value={objekt.erstbezug} onChange={u("erstbezug")} placeholder="z.B. 1985" /></Field>
        </div>
      </div>

      <div style={S.card}>
        <div style={S.cardTitle}>Flächen & Gebäude</div>
        <div style={S.grid(3)}>
          <Field label="Gesamtheizfläche Gebäude (m²)"><Input value={objekt.gesamtheizflaeche} onChange={u("gesamtheizflaeche")} /></Field>
          <Field label="Gesamtgröße Wohnung (m²)"><Input value={objekt.gesamtgroesse} onChange={u("gesamtgroesse")} /></Field>
          <Field label="Wohnfläche (m²)"><Input value={objekt.wohnflaeche} onChange={u("wohnflaeche")} /></Field>
        </div>
        <div style={{ ...S.grid(3), marginTop: 12 }}>
          <Field label="Anzahl Zimmer"><Input value={objekt.zimmer} onChange={u("zimmer")} /></Field>
          <Field label="Küche / Bad / Balkon">
            <div style={{ display: "flex", gap: 16, paddingTop: 6 }}>
              <label style={{ fontSize: 13, cursor: "pointer" }}><input type="checkbox" checked={objekt.kueche} onChange={e => u("kueche")(e.target.checked)} /> Küche</label>
              <label style={{ fontSize: 13, cursor: "pointer" }}><input type="checkbox" checked={objekt.bad} onChange={e => u("bad")(e.target.checked)} /> Bad</label>
              <label style={{ fontSize: 13, cursor: "pointer" }}><input type="checkbox" checked={objekt.balkon} onChange={e => u("balkon")(e.target.checked)} /> Balkon</label>
            </div>
          </Field>
          <Field label="Wohnraum">
            <Select value={objekt.wohnraum} onChange={u("wohnraum")} options={["leer", "teilmöbliert", "vollmöbliert"]} />
          </Field>
        </div>
      </div>

      <div style={S.card}>
        <div style={S.cardTitle}>Heizung & Energie</div>
        <div style={S.grid(2)}>
          <Field label="Heizungsart"><Select value={objekt.heizungsart} onChange={u("heizungsart")} options={[{ value: "", label: "— Bitte wählen —" }, ...HEIZUNGSARTEN.map(h => ({ value: h, label: h }))]} /></Field>
          <Field label="Energieausweis"><RadioRow value={objekt.energieausweis} onChange={u("energieausweis")} options={["liegt vor", "liegt nicht vor"]} /></Field>
          <Field label="Energiekennwert (kWh/m²·a)"><Input value={objekt.energiekennwert} onChange={u("energiekennwert")} /></Field>
          <Field label="Heizkosten (€)"><Input value={objekt.heizkosten} onChange={u("heizkosten")} placeholder="monatlich" /></Field>
        </div>
        <div style={{ ...S.grid(3), marginTop: 12 }}>
          <Field label="Warmwasser in Heizkosten?"><RadioRow value={objekt.warmwasserInHeizkosten} onChange={u("warmwasserInHeizkosten")} options={["ja", "nein"]} /></Field>
          <Field label="Warmwasser über Gastherme?"><RadioRow value={objekt.warmwasserGastherme} onChange={u("warmwasserGastherme")} options={["ja", "nein"]} /></Field>
          <Field label="Kochgas enthalten?"><RadioRow value={objekt.kochgas} onChange={u("kochgas")} options={["ja", "nein"]} /></Field>
        </div>
      </div>

      <div style={S.card}>
        <div style={S.cardTitle}>Ausstattung & Optionen</div>
        <div style={S.grid(3)}>
          <Field label="Mietverhältnis"><Select value={objekt.mietverhaeltnis} onChange={u("mietverhaeltnis")} options={["Hauptmietverhältnis", "Untermietverhältnis", "sonstiges Nutzungsverhältnis"]} /></Field>
          <Field label="Öffentliche Förderung?"><RadioRow value={objekt.oeffentlicheFoerderung} onChange={u("oeffentlicheFoerderung")} options={["ja", "nein"]} /></Field>
          <Field label="Staffelmiete?"><RadioRow value={objekt.staffelmiete} onChange={u("staffelmiete")} options={["ja", "nein"]} /></Field>
          <Field label="Indexmiete?"><RadioRow value={objekt.indexmiete} onChange={u("indexmiete")} options={["ja", "nein"]} /></Field>
          <Field label="Aufzug vorhanden?"><RadioRow value={objekt.aufzug} onChange={u("aufzug")} options={["ja", "nein"]} /></Field>
          <Field label="Garage/Stellplatz?"><RadioRow value={objekt.garage} onChange={u("garage")} options={["ja", "nein"]} /></Field>
        </div>
        {objekt.garage === "ja" && (
          <div style={{ ...S.grid(3), marginTop: 12 }}>
            <Field label="Untrennbar verbunden?"><RadioRow value={objekt.garageUntrennbar} onChange={u("garageUntrennbar")} options={["ja", "nein"]} /></Field>
            <Field label="Untervermietung gestattet?"><RadioRow value={objekt.garageUntervermietung} onChange={u("garageUntervermietung")} options={["ja", "nein"]} /></Field>
            <Field label="Kosten Garage (€)"><Input value={objekt.garageKosten} onChange={u("garageKosten")} /></Field>
          </div>
        )}
        <div style={{ ...S.grid(3), marginTop: 12 }}>
          <Field label="Renovierung nötig?"><Select value={objekt.renovierung} onChange={u("renovierung")} options={["ja", "nein", "tapezieren", "streichen", "keine Aussage möglich"]} /></Field>
          <Field label="Bodenbelag?"><RadioRow value={objekt.bodenbelag} onChange={u("bodenbelag")} options={["ja", "nein"]} /></Field>
          <Field label="Spüle?"><RadioRow value={objekt.spuele} onChange={u("spuele")} options={["ja", "nein"]} /></Field>
          <Field label="Gemeinschaftswaschm.?"><RadioRow value={objekt.gemeinschaftswaschmaschine} onChange={u("gemeinschaftswaschmaschine")} options={["ja", "nein"]} /></Field>
          <Field label="Sonstige Einrichtung?"><RadioRow value={objekt.sonstigeEinrichtung} onChange={u("sonstigeEinrichtung")} options={["ja", "nein"]} /></Field>
          {objekt.sonstigeEinrichtung === "ja" && <Field label="Art der Einrichtung"><Input value={objekt.artDerEinrichtung} onChange={u("artDerEinrichtung")} /></Field>}
        </div>
      </div>

      <div style={S.card}>
        <div style={S.cardTitle}>Nebenkosten (Fixbeträge)</div>
        <div style={S.grid(3)}>
          <Field label="Modernisierungspauschale (€)"><Input value={objekt.modernisierungspauschale} onChange={u("modernisierungspauschale")} placeholder='"-" wenn keine' /></Field>
          <Field label="Kabel-/Sat-Gebühren (€)"><Input value={objekt.kabelGebuehren} onChange={u("kabelGebuehren")} placeholder='"-" wenn keine' /></Field>
          <Field label="Mietergarten (€)"><Input value={objekt.mietergarten} onChange={u("mietergarten")} placeholder='"-" wenn keine' /></Field>
          <Field label="Betreuungskosten (€)"><Input value={objekt.betreuungskosten} onChange={u("betreuungskosten")} placeholder='"-" wenn keine' /></Field>
          <Field label="Haushaltsenergie (€)"><Input value={objekt.haushaltsenergie} onChange={u("haushaltsenergie")} placeholder='"-" wenn keine' /></Field>
        </div>
      </div>

      <div style={S.card}>
        <div style={S.cardTitle}>Mieten nach Personenanzahl</div>
        <p style={{ fontSize: 13, color: "#888", marginBottom: 12 }}>Hier legst du die Kaltmiete und Betriebskosten pro Personenanzahl fest. Der Generator berechnet daraus automatisch Kaution (3× Kaltmiete) und Gesamtmiete.</p>
        {mieten.map((m, i) => (
          <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-end", marginBottom: 8 }}>
            <Field label="Personen"><Input value={m.personenAnzahl} onChange={v => updateMiete(i, "personenAnzahl", Number(v))} type="number" style={{ width: 70 }} /></Field>
            <Field label="Kaltmiete (€)"><Input value={m.kaltmiete} onChange={v => updateMiete(i, "kaltmiete", v)} style={{ width: 120 }} /></Field>
            <Field label="Betriebskosten (€)"><Input value={m.betriebskosten} onChange={v => updateMiete(i, "betriebskosten", v)} style={{ width: 120 }} /></Field>
            <button onClick={() => removeMiete(i)} style={{ ...S.btnSmall("#e74c3c"), marginBottom: 2 }}>×</button>
          </div>
        ))}
        <button onClick={addMiete} style={{ ...S.btnSmall(), marginTop: 8 }}>+ Personenanzahl hinzufügen</button>
      </div>

      <div style={{ display: "flex", gap: 12, justifyContent: "flex-end" }}>
        <button onClick={onCancel} style={S.btn(false)}>Abbrechen</button>
        <button onClick={onSave} style={S.btn(true)}>Objekt speichern</button>
      </div>
    </div>
  );
}

// ─── Print Preview ───
function MietangebotPreview({ objekt, miete, tenant, mietbeginn, personen, datum }) {
  const kaltmiete = parseFloat(miete.kaltmiete) || 0;
  const betriebskosten = parseFloat(miete.betriebskosten) || 0;
  const heizkosten = parseFloat(objekt.heizkosten) || 0;
  const modernisierung = objekt.modernisierungspauschale !== "-" ? (parseFloat(objekt.modernisierungspauschale) || 0) : 0;
  const kabel = objekt.kabelGebuehren !== "-" ? (parseFloat(objekt.kabelGebuehren) || 0) : 0;
  const garten = objekt.mietergarten !== "-" ? (parseFloat(objekt.mietergarten) || 0) : 0;
  const betreuung = objekt.betreuungskosten !== "-" ? (parseFloat(objekt.betreuungskosten) || 0) : 0;
  const garageK = parseFloat(objekt.garageKosten) || 0;
  const haushaltsE = objekt.haushaltsenergie !== "-" ? (parseFloat(objekt.haushaltsenergie) || 0) : 0;
  const gesamtmiete = kaltmiete + betriebskosten + heizkosten + modernisierung + kabel + garten + betreuung + garageK + haushaltsE;
  const kaution = kaltmiete * 3;

  const chk = (v) => v ? "☑" : "☐";
  const ja = (v) => v === "ja";
  const fmt = (v) => typeof v === "number" ? v.toFixed(2).replace(".", ",") : v;

  const ps = {
    page: { width: "210mm", minHeight: "297mm", padding: "15mm 20mm", fontFamily: "Arial, sans-serif", fontSize: "10pt", lineHeight: 1.4, background: "#fff", color: "#000", boxSizing: "border-box" },
    title: { textAlign: "center", fontSize: "16pt", fontWeight: 700, marginBottom: 16, textDecoration: "underline" },
    row: { display: "flex", borderBottom: "1px solid #ccc", padding: "3px 0" },
    lbl: { width: "50%", fontWeight: 400, fontSize: "9pt" },
    val: { width: "50%", fontSize: "9pt" },
    section: { marginTop: 10, marginBottom: 4, fontWeight: 700, fontSize: "10pt", borderBottom: "1px solid #000", paddingBottom: 2 },
    chkRow: { display: "flex", gap: 16, fontSize: "9pt", padding: "2px 0" },
  };

  return (
    <div id="mietangebot-print" style={ps.page}>
      <div style={ps.title}>Unverbindliches Mietangebot</div>

      <div style={ps.row}><span style={ps.lbl}>Vermieter (Name, Anschrift):</span><span style={ps.val}>{VERMIETER}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Wohnungssuchender (Name, Anschrift):</span><span style={ps.val}>{tenant}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Mietobjekt (Anschrift, Lage):</span><span style={ps.val}>{objekt.anschrift}{objekt.lage ? `, ${objekt.lage}` : ""}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Geplanter Mietbeginn:</span><span style={ps.val}>{mietbeginn}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Einzug mit:</span><span style={ps.val}>{personen} Personen</span></div>

      <div style={ps.chkRow}>
        <span>{chk(objekt.mietverhaeltnis === "Hauptmietverhältnis")} Hauptmietverhältnis</span>
        <span>{chk(objekt.mietverhaeltnis === "Untermietverhältnis")} Untermietverhältnis</span>
        <span>{chk(objekt.mietverhaeltnis === "sonstiges Nutzungsverhältnis")} sonstiges Nutzungsverhältnis</span>
      </div>

      <div style={ps.section}>Gebäudedaten</div>
      <div style={ps.row}><span style={ps.lbl}>Erstbezug des Hauses:</span><span style={ps.val}>{objekt.erstbezug}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Gesamtheizfläche des Gebäudes:</span><span style={ps.val}>{objekt.gesamtheizflaeche} m²</span></div>
      <div style={ps.row}><span style={ps.lbl}>Gesamtgröße der Wohnung:</span><span style={ps.val}>{objekt.gesamtgroesse} m²</span></div>
      <div style={ps.row}><span style={ps.lbl}>davon Wohnfläche der Wohnung:</span><span style={ps.val}>{objekt.wohnflaeche} m²</span></div>

      <div style={ps.row}><span style={ps.lbl}>Heizungsart:</span><span style={ps.val}>{objekt.heizungsart}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Gebäude-Energieausweis:</span><span style={ps.val}>{objekt.energieausweis}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Energiekennwert:</span><span style={ps.val}>{objekt.energiekennwert} kWh/(m²·a)</span></div>
      <div style={ps.row}><span style={ps.lbl}>Öffentliche Förderung?</span><span style={ps.val}>{chk(ja(objekt.oeffentlicheFoerderung))} ja  {chk(!ja(objekt.oeffentlicheFoerderung))} nein</span></div>
      <div style={ps.row}><span style={ps.lbl}>Anzahl der Zimmer:</span><span style={ps.val}>{objekt.zimmer} {objekt.kueche ? "+ Küche" : ""} {objekt.bad ? "+ Bad" : ""} {objekt.balkon ? "+ Balkon" : ""}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Staffelmiete?</span><span style={ps.val}>{chk(ja(objekt.staffelmiete))} ja  {chk(!ja(objekt.staffelmiete))} nein</span></div>
      <div style={ps.row}><span style={ps.lbl}>Indexmiete?</span><span style={ps.val}>{chk(ja(objekt.indexmiete))} ja  {chk(!ja(objekt.indexmiete))} nein</span></div>
      <div style={ps.row}><span style={ps.lbl}>Aufzug vorhanden?</span><span style={ps.val}>{chk(ja(objekt.aufzug))} ja  {chk(!ja(objekt.aufzug))} nein</span></div>
      <div style={ps.row}><span style={ps.lbl}>Garage / Stellplatz vorhanden?</span><span style={ps.val}>{chk(ja(objekt.garage))} ja  {chk(!ja(objekt.garage))} nein</span></div>
      {ja(objekt.garage) && <>
        <div style={ps.row}><span style={ps.lbl}>Garage untrennbar verbunden?</span><span style={ps.val}>{chk(ja(objekt.garageUntrennbar))} ja  {chk(!ja(objekt.garageUntrennbar))} nein</span></div>
        <div style={ps.row}><span style={ps.lbl}>Untervermietung Garage gestattet?</span><span style={ps.val}>{chk(ja(objekt.garageUntervermietung))} ja  {chk(!ja(objekt.garageUntervermietung))} nein</span></div>
      </>}

      <div style={ps.section}>Mietkosten</div>
      <div style={ps.row}><span style={ps.lbl}>Kaltmiete:</span><span style={ps.val}>{fmt(kaltmiete)} €</span></div>
      <div style={ps.row}><span style={ps.lbl}>Modernisierungspauschale:</span><span style={ps.val}>{objekt.modernisierungspauschale === "-" ? "-" : fmt(modernisierung) + " €"}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Kabel-/Sat-Gebühren:</span><span style={ps.val}>{objekt.kabelGebuehren === "-" ? "-" : fmt(kabel) + " €"}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Mietergarten:</span><span style={ps.val}>{objekt.mietergarten === "-" ? "-" : fmt(garten) + " €"}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Betreuungskosten:</span><span style={ps.val}>{objekt.betreuungskosten === "-" ? "-" : fmt(betreuung) + " €"}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Heizkosten:</span><span style={ps.val}>{fmt(heizkosten)} €</span></div>
      <div style={ps.row}><span style={ps.lbl}>Warmwasserkosten in Heizkosten enthalten?</span><span style={ps.val}>{chk(ja(objekt.warmwasserInHeizkosten))} ja  {chk(!ja(objekt.warmwasserInHeizkosten))} nein</span></div>
      <div style={ps.row}><span style={ps.lbl}>Warmwassererzeugung über Gastherme?</span><span style={ps.val}>{chk(ja(objekt.warmwasserGastherme))} ja  {chk(!ja(objekt.warmwasserGastherme))} nein</span></div>
      <div style={ps.row}><span style={ps.lbl}>Kochgas enthalten?</span><span style={ps.val}>{chk(ja(objekt.kochgas))} ja  {chk(!ja(objekt.kochgas))} nein</span></div>
      <div style={ps.row}><span style={ps.lbl}>Haushaltsenergie:</span><span style={ps.val}>{objekt.haushaltsenergie === "-" ? "-" : fmt(haushaltsE) + " €"}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Betriebskosten:</span><span style={ps.val}>{fmt(betriebskosten)} € pauschal {chk(true)} ja {chk(false)} nein</span></div>
      {ja(objekt.garage) && <div style={ps.row}><span style={ps.lbl}>Kosten Garage / Stellplatz:</span><span style={ps.val}>{fmt(garageK)} €</span></div>}
      <div style={ps.row}><span style={ps.lbl}>Wohnraum:</span><span style={ps.val}>{chk(objekt.wohnraum === "leer")} leer  {chk(objekt.wohnraum === "teilmöbliert")} teilmöbliert  {chk(objekt.wohnraum === "vollmöbliert")} vollmöbliert</span></div>
      <div style={{ ...ps.row, fontWeight: 700, fontSize: "10pt" }}><span style={{ ...ps.lbl, fontWeight: 700 }}>Gesamtmiete:</span><span style={ps.val}>{fmt(gesamtmiete)} €</span></div>
      <div style={ps.row}><span style={ps.lbl}>zu zahlen in dieser Höhe ab:</span><span style={ps.val}>Mietbeginn</span></div>
      <div style={{ ...ps.row, fontWeight: 700 }}><span style={{ ...ps.lbl, fontWeight: 700 }}>Mietkaution (max. 3 Monats-Kaltmieten):</span><span style={ps.val}>{fmt(kaution)} €</span></div>

      <div style={ps.section}>Zustand der Wohnung</div>
      <div style={ps.row}><span style={ps.lbl}>Renovierung durch Mieter:</span><span style={ps.val}>{objekt.renovierung}</span></div>
      <div style={ps.row}><span style={ps.lbl}>Bodenbelag vorhanden?</span><span style={ps.val}>{chk(ja(objekt.bodenbelag))} ja  {chk(!ja(objekt.bodenbelag))} nein</span></div>
      <div style={ps.row}><span style={ps.lbl}>Spüle vorhanden?</span><span style={ps.val}>{chk(ja(objekt.spuele))} ja  {chk(!ja(objekt.spuele))} nein</span></div>
      <div style={ps.row}><span style={ps.lbl}>Gemeinschaftswaschmaschine?</span><span style={ps.val}>{chk(ja(objekt.gemeinschaftswaschmaschine))} ja  {chk(!ja(objekt.gemeinschaftswaschmaschine))} nein</span></div>
      <div style={ps.row}><span style={ps.lbl}>Sonstige Einrichtung?</span><span style={ps.val}>{chk(ja(objekt.sonstigeEinrichtung))} ja  {chk(!ja(objekt.sonstigeEinrichtung))} nein{ja(objekt.sonstigeEinrichtung) ? `  Art: ${objekt.artDerEinrichtung}` : ""}</span></div>

      <div style={{ marginTop: 30, display: "flex", justifyContent: "space-between", paddingTop: 20, borderTop: "1px solid #ccc" }}>
        <div><div style={{ borderTop: "1px solid #000", width: 140, marginTop: 40, paddingTop: 4, fontSize: "9pt" }}>Datum: {datum}</div></div>
        <div><div style={{ borderTop: "1px solid #000", width: 200, marginTop: 40, paddingTop: 4, fontSize: "9pt" }}>Vermieter</div></div>
      </div>
      <div style={{ marginTop: 12, fontSize: "8pt", color: "#666" }}>RKN – V14 &nbsp;&nbsp;&nbsp; Stand: 19.03.2019</div>
    </div>
  );
}

// ─── Main App ───
function App() {
  const [tab, setTab] = useState("generator");
  const [objekte, setObjekte] = useState([]);
  const [loading, setLoading] = useState(true);
  const [editingObjekt, setEditingObjekt] = useState(null);
  const [selectedObjektId, setSelectedObjektId] = useState(null);

  // Generator state
  const [genObjektId, setGenObjektId] = useState("");
  const [genTenant, setGenTenant] = useState("");
  const [genPersonen, setGenPersonen] = useState("");
  const [genMietbeginn, setGenMietbeginn] = useState("");
  const [genDatum, setGenDatum] = useState(new Date().toLocaleDateString("de-DE"));
  const [showPreview, setShowPreview] = useState(false);

  useEffect(() => { loadObjekte().then(d => { setObjekte(d); setLoading(false); }); }, []);

  const save = async (list) => { setObjekte(list); await saveObjekte(list); };

  const handleSaveObjekt = () => {
    if (!editingObjekt.name || !editingObjekt.anschrift) { alert("Name und Anschrift sind Pflichtfelder!"); return; }
    const isNew = !objekte.find(o => o.id === editingObjekt.id);
    const obj = { ...editingObjekt, id: editingObjekt.id || Date.now().toString() };
    const updated = isNew ? [...objekte, obj] : objekte.map(o => o.id === obj.id ? obj : o);
    save(updated);
    setEditingObjekt(null);
  };

  const handleDelete = (id) => {
    if (confirm("Objekt wirklich löschen?")) save(objekte.filter(o => o.id !== id));
  };

  const genObjekt = objekte.find(o => o.id === genObjektId);
  const genMiete = genObjekt?.mieten?.find(m => m.personenAnzahl === Number(genPersonen));

  const handlePrint = () => {
    const el = document.getElementById("mietangebot-print");
    if (!el) return;
    const w = window.open("", "_blank", "width=800,height=1100");
    w.document.write(`<!DOCTYPE html><html><head><meta charset="utf-8"><title>Mietangebot</title><style>
      @page { size: A4; margin: 15mm; }
      body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
      @media print { body { -webkit-print-color-adjust: exact; } }
    </style></head><body>${el.innerHTML}</body></html>`);
    w.document.close();
    setTimeout(() => { w.print(); }, 300);
  };

  if (loading) return <div style={{ ...S.app, display: "flex", alignItems: "center", justifyContent: "center" }}><p>Lade Daten...</p></div>;

  return (
    <div style={S.app}>
      <div style={S.header}>
        <div style={S.logo}>Mietangebot Generator</div>
        <div style={S.tabs}>
          <div style={S.tab(tab === "generator")} onClick={() => { setTab("generator"); setShowPreview(false); }}>Mietangebot erstellen</div>
          <div style={S.tab(tab === "objekte")} onClick={() => { setTab("objekte"); setEditingObjekt(null); }}>Objekte verwalten</div>
        </div>
      </div>

      <div style={S.main}>
        {/* ─── GENERATOR TAB ─── */}
        {tab === "generator" && !showPreview && (
          <div>
            {objekte.length === 0 ? (
              <div style={{ ...S.card, textAlign: "center", padding: 40 }}>
                <p style={{ fontSize: 16, color: "#888" }}>Noch keine Objekte angelegt.</p>
                <button onClick={() => { setTab("objekte"); setEditingObjekt({ ...DEFAULT_OBJEKT }); }} style={S.btn(true)}>Erstes Objekt anlegen</button>
              </div>
            ) : (
              <div style={S.card}>
                <div style={S.cardTitle}>Neues Mietangebot</div>
                <div style={S.grid(2)}>
                  <Field label="Objekt auswählen *">
                    <Select value={genObjektId} onChange={v => { setGenObjektId(v); setGenPersonen(""); }} options={[{ value: "", label: "— Objekt wählen —" }, ...objekte.map(o => ({ value: o.id, label: o.name }))]} />
                  </Field>
                  {genObjekt && (
                    <Field label="Personenanzahl *">
                      <Select value={genPersonen} onChange={setGenPersonen} options={[{ value: "", label: "— Personen wählen —" }, ...(genObjekt.mieten || []).map(m => ({ value: m.personenAnzahl.toString(), label: `${m.personenAnzahl} Personen — ${m.kaltmiete} € Kaltmiete` }))]} />
                    </Field>
                  )}
                  <Field label="Wohnungssuchender (Name, Anschrift) *" span={2}>
                    <Input value={genTenant} onChange={setGenTenant} placeholder="Max Mustermann, Musterstraße 1, 12345 Musterstadt" />
                  </Field>
                  <Field label="Geplanter Mietbeginn *">
                    <Input value={genMietbeginn} onChange={setGenMietbeginn} placeholder="z.B. 01.05.2026" />
                  </Field>
                  <Field label="Datum des Mietangebots">
                    <Input value={genDatum} onChange={setGenDatum} />
                  </Field>
                </div>

                {genObjekt && genMiete && (
                  <div style={{ marginTop: 20, padding: 16, background: "#f8f7f5", borderRadius: 8 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 8, color: "#1a1a1a" }}>Vorschau Kosten</div>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
                      <div><span style={{ fontSize: 11, color: "#888" }}>Kaltmiete</span><div style={{ fontSize: 18, fontWeight: 700 }}>{parseFloat(genMiete.kaltmiete).toFixed(2).replace(".", ",")} €</div></div>
                      <div><span style={{ fontSize: 11, color: "#888" }}>Kaution (3×)</span><div style={{ fontSize: 18, fontWeight: 700 }}>{(parseFloat(genMiete.kaltmiete) * 3).toFixed(2).replace(".", ",")} €</div></div>
                      <div><span style={{ fontSize: 11, color: "#888" }}>Gesamtmiete (ca.)</span><div style={{ fontSize: 18, fontWeight: 700, color: "#2a7d4f" }}>
                        {(parseFloat(genMiete.kaltmiete || 0) + parseFloat(genMiete.betriebskosten || 0) + parseFloat(genObjekt.heizkosten || 0)).toFixed(2).replace(".", ",")} €
                      </div></div>
                    </div>
                  </div>
                )}

                <div style={{ marginTop: 20, display: "flex", justifyContent: "flex-end" }}>
                  <button
                    onClick={() => {
                      if (!genObjektId || !genPersonen || !genTenant || !genMietbeginn) { alert("Bitte alle Pflichtfelder ausfüllen!"); return; }
                      if (!genMiete) { alert("Für diese Personenanzahl sind keine Mietdaten hinterlegt!"); return; }
                      setShowPreview(true);
                    }}
                    style={{ ...S.btn(true), padding: "12px 36px", fontSize: 15 }}
                    disabled={!genObjektId || !genPersonen || !genTenant || !genMietbeginn}
                  >
                    Mietangebot erstellen →
                  </button>
                </div>
              </div>
            )}
          </div>
        )}

        {tab === "generator" && showPreview && genObjekt && genMiete && (
          <div>
            <div style={{ display: "flex", gap: 12, marginBottom: 16 }}>
              <button onClick={() => setShowPreview(false)} style={S.btn(false)}>← Zurück</button>
              <button onClick={handlePrint} style={{ ...S.btn(true), background: "#2a7d4f" }}>Drucken / Als PDF speichern</button>
            </div>
            <div style={{ background: "#fff", borderRadius: 10, overflow: "hidden", boxShadow: "0 4px 20px rgba(0,0,0,0.12)" }}>
              <MietangebotPreview objekt={genObjekt} miete={genMiete} tenant={genTenant} mietbeginn={genMietbeginn} personen={genPersonen} datum={genDatum} />
            </div>
          </div>
        )}

        {/* ─── OBJEKTE TAB ─── */}
        {tab === "objekte" && !editingObjekt && (
          <div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
              <h2 style={{ fontSize: 20, fontWeight: 700, margin: 0 }}>Objekte ({objekte.length})</h2>
              <button onClick={() => setEditingObjekt({ ...DEFAULT_OBJEKT })} style={S.btn(true)}>+ Neues Objekt</button>
            </div>
            {objekte.length === 0 && (
              <div style={{ ...S.card, textAlign: "center", padding: 40, color: "#888" }}>
                Noch keine Objekte. Klicke auf „+ Neues Objekt" um zu starten.
              </div>
            )}
            {objekte.map(o => (
              <div key={o.id} style={S.objektItem(selectedObjektId === o.id)} onClick={() => setSelectedObjektId(selectedObjektId === o.id ? null : o.id)}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div>
                    <span style={{ fontWeight: 600 }}>{o.name}</span>
                    <span style={S.tag}>{(o.mieten || []).length} Mietstufen</span>
                  </div>
                  <div style={{ display: "flex", gap: 6 }}>
                    <button onClick={e => { e.stopPropagation(); setEditingObjekt({ ...o }); }} style={S.btnSmall()}>Bearbeiten</button>
                    <button onClick={e => { e.stopPropagation(); handleDelete(o.id); }} style={S.btnSmall("#e74c3c")}>Löschen</button>
                  </div>
                </div>
                {selectedObjektId === o.id && (
                  <div style={{ marginTop: 10, fontSize: 12, color: selectedObjektId === o.id ? "#ccc" : "#888", lineHeight: 1.8 }}>
                    <div>📍 {o.anschrift}{o.lage ? ` — ${o.lage}` : ""}</div>
                    <div>🏠 {o.zimmer} Zimmer, {o.wohnflaeche} m², {o.heizungsart}</div>
                    <div>💰 Mietstufen: {(o.mieten || []).map(m => `${m.personenAnzahl}P → ${m.kaltmiete}€ KM + ${m.betriebskosten}€ BK`).join(" | ")}</div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

        {tab === "objekte" && editingObjekt && (
          <div>
            <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>{editingObjekt.id ? "Objekt bearbeiten" : "Neues Objekt anlegen"}</h2>
            <ObjektForm
              objekt={editingObjekt}
              onChange={setEditingObjekt}
              onSave={handleSaveObjekt}
              onCancel={() => setEditingObjekt(null)}
            />
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Mount ─────────────────────────────────────────────────────
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);