// ============================================================
//  REGISTER — Formulaire d'inscription multi-étapes
// ============================================================

const Register = () => {
  const { t, setPage, countries, domains } = useApp();
  const [step, setStep] = React.useState(0);
  const [done, setDone] = React.useState(false);
  const [form, setForm] = React.useState({
    first: "", last: "", sex: "", birthYear: "",
    promo: "", entry: "", exit: "", matricule: "", function: "", memory: "",
    paroisseOrigin: "", dioceseOrigin: "", paroisseNow: "", dioceseNow: "", engagement: "",
    domain: "", job: "", org: "", position: "", status: "",
    phone: "", email: "", whatsapp: "", country: "", city: "", linkedin: "",
    phoneVisible: false, emailVisible: true, whatsappVisible: false, birthHidden: true,
    contactMentor: true, contactCollab: true,
    consent1: false, consent2: false, consent3: false, consent4: false,
    photo: null
  });

  const set = (k, v) => setForm({ ...form, [k]: v });

  const steps = [
    { title: t.register.steps[0], icon: "user" },
    { title: t.register.steps[1], icon: "school" },
    { title: t.register.steps[2], icon: "church" },
    { title: t.register.steps[3], icon: "briefcase" },
    { title: t.register.steps[4], icon: "mail" },
    { title: t.register.steps[5], icon: "eye" },
    { title: t.register.steps[6], icon: "user" },
    { title: t.register.steps[7], icon: "check" }
  ];

  const canNext = () => {
    if (step === 0) return form.first && form.last;
    if (step === 1) return form.promo;
    if (step === 3) return form.domain;
    if (step === 4) return form.country && (form.phone || form.email);
    if (step === 7) return form.consent1 && form.consent2;
    return true;
  };

  const submit = () => { setDone(true); };

  if (done) {
    return (
      <Section className="py-16">
        <div className="max-w-xl mx-auto text-center bg-white rounded-3xl p-10 shadow-card border border-ajc-green/20">
          <div className="w-20 h-20 mx-auto mb-5 rounded-full bg-ajc-green/15 flex items-center justify-center text-ajc-green">
            <Icon name="check" size={36} strokeWidth={2.5}/>
          </div>
          <h2 className="font-display text-3xl font-semibold text-ajc-blueDk">Merci, {form.first} !</h2>
          <p className="mt-3 text-ajc-mute leading-relaxed">{t.register.done}</p>
          <div className="mt-6 flex gap-3 justify-center">
            <Btn variant="primary" icon="home" onClick={() => setPage("home")}>{t.nav.home}</Btn>
            <Btn variant="secondary" icon="users" onClick={() => setPage("trombi")}>{t.nav.trombi}</Btn>
          </div>
        </div>
      </Section>
    );
  }

  return (
    <Section className="py-8 md:py-12 max-w-3xl mx-auto">
      {/* Header */}
      <div className="text-center mb-8">
        <div className="text-[11px] uppercase tracking-[0.22em] text-ajc-red font-semibold mb-2">{t.register.step} {step + 1} {t.register.of} {steps.length}</div>
        <h1 className="font-display text-3xl md:text-4xl font-semibold text-ajc-blueDk">{t.register.title}</h1>
        <p className="mt-2 text-ajc-mute">{t.register.lead}</p>
      </div>

      {/* Stepper */}
      <div className="mb-8 flex items-center justify-between overflow-x-auto no-scrollbar gap-1">
        {steps.map((s, i) => (
          <React.Fragment key={i}>
            <button onClick={() => i < step && setStep(i)} className="flex flex-col items-center min-w-[44px] flex-shrink-0">
              <div className={"w-9 h-9 rounded-full flex items-center justify-center transition " +
                (i < step ? "bg-ajc-green text-white" :
                 i === step ? "bg-ajc-blue text-white ring-4 ring-ajc-blue/15" :
                 "bg-white border border-ajc-blue/15 text-ajc-mute")}>
                {i < step ? <Icon name="check" size={14}/> : <Icon name={s.icon} size={14}/>}
              </div>
              <div className={"text-[10px] mt-1 font-semibold text-center hidden sm:block " + (i <= step ? "text-ajc-blueDk" : "text-ajc-mute")}>
                {s.title}
              </div>
            </button>
            {i < steps.length - 1 && <div className={"flex-1 h-px " + (i < step ? "bg-ajc-green" : "bg-ajc-blue/15")}></div>}
          </React.Fragment>
        ))}
      </div>

      {/* Card */}
      <div className="bg-white rounded-3xl border border-ajc-blue/10 shadow-card p-6 md:p-8">
        {step === 0 && (
          <FormStep title="Votre identité" subtitle="Commençons par vous présenter à la communauté.">
            <FormGrid>
              <FormInput label="Prénom" required value={form.first} onChange={v => set("first", v)}/>
              <FormInput label="Nom" required value={form.last} onChange={v => set("last", v)}/>
              <FormSelect label="Sexe" value={form.sex} onChange={v => set("sex", v)} options={[["", "—"], ["M", "Masculin"], ["F", "Féminin"]]}/>
              <FormInput label="Année de naissance" type="number" value={form.birthYear} onChange={v => set("birthYear", v)} placeholder="1985"/>
            </FormGrid>
            <CheckRow label="Masquer ma date de naissance par défaut" checked={form.birthHidden} onChange={v => set("birthHidden", v)}/>
          </FormStep>
        )}

        {step === 1 && (
          <FormStep title="Votre parcours à Saint Camille" subtitle="Aidez vos camarades à vous retrouver dans la mémoire de l'IPSCA.">
            <FormGrid>
              <FormSelect label="Promotion" required value={form.promo} onChange={v => set("promo", v)}
                options={[["", "—"]].concat(Array.from({length: 58}, (_, i) => [1968 + i, 1968 + i]))}/>
              <FormInput label="Année d'entrée" type="number" value={form.entry} onChange={v => set("entry", v)}/>
              <FormInput label="Année de sortie" type="number" value={form.exit} onChange={v => set("exit", v)}/>
              <FormInput label="Matricule (si connu)" value={form.matricule} onChange={v => set("matricule", v)}/>
              <FormInput label="Fonction exercée à Saint Camille" colSpan value={form.function} onChange={v => set("function", v)} placeholder="ex. Préfet de salle, Sacristain, Bibliothécaire…"/>
            </FormGrid>
            <FormTextarea label="Souvenir, citation, témoignage" rows={3} value={form.memory} onChange={v => set("memory", v)} placeholder="Une phrase qui résume ce que Saint Camille vous a apporté…"/>
          </FormStep>
        )}

        {step === 2 && (
          <FormStep title="Vie paroissiale" subtitle="Votre attachement à l'Église catholique en quelques mots.">
            <FormGrid>
              <FormInput label="Paroisse d'origine" value={form.paroisseOrigin} onChange={v => set("paroisseOrigin", v)}/>
              <FormInput label="Diocèse d'origine" value={form.dioceseOrigin} onChange={v => set("dioceseOrigin", v)}/>
              <FormInput label="Paroisse actuelle" value={form.paroisseNow} onChange={v => set("paroisseNow", v)}/>
              <FormInput label="Diocèse actuel" value={form.dioceseNow} onChange={v => set("dioceseNow", v)}/>
              <FormInput label="Engagement actuel dans l'Église" colSpan value={form.engagement} onChange={v => set("engagement", v)} placeholder="Lecteur, catéchiste, chorale, conseil paroissial…"/>
            </FormGrid>
          </FormStep>
        )}

        {step === 3 && (
          <FormStep title="Vie professionnelle" subtitle="Le réseau prospère quand chacun fait connaître ce qu'il fait.">
            <FormGrid>
              <FormSelect label="Domaine d'activité" required value={form.domain} onChange={v => set("domain", v)}
                options={[["", "—"]].concat(domains.map(d => [d, d]))}/>
              <FormSelect label="Statut professionnel" value={form.status} onChange={v => set("status", v)}
                options={[["", "—"]].concat(AJC.STATUSES.map(s => [s, s]))}/>
              <FormInput label="Métier / Fonction actuelle" value={form.job} onChange={v => set("job", v)}/>
              <FormInput label="Organisation / Entreprise" value={form.org} onChange={v => set("org", v)}/>
              <FormInput label="Poste occupé" value={form.position} onChange={v => set("position", v)}/>
              <FormInput label="LinkedIn" value={form.linkedin} onChange={v => set("linkedin", v)} placeholder="linkedin.com/in/…"/>
            </FormGrid>
          </FormStep>
        )}

        {step === 4 && (
          <FormStep title="Coordonnées" subtitle="Au moins un moyen de contact est nécessaire. Vous choisirez ce qui est visible à l'étape suivante.">
            <FormGrid>
              <FormSelect label="Pays de résidence" required value={form.country} onChange={v => set("country", v)}
                options={[["", "—"]].concat(countries.map(c => [c.code, c.flag + " " + c.name]))}/>
              <FormInput label="Ville" value={form.city} onChange={v => set("city", v)}/>
              <FormInput label="Téléphone" value={form.phone} onChange={v => set("phone", v)} placeholder="+226 ..."/>
              <FormInput label="WhatsApp" value={form.whatsapp} onChange={v => set("whatsapp", v)}/>
              <FormInput label="E-mail" type="email" colSpan value={form.email} onChange={v => set("email", v)}/>
            </FormGrid>
          </FormStep>
        )}

        {step === 5 && (
          <FormStep title="Confidentialité" subtitle="Vous décidez qui voit quoi. Ces préférences sont modifiables à tout moment.">
            <div className="space-y-3">
              <ToggleRow label="Mon téléphone est visible des membres connectés" checked={form.phoneVisible} onChange={v => set("phoneVisible", v)}/>
              <ToggleRow label="Mon e-mail est visible des membres connectés" checked={form.emailVisible} onChange={v => set("emailVisible", v)}/>
              <ToggleRow label="Mon WhatsApp est visible des membres connectés" checked={form.whatsappVisible} onChange={v => set("whatsappVisible", v)}/>
              <div className="border-t border-ajc-blue/10 pt-3 mt-3"></div>
              <ToggleRow label="J'accepte d'être sollicité pour du mentorat" checked={form.contactMentor} onChange={v => set("contactMentor", v)}/>
              <ToggleRow label="J'accepte d'être contacté pour des collaborations" checked={form.contactCollab} onChange={v => set("contactCollab", v)}/>
            </div>
          </FormStep>
        )}

        {step === 6 && (
          <FormStep title="Photo de profil" subtitle="Une belle photo facilite les retrouvailles.">
            <div className="flex flex-col items-center py-6">
              <div className="w-32 h-32 rounded-full bg-ajc-blue/10 border-2 border-dashed border-ajc-blue/30 flex items-center justify-center text-ajc-blue mb-4">
                <Icon name="user" size={42}/>
              </div>
              <button className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-ajc-blue text-white text-sm font-medium hover:bg-ajc-blue2">
                <Icon name="upload" size={16}/> Téléverser une photo
              </button>
              <div className="text-xs text-ajc-mute mt-3">JPG ou PNG · 5 Mo maximum · facultatif</div>
            </div>
          </FormStep>
        )}

        {step === 7 && (
          <FormStep title="Consentement & soumission" subtitle="Validez vos choix pour rejoindre l'AJC.">
            <div className="space-y-3">
              <ConsentRow checked={form.consent1} onChange={v => set("consent1", v)} text={t.register.consent1} required/>
              <ConsentRow checked={form.consent2} onChange={v => set("consent2", v)} text={t.register.consent2} required/>
              <ConsentRow checked={form.consent3} onChange={v => set("consent3", v)} text={t.register.consent3}/>
              <ConsentRow checked={form.consent4} onChange={v => set("consent4", v)} text={t.register.consent4}/>
            </div>
            {/* Récap */}
            <div className="mt-6 bg-ajc-cream rounded-xl p-4 border border-ajc-gold/30">
              <div className="text-[11px] uppercase tracking-wider text-ajc-mute font-semibold mb-2">Récapitulatif</div>
              <div className="text-sm space-y-1 text-ajc-ink">
                <div><strong>{form.first} {form.last}</strong> — Promo {form.promo || "?"}</div>
                <div className="text-ajc-mute">{form.job || "—"} · {form.domain || "—"}</div>
                <div className="text-ajc-mute">{form.country && countries.find(c => c.code === form.country)?.flag} {form.city || "—"}</div>
              </div>
            </div>
          </FormStep>
        )}

        {/* Navigation */}
        <div className="mt-8 flex items-center justify-between pt-6 border-t border-ajc-blue/10">
          <button onClick={() => step > 0 ? setStep(step - 1) : setPage("home")}
            className="inline-flex items-center gap-2 text-sm text-ajc-mute hover:text-ajc-blue font-medium">
            <Icon name="arrowLeft" size={16}/> {step > 0 ? t.register.prev : "Annuler"}
          </button>
          {step < steps.length - 1 ? (
            <Btn variant="primary" icon="arrowRight" onClick={() => canNext() && setStep(step + 1)}>{t.register.next}</Btn>
          ) : (
            <Btn variant="gold" icon="check" onClick={() => canNext() && submit()}>{t.register.submit}</Btn>
          )}
        </div>
      </div>
    </Section>
  );
};

