// KI-Assistent — provider-agnostic AI assistant with insights feed + chat

const AI_PROVIDERS = [
  { id: "claude", name: "Claude", vendor: "Anthropic", models: ["claude-sonnet-4.5", "claude-haiku-4.5"], color: "#cc785c" },
  { id: "openai", name: "GPT", vendor: "OpenAI", models: ["gpt-4o", "gpt-4o-mini"], color: "#10a37f" },
  { id: "gemini", name: "Gemini", vendor: "Google", models: ["gemini-2.5-pro", "gemini-2.5-flash"], color: "#4285f4" },
  { id: "mistral", name: "Mistral", vendor: "Mistral AI", models: ["mistral-large", "mistral-small"], color: "#ff7000" },
  { id: "ollama", name: "Ollama", vendor: "Lokal", models: ["llama3.1:70b", "qwen2.5:32b"], color: "#888888" },
];

// Curated demo insights — these read like real findings an LLM would surface
const AI_INSIGHTS = [
  {
    id: "i1", category: "Sparpotenzial", priority: "hoch", date: "2026-04-29",
    title: "Heizungswartungs­kosten 38 % über Markt­durchschnitt",
    summary: "Heizung Berger berechnet 240 € pro Wartung in der Lindenstraße. Der regionale Durchschnitt liegt bei 145–180 €. Empfehlung: 2 Vergleichs­angebote einholen.",
    saving: 720, // EUR/year
    action: "Vergleichsangebote anfordern",
    refs: [{ kind: "contact", id: "c3", label: "Heizung Berger" }, { kind: "property", id: "p1", label: "Lindenstraße 42" }],
    confidence: 0.86,
  },
  {
    id: "i2", category: "Steuer", priority: "mittel", date: "2026-04-28",
    title: "AfA Lindenstraße: 2 % statt 2,5 % anwendbar",
    summary: "Da das Gebäude vor 1925 errichtet wurde (Baujahr 1908), kannst du die erhöhte lineare AfA von 2,5 % geltend machen. Aktuell sind 2 % angesetzt — zusätzliche Werbungskosten ca. 7.250 €/Jahr.",
    saving: 2900,
    action: "Mit Steuerberater klären",
    refs: [{ kind: "property", id: "p1", label: "Lindenstraße 42" }, { kind: "contact", id: "c6", label: "Kanzlei Wiegand" }],
    confidence: 0.78,
  },
  {
    id: "i3", category: "Beleg", priority: "hoch", date: "2026-04-22",
    title: "Beleg fehlt: Bad-Renovierung 3.200 €",
    summary: "Anzahlung an Klempnerei Heinrich am 19.04. ist als Buchung erfasst, aber kein Rechnungs­dokument hinterlegt. Für den steuerlichen Nachweis und §35a EStG benötigst du die Originalrechnung.",
    action: "Rechnung anfordern",
    refs: [{ kind: "contact", id: "c1", label: "Klempnerei Heinrich" }, { kind: "property", id: "p1", label: "Lindenstraße 42" }],
    confidence: 0.99,
  },
  {
    id: "i4", category: "Recht", priority: "hoch", date: "2026-04-20",
    title: "Mietspiegel: Wohnung 4 unter Marktmiete",
    summary: "Lindenstraße 42, Wohnung 4 (84 m², 1. OG) wird voraussichtlich für 1.080 € neu vermietet. Der Berliner Mietspiegel 2025 erlaubt für vergleichbare Lagen bis zu 14,80 €/m² Kaltmiete (≈ 1.243 €). Mieterhöhung möglich, aber Kappungsgrenze beachten.",
    saving: 1956,
    action: "Mietangebot anpassen",
    refs: [{ kind: "property", id: "p1", label: "Lindenstraße 42" }, { kind: "unit", id: "u4", label: "Wohnung 4" }],
    confidence: 0.82,
  },
  {
    id: "i5", category: "Anomalie", priority: "mittel", date: "2026-04-15",
    title: "Stromverbrauch Wohnung 1 unplausibel niedrig",
    summary: "Letzte Ablesung 4.821 kWh — das entspricht ca. 2.100 kWh/Jahr für eine 2,5-Zimmer-Wohnung. Erwartungs­bereich: 2.800–3.500 kWh. Möglich: defekter Zähler, Untermietung oder Übermittlungsfehler.",
    action: "Zähler prüfen lassen",
    refs: [{ kind: "unit", id: "u1", label: "Wohnung 1" }],
    confidence: 0.71,
  },
  {
    id: "i6", category: "Frist", priority: "hoch", date: "2026-04-12",
    title: "Nebenkosten­abrechnung 2024 — letzte 30 Tage",
    summary: "§ 556 Abs. 3 BGB: Die Abrechnung muss spätestens 12 Monate nach Ende des Abrechnungs­zeitraums dem Mieter vorliegen. Für Stadtpark 7 (3 Mieter) endet die Frist am 31.05.2026.",
    action: "Abrechnung erstellen",
    refs: [{ kind: "property", id: "p2", label: "Am Stadtpark 7" }],
    confidence: 0.95,
  },
  {
    id: "i7", category: "Sparpotenzial", priority: "niedrig", date: "2026-04-08",
    title: "Versicherungs­prämie Eichenallee bündelbar",
    summary: "Die Gebäude­versicherung bei Allianz für Eichenallee fehlt — alle anderen 3 Objekte sind bei Allianz versichert. Sammelvertrag erfahrungs­gemäß 8–12 % günstiger.",
    saving: 280,
    action: "Sammelangebot einholen",
    refs: [{ kind: "property", id: "p4", label: "Eichenallee 3" }, { kind: "contact", id: "c7", label: "Allianz" }],
    confidence: 0.74,
  },
];

const TOTAL_SAVINGS = AI_INSIGHTS.reduce((s, i) => s + (i.saving || 0), 0);

window.AI_PROVIDERS = AI_PROVIDERS;
window.AI_INSIGHTS = AI_INSIGHTS;
window.AI_TOTAL_SAVINGS = TOTAL_SAVINGS;

