// Einstellungen — sub-views part 2: Dokumente, Erinnerungen, Darstellung.

const { useState: useStateE2, useEffect: useEffectE2 } = React;

// ─────────────────────────────────────────────────────────────
// Dokumente — number patterns, payment defaults, footer + PDF template + accent
// ─────────────────────────────────────────────────────────────
function DokumenteSettingsView({ t, c, set, onBack, onClose }) {
  const nextInvoiceNo = previewNumber(c.invoicePattern, c.invoiceCounter || 1);
  const nextContractNo = previewNumber(c.contractPattern, c.contractCounter || 1);

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

      <GroupLabel t={t}>Nummern-Schemata</GroupLabel>
      <GroupCard t={t}>
        <InputRow label="Rechnungsnummern" value={c.invoicePattern}
        onChange={(v) => set({ invoicePattern: v })}
        placeholder="RE-{YYYY}-{####}" t={t} />
        <InputRow label="Vertragsnummern" value={c.contractPattern}
        onChange={(v) => set({ contractPattern: v })}
        placeholder="MV-{YYYY}-{####}" t={t} last />
      </GroupCard>
      <HintLine t={t}>{'{YYYY} = Jahr  ·  {YY} = Kurzjahr  ·  {####} = Zähler'}</HintLine>

      {/* Preview tile */}
      <div style={{ padding: '10px 16px 0' }}>
        <div style={{
          background: t.cardAlt, borderRadius: 12, padding: '12px 14px',
          fontFamily: 'ui-monospace, SF Mono, Menlo, monospace',
          fontSize: 13, color: t.text, lineHeight: 1.7
        }}>
          <div><span style={{ color: t.textSec }}>Nächste Rechnung:</span> <strong>{nextInvoiceNo}</strong></div>
          <div><span style={{ color: t.textSec }}>Nächster Vertrag:</span> <strong>{nextContractNo}</strong></div>
        </div>
      </div>

      <GroupLabel t={t}>Standard-Konditionen</GroupLabel>
      <GroupCard t={t}>
        <ListRow t={t}
        title="Zahlungsfrist" sub="Tage bis zur Fälligkeit auf Rechnungen."
        right={<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <NumberPill t={t} value={c.paymentDays ?? ''} onChange={(v) => set({ paymentDays: v === '' ? '' : v })} />
            <span style={{ fontSize: 13, color: t.textSec, minWidth: 32 }}>Tage</span>
          </div>} />
        
        <ListRow t={t} last
        title="Standard-Kaution" sub="Vorgeschlagener Wert bei neuen Mietaufträgen."
        right={<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <NumberPill t={t} width={64} value={c.defaultDeposit ?? ''} onChange={(v) => set({ defaultDeposit: v === '' ? '' : v })} />
            <span style={{ fontSize: 13, color: t.textSec, minWidth: 32 }}>€</span>
          </div>} />
        
      </GroupCard>

      {/* PDF template + accent (kept from previous Firmenprofil) */}
      <GroupLabel t={t}>PDF-Vorlage</GroupLabel>
      <div style={{ padding: '0 16px', display: 'flex', gap: 8 }}>
        {PDF_TEMPLATES.map((tp) => {
          const sel = (c.template || 'modern') === tp.id;
          return (
            <Pressable key={tp.id} onClick={() => set({ template: tp.id })} scale={0.96} style={{ flex: 1 }}>
              <div style={{
                padding: '10px 8px', borderRadius: 12, textAlign: 'center',
                background: sel ? t.accentSoft : t.card,
                border: sel ? `1.5px solid ${t.accent}` : `0.5px solid ${t.sep}`,
                boxShadow: sel ? 'none' : t.shadowCard
              }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: sel ? t.accent : t.text }}>{tp.label}</div>
                <div style={{ fontSize: 10.5, color: t.textSec, marginTop: 2, lineHeight: 1.3 }}>{tp.desc}</div>
              </div>
            </Pressable>);

        })}
      </div>

      <div style={{ padding: '12px 16px 0' }}>
        <div style={{ fontSize: 11, color: t.textSec, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>Akzentfarbe</div>
        <div style={{ display: 'flex', gap: 10 }}>
          {ACCENT_OPTIONS.map((col) => {
            const sel = (c.accent || '#1f6feb').toLowerCase() === col.toLowerCase();
            return (
              <Pressable key={col} onClick={() => set({ accent: col })} scale={0.88}>
                <div style={{
                  width: 32, height: 32, borderRadius: 16, background: col,
                  border: sel ? `2.5px solid ${t.text}` : `2.5px solid transparent`,
                  boxShadow: '0 1px 3px rgba(0,0,0,0.2)'
                }} />
              </Pressable>);

          })}
        </div>
      </div>

      <GroupLabel t={t}>Rechnungs-Fußzeile</GroupLabel>
      <div style={{ padding: '0 16px' }}>
        <textarea value={c.footer || ''} onChange={(e) => set({ footer: e.target.value })}
        rows={3}
        placeholder="Vielen Dank für Ihren Auftrag…"
        style={{
          width: '100%', padding: '12px 14px', borderRadius: 12,
          border: `0.5px solid ${t.inputBorder}`, background: t.card,
          fontSize: 14, color: t.text, outline: 'none', fontFamily: 'inherit',
          resize: 'vertical', lineHeight: 1.45, boxSizing: 'border-box',
          boxShadow: t.shadowCard
        }} />
        <div style={{ fontSize: 12, color: t.textSec, marginTop: 6, lineHeight: 1.4 }}>
          Erscheint unter jeder generierten Rechnung.
        </div>
      </div>

      <div style={{ height: 20 }} />
    </div>);

}

