/* global React, Field, TextInput, TextArea, Select, RadioOptions, CheckOptions, ToneSlider, ColorPicker, Dropzone */
// The 8 onboarding sections. Each renders into the current `data` object via setData.

const BRANCHEN = [
  "Logistik & Transport",
  "Handwerk & Bau",
  "Solar & Energie",
  "Immobilien",
  "Gastronomie & Hotellerie",
  "Beratung & Consulting",
  "Recht & Steuern",
  "Medizin & Gesundheit",
  "E-Commerce & Handel",
  "Bildung & Coaching",
  "Software & IT",
  "Sonstiges",
];

const RECHTSFORMEN = ["Einzelunternehmen", "GbR", "GmbH", "UG (haftungsbeschränkt)", "AG", "Freiberufler", "Sonstiges"];

// ── Section 1 ────────────────────────────────────────────────────────────
function SectionUnternehmen({ d, set }) {
  return (
    <>
      <Field
        label="Hast du bereits eine Webseite?"
        required
        hint="Wenn ja, schauen wir uns Inhalte, Stil und Struktur vorab an."
      >
        <RadioOptions
          value={d.hatWebsite}
          onChange={(v) => set({ hatWebsite: v })}
          options={[
            { value: "ja", label: "Ja, ich habe eine Webseite" },
            { value: "nein", label: "Nein, das ist meine Erste" },
          ]}
          cols={2}
        />
      </Field>

      {d.hatWebsite === "ja" ? (
        <Field label="URL deiner aktuellen Webseite" required>
          <TextInput value={d.websiteUrl} onChange={(v) => set({ websiteUrl: v })} placeholder="https://www.deine-firma.de" type="url" />
        </Field>
      ) : null}

      <Field label="Unternehmensname" required>
        <TextInput value={d.firmenname} onChange={(v) => set({ firmenname: v })} placeholder="z. B. Matari Solar GmbH" />
      </Field>
      <Field label="Branche" required>
        <Select
          value={d.branche}
          onChange={(v) => set({ branche: v })}
          options={BRANCHEN}
          placeholder="— wählen —"
        />
      </Field>

      <div style={{
        marginTop: 22,
        fontSize: 11.5, fontWeight: 600,
        letterSpacing: "0.14em", textTransform: "uppercase",
        color: "var(--tl-fg-3)",
      }}>
        Rechnungsanschrift
      </div>

      <Field label="Straße & Hausnummer" required>
        <TextInput value={d.rechnungStrasse} onChange={(v) => set({ rechnungStrasse: v })} placeholder="z. B. Müllerstraße 12" />
      </Field>
      <div className="field-grid">
        <Field label="PLZ" required>
          <TextInput value={d.rechnungPLZ} onChange={(v) => set({ rechnungPLZ: v })} placeholder="z. B. 10115" />
        </Field>
        <Field label="Ort" required>
          <TextInput value={d.rechnungOrt} onChange={(v) => set({ rechnungOrt: v })} placeholder="z. B. Berlin" />
        </Field>
      </div>
      <Field label="Land">
        <TextInput value={d.rechnungLand} onChange={(v) => set({ rechnungLand: v })} placeholder="Deutschland" />
      </Field>
      <Field label="USt-IdNr. (falls vorhanden)" hint="Für Rechnungen ins EU-Ausland oder als Unternehmer:in.">
        <TextInput value={d.ustId} onChange={(v) => set({ ustId: v })} placeholder="z. B. DE123456789" />
      </Field>

      <div className="field-grid">
        <Field label="Vor- und Nachname" required>
          <TextInput value={d.kontaktName} onChange={(v) => set({ kontaktName: v })} placeholder="Vor- und Nachname" />
        </Field>
        <Field label="E-Mail" required>
          <TextInput value={d.kontaktEmail} onChange={(v) => set({ kontaktEmail: v })} placeholder="name@firma.de" type="email" />
        </Field>
      </div>
      <Field label="Telefon" hint="Für Rückfragen und das Onboarding-Gespräch.">
        <TextInput value={d.kontaktTelefon} onChange={(v) => set({ kontaktTelefon: v })} placeholder="+49 …" type="tel" />
      </Field>
    </>
  );
}