// ───────────────────────────────────────────────────────────────────

function AssistantPage({ data, setRoute }) {
  const [tab, setTab] = React.useState('insights');
  const [health, setHealth] = React.useState(null);
  const [insights, setInsights] = React.useState({ loading: true, items: [], generatedAt: null, error: null });

  const reloadHealth = React.useCallback(async () => {
    try { setHealth(await window.getHealth()); }
    catch { setHealth({ ok: false, ocr: { enabled: false } }); }
  }, []);

  const reloadInsights = React.useCallback(async (force) => {
    setInsights(s => ({ ...s, loading: true, error: null }));
    try {
      const r = await window.getAiInsights(force);
      setInsights({ loading: false, items: r.insights || [], generatedAt: r.generatedAt, cached: r.cached, error: null });
    } catch (e) {
      setInsights({ loading: false, items: [], generatedAt: null, error: e.detail || e.message });
    }
  }, []);

  React.useEffect(() => { reloadHealth(); reloadInsights(false); }, [reloadHealth, reloadInsights]);

  const aiEnabled = !!health?.ocr?.enabled;
  const model = health?.ocr?.model || '';

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <span style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--ink-4)' }}>KI-Assistent</span>
            {aiEnabled
              ? <span className="pill pos"><span className="pill-dot"></span>Verbunden · OpenAI {model}</span>
              : <span className="pill warn"><span className="pill-dot"></span>OPENAI_API_KEY nicht gesetzt</span>}
          </div>
          <h1 className="page-title">Berater</h1>
          <div className="page-subtitle">Analysiert deine Daten, findet Sparpotenziale, beantwortet Fragen.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-primary" onClick={() => reloadInsights(true)} disabled={!aiEnabled || insights.loading}>
            <AIIcon.Sparkle /> {insights.loading ? 'Analysiert…' : 'Neue Analyse'}
          </button>
        </div>
      </div>

      <div className="tabs">
        <button className={`tab ${tab === 'insights' ? 'active' : ''}`} onClick={() => setTab('insights')}>
          Erkenntnisse <span className="tab-count">{insights.items.length}</span>
        </button>
        <button className={`tab ${tab === 'chat' ? 'active' : ''}`} onClick={() => setTab('chat')}>Chat</button>
        <button className={`tab ${tab === 'audit' ? 'active' : ''}`} onClick={() => setTab('audit')}>Belegprüfung</button>
      </div>

      {tab === 'insights' && <InsightsTab data={data} setRoute={setRoute} insights={insights} aiEnabled={aiEnabled} reload={reloadInsights} />}
      {tab === 'chat' && <ChatTab data={data} aiEnabled={aiEnabled} model={model} />}
      {tab === 'audit' && <AuditTab data={data} />}
    </div>
  );
}

// ───── Insights tab ─────

function InsightsTab({ data, setRoute, insights, aiEnabled, reload }) {
  const [filter, setFilter] = React.useState('alle');
  const cats = ['alle', 'Sparpotenzial', 'Steuer', 'Recht', 'Beleg', 'Frist', 'Anomalie', 'Auslastung'];

  const items = insights.items || [];
  const filtered = filter === 'alle' ? items : items.filter(i => i.category === filter);
  const totalSavings = items.reduce((s, i) => s + (i.savingsEur || 0), 0);
  const highPrioCount = items.filter(i => i.priority === 'hoch').length;
  const lastAnalysis = insights.generatedAt ? new Date(insights.generatedAt) : null;
  const ago = (() => {
    if (!lastAnalysis) return '—';
    const mins = Math.floor((Date.now() - lastAnalysis.getTime()) / 60000);
    if (mins < 1) return 'gerade eben';
    if (mins < 60) return `vor ${mins} Min`;
    const h = Math.floor(mins / 60);
    if (h < 24) return `vor ${h} Std`;
    return lastAnalysis.toLocaleDateString('de-DE');
  })();

  if (!aiEnabled) {
    return (
      <div className="empty" style={{ padding: '60px 20px', textAlign: 'center' }}>
        <div style={{ fontSize: 36, marginBottom: 8 }}>🔌</div>
        <div className="empty-title">KI nicht verbunden</div>
        <div style={{ color: 'var(--ink-3)', maxWidth: 420, margin: '0 auto' }}>
          Setze <code>OPENAI_API_KEY</code> in der <code>.env</code> auf dem Server, dann analysiert die KI dein Portfolio automatisch.
        </div>
      </div>
    );
  }

  if (insights.error) {
    return (
      <div className="empty" style={{ padding: '40px 20px', textAlign: 'center' }}>
        <div style={{ fontSize: 36, marginBottom: 8 }}>⚠</div>
        <div className="empty-title">KI-Analyse fehlgeschlagen</div>
        <div style={{ color: 'var(--neg)', fontSize: 13, marginBottom: 16 }}>{insights.error}</div>
        <button className="btn btn-primary" onClick={() => reload(true)}>Erneut versuchen</button>
      </div>
    );
  }

  if (insights.loading && items.length === 0) {
    return (
      <div className="empty" style={{ padding: '60px 20px', textAlign: 'center' }}>
        <div style={{ fontSize: 36, marginBottom: 8 }}>⟳</div>
        <div className="empty-title">KI analysiert dein Portfolio…</div>
        <div style={{ color: 'var(--ink-3)' }}>Dauert ~5–15 Sek beim ersten Aufruf, danach 24h gecached.</div>
      </div>
    );
  }

  if (items.length === 0) {
    return (
      <div className="empty" style={{ padding: '60px 20px', textAlign: 'center' }}>
        <div style={{ fontSize: 36, marginBottom: 8 }}>✓</div>
        <div className="empty-title">Keine Hinweise gefunden</div>
        <div style={{ color: 'var(--ink-3)', maxWidth: 420, margin: '0 auto' }}>
          Entweder ist alles im grünen Bereich, oder es gibt zu wenige Daten für valide Insights.
          Lege mehr Buchungen / Mieter / Objekte an oder klick „Neue Analyse".
        </div>
      </div>
    );
  }

  return (
    <div>
      <div className="kpi-grid" style={{ marginBottom: 32 }}>
        <div className="kpi">
          <div className="kpi-label">Sparpotenzial p.a.</div>
          <div className="kpi-value" style={{ color: 'var(--pos)' }}>{fmtEUR(totalSavings)}</div>
          <div className="kpi-meta">{totalSavings > 0 ? 'aus quantifizierbaren Hinweisen' : '—'}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Offene Hinweise</div>
          <div className="kpi-value">{items.length}</div>
          <div className="kpi-meta">{highPrioCount > 0 ? `${highPrioCount} mit hoher Priorität` : 'keine kritischen'}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Letzte Analyse</div>
          <div className="kpi-value" style={{ fontSize: 22 }}>{ago}</div>
          <div className="kpi-meta">{insights.cached ? 'aus Cache' : 'frisch generiert'}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Modell</div>
          <div className="kpi-value" style={{ fontSize: 16 }}>OpenAI</div>
          <div className="kpi-meta">analysiert deine echten Daten</div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 4, marginBottom: 24, flexWrap: 'wrap' }}>
        {cats.map(c => {
          const count = c === 'alle' ? items.length : items.filter(i => i.category === c).length;
          if (c !== 'alle' && count === 0) return null;
          return (
            <button key={c} onClick={() => setFilter(c)}
              className={`btn ${filter === c ? 'btn-primary' : 'btn-ghost'} btn-sm`}>
              {c}
              {c !== 'alle' && <span style={{ marginLeft: 4, opacity: 0.6 }}>{count}</span>}
            </button>
          );
        })}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        {filtered.map((ins, i) => <InsightCard key={i} ins={ins} setRoute={setRoute} data={data} />)}
      </div>
    </div>
  );
}

