// ─── Mietvertrag-Workflow ─────────────────────────────────────
// Vier geführte Schritte + Übersicht. Wird für Neuanlage UND Bearbeiten
// benutzt (mode="new" | "edit") und liefert die Übersichtskarten, die in
// den Akten die Vertragsansicht bilden (RentalSummaryCards).
const { useState: useStateW, useEffect: useEffectW, useRef: useRefW } = React;

const WZ_STEPS = [
  { id: 'mieter', label: 'Mieter',    title: 'Wer mietet?',        sub: 'Name, Kontakt und Ausweis' },
  { id: 'zeit',   label: 'Zeitraum',  title: 'Wann & wie?',        sub: 'Zeitraum, Uhrzeit, Abholung' },
  { id: 'equip',  label: 'Equipment', title: 'Was wird gemietet?', sub: 'Geräte und Zubehör' },
  { id: 'preis',  label: 'Preis',     title: 'Preis & Status',     sub: 'Kaution, Rabatt, Zahlung' },
  { id: 'check',  label: 'Übersicht', title: 'Alles prüfen',       sub: 'Letzter Blick vor dem Speichern' },
];

// ── kleine Bausteine ────────────────────────────────────────
function WzLabel({ t, children, top = 18 }) {
  return <div style={{ fontSize: 11, color: t.textSec, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.6, marginTop: top, marginBottom: 7 }}>{children}</div>;
}

function WzCard({ t, children, pad = 0 }) {
  return <div style={{ background: t.card, borderRadius: 16, border: `0.5px solid ${t.sep}`, overflow: 'hidden', padding: pad }}>{children}</div>;
}

function WzRow({ t, label, value, hint, last }) {
  return (
    <div style={{ padding: '11px 14px', borderTop: last === 'first' ? 'none' : `0.5px solid ${t.sep}`, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 14 }}>
      <div style={{ fontSize: 12.5, color: t.textSec, fontWeight: 500, flexShrink: 0 }}>{label}</div>
      <div style={{ textAlign: 'right', minWidth: 0 }}>
        <div style={{ fontSize: 13.5, color: t.text, fontWeight: 600, whiteSpace: 'pre-wrap' }}>{value || '—'}</div>
        {hint ? <div style={{ fontSize: 10.5, color: t.textTer, marginTop: 2 }}>{hint}</div> : null}
      </div>
    </div>
  );
}

// Fortschritt: Punkte, aktueller Schritt als Pille — antippbar (freies Springen)
function WzDots({ t, steps, idx, onJump, done }) {
  const Pressable = window.Pressable;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '2px 0 2px' }}>
      {steps.map((s, i) => {
        const cur = i === idx;
        const filled = cur || (i < idx && done(i));
        return (
          <Pressable key={s.id} onClick={() => onJump(i)} scale={0.86}>
            <div style={{ padding: '8px 0', display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: cur ? 26 : 9, height: 9, borderRadius: 5,
                background: filled ? t.solidBg : t.chipStrong,
                transition: 'width 0.22s, background 0.22s',
              }} />
              {cur && <span style={{ fontSize: 11.5, fontWeight: 700, color: t.text, letterSpacing: 0.1 }}>{s.label}</span>}
            </div>
          </Pressable>
        );
      })}
    </div>
  );
}