// ── Section 2 ────────────────────────────────────────────────────────────
function SectionZielgruppe({ d, set }) {
  return (
    <>
      <Field
        label="Wer ist deine Zielgruppe?"
        required
        hint="Beschreibe deine idealen Kund:innen kurz: B2B oder B2C, Größe, Branche, Lebenssituation."
      >
        <TextArea
          value={d.zielgruppe}
          onChange={(v) => set({ zielgruppe: v })}
          placeholder="z. B. Mittelständische Logistikunternehmen in Deutschland mit 20–100 Mitarbeitenden, die ihre Flotte digitalisieren wollen."
          rows={3}
        />
      </Field>
      <Field
        label="Welches Problem löst du für sie?"
        hint="Womit kommen sie zu dir? Was tut weh?"
      >
        <TextArea
          value={d.problem}
          onChange={(v) => set({ problem: v })}
          placeholder="z. B. Manuelle Tourenplanung kostet Zeit und Geld, Mitarbeitende sind frustriert, Kunden warten zu lange."
          rows={3}
        />
      </Field>
    </>
  );
}

// ── Section 3 ────────────────────────────────────────────────────────────
function SectionAngebot({ d, set }) {
  return (
    <>
      <Field
        label="Was bietest du an?"
        required
        hint="Deine Hauptleistungen oder Produkte — 3–5 Stichpunkte reichen."
      >
        <TextArea
          value={d.leistungen}
          onChange={(v) => set({ leistungen: v })}
          placeholder={"z. B.\n– Photovoltaik-Anlagen für Eigenheime\n– Stromspeicher und Wallboxen\n– Wartung & Service"}
          rows={5}
        />
      </Field>
      <Field
        label="Was unterscheidet dich vom Wettbewerb?"
        hint="USP, Erfahrung, Auszeichnungen, regionale Stärke — alles was du herausstellen willst."
      >
        <TextArea
          value={d.usp}
          onChange={(v) => set({ usp: v })}
          placeholder="z. B. 15 Jahre Erfahrung, eigenes Montageteam, 10-Jahres-Garantie, Festpreis-Versprechen."
          rows={3}
        />
      </Field>
    </>
  );
}

// ── Section 4 ────────────────────────────────────────────────────────────
function SectionTone({ d, set }) {
  return (
    <>
      <Field label="Wie sprichst du deine Kund:innen an?" required>
        <RadioOptions
          value={d.anrede}
          onChange={(v) => set({ anrede: v })}
          options={[
            { value: "du", label: "Du-Form", hint: "Persönlich, modern, nahbar — passt zu T&L selbst." },
            { value: "sie", label: "Sie-Form", hint: "Klassisch, seriös, formell — bei B2B & älterer Zielgruppe." },
          ]}
          cols={2}
        />
      </Field>
      <Field
        label="Tonalität"
        hint="Schiebe die Regler dahin, wo deine Marke steht."
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 4 }}>
          <ToneSlider
            value={d.toneVerspielt}
            onChange={(v) => set({ toneVerspielt: v })}
            leftLabel="Sachlich"
            rightLabel="Verspielt"
          />
          <ToneSlider
            value={d.toneMutig}
            onChange={(v) => set({ toneMutig: v })}
            leftLabel="Zurückhaltend"
            rightLabel="Selbstbewusst"
          />
          <ToneSlider
            value={d.toneTechnisch}
            onChange={(v) => set({ toneTechnisch: v })}
            leftLabel="Einfach"
            rightLabel="Fachlich"
          />
        </div>
      </Field>
    </>
  );
}