function InsightCard({ ins, setRoute, data }) {
  const [creating, setCreating] = React.useState(false);
  const [created, setCreated] = React.useState(null); // { taskId } when done
  const [err, setErr] = React.useState(null);

  const createTask = async () => {
    setCreating(true); setErr(null);
    try {
      const dueIn14 = new Date();
      dueIn14.setDate(dueIn14.getDate() + 14);
      const dueDate = dueIn14.toISOString().slice(0, 10);
      const desc = `[KI-Berater · ${ins.category}] ${ins.description}` +
        (typeof ins.savingsEur === 'number' && ins.savingsEur > 0 ? `\n\n💰 Sparpotenzial: ${fmtEUR(ins.savingsEur)} p.a.` : '');
      const t = await data.store.addTask({
        title: ins.actionLabel ? `${ins.actionLabel}: ${ins.title}` : ins.title,
        description: desc,
        propertyId: ins.propertyId || null,
        unitId: ins.unitId || null,
        priority: ins.priority || 'mittel',
        dueDate,
      });
      setCreated(t);
    } catch (e) {
      setErr(e.message);
    } finally {
      setCreating(false);
    }
  };

  const refs = [];
  if (ins.propertyId) {
    const p = data.properties.find(x => x.id === ins.propertyId);
    if (p) refs.push({ kind: 'property', id: p.id, label: p.name });
  }
  if (ins.unitId) {
    const prop = data.properties.find(p => p.units.some(u => u.id === ins.unitId));
    const u = prop?.units.find(u => u.id === ins.unitId);
    if (u && prop) refs.push({ kind: 'unit', id: u.id, propertyId: prop.id, label: `${prop.name} · ${u.label}` });
  }
  if (ins.tenantId) {
    const t = data.tenants?.[ins.tenantId];
    if (t) refs.push({ kind: 'tenant', id: t.id, label: t.name });
  }

  return (
    <div className={`insight-card ${ins.priority}`}>
      <div className="insight-rail" data-cat={ins.category}></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="insight-meta">
          <span className="insight-cat">{ins.category}</span>
          <span className="insight-dot">·</span>
          <span className="insight-conf">Priorität {ins.priority}</span>
          <span className="insight-dot">·</span>
          <span className="insight-conf">{Math.round((ins.confidence || 0) * 100)} % Konfidenz</span>
        </div>
        <div className="insight-title">{ins.title}</div>
        <div className="insight-summary">{ins.description}</div>

        {refs.length > 0 && (
          <div className="insight-refs">
            {refs.map((r, i) => (
              <button key={i} className="ref-chip" onClick={() => {
                if (r.kind === 'property') setRoute({ page: 'properties', propertyId: r.id });
                else if (r.kind === 'unit') setRoute({ page: 'properties', propertyId: r.propertyId, unitId: r.id });
                else if (r.kind === 'tenant') setRoute({ page: 'tenants' });
              }}>
                {r.kind === 'property' && <Icon.Building />}
                {r.kind === 'unit' && <Icon.Building />}
                {r.kind === 'tenant' && <Icon.Users />}
                {r.label}
              </button>
            ))}
          </div>
        )}
      </div>

      <div className="insight-aside">
        {typeof ins.savingsEur === 'number' && ins.savingsEur > 0 && (
          <div className="insight-saving">
            <div className="l">Ersparnis p.a.</div>
            <div className="v">{fmtEUR(ins.savingsEur)}</div>
          </div>
        )}
        {ins.actionLabel && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 12, alignItems: 'flex-end' }}>
            {created ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
                <span style={{ fontSize: 12, color: 'var(--pos)', fontWeight: 500 }}>✓ Aufgabe angelegt</span>
                <button className="btn btn-sm btn-ghost" onClick={() => setRoute({ page: 'tasks' })}>
                  → Zur Aufgabe
                </button>
              </div>
            ) : (
              <>
                <button
                  className="btn btn-sm btn-primary"
                  onClick={createTask}
                  disabled={creating}
                  title="Erzeugt eine Aufgabe in der To-Do-Liste mit dem Insight als Beschreibung"
                >
                  {creating ? 'Lädt…' : `→ ${ins.actionLabel}`}
                </button>
                {err && <span style={{ fontSize: 11, color: 'var(--neg)' }}>⚠ {err}</span>}
              </>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

// ───── Chat tab ─────

function ChatTab({ data, aiEnabled, model }) {
  const [messages, setMessages] = React.useState([
    { role: 'assistant', content: `Hallo! Ich bin dein KI-Berater. Ich kenne dein Portfolio (Objekte, Mieter, Buchungen) und kann Fragen zu **Steuerrecht**, **Mietrecht** und **Bewirtschaftung** beantworten — basierend auf deinen echten Daten.` },
  ]);
  const [input, setInput] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);
  const streamRef = React.useRef(null);

  const suggestions = [
    "Welche meiner Ausgaben sind auffällig hoch?",
    "Welche Mieterhöhungen wären 2026 zulässig?",
    "Welche Belege fehlen für die Steuererklärung?",
    "Wie ist die Auslastung meines Portfolios?",
  ];

  React.useEffect(() => {
    if (streamRef.current) streamRef.current.scrollTop = streamRef.current.scrollHeight;
  }, [messages, loading]);

  const send = async (text) => {
    if (!text.trim() || !aiEnabled) return;
    const userMsg = { role: 'user', content: text };
    const newHistory = [...messages, userMsg];
    setMessages(newHistory);
    setInput('');
    setLoading(true);
    setError(null);
    try {
      const r = await window.aiChat(text, messages.slice(1)); // skip seed greeting
      setMessages(m => [...m, { role: 'assistant', content: r.reply }]);
    } catch (e) {
      setError(e.detail || e.message);
    } finally {
      setLoading(false);
    }
  };

  if (!aiEnabled) {
    return (
      <div className="empty" style={{ padding: '60px 20px', textAlign: 'center' }}>
        <div style={{ fontSize: 36, marginBottom: 8 }}>🔌</div>
        <div className="empty-title">Chat nicht verfügbar</div>
        <div style={{ color: 'var(--ink-3)', maxWidth: 420, margin: '0 auto' }}>
          Setze <code>OPENAI_API_KEY</code> in der <code>.env</code>, dann startet der Chat.
        </div>
      </div>
    );
  }

  return (
    <div className="chat-shell">
      <div className="chat-stream" ref={streamRef}>
        {messages.map((m, i) => (
          <div key={i} className={`chat-msg ${m.role}`}>
            {m.role === 'assistant' && (
              <div className="chat-avatar" style={{ background: '#10a37f' }}><AIIcon.Sparkle /></div>
            )}
            <div className="chat-bubble" dangerouslySetInnerHTML={{ __html: formatMarkdown(m.content) }}></div>
          </div>
        ))}
        {loading && (
          <div className="chat-msg assistant">
            <div className="chat-avatar" style={{ background: '#10a37f' }}><AIIcon.Sparkle /></div>
            <div className="chat-bubble">
              <span className="typing"><span></span><span></span><span></span></span>
            </div>
          </div>
        )}
        {error && (
          <div className="chat-msg assistant">
            <div className="chat-avatar" style={{ background: 'var(--neg)' }}>!</div>
            <div className="chat-bubble" style={{ color: 'var(--neg)' }}>⚠ {error}</div>
          </div>
        )}
      </div>

      {messages.length <= 1 && (
        <div className="suggestions">
          {suggestions.map((s, i) => (
            <button key={i} className="suggestion" onClick={() => send(s)}>{s}</button>
          ))}
        </div>
      )}

      <div className="chat-input-wrap">
        <div className="chat-input">
          <input
            placeholder='Frag deinen KI-Berater…'
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter' && !loading) send(input); }}
            disabled={loading}
          />
          <button className="btn btn-primary btn-sm" onClick={() => send(input)} disabled={!input.trim() || loading}>
            {loading ? '…' : 'Senden'}
          </button>
        </div>
        <div className="chat-foot">
          <span className="text-muted" style={{ fontSize: 11 }}>
            Dein Portfolio wird automatisch als Kontext mitgesendet · OpenAI {model}
          </span>
        </div>
      </div>
    </div>
  );
}

function formatMarkdown(text) {
  return text
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\n\n/g, '</p><p>')
    .replace(/^(.+)$/, '<p>$1</p>')
    .replace(/•/g, '·');
}

