// Verträge — contract templates: Mietvertrag, Kündigung, Mieterhöhung, etc.
// Templates auto-fill from property + unit + tenant Stammdaten.

const CONTRACT_TEMPLATES = [
  {
    id: 'mietvertrag-wohn',
    title: 'Mietvertrag (Wohnraum)',
    category: 'Vertrag',
    description: 'Standard-Mietvertrag für Wohnraum nach §§ 535 ff. BGB. Unbefristet, Staffelmiete optional.',
    pages: 6,
    fields: ['Mieter', 'Objekt', 'Kaltmiete', 'Nebenkosten', 'Kaution', 'Mietbeginn'],
    icon: 'doc',
    legal: '§§ 535–580a BGB',
  },
  {
    id: 'mietvertrag-gewerbe',
    title: 'Mietvertrag (Gewerbe)',
    category: 'Vertrag',
    description: 'Gewerblicher Mietvertrag mit Indexmiete-Klausel und Konkurrenzschutz.',
    pages: 8,
    fields: ['Mieter', 'Objekt', 'Nutzungszweck', 'Vertragsdauer', 'Kaltmiete', 'Indexbindung'],
    icon: 'doc',
    legal: '§§ 535 ff. BGB · HGB',
  },
  {
    id: 'staffelmietvertrag',
    title: 'Staffelmietvertrag',
    category: 'Vertrag',
    description: 'Mietvertrag mit vereinbarten jährlichen Mieterhöhungen (§ 557a BGB).',
    pages: 7,
    fields: ['Mieter', 'Objekt', 'Startmiete', 'Staffelung', 'Kaution'],
    icon: 'doc',
    legal: '§ 557a BGB',
  },
  {
    id: 'kuendigung-vermieter',
    title: 'Kündigung durch Vermieter',
    category: 'Kündigung',
    description: 'Ordentliche Kündigung mit Begründung (Eigenbedarf, Pflichtverletzung, wirtschaftl. Verwertung).',
    pages: 2,
    fields: ['Mieter', 'Objekt', 'Kündigungsgrund', 'Kündigungstermin'],
    icon: 'cancel',
    legal: '§§ 573, 568 BGB',
  },
  {
    id: 'kuendigung-fristlos',
    title: 'Fristlose Kündigung',
    category: 'Kündigung',
    description: 'Außerordentliche Kündigung wegen Mietrückstand oder erheblicher Pflichtverletzung.',
    pages: 2,
    fields: ['Mieter', 'Objekt', 'Kündigungsgrund', 'Mietrückstand'],
    icon: 'cancel',
    legal: '§ 543 BGB',
  },
  {
    id: 'kuendigungsbestaetigung',
    title: 'Kündigungsbestätigung',
    category: 'Kündigung',
    description: 'Bestätigung einer Kündigung durch den Mieter mit Übergabetermin.',
    pages: 1,
    fields: ['Mieter', 'Objekt', 'Kündigungseingang', 'Auszugstermin'],
    icon: 'doc',
    legal: '§ 568 BGB',
  },
  {
    id: 'mieterhoehung',
    title: 'Mieterhöhung (Mietspiegel)',
    category: 'Anpassung',
    description: 'Mieterhöhungsverlangen bis zur ortsüblichen Vergleichsmiete.',
    pages: 2,
    fields: ['Mieter', 'Objekt', 'Aktuelle Miete', 'Neue Miete', 'Mietspiegel-Bezug'],
    icon: 'arrow-up',
    legal: '§§ 558 ff. BGB',
  },
  {
    id: 'modernisierung',
    title: 'Modernisierungsankündigung',
    category: 'Anpassung',
    description: 'Ankündigung baulicher Maßnahmen mit Fristen und voraussichtlicher Umlage.',
    pages: 3,
    fields: ['Mieter', 'Objekt', 'Maßnahme', 'Beginn', 'Dauer', 'Umlage'],
    icon: 'wrench',
    legal: '§§ 555c, 559 BGB',
  },
  {
    id: 'uebergabeprotokoll',
    title: 'Übergabeprotokoll',
    category: 'Protokoll',
    description: 'Wohnungsübergabe bei Ein- oder Auszug mit Zählerständen und Mängelliste.',
    pages: 3,
    fields: ['Mieter', 'Objekt', 'Datum', 'Zählerstände', 'Schlüssel'],
    icon: 'clipboard',
    legal: 'Beweissicherung',
  },
  {
    id: 'nebenkostenabrechnung',
    title: 'Nebenkostenabrechnung',
    category: 'Abrechnung',
    description: 'Jahresabrechnung der Betriebskosten nach BetrKV mit Verteilerschlüssel.',
    pages: 4,
    fields: ['Mieter', 'Objekt', 'Abrechnungszeitraum', 'Vorauszahlungen', 'Verteilerschlüssel'],
    icon: 'receipt',
    legal: '§ 556 BGB · BetrKV',
  },
  {
    id: 'mahnung',
    title: 'Mahnung Mietrückstand',
    category: 'Mahnung',
    description: 'Erste / zweite Mahnung mit Zahlungsfrist vor Kündigungsandrohung.',
    pages: 1,
    fields: ['Mieter', 'Objekt', 'Offener Betrag', 'Mahnstufe', 'Frist'],
    icon: 'alert',
    legal: '§ 286 BGB',
  },
  {
    id: 'mietquittung',
    title: 'Mietquittung',
    category: 'Bescheinigung',
    description: 'Quittung über erhaltene Mietzahlung auf Verlangen des Mieters.',
    pages: 1,
    fields: ['Mieter', 'Objekt', 'Zeitraum', 'Betrag'],
    icon: 'receipt',
    legal: '§ 368 BGB',
  },
];

const CATEGORY_COLORS = {
  'Vertrag': 'var(--accent)',
  'Kündigung': 'var(--neg)',
  'Anpassung': 'var(--warn)',
  'Protokoll': 'var(--ink)',
  'Abrechnung': 'var(--ink-3)',
  'Mahnung': 'var(--neg)',
  'Bescheinigung': 'var(--ink-3)',
};

// Sample generated documents (already-created contracts)
const GENERATED_DOCS = [
  { id: 'g1', templateId: 'mietvertrag-wohn', date: '2024-02-01', recipient: 'Mia Bauer', propertyId: 'p4', unitId: 'u11', status: 'unterzeichnet' },
  { id: 'g2', templateId: 'kuendigungsbestaetigung', date: '2026-04-12', recipient: 'Jens Maier', propertyId: 'p2', unitId: 'u8', status: 'versendet' },
  { id: 'g3', templateId: 'mieterhoehung', date: '2026-03-08', recipient: 'Anna Hofmann', propertyId: 'p1', unitId: 'u1', status: 'entwurf' },
  { id: 'g4', templateId: 'nebenkostenabrechnung', date: '2026-02-28', recipient: 'Familie Schulz', propertyId: 'p1', unitId: 'u3', status: 'versendet' },
  { id: 'g5', templateId: 'modernisierung', date: '2026-01-15', recipient: 'Tobias Lang', propertyId: 'p2', unitId: 'u6', status: 'unterzeichnet' },
  { id: 'g6', templateId: 'mahnung', date: '2026-04-25', recipient: 'Lukas Wolf', propertyId: 'p4', unitId: 'u12', status: 'entwurf' },
];

