// Fiche client conforme 2026 / Factur-X — annuaire + formulaire de saisie.
// Champs BLOQUANTS à l'enregistrement : nom, courriel (BT-49), SIREN (B2B),
// adresse postale, pays. Saisie partielle libre tant qu'on n'enregistre pas —
// même logique que la finalisation de facture. La fiche alimente les mentions
// des factures (elle n'est jamais ressaisie par document).
// window.OryzeShared.ClientsDirectory + window.OryzeShared.ClientForm
(function () {
  const { Input, Select, Button, Avatar, SegmentedControl, Toggle, Tag } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;

  const lbl = { fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" };
  const err = { fontSize: 12.5, color: "var(--fin-negative)", fontWeight: 600, marginTop: 6 };
  const help = { fontSize: 12, color: "var(--text-subtle)", marginTop: 6, lineHeight: 1.45 };

  const emailOk = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());

  /* ---------------- Annuaire ---------------- */

  function ClientsDirectory({ onEdit, onNew, compact = false }) {
    const clients = window.OryzeClients;
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
          <div style={{ fontSize: 13, color: "var(--text-muted)", flex: "1 1 180px" }}>
            {clients.length} fiches — une fiche incomplète bloque la finalisation des factures du client.
          </div>
          <Button size="sm" iconLeft={<Ic.plus size={15} />} onClick={() => onNew && onNew()} style={{ flex: "none" }}>Nouveau client</Button>
        </div>
        <div style={{ border: "var(--border-thin) solid var(--line-keyline)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
          {clients.map((c, i) => <DirRow key={c.value} c={c} compact={compact} last={i === clients.length - 1} onClick={() => onEdit && onEdit(c)} />)}
        </div>
      </div>
    );
  }

  function DirRow({ c, last, onClick, compact = false }) {
    const [h, setH] = React.useState(false);
    const b2c = c.type === "b2c";
    return (
      <div
        onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: "flex", alignItems: "center", gap: 12, padding: compact ? "12px 13px" : "12px 16px", borderBottom: last ? "none" : "1px solid var(--line-divider)", cursor: "pointer", background: h ? "var(--surface-page)" : "var(--surface-card)", transition: "background var(--dur-fast) var(--ease-out)" }}
      >
        <Avatar initials={c.init || "?"} tone={c.tone || "lilac"} size={36} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ fontWeight: 600, fontSize: 14, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.label}</span>
            {b2c && <Tag mono style={{ fontSize: 10, padding: "2px 7px" }}>B2C</Tag>}
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-muted)", marginTop: 3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {b2c ? "Particulier" : "SIREN " + (c.siren || "—")} · {c.city || "—"}
          </div>
        </div>
        <div style={{ flex: "none" }}>
          {c.email
            ? (compact ? null : <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{c.email}</span>)
            : <Tag tone="coral" dot>courriel manquant</Tag>}
        </div>
        <Ic.chevronRight size={17} style={{ color: "var(--text-subtle)", flex: "none" }} />
      </div>
    );
  }

  /* ---------------- Formulaire ---------------- */

  function ClientForm({ client, onBack, onSaved, compact = false }) {
    const isNew = !client;
    const c = client || {};
    const [type, setType] = React.useState(c.type || "b2b");
    const [name, setName] = React.useState(c.label || "");
    const [siren, setSiren] = React.useState(c.siren || "");
    const [tva, setTva] = React.useState(c.tvaIntra || "");
    const [email, setEmail] = React.useState(c.email || "");
    const [street, setStreet] = React.useState(c.street || "");
    const [zip, setZip] = React.useState(c.zip || "");
    const [city, setCity] = React.useState(c.city || "");
    const [country, setCountry] = React.useState(c.country || "FR");
    const [deliveryOn, setDeliveryOn] = React.useState(!!c.delivery);
    const [delivery, setDelivery] = React.useState(c.delivery || "");
    const [errors, setErrors] = React.useState({});
    const [saved, setSaved] = React.useState(false);
    const b2b = type === "b2b";

    // Bloquant à l'enregistrement seulement — la saisie reste libre.
    function validate() {
      const e = {};
      if (!name.trim()) e.name = b2b ? "La raison sociale est requise." : "Le nom du client est requis.";
      if (b2b && siren.replace(/\D/g, "").length !== 9) e.siren = "SIREN invalide — 9 chiffres requis (mention obligatoire 2026).";
      if (!email.trim()) e.email = "Adresse électronique requise (BT-49) — sans elle, la finalisation des factures de ce client est bloquée.";
      else if (!emailOk(email)) e.email = "Format de courriel invalide.";
      if (!street.trim() || !zip.trim() || !city.trim()) e.address = "Adresse postale complète requise — rue, code postal et ville.";
      if (!country) e.country = "Le pays est requis.";
      if (deliveryOn && !delivery.trim()) e.delivery = "Renseignez l'adresse de livraison, ou désactivez l'option.";
      return e;
    }

    function save() {
      const e = validate();
      setErrors(e);
      if (Object.keys(e).length) return;
      const digits = siren.replace(/\D/g, "");
      const rec = {
        type, label: name.trim(),
        siren: b2b ? digits.replace(/(\d{3})(\d{3})(\d{3})/, "$1 $2 $3") : "",
        tvaIntra: b2b ? tva.trim() : "",
        email: email.trim(), street: street.trim(), zip: zip.trim(), city: city.trim(), country,
        delivery: deliveryOn ? delivery.trim() : null,
        address: street.trim() + ", " + zip.trim() + " " + city.trim(),
      };
      if (isNew) {
        rec.value = name.trim().toLowerCase().replace(/\W+/g, "-");
        rec.init = name.trim().split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase();
        rec.tone = "lilac";
        window.OryzeClients.push(rec);
      } else {
        Object.assign(client, rec);
      }
      setSaved(true);
      setTimeout(() => onSaved && onSaved(rec), 1100);
    }

    if (saved) {
      return (
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: "34px 0 26px", textAlign: "center" }}>
          <span style={{ width: 44, height: 44, display: "flex", alignItems: "center", justifyContent: "center", background: "var(--oryze-mint)", border: "var(--border-key) solid var(--line-keyline)", borderRadius: "var(--radius-md)", color: "var(--oryze-mint-ink)" }}>
            <Ic.check size={22} />
          </span>
          <div style={{ fontWeight: 700, fontSize: 19, letterSpacing: "-0.02em" }}>Fiche enregistrée</div>
          <div style={{ fontSize: 13.5, color: "var(--text-muted)", maxWidth: 360, lineHeight: 1.5 }}>
            {name.trim()} peut être facturé : la fiche alimente les mentions des factures, rien n'est ressaisi par document.
          </div>
        </div>
      );
    }

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {/* Type — conditionne SIREN + TVA intra */}
        <div>
          <div style={{ ...lbl, marginBottom: 7 }}>Type de client</div>
          <SegmentedControl value={type} onChange={setType}
            options={[{ value: "b2b", label: "Professionnel (B2B)" }, { value: "b2c", label: "Particulier (B2C)" }]} />
          <div style={help}>{b2b ? "SIREN requis — c'est une des mentions 2026." : "Pas de SIREN — la facturation électronique B2C suit un calendrier distinct."}</div>
        </div>

        <div>
          <Input label={b2b ? "Raison sociale *" : "Nom complet *"} value={name} onChange={(e) => setName(e.target.value)}
            placeholder={b2b ? "Ex. Studio Nord" : "Ex. Jeanne Perrin"} error={errors.name || null} />
        </div>

        {b2b && (
          <div style={{ display: "grid", gridTemplateColumns: compact ? "1fr" : "1fr 1fr", gap: 14, alignItems: "start" }}>
            <Input label="SIREN *" value={siren} onChange={(e) => setSiren(e.target.value)} mono placeholder="912 480 335" error={errors.siren || null} />
            <div>
              <Input label="N° TVA intracommunautaire" value={tva} onChange={(e) => setTva(e.target.value)} mono placeholder="FR 42 912480335" />
              <div style={help}>Optionnel — si le client est assujetti.</div>
            </div>
          </div>
        )}

        {/* Adresse électronique — BT-49, bloquante */}
        <div>
          <Input label="Adresse électronique *" type="email" value={email} onChange={(e) => setEmail(e.target.value)} mono
            iconLeft={<Ic.mail size={17} />} placeholder="compta@exemple.fr" error={errors.email || null} />
          {!errors.email && <div style={help}>Requise pour la facturation électronique (BT-49) — une fiche sans courriel bloque la finalisation.</div>}
        </div>

        {/* Adresse postale + pays */}
        <div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <Input label="Adresse postale *" value={street} onChange={(e) => setStreet(e.target.value)} placeholder="N° et rue" />
            <div style={{ display: "grid", gridTemplateColumns: compact ? "110px 1fr" : "130px 1fr 160px", gap: 10 }}>
              <Input label="Code postal" value={zip} onChange={(e) => setZip(e.target.value)} mono placeholder="69003" />
              <Input label="Ville" value={city} onChange={(e) => setCity(e.target.value)} placeholder="Lyon" />
              {!compact && <Select label="Pays *" value={country} onChange={(e) => setCountry(e.target.value)} options={window.OryzeCountries} />}
            </div>
            {compact && <Select label="Pays *" value={country} onChange={(e) => setCountry(e.target.value)} options={window.OryzeCountries} />}
          </div>
          {errors.address && <div style={err}>{errors.address}</div>}
          {errors.country && <div style={err}>{errors.country}</div>}
          {country !== "FR" && <div style={help}>Hors France : la démo couvre le régime FR — les règles locales viendront avec le pays.</div>}
        </div>

        {/* Livraison — mention 2026 si différente */}
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>Adresse de livraison différente</div>
              <div style={{ fontSize: 12, color: "var(--text-subtle)" }}>Portée sur les factures si les biens sont livrés ailleurs (mention 2026)</div>
            </div>
            <Toggle checked={deliveryOn} onChange={setDeliveryOn} aria-label="Adresse de livraison différente" />
          </div>
          {deliveryOn && (
            <div>
              <Input placeholder="Adresse de livraison" value={delivery} onChange={(e) => setDelivery(e.target.value)} />
              {errors.delivery && <div style={err}>{errors.delivery}</div>}
            </div>
          )}
        </div>

        {/* Actions */}
        <div style={{ display: "flex", gap: 10, alignItems: "center", paddingTop: 4, borderTop: "var(--border-hair) solid var(--line-divider)" }}>
          <Button variant="ghost" size="md" onClick={() => onBack && onBack()} style={{ flex: "none" }}>Retour</Button>
          <div style={{ flex: 1, fontSize: 11.5, color: "var(--text-subtle)" }}>* requis à l'enregistrement</div>
          <Button size="md" iconLeft={<Ic.check size={15} />} onClick={save}>Enregistrer la fiche</Button>
        </div>
      </div>
    );
  }

  window.OryzeShared = window.OryzeShared || {};
  window.OryzeShared.ClientsDirectory = ClientsDirectory;
  window.OryzeShared.ClientForm = ClientForm;
})();