// ───── Audit (Belegprüfung) tab ─────

const AUDIT_BELEGE = [
  { id: 1, file: "Rechnung_Klempner_2026-04.pdf", contact: "Klempnerei Heinrich", amount: 380, date: "2026-04-12", propertyId: "p1", unitId: "u3", scope: "einheit", category: "Reparatur", status: "ok", findings: [], tips: ["§35a EStG: Lohnanteil (geschätzt 220 €) als haushaltsnahe Dienstleistung steuerlich ansetzbar."] },
  { id: 2, file: "Heizungswartung_Berger.pdf", contact: "Heizung Berger", amount: 240, date: "2026-04-04", propertyId: "p1", unitId: null, scope: "allgemein", category: "Wartung", status: "warn", findings: ["Stundensatz 38 % über Markt", "Kein Wartungsbericht angehängt"], tips: ["Wartungskosten sind als Allgemeinkosten umlagefähig (BetrKV §2 Nr. 4a).", "Vergleichsangebot anfordern — Einsparpotenzial ~95 €."] },
  { id: 3, file: "Versicherung_Allianz_2026.pdf", contact: "Allianz", amount: 1240, date: "2026-01-15", propertyId: "p1", unitId: null, scope: "allgemein", category: "Versicherung", status: "ok", findings: [], tips: ["Wohngebäudeversicherung voll als Werbungskosten absetzbar.", "Anteilig auf Mieter umlegbar."] },
  { id: 4, file: "Steuerberater_Q1.pdf", contact: "Kanzlei Wiegand", amount: 480, date: "2026-03-18", propertyId: "p1", unitId: null, scope: "allgemein", category: "Beratung", status: "ok", findings: [], tips: ["100 % als Werbungskosten absetzbar."] },
  { id: 5, file: "Schornsteinfeger_2026-02.pdf", contact: "Schornsteinfeger Maier", amount: 95, date: "2026-02-09", propertyId: "p2", unitId: null, scope: "allgemein", category: "Wartung", status: "ok", findings: [], tips: ["Voll umlagefähig auf Mieter."] },
  { id: 6, file: "Fenstertausch_W3.pdf", contact: "Elektro Voss", amount: 2400, date: "2026-03-14", propertyId: "p1", unitId: "u3", scope: "einheit", category: "Modernisierung", status: "warn", findings: ["Lieferant ist Elektriker — Gewerk passt nicht zur Leistung"], tips: ["Modernisierung > 4.000 €: Über AfA verteilen, nicht sofort absetzen.", "Bis zu 8 % auf Miete umlegbar (§559 BGB)."] },
  { id: 7, file: "Hausmeister_April.pdf", contact: "Service Klar", amount: 180, date: "2026-04-30", propertyId: "p2", unitId: null, scope: "allgemein", category: "Hausmeister", status: "ok", findings: [], tips: ["Lohnkostenanteil (~70 %) für §35a EStG ansetzen."] },
  { id: 8, file: "Bad_Renovierung_Anzahlung.pdf", contact: "Klempnerei Heinrich", amount: 3200, date: "2026-04-19", propertyId: "p1", unitId: "u3", scope: "einheit", category: "Renovierung", status: "missing", findings: ["Originalrechnung nicht hochgeladen"], tips: ["Ohne Originalbeleg keine §35a-Anrechnung möglich.", "Rechnung muss Lohn- und Materialkosten getrennt ausweisen."] },
  { id: 9, file: "Strom_Allgemein_Q1.pdf", contact: "Stadtwerke Berlin", amount: 145, date: "2026-04-02", propertyId: "p1", unitId: null, scope: "allgemein", category: "Strom", status: "ok", findings: [], tips: ["Allgemeinstrom (Treppenhaus, Keller) auf Mieter umlegbar."] },
  { id: 10, file: "Gartenarbeit_April.pdf", contact: "Grünwerk GmbH", amount: 320, date: "2026-04-22", propertyId: "p4", unitId: null, scope: "allgemein", category: "Gartenpflege", status: "warn", findings: ["Rechnung weist Lohn- und Materialkosten nicht getrennt aus"], tips: ["Trennung anfordern — sonst kein §35a EStG-Abzug möglich."] },
];