// ───── Main Page ─────

function ContractsPage({ data, route, setRoute }) {
  if (route.contractWizard) {
    return <ContractWizard data={data} route={route} setRoute={setRoute} />;
  }

  const [activeTab, setActiveTab] = React.useState('templates');
  const [filter, setFilter] = React.useState('Alle');

  const cats = ['Alle', ...new Set(CONTRACT_TEMPLATES.map(t => t.category))];
  const visible = filter === 'Alle' ? CONTRACT_TEMPLATES : CONTRACT_TEMPLATES.filter(t => t.category === filter);

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Verträge & Vorlagen</h1>
          <div className="page-subtitle">Mietverträge, Kündigungen und Schreiben aus Stammdaten erstellen</div>
        </div>
        <div className="page-actions">
          <button className="btn">Eigene Vorlage hochladen</button>
        </div>
      </div>

      <div className="tabs">
        <button className={`tab ${activeTab === 'templates' ? 'active' : ''}`} onClick={() => setActiveTab('templates')}>
          Vorlagen <span className="tab-count">{CONTRACT_TEMPLATES.length}</span>
        </button>
        <button className={`tab ${activeTab === 'history' ? 'active' : ''}`} onClick={() => setActiveTab('history')}>
          Erstellte Dokumente <span className="tab-count">{GENERATED_DOCS.length}</span>
        </button>
      </div>

      {activeTab === 'templates' && (
        <>
          <div className="contract-filter-bar">
            {cats.map(c => (
              <button
                key={c}
                className={`filter-chip ${filter === c ? 'active' : ''}`}
                onClick={() => setFilter(c)}
              >
                {c}
                {c !== 'Alle' && <span className="filter-chip-count">{CONTRACT_TEMPLATES.filter(t => t.category === c).length}</span>}
              </button>
            ))}
          </div>

          <div className="template-grid">
            {visible.map(t => (
              <TemplateCard
                key={t.id}
                template={t}
                onClick={() => setRoute({ page: 'contracts', contractWizard: t.id })}
              />
            ))}
          </div>
        </>
      )}

      {activeTab === 'history' && (
        <div className="table-wrap">
          <table className="table">
            <thead>
              <tr>
                <th>Datum</th>
                <th>Vorlage</th>
                <th>Empfänger</th>
                <th>Objekt</th>
                <th>Status</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {GENERATED_DOCS.map(d => {
                const tmpl = CONTRACT_TEMPLATES.find(t => t.id === d.templateId);
                const prop = data.properties.find(p => p.id === d.propertyId);
                const unit = prop?.units.find(u => u.id === d.unitId);
                return (
                  <tr key={d.id}>
                    <td className="muted">{fmtDateShort(d.date)}</td>
                    <td>
                      <div className="strong">{tmpl?.title || '—'}</div>
                      <div className="muted" style={{ fontSize: 11.5 }}>{tmpl?.category}</div>
                    </td>
                    <td>{d.recipient}</td>
                    <td>
                      <div>{prop?.name}</div>
                      <div className="muted" style={{ fontSize: 11.5 }}>{unit?.label}</div>
                    </td>
                    <td>
                      <DocStatusPill status={d.status} />
                    </td>
                    <td className="num">
                      <button className="btn-link">Öffnen</button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

function TemplateCard({ template, onClick }) {
  const color = CATEGORY_COLORS[template.category] || 'var(--ink-3)';
  return (
    <button className="template-card" onClick={onClick}>
      <div className="template-card-rail" style={{ background: color }}></div>
      <div className="template-card-body">
        <div className="template-card-cat">{template.category} · {template.legal}</div>
        <h3 className="template-card-title">{template.title}</h3>
        <p className="template-card-desc">{template.description}</p>
        <div className="template-card-fields">
          {template.fields.slice(0, 4).map(f => (
            <span key={f} className="template-field-chip">{f}</span>
          ))}
          {template.fields.length > 4 && <span className="template-field-chip-more">+{template.fields.length - 4}</span>}
        </div>
        <div className="template-card-foot">
          <span className="muted" style={{ fontSize: 11 }}>{template.pages} Seiten · automatisch befüllt</span>
          <span className="template-card-cta">Erstellen →</span>
        </div>
      </div>
    </button>
  );
}

function DocStatusPill({ status }) {
  const map = {
    'entwurf': { tone: 'warn', label: 'Entwurf' },
    'versendet': { tone: 'pos', label: 'Versendet' },
    'unterzeichnet': { tone: 'pos', label: 'Unterzeichnet' },
  };
  const s = map[status] || { tone: '', label: status };
  return (
    <span className={`pill ${s.tone}`}>
      <span className="pill-dot"></span>{s.label}
    </span>
  );
}

// ───── Wizard ─────

function ContractWizard({ data, route, setRoute }) {
  const template = CONTRACT_TEMPLATES.find(t => t.id === route.contractWizard);
  if (!template) return <div className="page"><div className="empty">Vorlage nicht gefunden.</div></div>;

  // Pre-select unit/tenant if route carries them
  const initialPropertyId = route.propertyId || data.properties[0].id;
  const [propertyId, setPropertyId] = React.useState(initialPropertyId);
  const property = data.properties.find(p => p.id === propertyId);
  const initialUnitId = route.unitId || property.units[0].id;
  const [unitId, setUnitId] = React.useState(initialUnitId);
  const unit = property.units.find(u => u.id === unitId) || property.units[0];
  const tenant = unit.tenant ? data.tenants[unit.tenant] : null;

  // Wizard state — fields specific to template type
  const [form, setForm] = React.useState(() => initialFormFor(template, property, unit, tenant));
  const [step, setStep] = React.useState(1); // 1 = configure, 2 = preview
  const previewRef = React.useRef(null);
  const [saving, setSaving] = React.useState(false);
  const [savedDoc, setSavedDoc] = React.useState(null);
  const [saveError, setSaveError] = React.useState(null);

  // Re-init form when unit changes
  React.useEffect(() => {
    setForm(initialFormFor(template, property, unit, tenant));
  }, [unitId, propertyId]);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const generateAndSave = async () => {
    if (!previewRef.current || !window.html2pdf) {
      alert('PDF-Bibliothek nicht geladen. Lade die Seite neu.');
      return;
    }
    setSaving(true); setSaveError(null);
    try {
      const filename = `${template.title.replace(/[^\w]+/g, '_')}__${(tenant?.name || 'Mieter').replace(/[^\w]+/g, '_')}__${form.issuedDate || new Date().toISOString().slice(0, 10)}.pdf`;
      const pdfBlob = await window.html2pdf()
        .from(previewRef.current)
        .set({
          margin: [10, 10, 10, 10],
          filename,
          image: { type: 'jpeg', quality: 0.95 },
          html2canvas: { scale: 2, useCORS: true, backgroundColor: '#ffffff' },
          jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
          pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
        })
        .outputPdf('blob');
      const file = new File([pdfBlob], filename, { type: 'application/pdf' });
      const meta = {
        category: template.category || 'Vertrag',
        propertyId: property.id,
        unitId: unit.id,
        scope: 'einheit',
      };
      const doc = await window.uploadDocument(file, meta);
      setSavedDoc(doc);
    } catch (err) {
      setSaveError(err.message || String(err));
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <button className="btn-link" onClick={() => setRoute({ page: 'contracts' })}>← Zurück zu den Vorlagen</button>
          <h1 className="page-title" style={{ marginTop: 8 }}>{template.title}</h1>
          <div className="page-subtitle">{template.description}</div>
        </div>
        <div className="page-actions">
          <button className="btn">Als Entwurf speichern</button>
          {step === 2 && (
            <button className="btn btn-primary" onClick={generateAndSave} disabled={saving || !form.tenantName?.trim()} title={!form.tenantName?.trim() ? 'Bitte Mietername eingeben' : ''}>
              {saving ? 'Erzeuge PDF…' : '📄 PDF erzeugen & speichern'}
            </button>
          )}
        </div>
      </div>

      <div className="wizard-steps">
        <div className={`wizard-step ${step >= 1 ? 'active' : ''}`}>
          <span className="wizard-step-num">1</span> Daten prüfen
        </div>
        <div className="wizard-step-line"></div>
        <div className={`wizard-step ${step >= 2 ? 'active' : ''}`}>
          <span className="wizard-step-num">2</span> Vorschau & Versand
        </div>
      </div>

      <div className="wizard-grid">
        <div className="wizard-form">
          <div className="section">
            <div className="section-header"><h2 className="section-title">Objekt & Mieter</h2></div>
            <div className="form-card">
              <FormRow label="Objekt">
                <select className="form-input" value={propertyId} onChange={e => {
                  const p = data.properties.find(x => x.id === e.target.value);
                  setPropertyId(e.target.value);
                  setUnitId(p.units[0].id);
                }}>
                  {data.properties.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                </select>
              </FormRow>
              <FormRow label="Einheit">
                <select className="form-input" value={unitId} onChange={e => setUnitId(e.target.value)}>
                  {property.units.map(u => <option key={u.id} value={u.id}>{u.label} · {u.size} m²</option>)}
                </select>
              </FormRow>
              {tenant ? (
                <FormRow label="Mieter">
                  <input className="form-input" value={form.tenantName} onChange={e => update('tenantName', e.target.value)} />
                  <div className="form-hint">aus Stammdaten · {tenant.email}{tenant.phone ? ` · ${tenant.phone}` : ''}</div>
                </FormRow>
              ) : (
                <>
                  <FormRow label="Neuer Mieter · Name *">
                    <input
                      className={`form-input ${!form.tenantName?.trim() ? 'form-input-warn' : ''}`}
                      value={form.tenantName}
                      onChange={e => { update('tenantName', e.target.value); }}
                      placeholder="Vor- und Nachname"
                      autoFocus
                    />
                    <div className="form-hint warn">Wohnung ist Leerstand — bitte Mieterdaten manuell eingeben.</div>
                  </FormRow>
                  <FormRow label="E-Mail *">
                    <input
                      className="form-input"
                      type="email"
                      value={form.tenantEmail}
                      onChange={e => { update('tenantEmail', e.target.value); update('recipientEmail', e.target.value); }}
                      placeholder="mieter@beispiel.de"
                    />
                  </FormRow>
                  <FormRow label="Telefon">
                    <input
                      className="form-input"
                      type="tel"
                      value={form.tenantPhone}
                      onChange={e => update('tenantPhone', e.target.value)}
                      placeholder="+49 …"
                    />
                  </FormRow>
                </>
              )}
            </div>
          </div>

          <DynamicFields template={template} form={form} update={update} />

          <div className="section">
            <div className="section-header"><h2 className="section-title">Versand</h2></div>
            <div className="form-card">
              <FormRow label="Per E-Mail an">
                <input className="form-input" value={form.recipientEmail} onChange={e => update('recipientEmail', e.target.value)} />
              </FormRow>
              <FormRow label="Zusätzlich Briefpost">
                <label className="check-row">
                  <input type="checkbox" checked={form.sendPost} onChange={e => update('sendPost', e.target.checked)} />
                  Per Einschreiben (Einwurf) versenden
                </label>
              </FormRow>
              {form.sendPost && (
                <div className="form-hint" style={{ marginLeft: 0 }}>Hausgut druckt und versendet das Schreiben (1,80 € + Porto). Zustellnachweis im Dokument abgelegt.</div>
              )}
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24 }}>
            {step === 1 ? (
              <>
                <button className="btn" onClick={() => setRoute({ page: 'contracts' })}>Abbrechen</button>
                <button className="btn btn-primary" onClick={() => setStep(2)}>Weiter zur Vorschau →</button>
              </>
            ) : (
              <>
                <button className="btn" onClick={() => setStep(1)}>← Zurück bearbeiten</button>
                <button className="btn btn-primary" onClick={generateAndSave} disabled={saving}>
                  {saving ? 'Erzeuge PDF…' : '📄 PDF erzeugen & speichern'}
                </button>
              </>
            )}
          </div>
        </div>

        <div className="wizard-preview">
          <div className="preview-head">
            <span style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink-3)' }}>Vorschau</span>
            <span className="muted" style={{ fontSize: 11.5 }}>{template.pages} Seiten</span>
          </div>
          {savedDoc && (
            <div style={{ padding: '12px 16px', background: 'var(--accent-soft)', border: '1px solid var(--accent)', borderRadius: 'var(--radius)', marginBottom: 12, fontSize: 13 }}>
              <div style={{ fontWeight: 500, color: 'var(--accent)', marginBottom: 4 }}>✓ PDF gespeichert</div>
              <div style={{ color: 'var(--ink-2)', fontSize: 12 }}>
                Liegt in der Cloud unter <strong>{property.name} · {unit.label}</strong> · Kategorie {savedDoc.category}.
                {' '}<a href={window.viewDocumentUrl(savedDoc.id)} target="_blank" rel="noopener" style={{ color: 'var(--accent)' }}>PDF öffnen</a> · <a href={window.downloadDocumentUrl(savedDoc.id)} download style={{ color: 'var(--accent)' }}>↓ Herunterladen</a>
              </div>
            </div>
          )}
          {saveError && (
            <div style={{ padding: '12px 16px', background: 'rgba(139,58,47,0.08)', border: '1px solid var(--neg)', borderRadius: 'var(--radius)', marginBottom: 12, fontSize: 13, color: 'var(--neg)' }}>
              ✕ Speichern fehlgeschlagen: {saveError}
            </div>
          )}
          <div className="preview-paper" ref={previewRef}>
            <ContractPreview template={template} form={form} property={property} unit={unit} tenant={tenant} settings={data.settings} />
          </div>
          <div className="preview-foot">
            <span className="muted" style={{ fontSize: 11 }}>Stammdaten automatisch befüllt · Felder gelb markiert prüfen</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function FormRow({ label, children }) {
  return (
    <div className="form-row">
      <label className="form-label">{label}</label>
      <div className="form-control">{children}</div>
    </div>
  );
}

function initialFormFor(template, property, unit, tenant) {
  const today = new Date(2026, 4, 1);
  const fmtToday = today.toISOString().slice(0, 10);
  const base = {
    tenantName: tenant?.name || '',
    tenantEmail: tenant?.email || '',
    tenantPhone: tenant?.phone || '',
    recipientEmail: tenant?.email || '',
    issuedDate: fmtToday,
    sendPost: false,
  };

  switch (template.id) {
    case 'mietvertrag-wohn':
    case 'mietvertrag-gewerbe':
    case 'staffelmietvertrag':
      return {
        ...base,
        startDate: fmtToday,
        coldRent: unit.rent || 0,
        operatingCosts: Math.round((unit.rent || 0) * 0.25),
        deposit: tenant?.deposit || (unit.rent || 0) * 3,
        contractType: 'unbefristet',
        purpose: template.id === 'mietvertrag-gewerbe' ? 'Gastronomie' : 'Wohnzwecke',
        indexClause: template.id === 'mietvertrag-gewerbe',
        staffelStart: unit.rent || 0,
        staffelStep: 30,
      };
    case 'kuendigung-vermieter':
      return {
        ...base,
        reason: 'Eigenbedarf',
        reasonDetail: 'Die Wohnung wird für die Tochter des Eigentümers benötigt, die im Herbst ihr Studium am Standort aufnimmt.',
        terminationDate: '2026-10-31',
      };
    case 'kuendigung-fristlos':
      return {
        ...base,
        reason: 'Mietrückstand',
        rentArrears: 2580,
        reasonDetail: 'Trotz Mahnung vom 25.04.2026 wurden die Mieten für März und April 2026 nicht beglichen.',
      };
    case 'kuendigungsbestaetigung':
      return {
        ...base,
        receivedDate: '2026-04-30',
        moveOutDate: tenant?.until || '2026-07-31',
      };
    case 'mieterhoehung':
      return {
        ...base,
        currentRent: unit.rent || 0,
        newRent: Math.round((unit.rent || 0) * 1.08),
        validFrom: '2026-09-01',
        reference: 'Mietspiegel der Stadt 2025',
      };
    case 'modernisierung':
      return {
        ...base,
        measure: 'Energetische Sanierung der Fassade und Austausch der Fenster (3-fach-Verglasung)',
        beginDate: '2026-08-01',
        duration: '6 Wochen',
        costAllocation: Math.round((unit.rent || 0) * 0.12),
      };
    case 'uebergabeprotokoll':
      return {
        ...base,
        handoverDate: fmtToday,
        meterStrom: '14582',
        meterWater: '892',
        meterHeat: '0',
        keyCount: 3,
        defects: 'Keine erkennbaren Mängel.',
      };
    case 'nebenkostenabrechnung':
      return {
        ...base,
        period: '01.01.2025 – 31.12.2025',
        prepayments: Math.round((unit.rent || 0) * 0.25 * 12),
        actualCosts: Math.round((unit.rent || 0) * 0.27 * 12),
        allocation: 'Wohnfläche',
      };
    case 'mahnung':
      return {
        ...base,
        amount: 980,
        dueDate: fmtToday,
        deadline: '2026-05-15',
        stage: 1,
      };
    case 'mietquittung':
      return {
        ...base,
        period: 'Mai 2026',
        amount: unit.rent || 0,
      };
    default:
      return base;
  }
}

// ───── Dynamic fields per template type ─────

function DynamicFields({ template, form, update }) {
  const t = template.id;

  if (t.startsWith('mietvertrag') || t === 'staffelmietvertrag') {
    return (
      <div className="section">
        <div className="section-header"><h2 className="section-title">Vertragsdaten</h2></div>
        <div className="form-card">
          <FormRow label="Mietbeginn"><input type="date" className="form-input" value={form.startDate} onChange={e => update('startDate', e.target.value)} /></FormRow>
          <FormRow label="Vertragsart">
            <select className="form-input" value={form.contractType} onChange={e => update('contractType', e.target.value)}>
              <option value="unbefristet">Unbefristet</option>
              <option value="befristet">Befristet (Zeitmietvertrag)</option>
            </select>
          </FormRow>
          <FormRow label="Kaltmiete (€)"><input type="number" className="form-input" value={form.coldRent} onChange={e => update('coldRent', +e.target.value)} /></FormRow>
          <FormRow label="Nebenkosten-VZ (€)"><input type="number" className="form-input" value={form.operatingCosts} onChange={e => update('operatingCosts', +e.target.value)} /></FormRow>
          <FormRow label="Kaution (€)">
            <input type="number" className="form-input" value={form.deposit} onChange={e => update('deposit', +e.target.value)} />
            <div className="form-hint">Maximal 3 Kaltmieten ({fmtEUR(form.coldRent * 3)})</div>
          </FormRow>
          {t === 'mietvertrag-gewerbe' && (
            <>
              <FormRow label="Nutzungszweck"><input className="form-input" value={form.purpose} onChange={e => update('purpose', e.target.value)} /></FormRow>
              <FormRow label="Indexbindung">
                <label className="check-row"><input type="checkbox" checked={form.indexClause} onChange={e => update('indexClause', e.target.checked)} /> An VPI gekoppelt (jährlich)</label>
              </FormRow>
            </>
          )}
          {t === 'staffelmietvertrag' && (
            <>
              <FormRow label="Startmiete (€)"><input type="number" className="form-input" value={form.staffelStart} onChange={e => update('staffelStart', +e.target.value)} /></FormRow>
              <FormRow label="Erhöhung pro Jahr (€)"><input type="number" className="form-input" value={form.staffelStep} onChange={e => update('staffelStep', +e.target.value)} /></FormRow>
            </>
          )}
        </div>
      </div>
    );
  }

  if (t === 'kuendigung-vermieter') {
    return (
      <div className="section">
        <div className="section-header"><h2 className="section-title">Kündigungsdetails</h2></div>
        <div className="form-card">
          <FormRow label="Kündigungsgrund">
            <select className="form-input" value={form.reason} onChange={e => update('reason', e.target.value)}>
              <option value="Eigenbedarf">Eigenbedarf (§ 573 Abs. 2 Nr. 2)</option>
              <option value="Pflichtverletzung">Erhebliche Pflichtverletzung (§ 573 Abs. 2 Nr. 1)</option>
              <option value="Wirtschaftliche Verwertung">Wirtschaftliche Verwertung (§ 573 Abs. 2 Nr. 3)</option>
            </select>
          </FormRow>
          <FormRow label="Begründung (ausführlich)">
            <textarea className="form-input" rows="4" value={form.reasonDetail} onChange={e => update('reasonDetail', e.target.value)} />
            <div className="form-hint warn">Eine schlüssige Begründung ist Wirksamkeitsvoraussetzung (§ 573 Abs. 3 BGB).</div>
          </FormRow>
          <FormRow label="Beendigungstermin">
            <input type="date" className="form-input" value={form.terminationDate} onChange={e => update('terminationDate', e.target.value)} />
            <div className="form-hint">Gesetzliche Frist abhängig von Mietdauer: 3 / 6 / 9 Monate.</div>
          </FormRow>
        </div>
      </div>
    );
  }

  if (t === 'kuendigung-fristlos') {
    return (
      <div className="section">
        <div className="section-header"><h2 className="section-title">Begründung</h2></div>
        <div className="form-card">
          <FormRow label="Kündigungsgrund">
            <select className="form-input" value={form.reason} onChange={e => update('reason', e.target.value)}>
              <option value="Mietrückstand">Mietrückstand (§ 543 Abs. 2 Nr. 3)</option>
              <option value="Hausfrieden">Schwere Störung des Hausfriedens</option>
              <option value="Vertragswidrige Nutzung">Vertragswidrige Nutzung</option>
            </select>
          </FormRow>
          <FormRow label="Offener Betrag (€)"><input type="number" className="form-input" value={form.rentArrears} onChange={e => update('rentArrears', +e.target.value)} /></FormRow>
          <FormRow label="Sachverhalt">
            <textarea className="form-input" rows="4" value={form.reasonDetail} onChange={e => update('reasonDetail', e.target.value)} />
          </FormRow>
        </div>
      </div>
    );
  }

  if (t === 'kuendigungsbestaetigung') {
    return (
      <div className="section">
        <div className="section-header"><h2 className="section-title">Termine</h2></div>
        <div className="form-card">
          <FormRow label="Kündigungseingang"><input type="date" className="form-input" value={form.receivedDate} onChange={e => update('receivedDate', e.target.value)} /></FormRow>
          <FormRow label="Übergabetermin"><input type="date" className="form-input" value={form.moveOutDate} onChange={e => update('moveOutDate', e.target.value)} /></FormRow>
        </div>
      </div>
    );
  }

  if (t === 'mieterhoehung') {
    const change = form.newRent - form.currentRent;
    const pctChange = form.currentRent ? (change / form.currentRent) * 100 : 0;
    return (
      <div className="section">
        <div className="section-header"><h2 className="section-title">Erhöhung</h2></div>
        <div className="form-card">
          <FormRow label="Aktuelle Kaltmiete"><input type="number" className="form-input" value={form.currentRent} onChange={e => update('currentRent', +e.target.value)} /></FormRow>
          <FormRow label="Neue Kaltmiete">
            <input type="number" className="form-input" value={form.newRent} onChange={e => update('newRent', +e.target.value)} />
            <div className={`form-hint ${pctChange > 20 ? 'warn' : ''}`}>
              {change >= 0 ? '+' : ''}{fmtEUR(change)} · {pctChange.toFixed(1)} %
              {pctChange > 20 && ' — Kappungsgrenze (15–20 % in 3 Jahren) prüfen!'}
            </div>
          </FormRow>
          <FormRow label="Gültig ab"><input type="date" className="form-input" value={form.validFrom} onChange={e => update('validFrom', e.target.value)} /></FormRow>
          <FormRow label="Begründung / Bezug">
            <input className="form-input" value={form.reference} onChange={e => update('reference', e.target.value)} />
            <div className="form-hint">z.B. Mietspiegel, Vergleichsobjekte, Sachverständigengutachten</div>
          </FormRow>
        </div>
      </div>
    );
  }

  if (t === 'modernisierung') {
    return (
      <div className="section">
        <div className="section-header"><h2 className="section-title">Maßnahme</h2></div>
        <div className="form-card">
          <FormRow label="Beschreibung der Maßnahme">
            <textarea className="form-input" rows="3" value={form.measure} onChange={e => update('measure', e.target.value)} />
          </FormRow>
          <FormRow label="Voraussichtlicher Beginn"><input type="date" className="form-input" value={form.beginDate} onChange={e => update('beginDate', e.target.value)} /></FormRow>
          <FormRow label="Voraussichtliche Dauer"><input className="form-input" value={form.duration} onChange={e => update('duration', e.target.value)} /></FormRow>
          <FormRow label="Mieterhöhung nach Maßnahme (€/Monat)">
            <input type="number" className="form-input" value={form.costAllocation} onChange={e => update('costAllocation', +e.target.value)} />
            <div className="form-hint">Bis 8 % der Modernisierungskosten umlegbar (§ 559 BGB)</div>
          </FormRow>
        </div>
      </div>
    );
  }

  if (t === 'uebergabeprotokoll') {
    return (
      <div className="section">
        <div className="section-header"><h2 className="section-title">Übergabe</h2></div>
        <div className="form-card">
          <FormRow label="Datum"><input type="date" className="form-input" value={form.handoverDate} onChange={e => update('handoverDate', e.target.value)} /></FormRow>
          <FormRow label="Zähler Strom (kWh)"><input className="form-input" value={form.meterStrom} onChange={e => update('meterStrom', e.target.value)} /></FormRow>
          <FormRow label="Zähler Wasser (m³)"><input className="form-input" value={form.meterWater} onChange={e => update('meterWater', e.target.value)} /></FormRow>
          <FormRow label="Schlüsselanzahl"><input type="number" className="form-input" value={form.keyCount} onChange={e => update('keyCount', +e.target.value)} /></FormRow>
          <FormRow label="Mängel">
            <textarea className="form-input" rows="3" value={form.defects} onChange={e => update('defects', e.target.value)} />
          </FormRow>
        </div>
      </div>
    );
  }

  if (t === 'nebenkostenabrechnung') {
    const balance = form.prepayments - form.actualCosts;
    return (
      <div className="section">
        <div className="section-header"><h2 className="section-title">Abrechnung</h2></div>
        <div className="form-card">
          <FormRow label="Abrechnungszeitraum"><input className="form-input" value={form.period} onChange={e => update('period', e.target.value)} /></FormRow>
          <FormRow label="Vorauszahlungen (€)"><input type="number" className="form-input" value={form.prepayments} onChange={e => update('prepayments', +e.target.value)} /></FormRow>
          <FormRow label="Tatsächliche Kosten (€)">
            <input type="number" className="form-input" value={form.actualCosts} onChange={e => update('actualCosts', +e.target.value)} />
            <div className="form-hint" style={{ color: balance >= 0 ? 'var(--pos)' : 'var(--neg)' }}>
              {balance >= 0 ? `Guthaben: ${fmtEUR(balance)}` : `Nachzahlung: ${fmtEUR(Math.abs(balance))}`}
            </div>
          </FormRow>
          <FormRow label="Verteilerschlüssel">
            <select className="form-input" value={form.allocation} onChange={e => update('allocation', e.target.value)}>
              <option>Wohnfläche</option>
              <option>Personenanzahl</option>
              <option>Verbrauch</option>
            </select>
          </FormRow>
        </div>
      </div>
    );
  }

  if (t === 'mahnung') {
    return (
      <div className="section">
        <div className="section-header"><h2 className="section-title">Mahnung</h2></div>
        <div className="form-card">
          <FormRow label="Offener Betrag (€)"><input type="number" className="form-input" value={form.amount} onChange={e => update('amount', +e.target.value)} /></FormRow>
          <FormRow label="Mahnstufe">
            <select className="form-input" value={form.stage} onChange={e => update('stage', +e.target.value)}>
              <option value="1">1. Mahnung</option>
              <option value="2">2. Mahnung</option>
              <option value="3">3. Mahnung mit Kündigungsandrohung</option>
            </select>
          </FormRow>
          <FormRow label="Ursprüngliche Fälligkeit"><input type="date" className="form-input" value={form.dueDate} onChange={e => update('dueDate', e.target.value)} /></FormRow>
          <FormRow label="Zahlungsfrist"><input type="date" className="form-input" value={form.deadline} onChange={e => update('deadline', e.target.value)} /></FormRow>
        </div>
      </div>
    );
  }

  if (t === 'mietquittung') {
    return (
      <div className="section">
        <div className="section-header"><h2 className="section-title">Quittung</h2></div>
        <div className="form-card">
          <FormRow label="Zeitraum"><input className="form-input" value={form.period} onChange={e => update('period', e.target.value)} /></FormRow>
          <FormRow label="Betrag (€)"><input type="number" className="form-input" value={form.amount} onChange={e => update('amount', +e.target.value)} /></FormRow>
        </div>
      </div>
    );
  }

  return null;
}

// ───── Document Preview ─────

function ContractPreview({ template, form, property, unit, tenant, settings }) {
  // Per-property overrides win over global settings — for properties owned via
  // a GmbH or with a separate bank account.
  const ownerName    = (property?.legalOwnerName?.trim()    || settings?.ownerName?.trim()    || 'M. Tessmann');
  const ownerAddress = (property?.legalOwnerAddress?.trim() || settings?.ownerAddress?.trim() || '—');
  const ownerEmail   = (property?.legalOwnerEmail?.trim()   || settings?.ownerEmail?.trim()   || '');
  const ownerIban    = (property?.ownerIban?.trim()         || settings?.ownerIban?.trim()    || '');
  const ownerUstId   = (property?.ownerUstId?.trim()        || settings?.ownerUstId?.trim()   || '');
  const ownerInitial = ownerName.split(/\s+/).filter(Boolean).slice(-1)[0]?.[0] || ownerName[0] || 'M';
  const ownerCity = (ownerAddress.match(/\d{5}\s+([^,·\n]+)/)?.[1] || ownerAddress.split(/[,·\n]/).pop() || '').trim() || '—';
  const today = new Date().toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
  const formatDate = (d) => d ? new Date(d).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }) : '—';

  const Header = () => (
    <div className="cp-header">
      <div className="cp-letterhead">
        <div className="cp-logo">{ownerInitial}</div>
        <div>
          <div className="cp-from-name">{ownerName}</div>
          {ownerAddress && ownerAddress !== '—' && <div className="cp-from-line">{ownerAddress.replace(/\n/g, ' · ')}</div>}
          {ownerEmail && <div className="cp-from-line">{ownerEmail}</div>}
        </div>
      </div>
      <div className="cp-recipient">
        <div className="cp-from-line muted">Empfänger</div>
        <div className="cp-to-name fill">{form.tenantName || '[Mietername]'}</div>
        <div className="cp-from-line fill">{property?.address || '[Adresse]'}</div>
      </div>
      <div className="cp-place-date">{ownerCity}, {today}</div>
    </div>
  );

  const Sig = () => (
    <div className="cp-sig">
      <div>
        <div className="cp-sig-line"></div>
        <div className="cp-sig-label">Vermieter · {ownerName}</div>
      </div>
      <div>
        <div className="cp-sig-line"></div>
        <div className="cp-sig-label">Mieter · {form.tenantName || '—'}</div>
      </div>
    </div>
  );

  const fill = (val) => <span className="fill">{val}</span>;
  const t = template.id;

  if (t === 'mietvertrag-wohn' || t === 'mietvertrag-gewerbe' || t === 'staffelmietvertrag') {
    const totalRent = (form.coldRent || 0) + (form.operatingCosts || 0);
    return (
      <div className="cp-doc">
        <Header />
        <h2 className="cp-h1">{template.title}</h2>
        <p className="cp-p">zwischen <strong>{ownerName}</strong>{ownerAddress && ownerAddress !== '—' ? `, ${ownerAddress.replace(/\n/g, ', ')}` : ''} (nachfolgend „Vermieter")</p>
        <p className="cp-p">und {fill(form.tenantName)} (nachfolgend „Mieter")</p>

        <h3 className="cp-h2">§ 1  Mietsache</h3>
        <p className="cp-p">Vermietet wird die Wohnung im Objekt {fill(property?.name)}, gelegen {fill(property?.address)}, {fill(unit?.label)} ({fill(unit?.floor)}), bestehend aus {fill(unit?.rooms + ' Zimmern')} mit einer Wohnfläche von {fill(unit?.size + ' m²')}.</p>

        <h3 className="cp-h2">§ 2  Mietzeit</h3>
        <p className="cp-p">Das Mietverhältnis beginnt am {fill(formatDate(form.startDate))} und läuft auf {form.contractType === 'unbefristet' ? 'unbestimmte Zeit' : 'bestimmte Zeit'}.</p>

        <h3 className="cp-h2">§ 3  Miete & Nebenkosten</h3>
        <p className="cp-p">Die monatliche Kaltmiete beträgt {fill(fmtEUR(form.coldRent))}. Hinzu kommt eine Vorauszahlung auf die Betriebskosten in Höhe von {fill(fmtEUR(form.operatingCosts))}. Die Gesamtmiete von {fill(fmtEUR(totalRent))} ist monatlich im Voraus, spätestens bis zum dritten Werktag eines Monats, zu entrichten.</p>

        {t === 'staffelmietvertrag' && (
          <>
            <h3 className="cp-h2">§ 3a  Staffelmiete</h3>
            <p className="cp-p">Die Kaltmiete erhöht sich jährlich zum Jahrestag des Mietbeginns um {fill(fmtEUR(form.staffelStep))}.</p>
          </>
        )}

        {t === 'mietvertrag-gewerbe' && (
          <>
            <h3 className="cp-h2">§ 4  Nutzungszweck</h3>
            <p className="cp-p">Die Mieträume werden ausschließlich zum Betrieb von {fill(form.purpose)} überlassen.</p>
            {form.indexClause && (
              <>
                <h3 className="cp-h2">§ 5  Wertsicherung</h3>
                <p className="cp-p">Die Miete ist an den Verbraucherpreisindex (VPI) für Deutschland gekoppelt. Anpassungen erfolgen erstmals 12 Monate nach Vertragsbeginn.</p>
              </>
            )}
          </>
        )}

        <h3 className="cp-h2">§ {t === 'mietvertrag-gewerbe' ? '6' : '4'}  Kaution</h3>
        <p className="cp-p">Der Mieter leistet eine Kaution in Höhe von {fill(fmtEUR(form.deposit))} ({(form.deposit / form.coldRent).toFixed(1)} Kaltmieten). Die Kaution wird zinsbringend angelegt.</p>

        <h3 className="cp-h2">§ {t === 'mietvertrag-gewerbe' ? '7' : '5'}  Schönheitsreparaturen</h3>
        <p className="cp-p">Schönheitsreparaturen werden gemäß §§ 28 II. BV in den allgemein üblichen Fristen vom Mieter durchgeführt.</p>

        <Sig />
      </div>
    );
  }

  if (t === 'kuendigung-vermieter') {
    return (
      <div className="cp-doc">
        <Header />
        <p className="cp-subject"><strong>Betreff:</strong>  Ordentliche Kündigung des Mietverhältnisses {fill(property?.address)}, {fill(unit?.label)}</p>
        <p className="cp-p">Sehr geehrte/r {fill(form.tenantName)},</p>
        <p className="cp-p">hiermit kündige ich das zwischen uns bestehende Mietverhältnis über die im Betreff genannte Wohnung <strong>ordentlich zum {fill(formatDate(form.terminationDate))}</strong>.</p>
        <p className="cp-p"><strong>Kündigungsgrund: {fill(form.reason)}</strong></p>
        <p className="cp-p">{fill(form.reasonDetail)}</p>
        <p className="cp-p">Hinweis nach § 574 BGB: Sie können der Kündigung widersprechen, wenn die Beendigung für Sie eine besondere Härte bedeuten würde. Der Widerspruch muss spätestens zwei Monate vor Beendigung schriftlich erklärt werden.</p>
        <p className="cp-p">Ich bitte um Bestätigung des Erhalts dieses Schreibens.</p>
        <p className="cp-p">Mit freundlichen Grüßen</p>
        <div className="cp-sig-line cp-sig-line-single"></div>
        <div className="cp-sig-label">{ownerName} · Vermieter</div>
      </div>
    );
  }

  if (t === 'kuendigung-fristlos') {
    return (
      <div className="cp-doc">
        <Header />
        <p className="cp-subject"><strong>Betreff:</strong>  Fristlose Kündigung des Mietverhältnisses {fill(property?.address)}</p>
        <p className="cp-p">Sehr geehrte/r {fill(form.tenantName)},</p>
        <p className="cp-p">hiermit kündige ich das Mietverhältnis aus wichtigem Grund <strong>fristlos gemäß § 543 BGB</strong>.</p>
        <p className="cp-p"><strong>Kündigungsgrund: {fill(form.reason)}</strong></p>
        {form.reason === 'Mietrückstand' && (
          <p className="cp-p">Sie befinden sich mit einem Betrag von {fill(fmtEUR(form.rentArrears))} im Zahlungsverzug, was mehr als zwei Monatsmieten entspricht. Damit ist der Tatbestand des § 543 Abs. 2 Nr. 3 BGB erfüllt.</p>
        )}
        <p className="cp-p">{fill(form.reasonDetail)}</p>
        <p className="cp-p">Ich fordere Sie auf, die Wohnung unverzüglich, spätestens innerhalb von 14 Tagen, zu räumen und ordnungsgemäß an mich zu übergeben.</p>
        <p className="cp-p">Mit freundlichen Grüßen</p>
        <div className="cp-sig-line cp-sig-line-single"></div>
        <div className="cp-sig-label">{ownerName} · Vermieter</div>
      </div>
    );
  }

  if (t === 'mieterhoehung') {
    const diff = form.newRent - form.currentRent;
    return (
      <div className="cp-doc">
        <Header />
        <p className="cp-subject"><strong>Betreff:</strong>  Mieterhöhungsverlangen für {fill(property?.address)}, {fill(unit?.label)}</p>
        <p className="cp-p">Sehr geehrte/r {fill(form.tenantName)},</p>
        <p className="cp-p">die ortsübliche Vergleichsmiete für vergleichbare Wohnungen ist gestiegen. Ich beantrage daher gemäß § 558 BGB Ihre Zustimmung zur Erhöhung der Kaltmiete:</p>
        <table className="cp-table">
          <tbody>
            <tr><td>Bisherige Kaltmiete</td><td className="num">{fmtEUR(form.currentRent)}</td></tr>
            <tr><td>Neue Kaltmiete ab {formatDate(form.validFrom)}</td><td className="num"><span className="fill">{fmtEUR(form.newRent)}</span></td></tr>
            <tr><td><strong>Erhöhung</strong></td><td className="num"><strong>+{fmtEUR(diff)}</strong></td></tr>
          </tbody>
        </table>
        <p className="cp-p"><strong>Begründung:</strong>  {fill(form.reference)}. Die Wartefrist von 15 Monaten seit der letzten Mieterhöhung ist eingehalten. Die Kappungsgrenze von 20 % in 3 Jahren wird nicht überschritten.</p>
        <p className="cp-p">Ihre Zustimmung erbitte ich bis zum Ablauf des zweiten Monats nach Zugang dieses Schreibens. Bei Nichtzustimmung kann ich gemäß § 558b BGB Klage auf Zustimmung erheben.</p>
        <p className="cp-p">Mit freundlichen Grüßen</p>
        <div className="cp-sig-line cp-sig-line-single"></div>
        <div className="cp-sig-label">{ownerName} · Vermieter</div>
      </div>
    );
  }

  if (t === 'kuendigungsbestaetigung') {
    return (
      <div className="cp-doc">
        <Header />
        <p className="cp-subject"><strong>Betreff:</strong>  Bestätigung Ihrer Kündigung — {fill(property?.address)}, {fill(unit?.label)}</p>
        <p className="cp-p">Sehr geehrte/r {fill(form.tenantName)},</p>
        <p className="cp-p">hiermit bestätige ich den Eingang Ihrer Kündigung vom {fill(formatDate(form.receivedDate))}.</p>
        <p className="cp-p">Das Mietverhältnis endet entsprechend zum <strong>{fill(formatDate(form.moveOutDate))}</strong>. Bitte vereinbaren Sie rechtzeitig einen Termin zur Wohnungsübergabe (mindestens 14 Tage vor Auszug).</p>
        <p className="cp-p">Bei der Übergabe werden Zählerstände erfasst, die Wohnung auf Mängel geprüft und sämtliche Schlüssel zurückgenommen. Ihre Kaution rechne ich nach Vorliegen der Nebenkostenabrechnung ab.</p>
        <p className="cp-p">Mit freundlichen Grüßen</p>
        <div className="cp-sig-line cp-sig-line-single"></div>
        <div className="cp-sig-label">{ownerName} · Vermieter</div>
      </div>
    );
  }

  if (t === 'modernisierung') {
    return (
      <div className="cp-doc">
        <Header />
        <p className="cp-subject"><strong>Betreff:</strong>  Modernisierungsankündigung gemäß § 555c BGB</p>
        <p className="cp-p">Sehr geehrte/r {fill(form.tenantName)},</p>
        <p className="cp-p">ich beabsichtige im Objekt {fill(property?.address)} folgende bauliche Maßnahmen durchzuführen:</p>
        <p className="cp-p" style={{ paddingLeft: 16, borderLeft: '2px solid var(--accent)' }}>{fill(form.measure)}</p>
        <table className="cp-table">
          <tbody>
            <tr><td>Voraussichtlicher Beginn</td><td><span className="fill">{formatDate(form.beginDate)}</span></td></tr>
            <tr><td>Voraussichtliche Dauer</td><td><span className="fill">{form.duration}</span></td></tr>
            <tr><td>Mieterhöhung nach Maßnahme</td><td><span className="fill">+{fmtEUR(form.costAllocation)}/Monat</span></td></tr>
          </tbody>
        </table>
        <p className="cp-p">Sie können einen Härteeinwand gemäß § 555d BGB binnen eines Monats nach Zugang dieser Ankündigung schriftlich erheben.</p>
        <p className="cp-p">Mit freundlichen Grüßen</p>
        <div className="cp-sig-line cp-sig-line-single"></div>
        <div className="cp-sig-label">{ownerName} · Vermieter</div>
      </div>
    );
  }

  if (t === 'uebergabeprotokoll') {
    return (
      <div className="cp-doc">
        <Header />
        <h2 className="cp-h1">Übergabeprotokoll</h2>
        <p className="cp-p"><strong>Objekt:</strong>  {fill(property?.address)}, {fill(unit?.label)}<br/>
        <strong>Übergabe am:</strong>  <span className="fill">{formatDate(form.handoverDate)}</span><br/>
        <strong>Mieter:</strong>  {fill(form.tenantName)}</p>
        <h3 className="cp-h2">Zählerstände</h3>
        <table className="cp-table">
          <tbody>
            <tr><td>Strom (kWh)</td><td className="num"><span className="fill">{form.meterStrom}</span></td></tr>
            <tr><td>Wasser (m³)</td><td className="num"><span className="fill">{form.meterWater}</span></td></tr>
            <tr><td>Heizung</td><td className="num"><span className="fill">{form.meterHeat}</span></td></tr>
          </tbody>
        </table>
        <h3 className="cp-h2">Schlüssel</h3>
        <p className="cp-p">Übergeben wurden <span className="fill">{form.keyCount}</span> Schlüssel.</p>
        <h3 className="cp-h2">Mängelliste</h3>
        <p className="cp-p">{fill(form.defects)}</p>
        <Sig />
      </div>
    );
  }

  if (t === 'nebenkostenabrechnung') {
    const balance = form.prepayments - form.actualCosts;
    return (
      <div className="cp-doc">
        <Header />
        <h2 className="cp-h1">Nebenkostenabrechnung</h2>
        <p className="cp-p"><strong>Mieter:</strong>  {fill(form.tenantName)}<br/>
        <strong>Objekt:</strong>  {fill(property?.address)}, {fill(unit?.label)}<br/>
        <strong>Abrechnungszeitraum:</strong>  <span className="fill">{form.period}</span><br/>
        <strong>Verteilerschlüssel:</strong>  <span className="fill">{form.allocation}</span></p>
        <table className="cp-table">
          <tbody>
            <tr><td>Geleistete Vorauszahlungen</td><td className="num">{fmtEUR(form.prepayments)}</td></tr>
            <tr><td>Tatsächliche Betriebskosten (Anteil)</td><td className="num">{fmtEUR(form.actualCosts)}</td></tr>
            <tr style={{ borderTop: '2px solid var(--ink)' }}>
              <td><strong>{balance >= 0 ? 'Guthaben Ihrerseits' : 'Nachzahlungsbetrag'}</strong></td>
              <td className="num"><strong style={{ color: balance >= 0 ? 'var(--pos)' : 'var(--neg)' }}>{fmtEUR(Math.abs(balance))}</strong></td>
            </tr>
          </tbody>
        </table>
        <p className="cp-p">{balance >= 0 ? 'Der Betrag wird Ihnen innerhalb von 30 Tagen auf Ihr Konto erstattet.' : 'Bitte überweisen Sie den Nachzahlungsbetrag innerhalb von 30 Tagen.'}</p>
        <p className="cp-p">Einsicht in die Belege ist nach Terminvereinbarung möglich.</p>
      </div>
    );
  }

  if (t === 'mahnung') {
    return (
      <div className="cp-doc">
        <Header />
        <p className="cp-subject"><strong>Betreff:</strong>  {form.stage}. Mahnung — Mietrückstand {fill(property?.address)}</p>
        <p className="cp-p">Sehr geehrte/r {fill(form.tenantName)},</p>
        <p className="cp-p">trotz fälliger Zahlung ist auf meinem Konto der Betrag von {fill(fmtEUR(form.amount))} bisher nicht eingegangen (ursprünglich fällig am {fill(formatDate(form.dueDate))}).</p>
        <p className="cp-p">Ich bitte Sie, den ausstehenden Betrag bis spätestens <strong>{fill(formatDate(form.deadline))}</strong> auf folgendes Konto zu überweisen:</p>
        <p className="cp-p" style={{ paddingLeft: 16, fontFamily: 'var(--font-sans)', fontSize: 13 }}>
          DE89 1234 5678 9012 3456 78<br/>
          Inhaber: {ownerName}
        </p>
        {form.stage >= 3 && (
          <p className="cp-p"><strong>Sollte der Betrag bis zum genannten Termin nicht eingegangen sein, sehe ich mich gezwungen, das Mietverhältnis fristlos zu kündigen (§ 543 BGB).</strong></p>
        )}
        <p className="cp-p">Mit freundlichen Grüßen</p>
        <div className="cp-sig-line cp-sig-line-single"></div>
        <div className="cp-sig-label">{ownerName}</div>
      </div>
    );
  }

  if (t === 'mietquittung') {
    return (
      <div className="cp-doc">
        <Header />
        <h2 className="cp-h1">Mietquittung</h2>
        <p className="cp-p">Hiermit bestätige ich, von {fill(form.tenantName)} für die Wohnung {fill(property?.address)}, {fill(unit?.label)} folgende Mietzahlung erhalten zu haben:</p>
        <table className="cp-table">
          <tbody>
            <tr><td>Zeitraum</td><td><span className="fill">{form.period}</span></td></tr>
            <tr><td>Betrag</td><td className="num"><strong>{fmtEUR(form.amount)}</strong></td></tr>
          </tbody>
        </table>
        <div className="cp-sig-line cp-sig-line-single" style={{ marginTop: 32 }}></div>
        <div className="cp-sig-label">{ownerName} · {today}</div>
      </div>
    );
  }

  return <div className="cp-doc"><Header /><p className="cp-p muted">Vorschau für diese Vorlage in Vorbereitung.</p></div>;
}

Object.assign(window, { ContractsPage });