// ── Section 5 ────────────────────────────────────────────────────────────
function SectionVisuell({ d, set }) {
  return (
    <>
      <Field label="Welcher visuelle Stil passt zu dir?" required>
        <RadioOptions
          value={d.stil}
          onChange={(v) => set({ stil: v })}
          options={[
            { value: "modern", label: "Modern & Minimalistisch", hint: "Klar, viel Whitespace, schwarze Typo." },
            { value: "warm", label: "Warm & Persönlich", hint: "Sanfte Farben, runde Formen, organisch." },
            { value: "bold", label: "Mutig & Auffällig", hint: "Starke Farben, große Typo, Kontraste." },
            { value: "premium", label: "Premium & Edel", hint: "Dunkle Töne, Serifen-Akzente, viel Ruhe." },
            { value: "tech", label: "Tech & Modern-B2B", hint: "Blau-Töne, Grids, Daten-fokussiert." },
            { value: "neutral", label: "Lass die KI vorschlagen", hint: "Wir wählen passend zur Branche." },
          ]}
          cols={2}
        />
      </Field>
      <Field label="Hast du bereits eine Markenfarbe?" required>
        <RadioOptions
          value={d.hatFarbe}
          onChange={(v) => set({ hatFarbe: v })}
          options={[
            { value: "ja", label: "Ja, ich habe eine" },
            { value: "nein", label: "Nein, schlagt mir eine vor" },
          ]}
          cols={2}
        />
      </Field>

      {d.hatFarbe === "ja" ? (
        <Field label="Hexcode deiner Markenfarbe" required hint='Zum Beispiel "#1E9CFF". Genaue Werte sind perfekt; ungefähre ok.'>
          <HexColorInput value={d.primaerfarbe} onChange={(v) => set({ primaerfarbe: v })} />
        </Field>
      ) : null}

      {d.hatFarbe === "nein" ? (
        <Field
          label="Such dir eine aus — oder wähle eine eigene"
          hint="Wir verfeinern die Palette später passend zu deiner Branche."
        >
          <ColorPicker value={d.primaerfarbe} onChange={(v) => set({ primaerfarbe: v })} />
        </Field>
      ) : null}
      <Field
        label="Referenz-Websites (optional)"
        hint="2–3 Webseiten, deren Look dir gefällt — pro Zeile eine URL."
      >
        <TextArea
          value={d.referenzen}
          onChange={(v) => set({ referenzen: v })}
          placeholder={"https://stripe.com\nhttps://www.matarisolar.de"}
          rows={3}
        />
      </Field>
    </>
  );
}

// ── Section 6 ────────────────────────────────────────────────────────────
function SectionUploads({ d, set }) {
  return (
    <>
      <Field
        label="Logo"
        hint="Dein Logo als SVG, PNG oder PDF — am liebsten transparent."
      >
        <Dropzone
          files={d.uploadLogo}
          onChange={(f) => set({ uploadLogo: f })}
          accept=".svg,.png,.jpg,.jpeg,.pdf,.ai"
          multiple={false}
          title="Logo hochladen"
          hint="SVG, PNG, PDF · max. 10 MB"
        />
      </Field>
      <Field
        label="Bildmaterial (optional)"
        hint="Eigene Fotos vom Team, Produkten, Räumen, Projekten. Wir sortieren das Beste raus."
      >
        <Dropzone
          files={d.uploadBilder}
          onChange={(f) => set({ uploadBilder: f })}
          accept="image/*"
          title="Bilder hochladen (mehrere möglich)"
          hint="PNG, JPG, WEBP · einzeln max. 10 MB"
        />
      </Field>
      <Field
        label="Bestehende Texte / Dokumente (optional)"
        hint="Bestehende Über-uns-Texte, Flyer, Pitch-Decks — alles was uns Kontext gibt."
      >
        <Dropzone
          files={d.uploadDocs}
          onChange={(f) => set({ uploadDocs: f })}
          accept=".pdf,.doc,.docx,.txt,.md"
          title="Dokumente hochladen"
          hint="PDF, DOC, TXT · einzeln max. 10 MB"
        />
      </Field>
    </>
  );
}

// ── Section 7 ────────────────────────────────────────────────────────────
function SectionZiel({ d, set }) {
  return (
    <>
      <Field label="Was soll deine Website hauptsächlich erreichen?" required>
        <RadioOptions
          value={d.hauptziel}
          onChange={(v) => set({ hauptziel: v })}
          options={[
            { value: "leads", label: "Leads & Anfragen sammeln", hint: "Formular-Anfragen, Angebots-Anfragen." },
            { value: "termine", label: "Termine buchen", hint: "Beratungsgespräche, Erstgespräche, Calendly-Integration." },
            { value: "verkauf", label: "Direkt verkaufen", hint: "Produkte oder Pakete direkt online." },
            { value: "info", label: "Informieren & Vertrauen aufbauen", hint: "Visitenkarte, Image, Kompetenz zeigen." },
            { value: "recruiting", label: "Mitarbeiter:innen gewinnen", hint: "Karriere-Fokus, Bewerbungen sammeln." },
          ]}
        />
      </Field>
      <Field
        label="Wichtigste Handlung der Besucher"
        hint="Was sollen Besucher am Ende konkret tun? In einem Satz."
      >
        <TextInput
          value={d.cta}
          onChange={(v) => set({ cta: v })}
          placeholder='z. B. "Kostenloses Erstgespräch buchen"'
        />
      </Field>
    </>
  );
}

// ── Section 8 ────────────────────────────────────────────────────────────
const UNTERSEITEN_OPTIONS = [
  "Über uns / Team",
  "Leistungen / Produkte",
  "Referenzen / Portfolio",
  "Kontakt",
  "FAQ",
  "Karriere / Jobs",
  "Blog",
  "Preise",
  "Standorte",
  "Impressum & Datenschutz",
];