const AUDIT_GLOBAL_TIPS = [
  { tone: "pos", title: "92 % der Belege vollständig", body: "Sehr gute Quote. Reichst du den Steuerberater-Ordner zum Quartalsende ein, sparst du dir die hektische Sammlung im März." },
  { tone: "warn", title: "2 Belege ohne Lohn-/Materialtrennung", body: "Bei haushaltsnahen Dienstleistungen müssen Rechnungen den Lohnanteil separat ausweisen — sonst gibt es keinen §35a-Steuerbonus." },
  { tone: "info", title: "Originalbelege scannen reicht", body: "Seit der GoBD-Novelle 2020 sind digitale Belege gleichwertig, solange sie unverändert archiviert werden. Hausgut erfüllt das automatisch." },
  { tone: "neg", title: "1 fehlender Beleg ab 2.000 €", body: "Anzahlung Bad-Renovierung 3.200 € — fordere die Originalrechnung umgehend an. Anzahlungsbelege gelten beim Finanzamt nur als Zahlungsbeleg." },
];

function AuditTab({ data }) {
  const [filter, setFilter] = React.useState({ status: 'all', property: 'all', scope: 'all' });
  const [view, setView] = React.useState('belege'); // belege | mappen | tipps
  const cloudBelege = useDocuments({});
  const belegeInputRef = React.useRef(null);
  const [pendingFiles, setPendingFiles] = React.useState(null);
  const onBelegFiles = (e) => {
    const files = Array.from(e.target.files || []).filter(Boolean);
    if (files.length) setPendingFiles(files);
    if (belegeInputRef.current) belegeInputRef.current.value = '';
  };

  const filtered = AUDIT_BELEGE.filter(a => {
    if (filter.status !== 'all' && a.status !== filter.status) return false;
    if (filter.property !== 'all' && a.propertyId !== filter.property) return false;
    if (filter.scope !== 'all' && a.scope !== filter.scope) return false;
    return true;
  });

  const byProp = {};
  AUDIT_BELEGE.forEach(b => {
    if (!byProp[b.propertyId]) byProp[b.propertyId] = { allgemein: 0, einheit: 0, count: 0, missing: 0, warn: 0 };
    byProp[b.propertyId][b.scope] += b.amount;
    byProp[b.propertyId].count++;
    if (b.status === 'missing') byProp[b.propertyId].missing++;
    if (b.status === 'warn') byProp[b.propertyId].warn++;
  });

  const totalOk = AUDIT_BELEGE.filter(a => a.status === 'ok').length;
  const totalWarn = AUDIT_BELEGE.filter(a => a.status === 'warn').length;
  const totalMiss = AUDIT_BELEGE.filter(a => a.status === 'missing').length;

  return (
    <div>
      {/* Sub-views */}
      <div className="audit-subnav">
        <button className={`audit-subnav-btn ${view === 'belege' ? 'active' : ''}`} onClick={() => setView('belege')}>
          Belege <span className="tab-count">{AUDIT_BELEGE.length}</span>
        </button>
        <button className={`audit-subnav-btn ${view === 'mappen' ? 'active' : ''}`} onClick={() => setView('mappen')}>
          Steuerberater-Mappen
        </button>
        <button className={`audit-subnav-btn ${view === 'tipps' ? 'active' : ''}`} onClick={() => setView('tipps')}>
          Tipps & Tricks
        </button>
      </div>

      {view === 'belege' && (
        <>
          {/* Stats + Upload */}
          <div className="audit-stats-row">
            <div className="audit-stat-card">
              <div className="audit-stat-label">Geprüft</div>
              <div className="audit-stat-value">{totalOk}</div>
              <div className="audit-stat-sub pos">vollständig</div>
            </div>
            <div className="audit-stat-card">
              <div className="audit-stat-label">Auffällig</div>
              <div className="audit-stat-value warn">{totalWarn}</div>
              <div className="audit-stat-sub">prüfen</div>
            </div>
            <div className="audit-stat-card">
              <div className="audit-stat-label">Fehlend</div>
              <div className="audit-stat-value neg">{totalMiss}</div>
              <div className="audit-stat-sub">Beleg anfordern</div>
            </div>
            <div className="audit-stat-card">
              <div className="audit-stat-label">Allgemeinkosten YTD</div>
              <div className="audit-stat-value" style={{ fontSize: 22 }}>{fmtEUR(AUDIT_BELEGE.filter(b => b.scope === 'allgemein').reduce((s, b) => s + b.amount, 0))}</div>
              <div className="audit-stat-sub">umlagefähig</div>
            </div>
            <div className="audit-stat-card">
              <div className="audit-stat-label">Einheits-Kosten YTD</div>
              <div className="audit-stat-value" style={{ fontSize: 22 }}>{fmtEUR(AUDIT_BELEGE.filter(b => b.scope === 'einheit').reduce((s, b) => s + b.amount, 0))}</div>
              <div className="audit-stat-sub">direkt zuordenbar</div>
            </div>
            <button className="audit-upload-btn" onClick={() => belegeInputRef.current?.click()}>
              <span style={{ fontSize: 22 }}>＋</span>
              <div>
                <div style={{ fontWeight: 500 }}>Beleg hochladen</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>PDF, JPG, PNG · Kategorie & Objekt im nächsten Schritt</div>
              </div>
              <input ref={belegeInputRef} type="file" multiple accept=".pdf,.jpg,.jpeg,.png,.heic" style={{ display: 'none' }} onChange={onBelegFiles} />
            </button>
            {pendingFiles && (
              <UploadModal
                files={pendingFiles}
                defaultMeta={{ category: 'Beleg', scope: 'allgemein' }}
                onConfirm={async () => { setPendingFiles(null); await cloudBelege.reload(); }}
                onCancel={() => setPendingFiles(null)}
              />
            )}
          </div>

          {/* Filter bar */}
          <div className="audit-filter-bar">
            <FilterGroup label="Status" value={filter.status} options={[
              { v: 'all', l: 'Alle' }, { v: 'ok', l: 'OK' }, { v: 'warn', l: 'Auffällig' }, { v: 'missing', l: 'Fehlend' }
            ]} onChange={v => setFilter({ ...filter, status: v })} />
            <FilterGroup label="Zuordnung" value={filter.scope} options={[
              { v: 'all', l: 'Alle' }, { v: 'allgemein', l: 'Allgemein' }, { v: 'einheit', l: 'Einheit' }
            ]} onChange={v => setFilter({ ...filter, scope: v })} />
            <FilterGroup label="Objekt" value={filter.property} options={[
              { v: 'all', l: 'Alle' }, ...data.properties.map(p => ({ v: p.id, l: p.name }))
            ]} onChange={v => setFilter({ ...filter, property: v })} />
          </div>

          <div className="audit-table-frame">
            {filtered.map(a => {
              const prop = data.properties.find(p => p.id === a.propertyId);
              const unit = prop?.units.find(u => u.id === a.unitId);
              return (
                <div key={a.id} className="audit-row">
                  <div className={`audit-status ${a.status}`}>
                    {a.status === 'ok' && <AIIcon.Check />}
                    {a.status === 'warn' && '!'}
                    {a.status === 'missing' && '?'}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="audit-row-title" style={{ color: a.status === 'missing' ? 'var(--ink-3)' : 'var(--ink)' }}>
                      {a.file}
                    </div>
                    <div className="audit-row-meta">
                      <span>{a.contact}</span><span>·</span>
                      <span>{fmtDate(a.date)}</span><span>·</span>
                      <span style={{ fontVariantNumeric: 'tabular-nums' }}>{fmtEUR(a.amount)}</span><span>·</span>
                      <span className="audit-cat-chip">{a.category}</span>
                      <span className={`audit-scope-chip ${a.scope}`}>
                        {a.scope === 'allgemein' ? 'Allgemein' : 'Einheit'}
                      </span>
                      <span className="audit-prop-ref">→ {prop?.name}{unit ? ` · ${unit.label}` : ''}</span>
                    </div>
                    {a.findings.length > 0 && (
                      <ul className="audit-findings">
                        {a.findings.map((f, i) => <li key={i}>{f}</li>)}
                      </ul>
                    )}
                    {a.tips.length > 0 && (
                      <div className="audit-tip-block">
                        <span className="audit-tip-icon">💡</span>
                        <div>
                          {a.tips.map((tip, i) => <div key={i} className="audit-tip-line">{tip}</div>)}
                        </div>
                      </div>
                    )}
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <button className="btn btn-sm btn-ghost">Details</button>
                    <button className="btn btn-sm btn-ghost">Mappe</button>
                  </div>
                </div>
              );
            })}
          </div>
        </>
      )}

      {view === 'mappen' && <WorkbookView data={data} byProp={byProp} />}
      {view === 'tipps' && <TipsView />}
    </div>
  );
}