// Form primitives
const FormStep = ({ title, subtitle, children }) => (
  <div className="anim-fade-up">
    <h2 className="font-display text-2xl font-semibold text-ajc-blueDk">{title}</h2>
    {subtitle && <p className="text-ajc-mute text-sm mt-1 mb-5">{subtitle}</p>}
    {children}
  </div>
);
const FormGrid = ({ children }) => <div className="grid sm:grid-cols-2 gap-4">{children}</div>;

const FormInput = ({ label, required, value, onChange, type = "text", placeholder, colSpan }) => (
  <div className={colSpan ? "sm:col-span-2" : ""}>
    <label className="text-xs font-semibold text-ajc-ink mb-1.5 block">
      {label} {required && <span className="text-ajc-red">*</span>}
    </label>
    <input type={type} value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)}
      className="w-full px-3.5 py-2.5 rounded-lg border border-ajc-blue/15 bg-white text-sm focus:border-ajc-blue focus:ring-2 focus:ring-ajc-blue/10 outline-none"/>
  </div>
);

const FormSelect = ({ label, required, value, onChange, options, colSpan }) => (
  <div className={colSpan ? "sm:col-span-2" : ""}>
    <label className="text-xs font-semibold text-ajc-ink mb-1.5 block">
      {label} {required && <span className="text-ajc-red">*</span>}
    </label>
    <select value={value} onChange={e => onChange(e.target.value)}
      className="w-full px-3.5 py-2.5 rounded-lg border border-ajc-blue/15 bg-white text-sm focus:border-ajc-blue focus:ring-2 focus:ring-ajc-blue/10 outline-none">
      {options.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
    </select>
  </div>
);

const FormTextarea = ({ label, value, onChange, rows = 3, placeholder }) => (
  <div className="mt-4">
    <label className="text-xs font-semibold text-ajc-ink mb-1.5 block">{label}</label>
    <textarea value={value} onChange={e => onChange(e.target.value)} rows={rows} placeholder={placeholder}
      className="w-full px-3.5 py-2.5 rounded-lg border border-ajc-blue/15 bg-white text-sm focus:border-ajc-blue focus:ring-2 focus:ring-ajc-blue/10 outline-none resize-none"/>
  </div>
);

const CheckRow = ({ label, checked, onChange }) => (
  <label className="mt-4 flex items-center gap-2.5 cursor-pointer">
    <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)}
      className="w-4 h-4 rounded text-ajc-blue focus:ring-ajc-blue/30"/>
    <span className="text-sm text-ajc-ink">{label}</span>
  </label>
);

const ToggleRow = ({ label, checked, onChange }) => (
  <label className="flex items-center justify-between p-3 rounded-xl bg-ajc-cream border border-ajc-blue/10 cursor-pointer hover:border-ajc-blue/30">
    <span className="text-sm text-ajc-ink pr-3">{label}</span>
    <div className="relative flex-shrink-0">
      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} className="sr-only"/>
      <div className={"w-11 h-6 rounded-full transition " + (checked ? "bg-ajc-green" : "bg-ajc-blue/15")}></div>
      <div className={"absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-all " + (checked ? "left-[22px]" : "left-0.5")}></div>
    </div>
  </label>
);

const ConsentRow = ({ checked, onChange, text, required }) => (
  <label className="flex items-start gap-3 p-3 rounded-xl border border-ajc-blue/10 hover:border-ajc-blue/30 cursor-pointer">
    <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)}
      className="mt-0.5 w-4 h-4 rounded text-ajc-blue flex-shrink-0"/>
    <span className="text-sm text-ajc-ink leading-relaxed">{text} {required && <span className="text-ajc-red">*</span>}</span>
  </label>
);

Object.assign(window, { Register, FormStep, FormInput, FormSelect, FormTextarea, CheckRow, ToggleRow, ConsentRow });