function SectionStruktur({ d, set }) {
  const sel = Array.isArray(d.unterseiten) ? d.unterseiten : [];
  return (
    <>
      <Field
        label="Welche 2 Unterseiten brauchst du?"
        required
        hint={`Wähle genau 2. (Impressum & Datenschutz sind sowieso dabei.) · ${sel.length}/2 gewählt`}
      >
        <CheckOptions
          value={d.unterseiten}
          onChange={(v) => set({ unterseiten: v.slice(-2) })}
          options={UNTERSEITEN_OPTIONS.filter((o) => o !== "Impressum & Datenschutz")}
          cols={2}
        />
      </Field>
      <Field
        label="Sonstige Wünsche / Anmerkungen"
        hint="Alles was sonst noch wichtig ist — gewünschte Integrationen, Inhalte, Dringlichkeit, Sprachen."
      >
        <TextArea
          value={d.anmerkungen}
          onChange={(v) => set({ anmerkungen: v })}
          placeholder="z. B. Sollte mehrsprachig sein (DE/EN), HubSpot-Integration, Termin-Tool Calendly."
          rows={3}
        />
      </Field>
    </>
  );
}

// ── Section 9 ────────────────────────────────────────────────────────────
function SectionTechnik({ d, set }) {
  return (
    <>
      <div style={{
        background: "var(--tl-accent-50)",
        border: "1px solid var(--tl-accent-100)",
        borderRadius: 12,
        padding: "12px 14px",
        fontSize: 13.5,
        color: "var(--tl-ink-900)",
        marginTop: 22,
        lineHeight: 1.5,
      }}>
        <strong style={{ fontWeight: 600 }}>Wichtig:</strong> Domain und Hosting laufen über dich (Eigentum & laufende Kosten bleiben bei dir). Wir kümmern uns um die komplette Einrichtung, DNS-Konfiguration und SSL — du brauchst nichts technisches zu wissen.
      </div>

      <Field label="Hast du bereits eine Domain?" required>
        <RadioOptions
          value={d.hatDomain}
          onChange={(v) => set({ hatDomain: v })}
          options={[
            { value: "ja", label: "Ja, ich habe eine Domain", hint: "Wir richten sie für deine neue Seite ein." },
            { value: "nein", label: "Nein, brauche noch eine", hint: "Wir empfehlen einen Anbieter und helfen bei der Bestellung." },
            { value: "unsicher", label: "Ich bin mir nicht sicher", hint: "Kein Problem — besprechen wir im Onboarding-Call." },
          ]}
        />
      </Field>

      {d.hatDomain === "ja" ? (
        <>
          <Field
            label="Deine Domain"
            required
            hint="Die vollständige Adresse, z. B. meine-firma.de"
          >
            <TextInput value={d.domain} onChange={(v) => set({ domain: v })} placeholder="meine-firma.de" />
          </Field>
          <Field
            label="Wo ist die Domain registriert?"
            hint="Damit wir den Zugriff klären können (z. B. IONOS, Strato, GoDaddy, Namecheap)."
          >
            <TextInput value={d.domainAnbieter} onChange={(v) => set({ domainAnbieter: v })} placeholder="z. B. IONOS" />
          </Field>
        </>
      ) : null}

      {d.hatDomain === "nein" ? (
        <Field
          label="Wunsch-Domain"
          hint="Welche Adresse hättest du gerne? Wir prüfen die Verfügbarkeit. Mehrere Vorschläge sind ok."
        >
          <TextInput value={d.wunschDomain} onChange={(v) => set({ wunschDomain: v })} placeholder="z. B. meine-firma.de, meinefirma-berlin.de" />
        </Field>
      ) : null}

      <Field label="Hast du bereits Hosting / Webspace?" required>
        <RadioOptions
          value={d.hatHosting}
          onChange={(v) => set({ hatHosting: v })}
          options={[
            { value: "ja", label: "Ja, ich habe schon Hosting", hint: "Wir prüfen, ob es für Webflow/unsere Setup-Anforderungen passt." },
            { value: "nein", label: "Nein, brauche noch Hosting", hint: "Wir empfehlen den passenden Anbieter — DSGVO-konform, deutsche Server." },
            { value: "unsicher", label: "Ich bin mir nicht sicher", hint: "Klären wir gemeinsam im Onboarding-Call." },
          ]}
        />
      </Field>

      {d.hatHosting === "ja" ? (
        <Field
          label="Bei welchem Anbieter?"
          hint="z. B. IONOS, All-Inkl, Hetzner, Strato — falls bekannt."
        >
          <TextInput value={d.hostingAnbieter} onChange={(v) => set({ hostingAnbieter: v })} placeholder="z. B. All-Inkl" />
        </Field>
      ) : null}
    </>
  );
}