function FilterGroup({ label, value, options, onChange }) {
  return (
    <div className="audit-filter-group">
      <span className="audit-filter-label">{label}</span>
      <div className="audit-filter-pills">
        {options.map(o => (
          <button
            key={o.v}
            className={`audit-filter-pill ${value === o.v ? 'active' : ''}`}
            onClick={() => onChange(o.v)}
          >
            {o.l}
          </button>
        ))}
      </div>
    </div>
  );
}

function WorkbookView({ data, byProp }) {
  const months = ['Januar', 'Februar', 'März', 'April'];
  const [selectedMonth, setSelectedMonth] = React.useState('April');

  return (
    <div>
      <div className="workbook-intro">
        <div>
          <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 400, margin: 0, marginBottom: 6 }}>
            Steuerberater-Mappen 2026
          </h3>
          <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: 13.5, maxWidth: 620, lineHeight: 1.55 }}>
            Pro Hauptobjekt und Monat eine Sammelmappe. Enthält alle Belege, Buchungsliste, Mietnachweise und Allgemein-/Einheits-Aufteilung — fertig zum Versand an deinen Steuerberater.
          </p>
        </div>
        <div className="month-picker">
          {months.map(m => (
            <button key={m} className={`month-pill ${selectedMonth === m ? 'active' : ''}`} onClick={() => setSelectedMonth(m)}>
              {m}
            </button>
          ))}
        </div>
      </div>

      <div className="workbook-grid">
        {data.properties.map(p => {
          const stats = byProp[p.id] || { allgemein: 0, einheit: 0, count: 0, missing: 0, warn: 0 };
          const total = stats.allgemein + stats.einheit;
          const allgPct = total ? (stats.allgemein / total) * 100 : 0;
          const ready = stats.missing === 0;
          return (
            <div key={p.id} className="workbook-card">
              <div className="workbook-card-head">
                <div>
                  <div className="workbook-card-month">{selectedMonth} 2026</div>
                  <div className="workbook-card-title">{p.name}</div>
                  <div className="workbook-card-addr">{p.address}</div>
                </div>
                <div className={`workbook-card-status ${ready ? 'ready' : 'pending'}`}>
                  {ready ? '✓ versandbereit' : `${stats.missing} Beleg${stats.missing !== 1 ? 'e' : ''} fehlt`}
                </div>
              </div>

              <div className="workbook-content-list">
                <WorkbookContent label="Mieteinnahmen" count={p.units.filter(u => u.status === 'vermietet').length} />
                <WorkbookContent label="Belege & Rechnungen" count={stats.count} />
                <WorkbookContent label="Allgemein­kosten-Aufteilung" count={1} />
                <WorkbookContent label="Einheits-Kosten je Wohnung" count={p.units.length} />
                <WorkbookContent label="Buchungsjournal (CSV)" count={1} />
                {stats.warn > 0 && <WorkbookContent label="Hinweise" count={stats.warn} warn />}
              </div>

              <div className="workbook-split">
                <div className="workbook-split-bar">
                  <div className="workbook-split-allg" style={{ width: `${allgPct}%` }}></div>
                </div>
                <div className="workbook-split-labels">
                  <span><span className="dot allg"></span> Allgemein {fmtEUR(stats.allgemein)}</span>
                  <span><span className="dot einh"></span> Einheit {fmtEUR(stats.einheit)}</span>
                </div>
              </div>

              <div className="workbook-actions">
                <button className="btn btn-sm">Vorschau</button>
                <button className="btn btn-sm btn-ghost">An Steuerberater senden</button>
                <button className="btn btn-sm btn-ghost" style={{ marginLeft: 'auto' }}>↓ ZIP</button>
              </div>
            </div>
          );
        })}
      </div>

      <div className="workbook-yearly">
        <div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink-3)' }}>Jahresende-Paket</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, marginTop: 4 }}>Gesamtmappe 2025</div>
          <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 6 }}>
            Komplettes Vorjahr: alle 12 Monate, je Hauptobjekt zusammengefasst, mit AfA-Berechnung, Anlage V-Vorbereitung und §35a-Aufstellung.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn">Vorschau</button>
          <button className="btn btn-primary">↓ ZIP herunterladen</button>
        </div>
      </div>
    </div>
  );
}