// ─────────────────────────────────────────────────────────────
// Erinnerungen — push toggles + lead-time days
// ─────────────────────────────────────────────────────────────
function ErinnerungenView({ t, c, set, onBack, onClose }) {
  const rContract = c.remContractEnd || { on: true, days: 3 };
  const rReturn = c.remReturnOverdue || { on: true };
  const rMaint = c.remMaintDue || { on: true };
  const rInvoice = c.remInvoiceOverdue || { on: true, days: 7 };
  const rStart = c.remRentalStart || { on: true, days: 1 };
  const rPickup = c.remPickupTime || { on: true, hours: 2 };

  const tagePill = (val, onChange) =>
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <NumberPill t={t} value={val ?? ''} onChange={(v) => onChange(v === '' ? 0 : v)} />
      <span style={{ fontSize: 13, color: t.textSec, minWidth: 32 }}>Tage</span>
    </div>;
  const stundenPill = (val, onChange) =>
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <NumberPill t={t} value={val ?? ''} onChange={(v) => onChange(v === '' ? 0 : v)} />
      <span style={{ fontSize: 13, color: t.textSec, minWidth: 32 }}>Std.</span>
    </div>;


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

      <GroupLabel t={t}>Push-Benachrichtigungen</GroupLabel>
      <HintLine t={t}>System-Mitteilungen, wenn etwas zu tun ist.</HintLine>

      <div style={{ height: 8 }} />
      <GroupCard t={t}>
        <ListRow t={t}
        title="Vor Mietbeginn"
        sub={`Vorlauf: ${rStart.days || 0} Tag${rStart.days === 1 ? '' : 'e'} vor dem Mietstart.`}
        right={
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              {tagePill(rStart.days, (v) => set({ remRentalStart: { ...rStart, days: v } }))}
              <Toggle t={t} on={!!rStart.on} onChange={(v) => set({ remRentalStart: { ...rStart, on: v } })} />
            </div>
        } />

        <ListRow t={t}
        title="Vor Treffpunkt / Abholung"
        sub={`Erinnerung ${rPickup.hours || 0} Stunde${rPickup.hours === 1 ? '' : 'n'} vor der vereinbarten Abholzeit.`}
        right={
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              {stundenPill(rPickup.hours, (v) => set({ remPickupTime: { ...rPickup, hours: v } }))}
              <Toggle t={t} on={!!rPickup.on} onChange={(v) => set({ remPickupTime: { ...rPickup, on: v } })} />
            </div>
        } />

        <ListRow t={t}
        title="Vertrag läuft bald ab"
        sub={`Vorlauf: ${rContract.days || 0} Tag${rContract.days === 1 ? '' : 'e'} vor Mietende.`}
        right={
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              {tagePill(rContract.days, (v) => set({ remContractEnd: { ...rContract, days: v } }))}
              <Toggle t={t} on={!!rContract.on} onChange={(v) => set({ remContractEnd: { ...rContract, on: v } })} />
            </div>
        } />
        
        <ListRow t={t}
        title="Rückgabe überfällig"
        sub="Sofortige Erinnerung, wenn ein Vorgang nicht zurückgegeben wurde."
        right={<Toggle t={t} on={!!rReturn.on} onChange={(v) => set({ remReturnOverdue: { ...rReturn, on: v } })} />} />
        
        <ListRow t={t}
        title="Wartung fällig"
        sub="Erinnerung wenn ein Gerät seinen Wartungstermin erreicht."
        right={<Toggle t={t} on={!!rMaint.on} onChange={(v) => set({ remMaintDue: { ...rMaint, on: v } })} />} />
        
        <ListRow t={t} last
        title="Rechnung überfällig"
        sub={`Erinnerung ${rInvoice.days || 0} Tag${rInvoice.days === 1 ? '' : 'e'} nach Zahlungsfrist.`}
        right={
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              {tagePill(rInvoice.days, (v) => set({ remInvoiceOverdue: { ...rInvoice, days: v } }))}
              <Toggle t={t} on={!!rInvoice.on} onChange={(v) => set({ remInvoiceOverdue: { ...rInvoice, on: v } })} />
            </div>
        } />
        
      </GroupCard>

      <div style={{ height: 16 }} />
    </div>);

}

