// pages-services.jsx — Services hub + Réglementation + Formations + FAQ + Signaler

// ─── SERVICES HUB ────────────────────────────────
function Services({ navigate }) {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Services & ressources"
        title="Outils pratiques & informations"
        lede="Quatre services pour faciliter votre exercice professionnel et l'accès à l'information officielle."
        breadcrumb={["Accueil", "Services"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="services-grid">
            {[
              { icon: "Doc",   t: "Réglementation",            d: "Loi-cadre, décrets, arrêtés et règlement intérieur. Tous les textes en vigueur, classés et téléchargeables.", r: "reglementation", n: TEXTES.length, lbl: "textes" },
              { icon: "Cal",   t: "Formations & Événements",   d: "Agenda annuel des journées professionnelles, formations DPC, conférences scientifiques.", r: "formations", n: EVENTS.length, lbl: "événements" },
              { icon: "Help",  t: "FAQ",                       d: "Réponses aux questions fréquentes sur l'inscription, la vérification, le signalement et la cotisation.", r: "faq", n: FAQS.length, lbl: "questions" },
              { icon: "Alert", t: "Signaler un manquement",     d: "Formulaire confidentiel pour signaler un exercice illégal, une non-conformité ou un médicament suspect.", r: "signaler", n: 5, lbl: "types" },
            ].map((s) => {
              const I = Icon[s.icon];
              return (
                <button key={s.t} className="service-tile" onClick={() => navigate(s.r)}>
                  <div className="service-tile-icon"><I size={22} /></div>
                  <div className="service-tile-count">{s.n} {s.lbl}</div>
                  <h3 className="serif">{s.t}</h3>
                  <p>{s.d}</p>
                  <div className="service-tile-arrow">Accéder <Icon.ArrowRight size={13} /></div>
                </button>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}
window.Services = Services;

// ─── RÉGLEMENTATION ──────────────────────────────
function Reglementation() {
  const [cat, setCat] = useState("Toutes");
  const [type, setType] = useState("Tous");
  const [search, setSearch] = useState("");

  const cats = ["Toutes", ...Array.from(new Set(TEXTES.map(t => t.cat)))];
  const types = ["Tous", "Loi", "Décret", "Arrêté", "Règlement"];

  const filtered = TEXTES.filter(t => {
    if (cat !== "Toutes" && t.cat !== cat) return false;
    if (type !== "Tous" && t.type !== type) return false;
    if (search && !`${t.titre} ${t.num}`.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Services › Réglementation"
        title="Textes officiels & réglementation"
        lede="Centralisation de tous les textes en vigueur régissant la profession pharmaceutique au Niger."
        breadcrumb={["Accueil", "Services", "Réglementation"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="filter-bar-row">
            <div className="search-input">
              <Icon.Search />
              <input placeholder="Rechercher un texte, un numéro…" value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            <select className="filter-select" value={type} onChange={e => setType(e.target.value)}>
              {types.map(t => <option key={t}>{t}</option>)}
            </select>
            <select className="filter-select" value={cat} onChange={e => setCat(e.target.value)}>
              {cats.map(c => <option key={c}>{c}</option>)}
            </select>
          </div>

          <div className="texte-list">
            {filtered.map(t => (
              <article key={t.id || t.num} className="texte-card">
                <div className="texte-type">
                  <div className="texte-type-l serif">{t.type}</div>
                  <div className="texte-type-n mono">N° {t.num}</div>
                </div>
                <div className="texte-body">
                  <div className="texte-meta">
                    <span className="tag">{t.cat}</span>
                    <span className="muted" style={{ fontSize: 13 }}>{t.date}</span>
                  </div>
                  <h4 className="serif">{t.titre}</h4>
                </div>
                <div className="texte-actions">
                  <button className="btn btn-ghost btn-sm"><Icon.Doc size={14} /> Lire</button>
                  {t.fichier_url
                    ? <a href={t.fichier_url} target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-sm"><Icon.Download /> PDF</a>
                    : <button className="btn btn-primary btn-sm" disabled><Icon.Download /> PDF</button>}
                </div>
              </article>
            ))}
            {filtered.length === 0 && (
              <div style={{ padding: "48px", textAlign: "center", color: "var(--ink-400)" }}>
                Aucun texte ne correspond à vos critères.
              </div>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}
window.Reglementation = Reglementation;

// ─── FORMATIONS & ÉVÉNEMENTS ─────────────────────
function Formations() {
  const [filter, setFilter] = useState("Tous");
  const types = ["Tous", ...Array.from(new Set(EVENTS.map(e => e.type)))];
  const filtered = filter === "Tous" ? EVENTS : EVENTS.filter(e => e.type === filter);

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Services › Formations & Événements"
        title="Agenda professionnel 2026-2027"
        lede="Journées professionnelles, formations DPC, conférences scientifiques et événements institutionnels."
        breadcrumb={["Accueil", "Services", "Formations"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="filter-bar">
            {types.map(t => (
              <button key={t} className={`filter-chip ${filter === t ? "active" : ""}`} onClick={() => setFilter(t)}>{t}</button>
            ))}
          </div>

          <div className="event-list">
            {filtered.map((e, i) => (
              <article key={i} className="event-card">
                <div className="event-date">
                  <div className="event-date-d serif">{e.jour}</div>
                  <div className="event-date-m">{e.mois}</div>
                </div>
                <div className="event-body">
                  <div className="event-meta">
                    <span className="tag">{e.type}</span>
                    <span className="muted" style={{ fontSize: 13 }}><Icon.Pin size={11} /> {e.lieu}</span>
                  </div>
                  <h4 className="serif">{e.titre}</h4>
                  <p className="muted">{e.desc}</p>
                </div>
                <div className="event-cta">
                  <div className="event-places">{e.places}</div>
                  <button className="btn btn-primary btn-sm">
                    {e.places.includes("Complet") ? "Liste d'attente" : "Inscription"} <Icon.ArrowRight size={12} />
                  </button>
                </div>
              </article>
            ))}
          </div>

          {/* DPC banner */}
          <div className="dpc-banner">
            <div>
              <div className="eyebrow" style={{ color: "var(--gold-400)" }}>Programme DPC</div>
              <h3 className="serif" style={{ color: "#fff", marginTop: 10 }}>Développement Professionnel Continu</h3>
              <p style={{ color: "rgba(255,255,255,0.75)", marginTop: 8, maxWidth: 560 }}>
                Le DPC est obligatoire pour tout pharmacien inscrit. Cumulez vos heures via le programme annuel proposé par l'Ordre.
              </p>
            </div>
            <button className="btn btn-accent">Voir le programme DPC <Icon.ArrowRight /></button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Formations = Formations;

// ─── FAQ ─────────────────────────────────────────
function FAQ() {
  const [cat, setCat] = useState("Toutes");
  const [open, setOpen] = useState(0);

  const cats = ["Toutes", ...Array.from(new Set(FAQS.map(f => f.cat)))];
  const filtered = cat === "Toutes" ? FAQS : FAQS.filter(f => f.cat === cat);

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Services › Aide"
        title="Questions fréquentes"
        lede="Les réponses aux questions les plus courantes des pharmaciens et du grand public."
        breadcrumb={["Accueil", "Services", "FAQ"]}
      />

      <section className="section-sm">
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="filter-bar" style={{ justifyContent: "center", marginBottom: 32 }}>
            {cats.map(c => (
              <button key={c} className={`filter-chip ${cat === c ? "active" : ""}`} onClick={() => { setCat(c); setOpen(0); }}>{c}</button>
            ))}
          </div>

          <div className="faq-list">
            {filtered.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="faq-cat">{f.cat}</span>
                  <span className="faq-text">{f.q}</span>
                  <span className="faq-toggle"><Icon.Chevron size={14} dir={open === i ? "up" : "down"} /></span>
                </button>
                {open === i && (
                  <div className="faq-a">{f.a}</div>
                )}
              </div>
            ))}
          </div>

          <div className="faq-cta">
            <div>
              <h3 className="serif">Vous n'avez pas trouvé votre réponse ?</h3>
              <p className="muted" style={{ marginTop: 6 }}>Notre équipe vous répond sous 48h ouvrées.</p>
            </div>
            <button className="btn btn-primary">Nous contacter <Icon.ArrowRight /></button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.FAQ = FAQ;

// ─── SIGNALER UN MANQUEMENT ──────────────────────
function Signaler() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    type: "",
    description: "",
    localisation: "",
    region: "",
    date: "",
    anonyme: false,
    pieces: 0,
    nom: "",
    email: "",
    phone: "",
  });
  const [submitted, setSubmitted] = useState(false);
  const [sigId, setSigId] = useState(null);

  const types = [
    { id: "illegal",   t: "Exercice illégal de la pharmacie",          d: "Personne exerçant sans autorisation, vente illégale en dehors d'une officine.", i: "Alert" },
    { id: "falsifie",  t: "Médicaments falsifiés ou contrefaits",       d: "Suspicion de contrefaçon, produits non conformes, marché parallèle.", i: "Shield" },
    { id: "regles",    t: "Non-respect des règles déontologiques",      d: "Manquement à la déontologie, publicité abusive, conflit d'intérêts.", i: "Book" },
    { id: "conformite", t: "Problème de conformité d'une officine",     d: "Hygiène, stockage, présence du titulaire, conditions d'exercice.", i: "Building" },
    { id: "autre",     t: "Autre situation",                           d: "Toute autre situation que vous estimez devoir signaler.", i: "Help" },
  ];

  if (submitted) {
    return (
      <div className="page-enter">
        <section className="section">
          <div className="container" style={{ maxWidth: 720, textAlign: "center" }}>
            <div className="verify-badge" style={{ margin: "0 auto 24px" }}><Icon.Check size={28} /></div>
            <h1 className="serif">Signalement transmis</h1>
            <p className="lede" style={{ marginTop: 16 }}>
              Votre signalement a bien été enregistré sous la référence <b className="mono" style={{ color: "var(--c-primary)" }}>SIG-{new Date().getFullYear()}-{sigId ? String(sigId).padStart(4, '0') : '----'}</b>.
              {!data.anonyme && " Nous vous tiendrons informé(e) du suivi par email."}
            </p>
            <p className="muted" style={{ marginTop: 20 }}>
              Tous les signalements sont examinés par le Conseil de discipline dans le respect de la confidentialité.
            </p>
            <button className="btn btn-primary" style={{ marginTop: 32 }} onClick={() => { setSubmitted(false); setStep(0); setData({ type: "", description: "", localisation: "", region: "", date: "", anonyme: false, pieces: 0, nom: "", email: "", phone: "" }); }}>
              Effectuer un autre signalement
            </button>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Services › Confidentiel"
        title="Signaler un manquement"
        lede="Formulaire confidentiel et sécurisé. Tous les signalements sont examinés par le Conseil de discipline."
        breadcrumb={["Accueil", "Services", "Signaler"]}
      />

      <section className="section-sm">
        <div className="container" style={{ maxWidth: 820 }}>
          {/* Confidentialité */}
          <div className="confid-banner">
            <Icon.Shield size={22} />
            <div>
              <b>Engagement de confidentialité</b>
              <p className="muted" style={{ fontSize: 13.5, marginTop: 4 }}>
                Votre identité est protégée par la loi. Vous pouvez signaler de façon totalement anonyme. Aucune donnée n'est transmise à des tiers.
              </p>
            </div>
          </div>

          {/* Stepper */}
          <div className="stepper">
            {["Type", "Description", "Auteur", "Récapitulatif"].map((s, i) => (
              <div key={s} className={`step ${step >= i ? "active" : ""} ${step === i ? "current" : ""}`}>
                <div className="step-n">{i + 1}</div>
                <div className="step-l">{s}</div>
              </div>
            ))}
          </div>

          <div className="form-wrap">
            {/* STEP 0 — TYPE */}
            {step === 0 && (
              <>
                <h3 className="serif">Quel type de manquement souhaitez-vous signaler ?</h3>
                <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Sélectionnez la catégorie la plus appropriée.</p>
                <div className="type-list">
                  {types.map(t => {
                    const I = Icon[t.i];
                    return (
                      <label key={t.id} className={`type-option ${data.type === t.id ? "checked" : ""}`}>
                        <input type="radio" name="type" checked={data.type === t.id} onChange={() => setData({...data, type: t.id})} />
                        <div className="type-icon"><I /></div>
                        <div>
                          <div className="type-t">{t.t}</div>
                          <div className="type-d">{t.d}</div>
                        </div>
                      </label>
                    );
                  })}
                </div>
                <div className="form-nav">
                  <div />
                  <button className="btn btn-primary" disabled={!data.type} onClick={() => setStep(1)}>
                    Continuer <Icon.ArrowRight />
                  </button>
                </div>
              </>
            )}

            {/* STEP 1 — DESCRIPTION */}
            {step === 1 && (
              <>
                <h3 className="serif">Décrivez les faits</h3>
                <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Apportez le maximum de précisions utiles à l'instruction.</p>

                <div className="field">
                  <label>Description détaillée *</label>
                  <textarea
                    required
                    rows="6"
                    placeholder="Que s'est-il passé ? Quand ? Qui est concerné ?"
                    value={data.description}
                    onChange={e => setData({...data, description: e.target.value})}
                  ></textarea>
                  <div className="field-hint">Évitez d'inclure des informations médicales personnelles identifiantes.</div>
                </div>

                <div className="form-row">
                  <div className="field">
                    <label>Lieu / Adresse</label>
                    <input placeholder="Ex. Pharmacie X, Quartier Y" value={data.localisation} onChange={e => setData({...data, localisation: e.target.value})} />
                  </div>
                  <div className="field">
                    <label>Région</label>
                    <select value={data.region} onChange={e => setData({...data, region: e.target.value})}>
                      <option value="">Sélectionner…</option>
                      {REGIONS.slice(1).map(r => <option key={r}>{r}</option>)}
                    </select>
                  </div>
                </div>

                <div className="form-row">
                  <div className="field">
                    <label>Date approximative des faits</label>
                    <input type="date" value={data.date} onChange={e => setData({...data, date: e.target.value})} />
                  </div>
                  <div className="field">
                    <label>Pièces jointes</label>
                    <div className="upload">
                      <Icon.Doc />
                      <span>{data.pieces > 0 ? `${data.pieces} fichier(s)` : "Glisser ou cliquer"}</span>
                      <button type="button" onClick={() => setData({...data, pieces: data.pieces + 1})}>Ajouter</button>
                    </div>
                  </div>
                </div>

                <div className="form-nav">
                  <button className="btn btn-ghost" onClick={() => setStep(0)}>Retour</button>
                  <button className="btn btn-primary" disabled={!data.description} onClick={() => setStep(2)}>
                    Continuer <Icon.ArrowRight />
                  </button>
                </div>
              </>
            )}

            {/* STEP 2 — AUTEUR */}
            {step === 2 && (
              <>
                <h3 className="serif">Vos coordonnées</h3>
                <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Vous pouvez signaler de façon anonyme.</p>

                <label className="anonyme-toggle">
                  <input type="checkbox" checked={data.anonyme} onChange={e => setData({...data, anonyme: e.target.checked})} />
                  <div>
                    <div style={{ fontWeight: 600 }}>Signaler de façon anonyme</div>
                    <div className="muted" style={{ fontSize: 13 }}>Aucune information personnelle ne sera collectée. Le traitement sera plus difficile sans contact.</div>
                  </div>
                </label>

                {!data.anonyme && (
                  <>
                    <div className="form-row" style={{ marginTop: 8 }}>
                      <div className="field">
                        <label>Nom *</label>
                        <input required value={data.nom} onChange={e => setData({...data, nom: e.target.value})} />
                      </div>
                      <div className="field">
                        <label>Email *</label>
                        <input required type="email" value={data.email} onChange={e => setData({...data, email: e.target.value})} />
                      </div>
                    </div>
                    <div className="field">
                      <label>Téléphone (facultatif)</label>
                      <input value={data.phone} onChange={e => setData({...data, phone: e.target.value})} />
                    </div>
                  </>
                )}

                <div className="form-nav">
                  <button className="btn btn-ghost" onClick={() => setStep(1)}>Retour</button>
                  <button className="btn btn-primary" disabled={!data.anonyme && (!data.nom || !data.email)} onClick={() => setStep(3)}>
                    Continuer <Icon.ArrowRight />
                  </button>
                </div>
              </>
            )}

            {/* STEP 3 — RÉCAP */}
            {step === 3 && (
              <>
                <h3 className="serif">Vérifiez votre signalement</h3>
                <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Relisez avant transmission.</p>

                <div className="recap">
                  <div className="recap-row"><span>Type</span><b>{types.find(t => t.id === data.type)?.t || "—"}</b></div>
                  <div className="recap-row"><span>Lieu</span><b>{data.localisation || "—"} {data.region && `(${data.region})`}</b></div>
                  <div className="recap-row"><span>Date des faits</span><b>{data.date || "Non précisée"}</b></div>
                  <div className="recap-row"><span>Pièces jointes</span><b>{data.pieces || 0} fichier(s)</b></div>
                  <div className="recap-row"><span>Anonymat</span><b>{data.anonyme ? "Oui" : "Non"}</b></div>
                  {!data.anonyme && (
                    <>
                      <div className="recap-row"><span>Nom</span><b>{data.nom}</b></div>
                      <div className="recap-row"><span>Email</span><b>{data.email}</b></div>
                    </>
                  )}
                  <div className="recap-desc">
                    <span>Description</span>
                    <p>{data.description}</p>
                  </div>
                </div>

                <label className="check-line">
                  <input type="checkbox" required />
                  <span>Je certifie sur l'honneur l'exactitude des informations fournies.</span>
                </label>

                <div className="form-nav">
                  <button className="btn btn-ghost" onClick={() => setStep(2)}>Retour</button>
                  <button className="btn btn-primary btn-lg" onClick={async () => {
                    const payload = {
                      type: types.find(t => t.id === data.type)?.t || data.type,
                      description: data.description,
                      lieu: [data.localisation, data.region].filter(Boolean).join(' — ') || null,
                      date_fait: data.date || null,
                      anonyme: data.anonyme,
                      nom: data.anonyme ? null : data.nom || null,
                      email: data.anonyme ? null : data.email || null,
                    };
                    const { data: row } = await window.SB.from('signalements').insert(payload).select('id').single();
                    if (row) setSigId(row.id);
                    setSubmitted(true);
                  }}>
                    Transmettre le signalement <Icon.ArrowRight />
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}
window.Signaler = Signaler;