// VoiceDoc — AI voice documentation feature.
// Floating mic button (every portal) + full-screen recording sheet + saved recordings library.
// Simulates: recording → live waveform/transcript → AI structures into SOAP-style note.

const VOICE_TEMPLATES = [
  { id: "pflege",  label: "Pflegebericht",      icon: "clipboard", sub: "Schicht-Dokumentation" },
  { id: "visite",  label: "Visiten-Protokoll",  icon: "stethoscope", sub: "Arzt-Besuch" },
  { id: "vorfall", label: "Vorfall / Ereignis", icon: "warning",    sub: "Sturz · Verhalten · Medikation" },
  { id: "therapie",label: "Therapie-Notiz",     icon: "activity",   sub: "Physio · Ergo · Logo" },
  { id: "befund",  label: "Befund / Arztbrief", icon: "file",       sub: "Diktat für Praxis" },
  { id: "uebergabe",label:"Übergabe Früh→Spät", icon: "repeat",     sub: "Schichtwechsel" },
];

const SAMPLE_RECORDINGS = [
  {
    id: "V-2604",
    bewohner: "Herr Anton Weber",
    bewohnerId: "b1",
    author: "Maria Lehmann",
    role: "Pflegeleitung",
    template: "pflege",
    duration: "2:18",
    durationSec: 138,
    date: "heute · 07:42",
    status: "final",
    confidence: 96,
    words: 284,
    transcript: "Herr Weber hat die Nacht unruhig verbracht, ist zweimal wach geworden gegen zwei und gegen fünf Uhr. Morgens wirkte er deutlich müde aber orientiert. Blutzucker nüchtern 142, etwas erhöht. Frühstück zur Hälfte eingenommen, wenig Flüssigkeit, etwa 180 Milliliter. Keine Schmerzäußerung. Hautinspektion am Sakrum unauffällig, kein Dekubitus-Hinweis. Mobilisation mit Rollator bis zum Gemeinschaftsraum gut möglich. Heute Nachmittag Visite Dr. Schneider wegen Metformin-Dosierung.",
    summary: {
      S: "Bewohner berichtet unruhige Nacht, zwei Wachphasen (02:00, 05:00). Morgens müde, orientiert zu Person/Ort.",
      O: "BZ nüchtern 142 mg/dl (leicht erhöht). Frühstück 50%, Trinkmenge 180 ml. Haut Sakrum unauffällig. Mobilisation mit Rollator bis Gemeinschaftsraum.",
      A: "Unruhige Nacht mit reduzierter Flüssigkeitsaufnahme. BZ-Kontrolle auffällig.",
      P: "Trinkmenge engmaschig protokollieren (Ziel 1,5 l). BZ-Verlaufskontrolle. Visite Dr. Schneider heute 14:00 — Metformin-Dosierung ansprechen.",
    },
    flags: [
      { label: "Metformin 500mg", tone: "accent", link: "Medikationsplan" },
      { label: "BZ-Kontrolle", tone: "warn" },
      { label: "Trinkprotokoll", tone: "info" },
    ],
    actions: [
      { label: "→ Anfrage 'BZ-Kontrolle Dr. Schneider' erstellt", done: true },
      { label: "→ Eintrag im Bewohner-Verlauf (b1)", done: true },
      { label: "→ Visite V-104 verknüpft", done: true },
    ],
  },
  {
    id: "V-2603",
    bewohner: "Frau Ilse Becker",
    bewohnerId: "b2",
    author: "Jonas Richter",
    role: "Pflege",
    template: "vorfall",
    duration: "1:02",
    durationSec: 62,
    date: "heute · 06:18",
    status: "final",
    confidence: 94,
    words: 142,
    transcript: "Frau Becker wollte heute früh alleine zur Toilette, ist dabei gestolpert, kein Sturz auf den Boden, konnte sich am Bettgitter festhalten. Keine Schmerzäußerung, keine sichtbaren Verletzungen. Leichte Rötung am linken Unterarm durch Abstützen. Kreislauf stabil, RR 128 zu 82.",
    summary: {
      S: "Beinahe-Sturz bei selbstständigem Toilettengang. Keine Schmerzen geäußert.",
      O: "Leichte Rötung linker Unterarm (Abstützung Bettgitter). RR 128/82, Kreislauf stabil. Keine offenen Verletzungen.",
      A: "Beinahe-Sturz · Risiko erhöht · Mobilisation nur mit Begleitung erforderlich.",
      P: "Bewegungsmelder aktivieren (bereits erfolgt). Sturzprotokoll angelegt. Physio-Termin bzgl. Gangsicherheit koordinieren.",
    },
    flags: [{ label: "Sturz-Risiko", tone: "warn" }, { label: "Meldepflichtig", tone: "info" }],
    actions: [
      { label: "→ Sturzprotokoll 2026-04-20-02 erstellt", done: true },
      { label: "→ Anfrage an Physio (Lena Vogt) gesendet", done: true },
    ],
  },
  {
    id: "V-2602",
    bewohner: "Herr Karl Schmidt",
    bewohnerId: "b3",
    author: "Dr. A. Schneider",
    role: "Hausarzt",
    template: "visite",
    duration: "3:44",
    durationSec: 224,
    date: "gestern · 14:20",
    status: "final",
    confidence: 97,
    words: 512,
    transcript: "Visite Herr Schmidt. Beschwerdefrei bezüglich der kardialen Symptomatik. Ödeme im Bereich beider Unterschenkel deutlich rückläufig, rechts mehr als links. Gewicht stabil bei 78,4 kg. Herz-Lungen-Auskultation unauffällig, keine Rasselgeräusche. Torasemid-Dosis wird reduziert auf 5 Milligramm einmal täglich.",
    summary: {
      S: "Herr Schmidt beschwerdefrei. Keine Dyspnoe, keine thorakale Symptomatik.",
      O: "Unterschenkelödeme bds. rückläufig (re > li). Gewicht 78,4 kg (stabil). Auskultation Herz/Lunge unauffällig. RR 128/76.",
      A: "Kardiale Dekompensation rückläufig unter Torasemid 10 mg. Reduktion möglich.",
      P: "Torasemid 10mg → 5mg 1-0-0. Gewichtskontrolle täglich. Wiedervorstellung in 14 Tagen. Elektrolytkontrolle in 1 Woche.",
    },
    flags: [{ label: "Torasemid 5mg", tone: "accent", link: "Medikationsplan aktualisiert" }, { label: "Labor in 7d", tone: "info" }],
    actions: [
      { label: "→ Medikationsplan aktualisiert", done: true },
      { label: "→ Rezept an Adler-Apotheke", done: true },
      { label: "→ Labor-Anforderung Elektrolyte", done: true },
    ],
  },
  {
    id: "V-2601",
    bewohner: "Frau Gertrud Hoffmann",
    bewohnerId: "b4",
    author: "Lena Vogt",
    role: "Physiotherapeutin",
    template: "therapie",
    duration: "1:48",
    durationSec: 108,
    date: "gestern · 10:45",
    status: "final",
    confidence: 92,
    words: 218,
    transcript: "Therapie Frau Hoffmann, fünfte Sitzung nach Hüft-TEP rechts. Bewegungsumfang Flexion aktiv jetzt 95 Grad, vor zwei Wochen bei 80. Treppensteigen heute erstmals mit nur einer Handlauf-Unterstützung möglich. Schmerzen NRS 2 von 10, deutlich besser.",
    summary: {
      S: "Frau Hoffmann berichtet deutlich bessere Schmerzsituation (NRS 2/10). Zunehmende Belastbarkeit.",
      O: "Hüft-Flexion aktiv 95° (+ 15° vs. T0). Treppensteigen mit einseitiger Handlauf-Unterstützung. Kein Hinken.",
      A: "Rehabilitation Hüft-TEP rechts verläuft planmäßig, progrediente Besserung.",
      P: "Gangschule intensivieren. Kräftigung M. gluteus medius. Nächste Sitzung Mo 22.04.",
    },
    flags: [{ label: "Reha-Fortschritt", tone: "good" }],
    actions: [{ label: "→ Therapie-Verlauf aktualisiert", done: true }],
  },
];