// ── Section index ─────────────────────────────────────────────────────────
const SECTIONS = [
  {
    id: "unternehmen",
    title: "Unternehmen & Kontakt",
    sub: "Wer du bist, Rechnungsdaten und bestehende Website.",
    Component: SectionUnternehmen,
    required: [
      "firmenname", "branche",
      "rechnungStrasse", "rechnungPLZ", "rechnungOrt",
      "kontaktName", "kontaktEmail",
      "hatWebsite",
    ],
    doneIf: (d) => {
      // if user has a website, URL is required
      if (d.hatWebsite === "ja" && !(d.websiteUrl || "").trim()) return false;
      return true;
    },
  },
  {
    id: "zielgruppe",
    title: "Zielgruppe & Problem",
    sub: "Für wen baust du das — und welches Problem löst du?",
    Component: SectionZielgruppe,
    required: ["zielgruppe"],
  },
  {
    id: "angebot",
    title: "Angebot & USP",
    sub: "Deine Leistungen und was dich besonders macht.",
    Component: SectionAngebot,
    required: ["leistungen"],
  },
  {
    id: "tone",
    title: "Tone of Voice",
    sub: "Wie deine Marke klingt.",
    Component: SectionTone,
    required: ["anrede"],
  },
  {
    id: "visuell",
    title: "Visueller Stil",
    sub: "Wie deine Marke aussieht.",
    Component: SectionVisuell,
    required: ["stil", "hatFarbe"],
    doneIf: (d) => {
      // If user said they have a brand color, the hex value is required.
      if (d.hatFarbe === "ja" && !(d.primaerfarbe || "").trim()) return false;
      return true;
    },
  },
  {
    id: "uploads",
    title: "Logo & Material",
    sub: "Logo, Bilder und Dokumente, die wir verwenden dürfen.",
    Component: SectionUploads,
    required: [],
    // optional section: only counts as "done" if at least one file has been uploaded
    doneIf: (d) =>
      (d.uploadLogo || []).length > 0 ||
      (d.uploadBilder || []).length > 0 ||
      (d.uploadDocs || []).length > 0,
  },
  {
    id: "ziel",
    title: "Hauptziel der Website",
    sub: "Was Besucher am Ende tun sollen.",
    Component: SectionZiel,
    required: ["hauptziel"],
  },
  {
    id: "struktur",
    title: "Seitenstruktur",
    sub: "Welche 2 Unterseiten brauchst du?",
    Component: SectionStruktur,
    required: ["unterseiten"],
  },
  {
    id: "technik",
    title: "Domain & Hosting",
    sub: "Bringst du mit — wir richten alles ein.",
    Component: SectionTechnik,
    required: ["hatDomain", "hatHosting"],
    // Extra check: if user has a domain, they need to tell us which one.
    doneIf: (d) => {
      if (d.hatDomain === "ja" && !(d.domain || "").trim()) return false;
      return true;
    },
  },
];

function isSectionDone(section, data) {
  // Optional sections (no required fields) need an explicit doneIf check —
  // otherwise `[].every(...)` returns true and they show as "Fertig" while empty.
  if (!section.required || section.required.length === 0) {
    return typeof section.doneIf === "function" ? !!section.doneIf(data) : false;
  }
  const reqOk = section.required.every((key) => {
    const v = data[key];
    if (Array.isArray(v)) {
      // unterseiten needs exactly 2
      if (key === "unterseiten") return v.length === 2;
      return v.length > 0;
    }
    return v != null && String(v).trim() !== "";
  });
  return reqOk && (typeof section.doneIf === "function" ? !!section.doneIf(data) : true);
}

// For the submit-row gate: optional sections don't block submission even if empty.
function isSectionBlockingSubmit(section, data) {
  if (!section.required || section.required.length === 0) return false;
  return !isSectionDone(section, data);
}

Object.assign(window, { SECTIONS, isSectionDone, isSectionBlockingSubmit, BRANCHEN, RECHTSFORMEN, UNTERSEITEN_OPTIONS, COLOR_PRESETS: window.COLOR_PRESETS });