function WorkbookContent({ label, count, warn }) {
  return (
    <div className="workbook-content-row">
      <span style={{ color: warn ? 'var(--warn)' : 'var(--ink-3)', fontSize: 11, width: 14 }}>
        {warn ? '!' : '✓'}
      </span>
      <span style={{ flex: 1 }}>{label}</span>
      <span style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--ink-3)', fontSize: 11.5 }}>
        {count}
      </span>
    </div>
  );
}

function TipsView() {
  return (
    <div>
      <div className="tips-grid">
        {AUDIT_GLOBAL_TIPS.map((t, i) => (
          <div key={i} className={`tips-card ${t.tone}`}>
            <div className="tips-card-icon">
              {t.tone === 'pos' && '✓'}
              {t.tone === 'warn' && '!'}
              {t.tone === 'info' && 'i'}
              {t.tone === 'neg' && '×'}
            </div>
            <div>
              <div className="tips-card-title">{t.title}</div>
              <div className="tips-card-body">{t.body}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="section">
        <div className="section-header">
          <h2 className="section-title">Steuer-Spickzettel für Vermieter</h2>
        </div>
        <div className="cheatsheet-grid">
          <CheatItem
            title="§35a EStG — Haushaltsnahe Dienstleistungen"
            body="20 % der Lohnkosten (max. 4.000 €/Jahr) direkt von der Steuerschuld absetzbar. Wichtig: Rechnung muss Lohnanteil separat ausweisen, Zahlung per Überweisung (kein Bargeld)."
          />
          <CheatItem
            title="Erhaltungsaufwand vs. Herstellungskosten"
            body="Reparaturen < 4.000 € netto sofort absetzbar. Modernisierung > 4.000 € muss über AfA (50 Jahre bzw. ND) verteilt werden. Faustregel: 'Wesentliche Verbesserung' = Herstellungskosten."
          />
          <CheatItem
            title="Allgemein- vs. Einheitskosten"
            body="Allgemein: Versicherung, Hausmeister, Allgemeinstrom, Müll, Schornsteinfeger — auf Einheiten umlagefähig. Einheit: Einzelreparaturen, individuelle Modernisierung — direkt der Wohnung zugeordnet."
          />
          <CheatItem
            title="Belegaufbewahrung — 10 Jahre"
            body="GoBD-konforme digitale Aufbewahrung ist seit 2020 zulässig. Hausgut speichert revisionssicher mit Zeitstempel und unveränderlicher Ablage."
          />
          <CheatItem
            title="Anlage V — Einnahmen-Überschuss-Rechnung"
            body="Mieteinnahmen = Einnahmen. Werbungskosten = Ausgaben + AfA + Schuldzinsen. Verluste sind mit anderen Einkunftsarten verrechenbar."
          />
          <CheatItem
            title="Vorsteuerabzug bei Gewerbe"
            body="Bei Vermietung an Gewerbe kannst du zur USt optieren (§9 UStG). Vorteil: Vorsteuer auf Reparaturen und Anschaffungen ziehbar — nur sinnvoll bei großen Investitionen."
          />
        </div>
      </div>
    </div>
  );
}

function CheatItem({ title, body }) {
  return (
    <div className="cheat-card">
      <div className="cheat-card-title">{title}</div>
      <div className="cheat-card-body">{body}</div>
    </div>
  );
}

// ───── Settings tab ─────

function SettingsTab({ provider, setProvider, connected, setConnected }) {
  const [apiKey, setApiKey] = React.useState('');
  const [showKey, setShowKey] = React.useState(false);

  return (
    <div className="two-col">
      <div>
        <div className="section">
          <div className="section-header"><h2 className="section-title">Anbieter</h2></div>
          <div className="provider-grid">
            {AI_PROVIDERS.map(p => (
              <button
                key={p.id}
                className={`provider-card ${provider === p.id ? 'selected' : ''}`}
                onClick={() => setProvider(p.id)}
              >
                <div className="provider-mark" style={{ background: p.color }}>
                  <AIIcon.Sparkle />
                </div>
                <div>
                  <div style={{ fontWeight: 500, fontSize: 14 }}>{p.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{p.vendor}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
                    {p.models.join(' · ')}
                  </div>
                </div>
                {provider === p.id && <div className="provider-check"><AIIcon.Check /></div>}
              </button>
            ))}
          </div>
        </div>

        <div className="section">
          <div className="section-header"><h2 className="section-title">Verbindung</h2></div>
          <div className="settings-form">
            <div>
              <label className="settings-label">API-Schlüssel</label>
              <div style={{ display: 'flex', gap: 8 }}>
                <input
                  type={showKey ? 'text' : 'password'}
                  className="settings-input"
                  placeholder={`sk-...${provider === 'ollama' ? ' (entfällt – lokal)' : ''}`}
                  value={apiKey}
                  onChange={e => setApiKey(e.target.value)}
                  disabled={provider === 'ollama'}
                />
                <button className="btn btn-ghost" onClick={() => setShowKey(s => !s)}>{showKey ? 'verbergen' : 'zeigen'}</button>
              </div>
              <div className="settings-hint">
                Wird verschlüsselt im Browser gespeichert. Nichts wird an Hausgut-Server übertragen — Anfragen gehen direkt an {AI_PROVIDERS.find(p => p.id === provider).vendor}.
              </div>
            </div>

            <div>
              <label className="settings-label">Modell</label>
              <select className="settings-input">
                {AI_PROVIDERS.find(p => p.id === provider).models.map(m => <option key={m}>{m}</option>)}
              </select>
            </div>

            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn btn-primary" onClick={() => setConnected(true)}>
                {connected ? 'Verbunden ✓' : 'Verbinden & testen'}
              </button>
              {connected && <button className="btn btn-ghost" onClick={() => setConnected(false)}>Trennen</button>}
            </div>
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div className="side-card">
          <h3>Welche Daten bekommt die KI?</h3>
          <div className="kv-list">
            <SettingsToggle label="Objekt- & Einheitendaten" defaultOn />
            <SettingsToggle label="Mieterstammdaten" defaultOn />
            <SettingsToggle label="Buchungen & Belege" defaultOn />
            <SettingsToggle label="Mieterspiegel & Marktdaten" defaultOn />
            <SettingsToggle label="Kontakt-Notizen" defaultOff />
          </div>
        </div>

        <div className="side-card">
          <h3>Automatik</h3>
          <div className="kv-list">
            <SettingsToggle label="Tägliche Analyse" defaultOn />
            <SettingsToggle label="Belege beim Upload prüfen" defaultOn />
            <SettingsToggle label="Push bei kritischen Funden" defaultOn />
            <SettingsToggle label="Wöchentlicher Zusammen­fassungs-Email" defaultOff />
          </div>
        </div>

        <div className="side-card" style={{ background: 'var(--bg-sunken)' }}>
          <h3 style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <AIIcon.Shield /> Datenschutz
          </h3>
          <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.6 }}>
            Persönlich identifizierbare Daten (Mieternamen, Adressen, IBANs) werden vor der Übermittlung lokal pseudonymisiert. Du kannst pro Anfrage entscheiden, ob die KI auf alle Objekte oder nur auf eines zugreift.
          </div>
        </div>
      </div>
    </div>
  );
}

function SettingsToggle({ label, defaultOn = false }) {
  const [on, setOn] = React.useState(defaultOn);
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0' }}>
      <span style={{ fontSize: 13 }}>{label}</span>
      <button
        className={`toggle ${on ? 'on' : ''}`}
        onClick={() => setOn(o => !o)}
        aria-pressed={on}
      >
        <span className="toggle-knob"></span>
      </button>
    </div>
  );
}

const AIIcon = {
  Sparkle: () => <svg viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M8 1l1.4 4.6L14 7l-4.6 1.4L8 13l-1.4-4.6L2 7l4.6-1.4L8 1z"/></svg>,
  Check: () => <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" width="12" height="12"><path d="M3 8l3.5 3.5L13 4.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  Shield: () => <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" width="14" height="14"><path d="M8 1.5l5.5 2v4c0 3.5-2.5 6-5.5 7-3-1-5.5-3.5-5.5-7v-4l5.5-2z" strokeLinejoin="round"/><path d="M5.5 8L7 9.5l3.5-3.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
};

Object.assign(window, { AssistantPage, AIIcon });