const VoiceLauncher = ({ onOpen }) => (
  <button className="voice-fab" onClick={onOpen} title="Sprach-Dokumentation (V)">
    <span className="mic-glow" />
    <Icon name="mic" size={20} />
    <span className="label">Diktieren</span>
    <span className="shortcut">V</span>
  </button>
);

const VoiceSheet = ({ open, onClose, onSaved, bewohnerOptions = [], defaultBewohner, defaultTemplate = "pflege", userName = "Maria Lehmann" }) => {
  const [phase, setPhase] = React.useState("ready"); // ready | recording | transcribing | draft | saved
  const [elapsed, setElapsed] = React.useState(0);
  const [template, setTemplate] = React.useState(defaultTemplate);
  const [bewohner, setBewohner] = React.useState(defaultBewohner || (bewohnerOptions[0]?.id ?? ""));
  const [transcriptIdx, setTranscriptIdx] = React.useState(0);
  const [levels, setLevels] = React.useState(Array.from({ length: 48 }, () => 0.15));

  const SAMPLE = SAMPLE_RECORDINGS[0];
  const transcriptTokens = SAMPLE.transcript.split(" ");

  React.useEffect(() => {
    if (phase !== "recording") return;
    const t = setInterval(() => setElapsed(e => e + 1), 1000);
    const lv = setInterval(() => {
      setLevels(prev => prev.map(() => 0.15 + Math.random() * 0.85));
    }, 120);
    const ti = setInterval(() => {
      setTranscriptIdx(i => Math.min(i + (1 + Math.floor(Math.random() * 3)), transcriptTokens.length));
    }, 350);
    return () => { clearInterval(t); clearInterval(lv); clearInterval(ti); };
  }, [phase]);

  React.useEffect(() => {
    if (phase === "transcribing") {
      const t = setTimeout(() => setPhase("draft"), 2200);
      return () => clearTimeout(t);
    }
  }, [phase]);

  React.useEffect(() => {
    if (!open) {
      setPhase("ready"); setElapsed(0); setTranscriptIdx(0);
    }
  }, [open]);

  if (!open) return null;

  const fmt = (s) => `${String(Math.floor(s / 60)).padStart(1, "0")}:${String(s % 60).padStart(2, "0")}`;
  const tmpl = VOICE_TEMPLATES.find(t => t.id === template);

  return (
    <div className="voice-backdrop" onClick={onClose}>
      <div className="voice-sheet" onClick={(e) => e.stopPropagation()}>
        <header className="voice-head">
          <div className="row" style={{gap: 10}}>
            <span className="voice-brand"><Icon name="sparkle" size={13} /></span>
            <div>
              <div className="ttl">Sprach-Dokumentation</div>
              <div className="sub">KI-gestützt · DSGVO-konform · Daten bleiben in DE</div>
            </div>
          </div>
          <button className="voice-close" onClick={onClose}><Icon name="x" size={14} /></button>
        </header>

        <div className="voice-meta">
          <div className="field">
            <label>Vorlage</label>
            <div className="seg" style={{flexWrap: "wrap"}}>
              {VOICE_TEMPLATES.map(t => (
                <button key={t.id} className={template === t.id ? "active" : ""} onClick={() => setTemplate(t.id)}>
                  <Icon name={t.icon} size={11} /> {t.label}
                </button>
              ))}
            </div>
          </div>
          {bewohnerOptions.length > 0 && (
            <div className="field">
              <label>Bewohner</label>
              <select className="select" value={bewohner} onChange={(e) => setBewohner(e.target.value)} style={{width: "100%"}}>
                <option value="">— Keiner / allgemein —</option>
                {bewohnerOptions.map(b => <option key={b.id} value={b.id}>{b.name} · Zi. {b.room}</option>)}
              </select>
            </div>
          )}
        </div>

        <div className="voice-stage">
          {phase === "ready" && (
            <div className="voice-ready">
              <div className="mic-big" onClick={() => setPhase("recording")}>
                <Icon name="mic" size={42} />
              </div>
              <div className="hint">Tippen zum Starten · oder Leertaste drücken</div>
              <div className="tips">
                <div className="tip"><Icon name="sparkle" size={12} /> Sprechen Sie natürlich — die KI strukturiert automatisch in SOAP-Format</div>
                <div className="tip"><Icon name="shield" size={12} /> Audio wird verschlüsselt · nach Freigabe der Notiz gelöscht</div>
                <div className="tip"><Icon name="zap" size={12} /> Medikamente, Vitalwerte & Namen werden automatisch erkannt und verknüpft</div>
              </div>
            </div>
          )}

          {phase === "recording" && (
            <div className="voice-record">
              <div className="rec-head">
                <span className="rec-dot" />
                <span className="rec-label">Aufnahme läuft</span>
                <span className="rec-time mono">{fmt(elapsed)}</span>
                <span className="rec-template">{tmpl?.label}</span>
              </div>
              <div className="wave">
                {levels.map((h, i) => (
                  <span key={i} className="bar" style={{height: `${18 + h * 72}%`}} />
                ))}
              </div>
              <div className="live-transcript">
                <div className="lt-label"><Icon name="waveform" size={11} /> Live-Transkript</div>
                <div className="lt-text">
                  {transcriptTokens.slice(0, transcriptIdx).join(" ")}
                  {transcriptIdx < transcriptTokens.length && <span className="caret" />}
                </div>
              </div>
              <div className="rec-ctrl">
                <button className="c-btn" onClick={() => setPhase("ready")}><Icon name="trash" size={14} /> Verwerfen</button>
                <button className="c-btn pause"><Icon name="pause" size={14} /> Pause</button>
                <button className="c-btn primary" onClick={() => setPhase("transcribing")}><Icon name="stop" size={14} /> Fertigstellen</button>
              </div>
            </div>
          )}

          {phase === "transcribing" && (
            <div className="voice-processing">
              <div className="proc-ring"><Icon name="sparkle" size={28} /></div>
              <div className="proc-title">KI strukturiert Ihre Notiz…</div>
              <ul className="proc-steps">
                <li className="done"><Icon name="check" size={11} /> Audio transkribiert ({SAMPLE.words} Wörter · {SAMPLE.confidence}% Konfidenz)</li>
                <li className="done"><Icon name="check" size={11} /> Sprache erkannt: Deutsch (DE) · medizinisches Vokabular</li>
                <li className="done"><Icon name="check" size={11} /> 3 Medikamente, 4 Vitalwerte, 1 Bewohner erkannt</li>
                <li className="active"><span className="pulse" /> SOAP-Struktur generieren · Verknüpfungen vorschlagen…</li>
              </ul>
            </div>
          )}

          {phase === "draft" && (
            <div className="voice-draft">
              <div className="draft-head">
                <div>
                  <div className="row" style={{gap: 6}}>
                    <span className="badge-pill freigegeben"><Icon name="sparkle" size={10} /> KI-Entwurf</span>
                    <span className="badge-pill"><Icon name="check" size={10} /> {SAMPLE.confidence}% Konfidenz</span>
                    <span className="muted mono" style={{fontSize: 11}}>· {fmt(Math.max(elapsed, 45))} Aufnahme · {SAMPLE.words} Wörter</span>
                  </div>
                  <div className="ttl">{tmpl?.label} — {bewohnerOptions.find(b => b.id === bewohner)?.name || "allgemein"}</div>
                </div>
                <div className="right"><button className="c-btn"><Icon name="edit" size={12} /> Rohtext ansehen</button></div>
              </div>

              <div className="soap">
                {["S","O","A","P"].map(k => (
                  <div key={k} className="soap-row">
                    <div className="soap-key">{k}</div>
                    <div className="soap-val">
                      <div className="soap-lbl">{ {S:"Subjektiv", O:"Objektiv", A:"Beurteilung", P:"Plan"}[k] }</div>
                      <div className="soap-txt">{SAMPLE.summary[k]}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="draft-flags">
                {SAMPLE.flags.map((f, i) => (
                  <span key={i} className={`flag tone-${f.tone}`}>
                    <Icon name={f.tone === "warn" ? "warning" : f.tone === "good" ? "check" : "link"} size={10} /> {f.label}
                    {f.link && <span className="flag-link">— {f.link}</span>}
                  </span>
                ))}
              </div>

              <div className="draft-actions">
                <div className="da-label"><Icon name="zap" size={11} /> Vorgeschlagene Aktionen</div>
                {SAMPLE.actions.map((a, i) => (
                  <div key={i} className="da-row">
                    <CheckBox checked={true} />
                    <span>{a.label}</span>
                  </div>
                ))}
              </div>

              <div className="draft-ctrl">
                <button className="c-btn" onClick={() => setPhase("recording")}><Icon name="mic" size={12} /> Nochmal aufnehmen</button>
                <button className="c-btn"><Icon name="edit" size={12} /> Bearbeiten</button>
                <button className="c-btn primary" onClick={() => { setPhase("saved"); onSaved?.(); setTimeout(onClose, 1400); }}>
                  <Icon name="check" size={13} /> Freigeben & speichern
                </button>
              </div>
            </div>
          )}

          {phase === "saved" && (
            <div className="voice-saved">
              <div className="saved-ring"><Icon name="check" size={32} /></div>
              <div className="saved-title">Dokumentation gespeichert</div>
              <div className="saved-sub">Im Bewohner-Verlauf eingetragen · 3 Aktionen ausgelöst · Audio gelöscht</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// Library view (embeddable inside Heim-Portal main area)
const VoiceLibraryView = ({ onOpenNew, onJumpBewohner }) => {
  const [q, setQ] = React.useState("");
  const [filterTpl, setFilterTpl] = React.useState("alle");
  const [selected, setSelected] = React.useState(SAMPLE_RECORDINGS[0].id);

  const filtered = SAMPLE_RECORDINGS.filter(r =>
    (filterTpl === "alle" || r.template === filterTpl) &&
    (!q || r.bewohner.toLowerCase().includes(q.toLowerCase()) || r.transcript.toLowerCase().includes(q.toLowerCase()))
  );

  const cur = SAMPLE_RECORDINGS.find(r => r.id === selected) || filtered[0];

  return (
    <>
      <div className="content-head">
        <div>
          <h1>Sprach-Dokumentation</h1>
          <div className="sub">KI-gestützte Erfassung · 284 Aufnahmen diesen Monat · Ø 1:54 · Zeitersparnis 68%</div>
        </div>
        <div className="right">
          <Btn icon="barChart">Statistik</Btn>
          <Btn icon="settings">Vorlagen verwalten</Btn>
          <Btn variant="primary" icon="mic" onClick={onOpenNew}>Neue Aufnahme</Btn>
        </div>
      </div>

      <div className="kpi-grid">
        <Kpi label="Aufnahmen diesen Monat" value="284" icon="mic" trend="+ 42% vs. Vormonat" points={[140,160,180,210,240,268,284]} />
        <Kpi label="Ø Transkriptions-Genauigkeit" value="95,4%" icon="sparkle" trend="DE med. Vokabular" points={[92,93,94,94,95,95.2,95.4]} />
        <Kpi label="Zeitersparnis vs. Tippen" value="68%" icon="zap" trend="≈ 4,2 h pro Schicht" points={[40,48,55,60,64,66,68]} />
        <Kpi label="Auto-Verknüpfungen" value="1 842" icon="link" trend="Medis · Bewohner · Anfragen" points={[800,1050,1280,1450,1620,1750,1842]} />
      </div>

      <Toolbar>
        <div className="search-inp"><Icon name="search" size={12} /><input placeholder="Transkript, Bewohner, Autor…" value={q} onChange={e => setQ(e.target.value)} /></div>
        <span className={`chip ${filterTpl === "alle" ? "active" : ""}`} onClick={() => setFilterTpl("alle")}>Alle Vorlagen</span>
        {VOICE_TEMPLATES.slice(0, 4).map(t => (
          <span key={t.id} className={`chip ${filterTpl === t.id ? "active" : ""}`} onClick={() => setFilterTpl(t.id)}>
            <Icon name={t.icon} size={10} /> {t.label}
          </span>
        ))}
        <div className="spacer" />
        <span className="muted" style={{fontSize: 12}}>{filtered.length} Einträge</span>
      </Toolbar>

      <div style={{display: "grid", gridTemplateColumns: "minmax(340px, 1fr) 1.4fr", gap: 0, borderTop: "1px solid var(--border)"}}>
        <div style={{borderRight: "1px solid var(--border)", maxHeight: "calc(100vh - 320px)", overflow: "auto"}}>
          {filtered.map(r => {
            const tpl = VOICE_TEMPLATES.find(t => t.id === r.template);
            return (
              <div
                key={r.id}
                className={`voice-list-item ${selected === r.id ? "active" : ""}`}
                onClick={() => setSelected(r.id)}
              >
                <div className="vli-head">
                  <span className="vli-tpl"><Icon name={tpl?.icon || "clipboard"} size={11} /> {tpl?.label}</span>
                  <span className="vli-time mono">{r.duration}</span>
                </div>
                <div className="vli-bew">{r.bewohner}</div>
                <div className="vli-excerpt">{r.transcript.slice(0, 120)}…</div>
                <div className="vli-foot">
                  <Avatar name={r.author} size={16} /> <span>{r.author}</span>
                  <span className="muted">· {r.date}</span>
                  <span className="spacer" />
                  <span className="badge-pill freigegeben"><Icon name="check" size={10} /> {r.status}</span>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{padding: 20, overflow: "auto", maxHeight: "calc(100vh - 320px)"}}>
          {cur && <VoiceDetail r={cur} onJumpBewohner={onJumpBewohner} />}
        </div>
      </div>
    </>
  );
};

const VoiceDetail = ({ r, onJumpBewohner }) => {
  const tpl = VOICE_TEMPLATES.find(t => t.id === r.template);
  return (
    <>
      <div className="row" style={{justifyContent: "space-between", marginBottom: 14}}>
        <div>
          <div className="row" style={{gap: 6, marginBottom: 4}}>
            <span className="badge-pill freigegeben"><Icon name={tpl?.icon} size={10} /> {tpl?.label}</span>
            <span className="badge-pill"><Icon name="sparkle" size={10} /> KI · {r.confidence}%</span>
            <span className="muted mono" style={{fontSize: 11}}>{r.id} · {r.duration} · {r.words} Wörter</span>
          </div>
          <h2 style={{fontSize: 18, fontWeight: 600, margin: 0}}>{r.bewohner}</h2>
          <div className="muted" style={{fontSize: 12}}>{r.author} · {r.role} · {r.date}</div>
        </div>
        <div className="row" style={{gap: 6}}>
          <Btn sm icon="printer">PDF</Btn>
          <Btn sm icon="edit">Bearbeiten</Btn>
          {onJumpBewohner && <Btn sm icon="user" onClick={() => onJumpBewohner(r.bewohnerId)}>Bewohner öffnen</Btn>}
        </div>
      </div>

      <div className="audio-player">
        <button className="ap-play"><Icon name="play" size={14} /></button>
        <div className="ap-wave">
          {Array.from({ length: 64 }).map((_, i) => {
            const h = 20 + Math.abs(Math.sin(i * 0.7 + r.id.length)) * 70;
            return <span key={i} className="ap-bar" style={{height: `${h}%`, opacity: i < 18 ? 1 : 0.45}} />;
          })}
        </div>
        <span className="mono muted" style={{fontSize: 11}}>0:22 / {r.duration}</span>
        <Btn sm icon="more">...</Btn>
      </div>

      <div className="soap" style={{marginTop: 16}}>
        {["S","O","A","P"].map(k => (
          <div key={k} className="soap-row">
            <div className="soap-key">{k}</div>
            <div className="soap-val">
              <div className="soap-lbl">{ {S:"Subjektiv", O:"Objektiv", A:"Beurteilung", P:"Plan"}[k] }</div>
              <div className="soap-txt">{r.summary[k]}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="draft-flags" style={{marginTop: 14}}>
        {r.flags.map((f, i) => (
          <span key={i} className={`flag tone-${f.tone}`}>
            <Icon name={f.tone === "warn" ? "warning" : f.tone === "good" ? "check" : "link"} size={10} /> {f.label}
            {f.link && <span className="flag-link">— {f.link}</span>}
          </span>
        ))}
      </div>

      <div className="card" style={{marginTop: 14}}>
        <div className="card-head">Rohtranskript</div>
        <div className="card-body" style={{fontSize: 13, lineHeight: 1.6, color: "var(--fg-muted)"}}>
          "{r.transcript}"
        </div>
      </div>

      <div className="card" style={{marginTop: 14}}>
        <div className="card-head">Ausgelöste Aktionen</div>
        <div className="card-body col" style={{gap: 6, fontSize: 12}}>
          {r.actions.map((a, i) => (
            <div key={i} className="row" style={{gap: 8}}>
              <span style={{width: 18, height: 18, borderRadius: 4, background: "var(--success-tint)", color: "var(--success)", display: "grid", placeItems: "center"}}><Icon name="check" size={10} /></span>
              {a.label}
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

Object.assign(window, { VoiceLauncher, VoiceSheet, VoiceLibraryView, SAMPLE_RECORDINGS, VOICE_TEMPLATES });