const { FilterChip, TextInput, Badge, IconButton, Button, Icon, STATUS } = window.TersusDesignSystem_b3db99;

const STATUS_KEYS = ["neu","angeschrieben","verhandlung","bestandskunde","absage"];
const SEITEN = [
  { id: "vertrieb", label: "Vertriebs- und Tourenplanung" },
  { id: "glasreinigung", label: "Glasreinigung Auftragsplanung" },
];

/* Kopfzeile: Wortmarke plus Unterseiten. Aktive Seite mit Lime-Unterstrich (Interaktion). */
function AppHeader({ seite, setSeite, nutzer, onAbmelden }) {
  return (
    <header style={{background:"var(--surface-card)",borderBottom:"1px solid var(--divider)",padding:"0 16px",display:"flex",alignItems:"stretch",gap:"var(--space-6)",height:48,flex:"0 0 auto"}}>
      <div style={{display:"flex",alignItems:"center",gap:9,flex:"0 0 auto"}}>
        <span style={{width:10,height:10,borderRadius:2,background:"var(--brand-lime)"}} />
        <span style={{font:"700 17px/1 var(--font-display)",letterSpacing:"-0.035em"}}>TERSUS</span>
      </div>
      <nav aria-label="Bereiche" style={{display:"flex",alignItems:"stretch",gap:"var(--space-5)"}}>
        {SEITEN.map(s => {
          const aktiv = s.id === seite;
          return (
            <button key={s.id} type="button" onClick={() => setSeite(s.id)} aria-current={aktiv ? "page" : undefined}
              style={{background:"none",border:0,padding:"0 2px",cursor:"pointer",font:"inherit",fontSize:"var(--fs-sm)",
                fontWeight:aktiv?"var(--fw-semibold)":"var(--fw-regular)",color:aktiv?"var(--text-primary)":"var(--text-muted)",
                borderBottom:"2px solid "+(aktiv?"var(--brand-lime)":"transparent"),borderTop:"2px solid transparent",whiteSpace:"nowrap"}}>
              {s.label}
            </button>
          );
        })}
      </nav>
      {onAbmelden ? (
        <div style={{marginLeft:"auto",display:"flex",alignItems:"center",gap:"var(--space-3)"}}>
          <span style={{fontSize:"var(--fs-xs)",color:"var(--text-muted)"}}>{nutzer}</span>
          <Button variant="ghost" size="sm" icon="log-out" onClick={onAbmelden}>Abmelden</Button>
        </div>
      ) : null}
    </header>
  );
}

/* Umschalter Liste / Karte als zusammenhaengende Segmentgruppe. */
function AnsichtUmschalter({ ansicht, setAnsicht }) {
  const optionen = [{ id: "liste", label: "Anrufliste", icon: "list" }, { id: "karte", label: "Karte", icon: "map" }];
  return (
    <div role="group" aria-label="Ansicht" style={{display:"inline-flex",border:"1px solid var(--control-border)",borderRadius:"var(--radius)",overflow:"hidden",flex:"0 0 auto"}}>
      {optionen.map((o, i) => {
        const aktiv = o.id === ansicht;
        return (
          <button key={o.id} type="button" aria-pressed={aktiv} onClick={() => setAnsicht(o.id)}
            style={{display:"inline-flex",alignItems:"center",gap:6,height:"var(--control-h)",padding:"0 12px",border:0,
              borderLeft:i?"1px solid var(--control-border)":0,cursor:"pointer",font:"inherit",fontSize:"var(--fs-sm)",
              fontWeight:"var(--fw-medium)",background:aktiv?"var(--brand-lime)":"var(--control-bg)",color:aktiv?"var(--text-on-accent)":"var(--text-primary)"}}>
            <Icon name={o.icon} size={14} />{o.label}
          </button>
        );
      })}
    </div>
  );
}

function FilterBar({ ansicht, setAnsicht, query, setQuery, aktiveStatus, toggleStatus, kategorien, aktiveKategorien, toggleKategorie,
  nurFaellig, setNurFaellig, faellig, counts, treffer, gesamt, onReset, sidebarOffen, setSidebarOffen, status, onNeu }) {
  const filterAktiv = aktiveStatus.length || aktiveKategorien.length || query || nurFaellig;
  return (
    <div style={{background:"var(--surface-card)",borderBottom:"1px solid var(--divider)",padding:"10px 16px",display:"flex",alignItems:"center",gap:"var(--space-4)",flexWrap:"wrap",minHeight:"var(--filterbar-h)",flex:"0 0 auto"}}>
      <AnsichtUmschalter ansicht={ansicht} setAnsicht={setAnsicht} />

      <div style={{width:268,flex:"0 0 auto"}}>
        <TextInput icon="search" value={query} onChange={e=>setQuery(e.target.value)} placeholder="Name, Ort, Strasse, Telefon, Ansprechpartner ..." aria-label="Suche" />
      </div>

      <FilterChip active={nurFaellig} onClick={()=>setNurFaellig(!nurFaellig)} count={faellig}>Heute anrufen</FilterChip>

      <div style={{display:"flex",gap:6,flexWrap:"wrap",alignItems:"center",paddingLeft:10,borderLeft:"1px solid var(--divider)"}}>
        {kategorien.map(([k, n])=>(
          <FilterChip key={k} active={aktiveKategorien.includes(k)} onClick={()=>toggleKategorie(k)} count={n}>{k}</FilterChip>
        ))}
      </div>

      <div style={{display:"flex",gap:6,flexWrap:"wrap",alignItems:"center",paddingLeft:10,borderLeft:"1px solid var(--divider)"}}>
        {STATUS_KEYS.map(k=>(
          <FilterChip key={k} active={aktiveStatus.includes(k)} onClick={()=>toggleStatus(k)} dot={STATUS[k].color} count={counts[k]||0}>
            {STATUS[k].label.split(" / ")[0]}
          </FilterChip>
        ))}
      </div>

      <div style={{marginLeft:"auto",display:"flex",alignItems:"center",gap:"var(--space-3)"}}>
        {status}
        <span className="tnum" style={{fontSize:"var(--fs-sm)",color:"var(--text-muted)",fontVariantNumeric:"tabular-nums",whiteSpace:"nowrap",paddingLeft:"var(--space-3)",borderLeft:"1px solid var(--divider)"}}>
          <strong style={{color:"var(--text-primary)"}}>{treffer}</strong> von {gesamt} Karteikarten
        </span>
        {filterAktiv ? <IconButton icon="filter-x" label="Filter zuruecksetzen" size="sm" variant="ghost" onClick={onReset} /> : null}
        {onNeu ? <Button variant="secondary" size="sm" icon="plus" onClick={onNeu}>Karteikarte anlegen</Button> : null}
        <IconButton icon={sidebarOffen?"panel-right-close":"panel-right-open"} label={sidebarOffen?"Sidebar einklappen":"Sidebar ausklappen"} size="sm" onClick={()=>setSidebarOffen(!sidebarOffen)} />
      </div>
    </div>
  );
}

Object.assign(window, { AppHeader, FilterBar, STATUS_KEYS, SEITEN });