// ─────────────────────────────────────────────────────────────
// Darstellung — light/dark mode + about
// ─────────────────────────────────────────────────────────────
function DarstellungView({ t, dark, toggleDark, c, set, onBack, onClose }) {
  const useLogoIcon = !!(c && c.useLogoIcon);
  const hasLogo = !!(c && c.logo);
  return (
    <div>
      <SubHeader title="Darstellung" onBack={onBack} onClose={onClose} t={t} />

      <GroupLabel t={t}>Erscheinungsbild</GroupLabel>
      <GroupCard t={t}>
        <ListRow t={t} last
        title="Modus" sub="Hell oder Dunkel — passt die ganze App an."
        right={
        <div style={{
          display: 'inline-flex', padding: 3, borderRadius: 10,
          background: t.chipStrong, gap: 0
        }}>
              <Pressable onClick={() => {if (dark) toggleDark();}} scale={0.95}>
                <div style={{
              padding: '6px 12px', borderRadius: 7, display: 'flex', alignItems: 'center', gap: 5,
              background: !dark ? '#fff' : 'transparent',
              color: !dark ? '#000' : t.text,
              fontSize: 13, fontWeight: 600,
              boxShadow: !dark ? '0 1px 2px rgba(0,0,0,0.1)' : 'none'
            }}>
                  <Icon d={EINST_ICONS.sun} color={!dark ? '#000' : t.text} size={13} sw={2} />
                  Hell
                </div>
              </Pressable>
              <Pressable onClick={() => {if (!dark) toggleDark();}} scale={0.95}>
                <div style={{
              padding: '6px 12px', borderRadius: 7, display: 'flex', alignItems: 'center', gap: 5,
              background: dark ? '#636366' : 'transparent',
              color: dark ? '#fff' : t.text,
              fontSize: 13, fontWeight: 600,
              boxShadow: dark ? '0 1px 2px rgba(0,0,0,0.2)' : 'none'
            }}>
                  <Icon d={EINST_ICONS.moon} color={dark ? '#fff' : t.text} size={13} sw={2} />
                  Dunkel
                </div>
              </Pressable>
            </div>
        } />
        
      </GroupCard>

      <GroupLabel t={t}>Symbol oben rechts</GroupLabel>
      <GroupCard t={t}>
        <ListRow t={t} last={!hasLogo || !useLogoIcon}
        title="Firmenlogo statt Zahnrad"
        sub={hasLogo ?
        'Zeigt dein Logo überall anstelle des Einstellungs‑Icons an.' :
        'Lade zuerst in ‚Stammdaten → Firmenlogo‘ ein Logo hoch.'}
        right={
        <Toggle on={useLogoIcon && hasLogo} t={t}
        onChange={(v) => {if (!hasLogo) return;set({ useLogoIcon: v });}} />
        } />
        
        {useLogoIcon && hasLogo &&
        <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12, borderTop: `0.5px solid ${t.sep}` }}>
            <span style={{ fontSize: 13, color: t.textSec }}>Vorschau:</span>
            <div style={{
            width: 38, height: 38, borderRadius: 19, background: t.card,
            border: `0.5px solid ${t.dark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.06)'}`,
            boxShadow: t.shadowCard,
            display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden'
          }}>
              <img src={c.logo} alt="" style={{ width: 26, height: 26, objectFit: 'contain' }} />
            </div>
          </div>
        }
      </GroupCard>

      <div style={{ height: 16 }} />
    </div>);

}

Object.assign(window, {
  DokumenteSettingsView, ErinnerungenView, DarstellungView
});