const { SectionHeading, TextInput, Textarea, Select, Button, Icon, STATUS } = window.TersusDesignSystem_b3db99;

const KATEGORIE_VORSCHLAEGE = ["Wohnungsbaugesellschaft", "Hausverwaltung", "Altenheim / Pflege", "Buerokomplex", "Gewerbe", "Sonstiges"];
const STATUS_AUSWAHL = ["bestandskunde", "verhandlung", "angeschrieben", "neu"].map(k => ({ value: k, label: STATUS[k].label }));
const LEER = { name: "", kategorie: "Wohnungsbaugesellschaft", status: "bestandskunde", strasse: "", plz: "", ort: "",
  telefon: "", email: "", website: "", kontakt: "", position: "", notiz: "" };

/* Moegliche Dubletten: gleicher Name (normalisiert, enthaelt sich gegenseitig) oder gleiche Strasse + PLZ. */
function aehnliche(objekte, w) {
  const n = window.suchNorm(w.name);
  const adr = window.suchNorm(w.strasse) + " " + w.plz.trim();
  if (n.length < 4 && adr.trim().length < 8) return [];
  return objekte.filter(o => {
    const on = window.suchNorm(o.name);
    const namePasst = n.length >= 4 && (on.includes(n) || n.includes(on));
    const adrPasst = w.strasse.trim() && w.plz.trim() && window.suchNorm(o.strasse) + " " + (o.plz || "") === adr;
    return namePasst || adrPasst;
  }).slice(0, 5);
}