// ── Verfügbarkeits-Block (Equipment im Zeitraum) ────────────
function WzAvailability({ t, rental, rentals = [], events = [], excludeRentalId }) {
  const items = window.getRentalItems(rental) || [];
  if (!items.length) return null;
  const conflicts = items.flatMap((it) =>
    (window.equipmentConflicts(it.equipmentId, rental.start, rental.end, rentals, events, excludeRentalId) || [])
      .map((c) => ({ ...c, equipmentName: it.equipmentName })));
  const free = conflicts.length === 0;
  return (
    <div style={{
      borderRadius: 16, padding: '13px 15px',
      background: free ? t.greenSoft : t.redSoft,
      border: `1px solid ${(free ? t.green : t.red)}40`,
      display: 'flex', alignItems: 'flex-start', gap: 11,
    }}>
      <div style={{ width: 26, height: 26, borderRadius: 13, background: free ? t.green : t.red, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        {free
          ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7" /></svg>
          : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round"><path d="M12 7v7M12 17.5v.5" /></svg>}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: free ? t.green : t.red }}>
          {free ? 'Alle Positionen verfügbar' : 'Doppelbuchung – mind. eine Position belegt'}
        </div>
        {free
          ? <div style={{ fontSize: 11.5, color: t.textSec, marginTop: 2 }}>{items.length} Position{items.length > 1 ? 'en' : ''} im Zeitraum {window.fmtRange(rental.start, rental.end)} frei.</div>
          : <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 6 }}>
              {conflicts.map((c) => (
                <div key={c.kind + c.id + c.equipmentName} style={{ fontSize: 11.5, color: t.text }}>
                  <span style={{ color: t.textSec, fontStyle: 'italic' }}>{c.equipmentName} · </span>
                  <strong style={{ fontWeight: 700 }}>{c.title}</strong>
                  <span style={{ color: t.textSec }}> · {window.fmtRange(c.start, c.end)}</span>
                </div>
              ))}
            </div>}
      </div>
    </div>
  );
}

// ── Preisaufstellung (groß) ─────────────────────────────────
function WzPriceBlock({ t, rental, big = true }) {
  const days = window.billableDays(rental);
  const calDays = window.daysBetween(rental.start, rental.end);
  const items = window.getRentalItems(rental) || [];
  const sub = items.reduce((s, it) => s + days * (Number(it.dailyRate) || 0) * Math.max(1, Number(it.quantity) || 1), 0);
  const accCost = window.rentalAccessoryCost ? window.rentalAccessoryCost(rental) : 0;
  const deliveryFee = (rental.delivery && rental.delivery.enabled && window.rentalDeliveryFee) ? window.rentalDeliveryFee(rental) : 0;
  const disc = Math.max(0, Number(rental.discount) || 0);
  const computed = Math.max(0, sub + accCost + deliveryFee - disc);
  const hasOverride = rental.priceOverride != null && rental.priceOverride !== '';
  const total = hasOverride ? Math.max(0, Number(rental.priceOverride) || 0) : computed;
  const line = (label, val, color) => (
    <div key={label} style={{ padding: '7px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
      <div style={{ fontSize: 12.5, color: color || t.textSec }}>{label}</div>
      <div style={{ fontSize: 13.5, fontWeight: 600, color: color || t.text, fontVariantNumeric: 'tabular-nums' }}>{val}</div>
    </div>
  );
  return (
    <div style={{ background: t.card, borderRadius: 18, overflow: 'hidden', border: `0.5px solid ${t.sep}` }}>
      <div style={{ padding: '13px 16px 4px' }}>
        {line(`Equipment · ${days} Tag${days > 1 ? 'e' : ''}${days !== calDays ? ` (von ${calDays})` : ''}`, `${sub} €`)}
        {accCost > 0 && line(`Zubehör · ${days} Tag${days > 1 ? 'e' : ''}`, `+ ${accCost} €`)}
        {deliveryFee > 0 && line(`Lieferung${(rental.delivery || {}).feeMode === 'manual' ? ' · Festpreis' : ''}`, `+ ${Math.round(deliveryFee)} €`)}
        {disc > 0 && line('Rabatt', `− ${disc} €`, t.red)}
        {hasOverride && line('automatisch wäre', `${computed} €`, t.textTer)}
      </div>
      <div style={{ height: 0.5, background: t.sep, margin: '8px 16px 0' }} />
      <div style={{ padding: big ? '15px 16px' : '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: t.accentSoft }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>Gesamt</div>
          {Number(rental.deposit) > 0 && <div style={{ fontSize: 10.5, color: t.textSec, marginTop: 2 }}>zzgl. {Number(rental.deposit)} € Kaution</div>}
        </div>
        <div style={{ fontSize: big ? 30 : 22, fontWeight: 700, color: t.accent, letterSpacing: -0.8, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap', flexShrink: 0, lineHeight: 1.1 }}>{total} €</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Übersichtskarten — Workflow-Schritt 5 UND Vertragsansicht in Akten
// ─────────────────────────────────────────────────────────────
function RentalSummaryCards({ rental, equipment = [], accessories = [], allRentals = [], events = [], blockedCustomers = [], onEditStep, onViewPhoto, excludeRentalId, inset = 0, showIdentity = true }) {
  const t = window.useTheme();
  const Pressable = window.Pressable;
  const items = window.getRentalItems(rental) || [];
  const accItems = rental.accessoryItems || [];
  const del = rental.delivery || {};
  const blockedHit = window.findBlockedCustomer(rental.tenantName, blockedCustomers);
  const days = window.billableDays(rental);
  const calDays = window.daysBetween(rental.start, rental.end);
  const allDay = !rental.startTime && !rental.endTime;
  const sub = items.reduce((s, it) => s + days * (Number(it.dailyRate) || 0) * Math.max(1, Number(it.quantity) || 1), 0);
  const accCost = window.rentalAccessoryCost ? window.rentalAccessoryCost(rental) : 0;
  const deliveryFee = (del.enabled && window.rentalDeliveryFee) ? Math.round(window.rentalDeliveryFee(rental)) : 0;
  const disc = Math.max(0, Number(rental.discount) || 0);
  const computed = Math.max(0, sub + accCost + deliveryFee - disc);
  const hasOverride = rental.priceOverride != null && rental.priceOverride !== '';
  const total = hasOverride ? Math.max(0, Number(rental.priceOverride) || 0) : computed;
  const sm = window.statusMeta(rental.status);
  const pm = window.paymentMeta(rental.paymentStatus || 'offen');
  const dm = window.depositMeta(rental.depositStatus || 'offen');

  // Einheitlicher Kartenkopf: gleiche Höhe, gleiche Typo, gleicher Bearbeiten-Button
  const Head = ({ title, step }) => (
    <div style={{ height: 40, padding: '0 14px', borderBottom: `0.5px solid ${t.sep}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
      <div style={{ fontSize: 11, color: t.textSec, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>{title}</div>
      {onEditStep && step && (
        <Pressable onClick={() => onEditStep(step)} scale={0.92}>
          <div style={{ height: 24, padding: '0 10px', borderRadius: 12, background: t.chip, display: 'flex', alignItems: 'center', fontSize: 11, fontWeight: 700, color: t.text, letterSpacing: 0.1 }}>Bearbeiten</div>
        </Pressable>
      )}
    </div>
  );
  const Card = ({ title, step, children }) => (
    <div style={{ background: t.card, borderRadius: 16, border: `0.5px solid ${t.sep}`, overflow: 'hidden' }}>
      <Head title={title} step={step} />
      {children}
    </div>
  );
  // Kompakte Wertzeile — eine Typo-Größe für alle Labels, eine für alle Werte
  const Line = ({ label, value, hint, strong, first, color }) => (
    <div style={{ padding: '9px 14px', borderTop: first ? 'none' : `0.5px solid ${t.sep}`, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 14 }}>
      <div style={{ fontSize: 12, color: t.textSec, fontWeight: 500, flexShrink: 0 }}>{label}</div>
      <div style={{ textAlign: 'right', minWidth: 0 }}>
        <div style={{ fontSize: 13, color: color || t.text, fontWeight: strong ? 700 : 600, whiteSpace: 'pre-wrap', fontVariantNumeric: 'tabular-nums' }}>{value || '—'}</div>
        {hint ? <div style={{ fontSize: 10.5, color: t.textTer, marginTop: 1 }}>{hint}</div> : null}
      </div>
    </div>
  );

  return (
    <div style={{ padding: `0 ${inset}px`, display: 'flex', flexDirection: 'column', gap: 12 }}>
      {/* Kopf — Preis und Zeitraum zuerst */}
      <div style={{ background: t.card, borderRadius: 16, border: `0.5px solid ${t.sep}`, overflow: 'hidden' }}>
        {showIdentity && (
          <div style={{ padding: '12px 14px', borderBottom: `0.5px solid ${t.sep}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: t.text, letterSpacing: -0.2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{rental.tenantName || 'Ohne Namen'}</div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 9px', borderRadius: 999, background: sm.color + '22', flexShrink: 0 }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: sm.color }} />
              <span style={{ fontSize: 10.5, fontWeight: 700, color: sm.color, letterSpacing: 0.3 }}>{sm.label}</span>
            </div>
          </div>
        )}
        <div style={{ padding: '13px 14px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 14 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 11, color: t.textSec, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>Zeitraum</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: t.text, marginTop: 3, letterSpacing: -0.2 }}>{window.fmtRange(rental.start, rental.end)}</div>
            <div style={{ fontSize: 11.5, color: t.textSec, marginTop: 2 }}>
              {calDays} Tag{calDays > 1 ? 'e' : ''}{days !== calDays ? ` · ${days} berechnet` : ''}{allDay ? ' · ganzer Tag' : ` · ${rental.startTime}–${rental.endTime}`}
            </div>
          </div>
          <div style={{ textAlign: 'right', flexShrink: 0 }}>
            <div style={{ fontSize: 26, fontWeight: 700, color: t.accent, letterSpacing: -0.7, lineHeight: 1.05, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{total} €</div>
            <div style={{ fontSize: 10.5, color: t.textTer, marginTop: 2 }}>{hasOverride ? 'Festpreis' : 'Gesamt'}{Number(rental.deposit) > 0 ? ` · ${Number(rental.deposit)} € Kaution` : ''}</div>
          </div>
        </div>
        <div style={{ borderTop: `0.5px solid ${t.sep}`, display: 'flex' }}>
          {[{ k: 'Miete', m: pm }, { k: 'Kaution', m: dm }].map(({ k, m }, i) => (
            <div key={k} style={{ flex: 1, padding: '8px 14px', borderLeft: i ? `0.5px solid ${t.sep}` : 'none', display: 'flex', alignItems: 'center', gap: 7 }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: m.color, flexShrink: 0 }} />
              <span style={{ fontSize: 11.5, color: t.textSec }}>{k}</span>
              <span style={{ fontSize: 11.5, color: t.text, fontWeight: 700, marginLeft: 'auto', whiteSpace: 'nowrap' }}>{m.short || m.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Equipment & Zubehör */}
      <Card title="Equipment & Zubehör" step="equip">
        {items.length === 0 && accItems.length === 0 ? (
          <div style={{ padding: '12px 14px', fontSize: 12.5, color: t.textSec }}>Keine Positionen — der Vorgang läuft nur über die Notiz.</div>
        ) : (
          <>
            {items.map((it, i) => (
              <div key={it.equipmentId + i} style={{ padding: '9px 14px', borderTop: i ? `0.5px solid ${t.sep}` : 'none', display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: t.textSec, minWidth: 22, fontVariantNumeric: 'tabular-nums' }}>{Math.max(1, Number(it.quantity) || 1)}×</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: t.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.equipmentName}</div>
                  <div style={{ fontSize: 10.5, color: t.textTer, marginTop: 1, fontVariantNumeric: 'tabular-nums' }}>{Number(it.dailyRate) || 0} €/Tag</div>
                </div>
                <div style={{ fontSize: 13, fontWeight: 700, color: t.text, fontVariantNumeric: 'tabular-nums' }}>{days * (Number(it.dailyRate) || 0) * Math.max(1, Number(it.quantity) || 1)} €</div>
              </div>
            ))}
            {accItems.map((a, i) => (
              <div key={a.accessoryId} style={{ padding: '9px 14px', borderTop: `0.5px solid ${t.sep}`, display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: t.textSec, minWidth: 22, fontVariantNumeric: 'tabular-nums' }}>{Math.max(1, Number(a.quantity) || 1)}×</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: t.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.name}</div>
                  <div style={{ fontSize: 10.5, color: t.textTer, marginTop: 1 }}>Zubehör</div>
                </div>
                <div style={{ fontSize: 13, fontWeight: 700, color: (Number(a.dailyRate) || 0) > 0 ? t.text : t.textTer, fontVariantNumeric: 'tabular-nums' }}>
                  {(Number(a.dailyRate) || 0) > 0 ? `${days * Number(a.dailyRate) * Math.max(1, Number(a.quantity) || 1)} €` : 'inkl.'}
                </div>
              </div>
            ))}
            {(() => {
              const conflicts = items.flatMap((it) => (window.equipmentConflicts(it.equipmentId, rental.start, rental.end, allRentals, events, excludeRentalId) || []).map((c) => ({ ...c, equipmentName: it.equipmentName })));
              if (!items.length) return null;
              const free = conflicts.length === 0;
              return (
                <div style={{ padding: '9px 14px', borderTop: `0.5px solid ${t.sep}`, background: free ? t.greenSoft : t.redSoft, display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                  <div style={{ width: 6, height: 6, borderRadius: 3, background: free ? t.green : t.red, marginTop: 5, flexShrink: 0 }} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: free ? t.green : t.red }}>{free ? 'Im Zeitraum verfügbar' : 'Doppelbuchung'}</div>
                    {!free && conflicts.map((c) => (
                      <div key={c.kind + c.id + c.equipmentName} style={{ fontSize: 11, color: t.text, marginTop: 2 }}>
                        {c.equipmentName} · {c.title} · {window.fmtRange(c.start, c.end)}
                      </div>
                    ))}
                  </div>
                </div>
              );
            })()}
          </>
        )}
      </Card>

      {/* Mieter */}
      <Card title="Mieter" step="mieter">
        <Line first label="Name" value={rental.tenantName} strong />
        {rental.phone ? <Line label="Telefon" value={rental.phone} /> : null}
        {rental.email ? <Line label="E-Mail" value={rental.email} /> : null}
        {rental.address ? <Line label="Adresse" value={rental.address} /> : null}
        {!rental.phone && !rental.email && !rental.address ? <Line label="Kontakt" value="nicht hinterlegt" color={t.textTer} /> : null}
        {(rental.photos || []).length ? <Line label="Ausweis" value={`${(rental.photos || []).length} Foto${(rental.photos || []).length > 1 ? 's' : ''}`} /> : null}
        {blockedHit && (
          <div style={{ padding: '9px 14px', borderTop: `0.5px solid ${t.sep}`, background: t.redSoft }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: t.red }}>Kunde ist gesperrt</div>
            {blockedHit.reason ? <div style={{ fontSize: 11.5, color: t.text, marginTop: 2 }}>{blockedHit.reason}</div> : null}
          </div>
        )}
      </Card>

      {/* Abholung & Rückgabe */}
      <Card title="Abholung & Rückgabe" step="zeit">
        <Line first label="Art" value={del.enabled ? 'Wir liefern & holen ab' : 'Kunde holt & bringt'} />
        {del.enabled ? <Line label="Adresse" value={(del.address || rental.address || '').replace(/\n/g, ', ')} /> : null}
        {del.enabled ? <Line label="Lieferpreis" value={`${deliveryFee} €`} hint={del.feeMode === 'manual' ? 'Festpreis' : `${String(del.km || 0).replace('.', ',')} km einfach`} /> : null}
        {!allDay ? <Line label={del.enabled ? 'Lieferzeit' : 'Abholzeit'} value={`${rental.startTime} Uhr`} /> : null}
        {!allDay ? <Line label={del.enabled ? 'Abholung bei Kunde' : 'Rückgabe'} value={`${rental.endTime} Uhr`} /> : null}
        {rental.purpose ? <Line label="Zweck" value={rental.purpose} /> : null}
      </Card>

      {/* Preis im Detail */}
      <Card title="Preis" step="preis">
        <Line first label={`Equipment · ${days} Tag${days > 1 ? 'e' : ''}`} value={`${sub} €`} />
        {accCost > 0 ? <Line label="Zubehör" value={`+ ${accCost} €`} /> : null}
        {deliveryFee > 0 ? <Line label="Lieferung" value={`+ ${deliveryFee} €`} /> : null}
        {disc > 0 ? <Line label="Rabatt" value={`− ${disc} €`} color={t.red} /> : null}
        {Number(rental.deposit) > 0 ? <Line label="Kaution" value={`${Number(rental.deposit)} €`} hint="separat, nicht im Gesamtpreis" /> : null}
        {hasOverride ? <Line label="automatisch wäre" value={`${computed} €`} color={t.textTer} /> : null}
        <div style={{ padding: '10px 14px', borderTop: `0.5px solid ${t.sep}`, background: t.accentSoft, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: t.text }}>Gesamt</div>
          <div style={{ fontSize: 16, fontWeight: 700, color: t.accent, fontVariantNumeric: 'tabular-nums' }}>{total} €</div>
        </div>
      </Card>

      {/* Notiz */}
      {rental.note ? (
        <Card title="Notiz" step="preis">
          <div style={{ padding: '10px 14px', fontSize: 12.5, color: t.text, lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>{rental.note}</div>
        </Card>
      ) : null}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Der Workflow selbst
// ─────────────────────────────────────────────────────────────
function RentalWizard({
  open, onClose, onSave, equipment = [], accessories = [], tabSettings = {}, rentals = [], events = [],
  prefill = null, initial = null, mode = 'new', initialStep = 'mieter',
  logistik = {}, company = {}, blockedCustomers = [], toast,
}) {
  const t = window.useTheme();
  const Pressable = window.Pressable;
  const Sheet = window.Sheet;
  const Icon = window.Icon;
  const MiniRangePicker = window.MiniRangePicker;
  const [palette] = window.useLocal('rf-event-colors', window.EVENT_COLORS);

  const blank = {
    tenantName: '', address: '', email: '', phone: '',
    items: [], accessoryItems: [],
    purpose: '', start: window.todayISO(), end: window.todayISO(),
    billDays: '', startTime: '09:00', endTime: '18:00',
    deposit: 100, discount: 0, note: '', color: '',
    delivery: { enabled: false, km: '', address: '' },
    status: 'reserviert', depositStatus: 'offen', paymentStatus: 'offen',
    photos: [],
  };
  const [form, setForm] = useStateW(blank);
  const [step, setStep] = useStateW(0);
  const [showPicker, setShowPicker] = useStateW(true);

  useEffectW(() => {
    if (!open) return;
    const base = { ...blank, ...(initial || prefill || {}) };
    if ((!base.items || !base.items.length) && base.equipmentId) {
      const eq = equipment.find((e) => e.id === base.equipmentId);
      if (eq) base.items = [{ equipmentId: eq.id, equipmentName: eq.name, dailyRate: Number(base.dailyRate || eq.price) || 0, quantity: Math.max(1, Number(base.quantity) || 1) }];
    }
    if (!base.items) base.items = [];
    setForm(base);
    const i = WZ_STEPS.findIndex((s) => s.id === initialStep);
    setStep(i < 0 ? 0 : i);
  }, [open, initialStep]);

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const hasItems = !!(form.items && form.items.length);
  const hasNote = !!(form.note && form.note.trim());
  const hasName = !!(form.tenantName || '').trim();
  const valid = hasName && (hasItems || hasNote);
  const isEdit = mode === 'edit';
  const excludeId = isEdit ? (initial || {}).id : null;

  // Schritt gilt als erledigt, sobald das Wesentliche drin ist
  const stepDone = (i) => {
    if (i === 0) return hasName;
    if (i === 1) return !!form.start && !!form.end;
    if (i === 2) return hasItems || hasNote;
    if (i === 3) return valid;
    return false;
  };

  // ── Ausweis-Fotos ──
  const idPhotoRef = useRefW(null);
  const [pendingSide, setPendingSide] = useStateW(null);
  const triggerIdPhoto = (side) => { setPendingSide(side); if (idPhotoRef.current) { idPhotoRef.current.value = ''; idPhotoRef.current.click(); } };
  const onIdPhotoFile = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const side = pendingSide; setPendingSide(null);
    try {
      const dataUrl = await window.compressImage(file, 900);
      const label = side === 'front' ? 'Ausweis Vorderseite' : 'Ausweis Rückseite';
      setForm((f) => ({ ...f, photos: [...(f.photos || []).filter((p) => p.label !== label), { id: 'ph-' + Date.now(), label, dataUrl, addedAt: window.todayDE() }] }));
    } catch (err) { toast && toast('Foto konnte nicht geladen werden'); }
  };
  const removeIdPhoto = (side) => {
    const label = side === 'front' ? 'Ausweis Vorderseite' : 'Ausweis Rückseite';
    setForm((f) => ({ ...f, photos: (f.photos || []).filter((p) => p.label !== label) }));
  };

  const fInp = { width: '100%', padding: '13px 14px', borderRadius: 13, border: `0.5px solid ${t.inputBorder}`, background: t.card, fontSize: 15, color: t.text, outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box' };
  const days = window.billableDays(form);
  const calDays = window.daysBetween(form.start, form.end);
  const blockedHit = window.findBlockedCustomer(form.tenantName, blockedCustomers);

  const save = () => {
    if (!valid) return;
    const primary = (form.items && form.items[0]) || null;
    const out = {
      ...(initial || {}),
      ...form,
      id: (initial && initial.id) || 'r-' + Date.now(),
      items: (form.items || []).map((it) => ({ equipmentId: it.equipmentId, equipmentName: it.equipmentName, dailyRate: Number(it.dailyRate) || 0, quantity: Math.max(1, Number(it.quantity) || 1) })),
      billDays: (form.billDays === '' || Number(form.billDays) === calDays) ? '' : Math.max(1, Math.floor(Number(form.billDays) || 1)),
      equipmentId: primary ? primary.equipmentId : '',
      equipmentName: primary ? primary.equipmentName : '',
      dailyRate: primary ? primary.dailyRate : 0,
      quantity: primary ? primary.quantity : 1,
      deposit: Number(form.deposit) || 0,
      discount: Number(form.discount) || 0,
      status: window.autoRentalStatus(form.start, form.end),
      depositStatus: form.depositStatus || 'offen',
      paymentStatus: form.paymentStatus || 'offen',
    };
    onSave && onSave(out);
    onClose && onClose();
  };

  const cur = WZ_STEPS[step];

  // ─── Schritt 1: Mieter ───
  const StepMieter = (
    <div>
      <input ref={idPhotoRef} type="file" accept="image/*" onChange={onIdPhotoFile} style={{ display: 'none' }} />
      <WzLabel t={t} top={4}>Name</WzLabel>
      <input value={form.tenantName} onChange={(e) => set('tenantName', e.target.value)} placeholder="Vor- und Nachname *"
        style={{ ...fInp, fontSize: 17, fontWeight: 600, border: blockedHit ? `1.5px solid ${t.red}` : fInp.border }} />
      {blockedHit && (
        <div style={{ marginTop: 8, borderRadius: 14, padding: '12px 14px', background: t.redSoft, border: `1px solid ${t.red}55` }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: t.red }}>Kunde ist gesperrt</div>
          <div style={{ fontSize: 12, color: blockedHit.reason ? t.text : t.textSec, marginTop: 3, lineHeight: 1.4 }}>{blockedHit.reason || 'Kein Grund hinterlegt.'}</div>
          <div style={{ fontSize: 10.5, color: t.textTer, marginTop: 4 }}>Gesperrt seit {window.fmtDateDE(blockedHit.since)}</div>
        </div>
      )}

      <WzLabel t={t}>Kontakt <span style={{ color: t.textTer, fontWeight: 500, textTransform: 'none', letterSpacing: 0 }}>· optional</span></WzLabel>
      <textarea value={form.address} onChange={(e) => set('address', e.target.value)} placeholder="Adresse" rows={2} style={{ ...fInp, resize: 'none' }} />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 8 }}>
        <input value={form.email} onChange={(e) => set('email', e.target.value)} placeholder="E-Mail" type="email" style={fInp} />
        <input value={form.phone} onChange={(e) => set('phone', e.target.value)} placeholder="Telefon" style={fInp} />
      </div>

      <WzLabel t={t}>Ausweis-Fotos</WzLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {[{ side: 'front', label: 'Vorderseite' }, { side: 'back', label: 'Rückseite' }].map(({ side, label }) => {
          const full = side === 'front' ? 'Ausweis Vorderseite' : 'Ausweis Rückseite';
          const ph = (form.photos || []).find((p) => p.label === full);
          return (
            <div key={side} style={{ position: 'relative' }}>
              <Pressable onClick={() => triggerIdPhoto(side)} scale={0.97}>
                <div style={{ aspectRatio: '3 / 2', borderRadius: 14, background: ph ? '#000' : t.card, border: ph ? 'none' : `1px dashed ${t.inputBorder}`, overflow: 'hidden', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 7 }}>
                  {ph ? <img src={ph.dataUrl} alt={full} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : (
                    <>
                      <div style={{ width: 38, height: 38, borderRadius: 12, background: t.solidBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={t.solidFg} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h3l1.5-2h9L18 7h3v12H3z" /><circle cx="12" cy="13" r="3.5" /></svg>
                      </div>
                      <div style={{ fontSize: 12.5, fontWeight: 600, color: t.text }}>{label}</div>
                    </>
                  )}
                </div>
              </Pressable>
              {ph && (
                <Pressable onClick={() => removeIdPhoto(side)} scale={0.88}>
                  <div style={{ position: 'absolute', top: 6, right: 6, width: 26, height: 26, borderRadius: 13, background: 'rgba(0,0,0,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
                  </div>
                </Pressable>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );

  // ─── Schritt 2: Zeitraum & Logistik ───
  const deliveryOn = !!(form.delivery && form.delivery.enabled);
  const kmRate = (logistik && logistik.kmRate) || 0.7;
  const pauschale = (logistik && logistik.pauschale) || 10;
  const tripFactor = (form.delivery && form.delivery.tripFactor) || (logistik && logistik.tripFactor) || 4;
  const lookupKm = (addr) => {
    const s = String(addr || '').trim().toLowerCase();
    if (!s) return null;
    const cities = { 'münchen': 24, 'augsburg': 58, 'starnberg': 9, 'fürstenfeldbruck': 7, 'gauting': 11, 'gilching': 8, 'pasing': 16, 'olching': 6, 'puchheim': 4, 'germering': 3 };
    for (const [k, v] of Object.entries(cities)) if (s.includes(k)) return v;
    let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0;
    return 8 + (h % 38);
  };
  const deliveryCalc = (() => {
    const k = Math.max(0, Number(String((form.delivery || {}).km || '').replace(',', '.')) || 0);
    if (!k) return { totalKm: 0, total: 0 };
    const totalKm = k * tripFactor;
    return { totalKm, total: Math.round(totalKm * kmRate + pauschale) };
  })();

  const StepZeit = (
    <div>
      <WzLabel t={t} top={4}>Zeitraum</WzLabel>
      <Pressable onClick={() => setShowPicker((s) => !s)} scale={0.99}>
        <div style={{ ...fInp, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 15, color: t.text, fontWeight: 600 }}>{window.fmtRange(form.start, form.end)}</div>
            <div style={{ fontSize: 11.5, color: t.textSec, marginTop: 2 }}>{calDays} Tag{calDays > 1 ? 'e' : ''}</div>
          </div>
          <Icon d={showPicker ? 'M5 15l7-7 7 7' : 'M5 9l7 7 7-7'} color={t.textSec} size={16} sw={2} />
        </div>
      </Pressable>
      {showPicker && (
        <div style={{ marginTop: 10, padding: 16, background: t.card, borderRadius: 16, border: `0.5px solid ${t.sep}` }}>
          <MiniRangePicker start={form.start} end={form.end} onChange={(s, e) => setForm((f) => ({ ...f, start: s, end: e }))} anchorISO={form.start} />
        </div>
      )}

      <WzLabel t={t}>Uhrzeit</WzLabel>
      <WzCard t={t}>
        <div style={{ display: 'flex', padding: '12px 14px', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>Ganzer Tag</div>
            <div style={{ fontSize: 10.5, color: t.textTer, marginTop: 1 }}>Uhrzeiten werden nicht erfasst</div>
          </div>
          {(() => {
            const allDay = !form.startTime && !form.endTime;
            return (
              <Pressable onClick={() => setForm((f) => (allDay ? { ...f, startTime: '09:00', endTime: '18:00' } : { ...f, startTime: '', endTime: '' }))} scale={0.9}>
                <div style={{ width: 42, height: 26, borderRadius: 13, padding: 2, background: allDay ? t.solidBg : t.chip, display: 'flex', justifyContent: allDay ? 'flex-end' : 'flex-start', alignItems: 'center' }}>
                  <div style={{ width: 22, height: 22, borderRadius: 11, background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }} />
                </div>
              </Pressable>
            );
          })()}
        </div>
        {(form.startTime || form.endTime) && [
          { key: 'startTime', label: deliveryOn ? 'Lieferzeitpunkt' : 'Abholung', date: form.start, fallback: '09:00' },
          { key: 'endTime', label: deliveryOn ? 'Abholzeit' : 'Rückgabe', date: form.end, fallback: '18:00' },
        ].map((r) => (
          <div key={r.key} style={{ borderTop: `0.5px solid ${t.sep}`, padding: '11px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 12.5, color: t.textSec, fontWeight: 500 }}>{r.label}</div>
              <div style={{ fontSize: 10.5, color: t.textTer, marginTop: 1 }}>{window.fmtDateDE(r.date).slice(0, -5)}</div>
            </div>
            <input type="time" value={form[r.key] || r.fallback} onChange={(e) => set(r.key, e.target.value)}
              style={{ padding: '7px 10px', borderRadius: 9, border: `0.5px solid ${t.inputBorder}`, background: t.inputBg, fontSize: 15, color: t.text, fontFamily: 'inherit', fontWeight: 600 }} />
          </div>
        ))}
      </WzCard>

      <WzLabel t={t}>Abholung & Rückgabe</WzLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, padding: 3, borderRadius: 14, background: t.chipStrong }}>
        {[{ id: 'self', label: 'Kunde holt & bringt' }, { id: 'deliver', label: 'Wir liefern & holen ab' }].map(({ id, label }) => {
          const on = (id === 'deliver') === deliveryOn;
          return (
            <Pressable key={id} onClick={() => set('delivery', { ...(form.delivery || {}), enabled: id === 'deliver' })} scale={0.96} style={{ width: '100%' }}>
              <div style={{ height: 46, borderRadius: 11, background: on ? (t.dark ? '#48484A' : '#fff') : 'transparent', color: on ? t.text : t.textSec, fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 8px', boxShadow: on ? '0 1px 3px rgba(0,0,0,0.08)' : 'none' }}>{label}</div>
            </Pressable>
          );
        })}
      </div>

      {deliveryOn && (
        <div style={{ marginTop: 10, padding: 14, background: t.card, borderRadius: 16, border: `0.5px solid ${t.sep}` }}>
          <textarea value={(form.delivery.address || form.address || '')} onChange={(e) => set('delivery', { ...form.delivery, address: e.target.value })}
            placeholder="Lieferadresse" rows={2}
            style={{ width: '100%', padding: '10px 12px', borderRadius: 11, border: `0.5px solid ${t.inputBorder}`, background: t.inputBg, fontSize: 13.5, color: t.text, outline: 'none', resize: 'none', fontFamily: 'inherit', boxSizing: 'border-box' }} />
          <div style={{ display: 'flex', gap: 3, padding: 2, borderRadius: 11, background: t.chipStrong, marginTop: 8 }}>
            {[{ v: 'km', label: 'Nach km' }, { v: 'manual', label: 'Festpreis' }].map((opt) => {
              const sel = ((form.delivery.feeMode) || 'km') === opt.v;
              return (
                <Pressable key={opt.v} onClick={() => set('delivery', { ...form.delivery, feeMode: opt.v })} scale={0.96} style={{ flex: 1 }}>
                  <div style={{ padding: '8px 0', textAlign: 'center', borderRadius: 9, fontSize: 12.5, fontWeight: 700, background: sel ? (t.dark ? '#48484A' : '#fff') : 'transparent', color: sel ? t.text : t.textSec }}>{opt.label}</div>
                </Pressable>
              );
            })}
          </div>
          {((form.delivery.feeMode) || 'km') === 'manual' ? (
            <div style={{ marginTop: 10, position: 'relative' }}>
              <input type="text" inputMode="decimal" value={form.delivery.manualFee ?? ''} onChange={(e) => set('delivery', { ...form.delivery, manualFee: e.target.value })} placeholder="0"
                style={{ width: '100%', padding: '12px 30px 12px 12px', borderRadius: 11, border: `0.5px solid ${t.inputBorder}`, background: t.inputBg, fontSize: 16, fontWeight: 700, color: t.text, outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box' }} />
              <span style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', fontSize: 13, color: t.textSec, fontWeight: 600 }}>€</span>
            </div>
          ) : (
            <>
              <Pressable onClick={() => {
                const v = lookupKm((form.delivery && form.delivery.address) || form.address);
                if (v == null) { toast && toast('Adresse eingeben'); return; }
                set('delivery', { ...form.delivery, km: String(v) });
                toast && toast(`~${v} km via Mock-Routing`);
              }} scale={0.96}>
                <div style={{ marginTop: 8, padding: '12px 14px', borderRadius: 11, background: t.solidBg, color: t.solidFg, textAlign: 'center', fontSize: 13, fontWeight: 700 }}>Entfernung aus Adresse berechnen</div>
              </Pressable>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 8 }}>
                <div>
                  <div style={{ fontSize: 10, color: t.textSec, fontWeight: 600, marginBottom: 4 }}>Entfernung (einf.)</div>
                  <div style={{ position: 'relative' }}>
                    <input type="text" inputMode="decimal" value={form.delivery.km || ''} onChange={(e) => set('delivery', { ...form.delivery, km: e.target.value })} placeholder="0"
                      style={{ width: '100%', padding: '10px 30px 10px 12px', borderRadius: 10, border: `0.5px solid ${t.inputBorder}`, background: t.inputBg, fontSize: 14, fontWeight: 600, color: t.text, outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box' }} />
                    <span style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', fontSize: 11, color: t.textSec, fontWeight: 600 }}>km</span>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 10, color: t.textSec, fontWeight: 600, marginBottom: 4 }}>Fahrten <span style={{ color: t.textTer, fontWeight: 500 }}>· intern</span></div>
                  <div style={{ display: 'flex', gap: 3, padding: 2, borderRadius: 10, background: t.chipStrong }}>
                    {[1, 2, 4].map((v) => {
                      const sel = tripFactor === v;
                      return (
                        <Pressable key={v} onClick={() => set('delivery', { ...form.delivery, tripFactor: v })} scale={0.95} style={{ flex: 1 }}>
                          <div style={{ padding: '8px 0', textAlign: 'center', borderRadius: 8, fontSize: 12, fontWeight: 700, background: sel ? (t.dark ? '#48484A' : '#fff') : 'transparent', color: sel ? t.text : t.textSec }}>{v}×</div>
                        </Pressable>
                      );
                    })}
                  </div>
                </div>
              </div>
              {deliveryCalc.total > 0 && (
                <div style={{ marginTop: 10, paddingTop: 10, borderTop: `0.5px solid ${t.sep}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{ fontSize: 11, color: t.textSec }}>{String(deliveryCalc.totalKm).replace('.', ',')} km × {String(kmRate).replace('.', ',')} € + {pauschale} €</div>
                  <div style={{ fontSize: 17, fontWeight: 700, color: t.accent }}>+ {deliveryCalc.total} €</div>
                </div>
              )}
            </>
          )}
        </div>
      )}

      <WzLabel t={t}>Zweck <span style={{ color: t.textTer, fontWeight: 500, textTransform: 'none', letterSpacing: 0 }}>· optional</span></WzLabel>
      <input value={form.purpose} onChange={(e) => set('purpose', e.target.value)} placeholder="z. B. Hochzeit" style={fInp} />
    </div>
  );

  // ─── Schritt 3: Equipment & Zubehör ───
  const StepEquip = (
    <div>
      <WzLabel t={t} top={4}>Equipment & Anzahl</WzLabel>
      <window.RentalItemsEditor
        items={form.items || []} onChange={(v) => set('items', v)} equipment={equipment}
        days={days} calendarDays={calDays} billDays={form.billDays}
        onBillDaysChange={(v) => set('billDays', v === '' ? '' : (v === calDays ? '' : v))}
        rentals={rentals} events={events} rentalStart={form.start} rentalEnd={form.end}
        excludeRentalId={excludeId}
        showIcons={(tabSettings.equipment || {}).showIcons !== false} />
      {accessories.length > 0 && (
        <>
          <WzLabel t={t}>Zubehör</WzLabel>
          <window.AccessoryRentalEditor
            value={form.accessoryItems || []} onChange={(v) => set('accessoryItems', v)}
            accessories={accessories} equipmentItems={form.items || []} rentals={rentals}
            rentalStart={form.start} rentalEnd={form.end} days={days}
            excludeRentalId={excludeId}
            showIcons={(tabSettings.zubehoer || {}).showIcons !== false} />
        </>
      )}
      <div style={{ marginTop: 16 }}>
        <WzAvailability t={t} rental={form} rentals={rentals} events={events} excludeRentalId={excludeId} />
      </div>
      {!hasItems && (
        <div style={{ marginTop: 12, padding: '12px 14px', borderRadius: 14, background: t.chip }}>
          <div style={{ fontSize: 12.5, color: t.text, fontWeight: 600 }}>Ohne Equipment?</div>
          <div style={{ fontSize: 11.5, color: t.textSec, marginTop: 3, lineHeight: 1.4 }}>Dann ist im nächsten Schritt eine Notiz Pflicht — z. B. Beratung oder Reservierung für später.</div>
        </div>
      )}
    </div>
  );

  // ─── Schritt 4: Preis & Status ───
  const StepPreis = (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 4 }}>
        <div>
          <WzLabel t={t} top={0}>Kaution</WzLabel>
          <div style={{ position: 'relative' }}>
            <input type="number" inputMode="decimal" value={form.deposit} placeholder="0" onChange={(e) => set('deposit', e.target.value)} style={{ ...fInp, paddingRight: 30, fontWeight: 700 }} />
            <span style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', fontSize: 13, color: t.textSec, fontWeight: 600 }}>€</span>
          </div>
        </div>
        <div>
          <WzLabel t={t} top={0}>Rabatt</WzLabel>
          <div style={{ position: 'relative' }}>
            <input type="number" inputMode="decimal" value={form.discount || ''} placeholder="0" onChange={(e) => set('discount', e.target.value)}
              style={{ ...fInp, paddingRight: 30, fontWeight: 700, color: (Number(form.discount) || 0) > 0 ? t.red : t.text }} />
            <span style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', fontSize: 13, color: t.textSec, fontWeight: 600 }}>€</span>
          </div>
        </div>
      </div>

      <WzLabel t={t}>Preis</WzLabel>
      <WzPriceBlock t={t} rental={form} big={false} />

      <WzLabel t={t}>Zahlung & Kaution</WzLabel>
      <WzCard t={t}>
        <div style={{ padding: '12px 14px' }}>
          <div style={{ fontSize: 12, color: t.textSec, fontWeight: 500, marginBottom: 8 }}>Mietbetrag</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {window.PAYMENT_STEPS.map((s) => {
              const pm = window.paymentMeta(s);
              const sel = (form.paymentStatus || 'offen') === s;
              return (
                <Pressable key={s} onClick={() => set('paymentStatus', s)} scale={0.95} style={{ flex: 1 }}>
                  <div style={{ padding: '9px 0', textAlign: 'center', borderRadius: 11, fontSize: 11.5, fontWeight: 700, background: sel ? (t.studio ? t.solidBg : pm.color) : t.chip, color: sel ? (t.studio ? t.solidFg : '#fff') : t.textSec }}>{pm.short}</div>
                </Pressable>
              );
            })}
          </div>
        </div>
        <div style={{ borderTop: `0.5px solid ${t.sep}`, padding: '12px 14px' }}>
          <div style={{ fontSize: 12, color: t.textSec, fontWeight: 500, marginBottom: 8 }}>Kaution</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
            {window.DEPOSIT_STEPS.map((s) => {
              const dm = window.depositMeta(s);
              const sel = (form.depositStatus || 'offen') === s;
              return (
                <Pressable key={s} onClick={() => set('depositStatus', s)} scale={0.95}>
                  <div style={{ padding: '9px 4px', textAlign: 'center', borderRadius: 11, fontSize: 11.5, fontWeight: 700, background: sel ? (t.studio ? t.solidBg : dm.color) : t.chip, color: sel ? (t.studio ? t.solidFg : '#fff') : t.textSec, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{dm.short}</div>
                </Pressable>
              );
            })}
          </div>
        </div>
      </WzCard>

      <WzLabel t={t}>Farbe im Kalender</WzLabel>
      <div style={{ display: 'flex', gap: 11, flexWrap: 'wrap', alignItems: 'center' }}>
        {(palette || window.EVENT_COLORS).map((c, i) => {
          const sel = (form.color || '') === c;
          return (
            <Pressable key={i} onClick={() => set('color', c)} scale={0.9}>
              <div style={{ width: 32, height: 32, borderRadius: 16, background: c, border: sel ? `3px solid ${t.card}` : '0', boxShadow: sel ? `0 0 0 2px ${c}` : '0 1px 2px rgba(0,0,0,0.1)' }} />
            </Pressable>
          );
        })}
        <Pressable onClick={() => set('color', '')} scale={0.9}>
          <div style={{ height: 32, padding: '0 13px', borderRadius: 16, background: t.chip, display: 'flex', alignItems: 'center', fontSize: 11.5, fontWeight: 700, color: t.textSec, border: !form.color ? `1.5px dashed ${t.text}` : '0' }}>Auto</div>
        </Pressable>
      </div>

      <WzLabel t={t}>Notiz{!hasItems && <span style={{ color: t.red, marginLeft: 4 }}>· Pflicht ohne Equipment</span>}</WzLabel>
      <textarea value={form.note || ''} onChange={(e) => set('note', e.target.value)} rows={4}
        placeholder={hasItems ? 'Sonderwünsche, Treffpunkt, Zustand …' : 'Beschreibe den Vorgang – z. B. nur Beratung, externes Equipment …'}
        style={{ ...fInp, minHeight: 92, lineHeight: 1.45, resize: 'vertical', border: (!hasItems && !hasNote) ? `1.5px solid ${t.red}` : fInp.border }} />
    </div>
  );

  // ─── Schritt 5: Übersicht ───
  const StepCheck = (
    <div style={{ marginTop: 6 }}>
      {!valid && (
        <div style={{ marginBottom: 12, padding: '12px 14px', borderRadius: 14, background: t.redSoft, border: `1px solid ${t.red}40` }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: t.red }}>Noch nicht speicherbar</div>
          <div style={{ fontSize: 11.5, color: t.text, marginTop: 3 }}>{!hasName ? 'Der Name des Mieters fehlt.' : 'Ohne Equipment ist eine Notiz Pflicht.'}</div>
        </div>
      )}
      {(!(form.photos || []).length || !form.phone) && (
        <div style={{ marginBottom: 12, padding: '11px 14px', borderRadius: 14, background: t.chip }}>
          <div style={{ fontSize: 12, color: t.textSec, lineHeight: 1.45 }}>
            Optional offen: {[!(form.photos || []).length ? 'Ausweis-Fotos' : null, !form.phone ? 'Telefon' : null, !form.email ? 'E-Mail' : null].filter(Boolean).join(' · ')}
          </div>
        </div>
      )}
      <RentalSummaryCards rental={form} equipment={equipment} accessories={accessories}
        allRentals={rentals} events={events} blockedCustomers={blockedCustomers}
        excludeRentalId={excludeId} onEditStep={(id) => setStep(WZ_STEPS.findIndex((s) => s.id === id))} />
    </div>
  );

  const body = [StepMieter, StepZeit, StepEquip, StepPreis, StepCheck][step];
  const isLast = step === WZ_STEPS.length - 1;
  const primaryLabel = isLast
    ? (blockedHit ? 'Trotz Sperre speichern' : (isEdit ? 'Änderungen speichern' : 'Mietvertrag anlegen'))
    : 'Weiter';
  const primaryBg = isLast ? (!valid ? t.chip : (blockedHit ? t.red : t.solidBg)) : t.solidBg;

  return (
    <Sheet open={open} onClose={onClose} maxHeight="94%">
      <div style={{ padding: '0 20px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: t.accent, textTransform: 'uppercase', letterSpacing: 0.7 }}>
              {isLast ? 'Übersicht' : `Schritt ${step + 1} von 4`}{isEdit ? ' · Bearbeiten' : ''}
            </div>
            <div style={{ fontSize: 23, fontWeight: 700, color: t.text, letterSpacing: -0.6, marginTop: 3, lineHeight: 1.15 }}>{cur.title}</div>
            <div style={{ fontSize: 12.5, color: t.textSec, marginTop: 4, lineHeight: 1.35 }}>{cur.sub}</div>
          </div>
          <Pressable onClick={onClose} scale={0.9}>
            <div style={{ width: 32, height: 32, borderRadius: 16, background: t.chip, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={t.text} strokeWidth="2.6" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
            </div>
          </Pressable>
        </div>
        <WzDots t={t} steps={WZ_STEPS} idx={step} onJump={setStep} done={stepDone} />
        <div style={{ paddingBottom: 8 }}>{body}</div>
      </div>

      <div style={{ position: 'sticky', bottom: -36, marginTop: 4, padding: '14px 20px 44px', background: t.sheetBg, boxShadow: `0 -14px 18px -8px ${t.sheetBg}`, display: 'flex', gap: 10, zIndex: 3 }}>
        {step > 0 && (
          <Pressable onClick={() => setStep((s) => Math.max(0, s - 1))} scale={0.96}>
            <div style={{ padding: '15px 18px', borderRadius: 14, background: t.chip, fontSize: 14, fontWeight: 700, color: t.text }}>Zurück</div>
          </Pressable>
        )}
        <Pressable onClick={() => (isLast ? save() : setStep((s) => Math.min(WZ_STEPS.length - 1, s + 1)))} scale={0.98} style={{ flex: 1 }}>
          <div style={{ padding: '15px 0', textAlign: 'center', borderRadius: 14, background: primaryBg, color: isLast && !valid ? t.textTer : t.solidFg, fontSize: 15.5, fontWeight: 700 }}>{primaryLabel}</div>
        </Pressable>
      </div>
    </Sheet>
  );
}

Object.assign(window, { RentalWizard, RentalSummaryCards, WZ_STEPS, WzPriceBlock, WzAvailability });