/* Formular fuer eine neue Karteikarte, z. B. einen Bestandskunden, der nicht in der Leadliste steht. */
function NeueKarteikarte({ objekte, onAnlegen, onAbbrechen, onOeffnen }) {
  const [w, setW] = React.useState(LEER);
  const [speichert, setSpeichert] = React.useState(false);
  const [fehler, setFehler] = React.useState(null);
  const feld = (f) => ({ value: w[f], onChange: e => setW(v => ({ ...v, [f]: e.target.value })) });
  const dubletten = React.useMemo(() => aehnliche(objekte, w), [objekte, w.name, w.strasse, w.plz]);
  const gueltig = w.name.trim().length >= 2;

  const speichern = async (e) => {
    e.preventDefault();
    if (!gueltig) return;
    setSpeichert(true); setFehler(null);
    const daten = Object.fromEntries(Object.entries(w).map(([k, v]) => [k, typeof v === "string" ? v.trim() : v]));
    daten.website = daten.website.replace(/^https?:\/\//, "").replace(/\/$/, "");
    /* Kartenposition ermitteln; klappt das nicht, zeigt die Karteikarte danach
       "Adresse nicht auf der Karte gefunden" und sie steht nur in der Anrufliste. */
    if (daten.strasse || daten.plz || daten.ort) {
      try {
        const punkt = await window.geokodieren(daten);
        if (punkt) { daten.lat = punkt[0]; daten.lng = punkt[1]; }
      } catch (err) { /* ohne Kartenposition anlegen */ }
    }
    const res = await onAnlegen(daten);
    setSpeichert(false);
    if (!res.ok) setFehler("Anlegen fehlgeschlagen: " + res.error);
  };

  return (
    <form onSubmit={speichern} style={{display:"flex",flexDirection:"column",height:"100%",minHeight:0}}>
      <div style={{padding:"var(--pad-section)",borderBottom:"1px solid var(--divider)",display:"flex",alignItems:"flex-start",gap:"var(--space-3)"}}>
        <div>
          <h2 style={{font:"var(--text-h1)"}}>Neue Karteikarte</h2>
          <p style={{margin:"6px 0 0",fontSize:"var(--fs-sm)",color:"var(--text-muted)"}}>Zum Beispiel einen Bestandskunden, der nicht in der Leadliste steht.</p>
        </div>
        <div style={{marginLeft:"auto",flex:"0 0 auto"}}>
          <Button type="button" variant="ghost" size="sm" icon="x" onClick={onAbbrechen}>Abbrechen</Button>
        </div>
      </div>

      <div style={{overflowY:"auto",padding:"var(--pad-section)",display:"grid",gap:"var(--space-6)",alignContent:"start",flex:1,minHeight:0}}>
        <section style={{display:"grid",gap:"var(--space-3)"}}>
          <SectionHeading icon="building-2">Einrichtung</SectionHeading>
          <TextInput label="Name *" required autoFocus {...feld("name")} />
          <div className="spalten-auto" style={{rowGap:"var(--space-3)",columnGap:"var(--space-3)"}}>
            <Select label="Kategorie" options={KATEGORIE_VORSCHLAEGE} {...feld("kategorie")} />
            <Select label="Status" options={STATUS_AUSWAHL} {...feld("status")} />
          </div>
          {dubletten.length ? (
            <div role="status" style={{border:"1px solid var(--border)",borderRadius:"var(--radius)",padding:"10px 12px",background:"var(--surface-page)"}}>
              <div style={{display:"flex",alignItems:"center",gap:6,fontSize:"var(--fs-sm)",fontWeight:"var(--fw-semibold)"}}>
                <Icon name="copy" size={14} /> Aehnliche Karteikarte schon vorhanden
              </div>
              <div style={{display:"grid",gap:4,marginTop:6}}>
                {dubletten.map(o => (
                  <button key={o.id} type="button" onClick={() => onOeffnen(o.id)}
                    style={{background:"none",border:0,padding:0,textAlign:"left",cursor:"pointer",font:"inherit",fontSize:"var(--fs-sm)",color:"var(--text-primary)",textDecoration:"underline",textDecorationColor:"var(--border-strong)"}}>
                    {o.name} <span style={{color:"var(--text-muted)",textDecoration:"none"}}>· {[o.strasse, o.plz, o.ort].filter(Boolean).join(" ")} · {STATUS[o.status].label.split(" / ")[0]}</span>
                  </button>
                ))}
              </div>
              <div style={{fontSize:"var(--fs-xs)",color:"var(--text-muted)",marginTop:6}}>Klick oeffnet die vorhandene Karteikarte. Anlegen ist trotzdem moeglich.</div>
            </div>
          ) : null}
        </section>

        <section style={{display:"grid",gap:"var(--space-3)"}}>
          <SectionHeading icon="map-pin">Adresse und Kontakt</SectionHeading>
          <TextInput label="Strasse und Hausnummer" {...feld("strasse")} />
          <div style={{display:"grid",gridTemplateColumns:"96px 1fr",gap:"var(--space-2)"}}>
            <TextInput label="PLZ" inputMode="numeric" {...feld("plz")} />
            <TextInput label="Ort" {...feld("ort")} />
          </div>
          <div className="spalten-auto" style={{rowGap:"var(--space-3)",columnGap:"var(--space-3)"}}>
            <TextInput label="Telefon" type="tel" {...feld("telefon")} />
            <TextInput label="E-Mail" type="email" {...feld("email")} />
          </div>
          <TextInput label="Website" {...feld("website")} />
          <div className="spalten-auto" style={{rowGap:"var(--space-3)",columnGap:"var(--space-3)"}}>
            <TextInput label="Ansprechpartner" {...feld("kontakt")} />
            <TextInput label="Funktion" {...feld("position")} />
          </div>
        </section>

        <section>
          <SectionHeading icon="notebook-pen">Notizen</SectionHeading>
          <Textarea label="Notizen" rows={4} placeholder="z. B. Leistungen, Objekte, Vertragsbeginn" {...feld("notiz")} />
        </section>
        {fehler ? <div role="alert" style={{fontSize:"var(--fs-sm)",color:"var(--status-declined)"}}>{fehler}</div> : null}
      </div>

      <div style={{padding:"12px var(--pad-section)",borderTop:"1px solid var(--divider)"}}>
        <Button type="submit" variant="primary" icon={speichert ? "loader" : "check"} fullWidth disabled={!gueltig || speichert}>Karteikarte anlegen</Button>
      </div>
    </form>
  );
}

Object.assign(window, { NeueKarteikarte });