// pages-annuaire.jsx — Annuaire, Vérifier

// ─── ANNUAIRE ────────────────────────────────────
function Annuaire({ navigate }) {
  const [tab, setTab] = useState("tableau"); // tableau | carte
  const [view, setView] = useState("liste"); // liste | grille
  const [search, setSearch] = useState("");
  const [region, setRegion] = useState("Toutes");
  const [activite, setActivite] = useState("Toutes");
  const [selected, setSelected] = useState(null);

  const filterMembers = () => {
    return MEMBERS.filter(m => {
      if (region !== "Toutes" && m.ville !== region) return false;
      if (activite !== "Toutes" && m.activite !== activite) return false;
      if (search && !`${m.nom} ${m.num}`.toLowerCase().includes(search.toLowerCase())) return false;
      return true;
    });
  };
  const filterPharma = () => {
    return PHARMACIES.filter(p => {
      if (region !== "Toutes" && p.region !== region) return false;
      if (search && !`${p.nom} ${p.titulaire} ${p.ville}`.toLowerCase().includes(search.toLowerCase())) return false;
      return true;
    });
  };

  const members = filterMembers();
  const pharma = filterPharma();

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Annuaire"
        title="Tableau de l'Ordre & Pharmacies"
        lede="Liste officielle des pharmaciens inscrits et carte des pharmacies du Niger."
        breadcrumb={["Accueil", "Annuaire"]}
      />

      <section className="section-sm">
        <div className="container">

          {/* Tabs */}
          <div className="tabs">
            <button className={`tab ${tab === "tableau" ? "active" : ""}`} onClick={() => setTab("tableau")}>
              <Icon.Users /> Tableau de l'Ordre
              <span className="tab-count">{MEMBERS.length}</span>
            </button>
            <button className={`tab ${tab === "carte" ? "active" : ""}`} onClick={() => setTab("carte")}>
              <Icon.Map /> Carte des pharmacies
              <span className="tab-count">{PHARMACIES.length}</span>
            </button>
          </div>

          {/* Filters */}
          <div className="filter-bar-row">
            <div className="search-input">
              <Icon.Search />
              <input
                placeholder={tab === "tableau" ? "Rechercher un pharmacien, un numéro…" : "Rechercher une pharmacie, un titulaire, une ville…"}
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
            <select className="filter-select" value={region} onChange={(e) => setRegion(e.target.value)}>
              {REGIONS.map(r => <option key={r}>{r === "Toutes" ? "Toutes les régions" : r}</option>)}
            </select>
            {tab === "tableau" && (
              <select className="filter-select" value={activite} onChange={(e) => setActivite(e.target.value)}>
                <option>Toutes</option>
                <option>Officine</option>
                <option>Hospitalier</option>
                <option>Industrie</option>
                <option>Biologie</option>
              </select>
            )}
            {tab === "carte" && (
              <div className="view-toggle">
                <button className={view === "liste" ? "active" : ""} onClick={() => setView("liste")}>Liste</button>
                <button className={view === "grille" ? "active" : ""} onClick={() => setView("grille")}>Carte</button>
              </div>
            )}
          </div>

          {/* CONTENT */}
          {tab === "tableau" && (
            <div className="table-wrap">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>N° d'inscription</th>
                    <th>Nom</th>
                    <th>Activité</th>
                    <th>Ville</th>
                    <th>Inscrit</th>
                    <th>Statut</th>
                  </tr>
                </thead>
                <tbody>
                  {members.map((m) => (
                    <tr key={m.num} onClick={() => setSelected({ type: "membre", data: m })}>
                      <td className="mono" style={{ color: "var(--c-primary)", fontWeight: 600 }}>{m.num}</td>
                      <td><b>{m.nom}</b></td>
                      <td><span className="tag tag-gray">{m.activite}</span></td>
                      <td>{m.ville}</td>
                      <td className="muted">{m.inscrit}</td>
                      <td><span className="status-dot status-active"></span> Actif</td>
                    </tr>
                  ))}
                  {members.length === 0 && (
                    <tr><td colSpan="6" style={{ textAlign: "center", padding: "48px 0", color: "var(--ink-400)" }}>Aucun résultat. Essayez d'élargir vos critères.</td></tr>
                  )}
                </tbody>
              </table>
            </div>
          )}

          {tab === "carte" && view === "liste" && (
            <div className="pharma-grid">
              {pharma.map((p) => (
                <div key={p.id} className="card pharma-card" onClick={() => setSelected({ type: "pharmacie", data: p })}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
                    <div>
                      <h4 className="serif">{p.nom}</h4>
                      <div className="muted" style={{ fontSize: 13.5, marginTop: 2 }}>{p.titulaire}</div>
                    </div>
                    {p.garde && <span className="tag tag-gold">De garde</span>}
                  </div>
                  <div className="pharma-meta">
                    <div><Icon.Pin size={13} /> {p.quartier}, {p.ville}</div>
                    <div><Icon.Phone size={13} /> {p.tel}</div>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--ink-100)" }}>
                    <span className="mono" style={{ color: "var(--ink-400)", fontSize: 11.5 }}>{p.num}</span>
                    <span style={{ color: "var(--c-primary)", fontSize: 13, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 6 }}>
                      Fiche détaillée <Icon.ArrowRight size={12} />
                    </span>
                  </div>
                </div>
              ))}
            </div>
          )}

          {tab === "carte" && view === "grille" && (
            <div className="map-view">
              <div className="map-canvas">
                <svg viewBox="0 0 800 500" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
                  <defs>
                    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(15,81,50,0.08)" strokeWidth="1"/>
                    </pattern>
                  </defs>
                  <rect width="800" height="500" fill="var(--green-50)"/>
                  <rect width="800" height="500" fill="url(#grid)"/>
                  {/* Stylized Niger outline */}
                  <path d="M 80 200 L 180 130 L 320 100 L 450 90 L 600 110 L 720 160 L 730 280 L 660 360 L 540 410 L 380 420 L 240 380 L 140 310 L 80 200 Z"
                        fill="var(--green-100)" stroke="var(--c-primary)" strokeWidth="2" opacity="0.7"/>
                  {/* Pharmacy pins */}
                  {pharma.slice(0, 12).map((p, i) => {
                    const positions = [
                      [220, 280], [260, 260], [230, 300], [280, 280], [240, 270], [250, 320],
                      [420, 320], [480, 220], [560, 270], [350, 250], [600, 350], [180, 240]
                    ];
                    const [x, y] = positions[i] || [400, 250];
                    return (
                      <g key={p.id} style={{ cursor: "pointer" }} onClick={() => setSelected({ type: "pharmacie", data: p })}>
                        <circle cx={x} cy={y} r="11" fill={p.garde ? "var(--c-accent)" : "var(--c-primary)"} stroke="#fff" strokeWidth="2"/>
                        <circle cx={x} cy={y} r="3" fill="#fff"/>
                      </g>
                    );
                  })}
                </svg>
                <div className="map-legend">
                  <div><span className="legend-dot" style={{ background: "var(--c-primary)" }}></span> Pharmacie</div>
                  <div><span className="legend-dot" style={{ background: "var(--c-accent)" }}></span> De garde</div>
                </div>
                <div className="map-watermark">[ Carte interactive — placeholder ]</div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* DETAIL DRAWER */}
      {selected && (
        <div className="drawer-overlay" onClick={() => setSelected(null)}>
          <aside className="drawer" onClick={(e) => e.stopPropagation()}>
            <button className="drawer-close" onClick={() => setSelected(null)}><Icon.X size={16} /></button>
            {selected.type === "membre" ? (
              <>
                <div className="eyebrow">Tableau de l'Ordre</div>
                <h2 className="serif" style={{ marginTop: 8 }}>{selected.data.nom}</h2>
                <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
                  <span className="tag"><Icon.Check size={11} /> Actif</span>
                  <span className="tag tag-gray">{selected.data.activite}</span>
                </div>
                <div className="drawer-divider"></div>
                <div className="info-row"><span>N° d'inscription</span><b className="mono">{selected.data.num}</b></div>
                <div className="info-row"><span>Ville d'exercice</span><b>{selected.data.ville}</b></div>
                <div className="info-row"><span>Inscrit depuis</span><b>{selected.data.inscrit}</b></div>
                <div className="info-row"><span>Activité principale</span><b>{selected.data.activite}</b></div>
                <div className="drawer-divider"></div>
                <p className="muted" style={{ fontSize: 13.5 }}>
                  Ce pharmacien est régulièrement inscrit au tableau de l'Ordre des Pharmaciens du Niger. Son exercice est autorisé sur le territoire national.
                </p>
                <button className="btn btn-ghost btn-sm" style={{ marginTop: 16 }}>
                  <Icon.Download /> Télécharger l'attestation
                </button>
              </>
            ) : (
              <>
                <div className="eyebrow">Pharmacie inscrite</div>
                <h2 className="serif" style={{ marginTop: 8 }}>{selected.data.nom}</h2>
                <div className="muted" style={{ marginTop: 4 }}>Titulaire : <b>{selected.data.titulaire}</b></div>
                <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
                  <span className="tag"><Icon.Check size={11} /> Officine autorisée</span>
                  {selected.data.garde && <span className="tag tag-gold">De garde</span>}
                </div>
                <div className="drawer-divider"></div>
                <div className="info-row"><span>N° d'agrément</span><b className="mono">{selected.data.num}</b></div>
                <div className="info-row"><span>Adresse</span><b>{selected.data.quartier}, {selected.data.ville}</b></div>
                <div className="info-row"><span>Région</span><b>{selected.data.region}</b></div>
                <div className="info-row"><span>Téléphone</span><b>{selected.data.tel}</b></div>
                <div className="drawer-divider"></div>
                <div className="ph" style={{ aspectRatio: "16/9", borderRadius: "var(--r-md)" }} data-label="[ Localisation sur la carte ]"></div>
              </>
            )}
          </aside>
        </div>
      )}
    </div>
  );
}
window.Annuaire = Annuaire;

// ─── VÉRIFIER ────────────────────────────────────
function Verifier() {
  const [q, setQ] = useState("");
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  const onSearch = (e) => {
    e?.preventDefault();
    if (!q.trim()) { setResult(null); return; }
    setLoading(true);
    setResult(null);
    setTimeout(() => {
      const match = MEMBERS.find(m =>
        m.num.toLowerCase() === q.toLowerCase().trim() ||
        m.nom.toLowerCase().includes(q.toLowerCase().trim())
      );
      if (match) setResult({ status: "valide", data: match });
      else if (q.toLowerCase().includes("test") || q.toLowerCase().includes("xxx")) setResult({ status: "non-trouve" });
      else setResult({ status: "a-verifier", query: q });
      setLoading(false);
    }, 600);
  };

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Outil officiel"
        title="Vérifier une inscription"
        lede="Contrôlez en temps réel le statut d'inscription d'un pharmacien au tableau de l'Ordre. Recherche par nom ou par numéro."
        breadcrumb={["Accueil", "Vérifier"]}
      />

      <section className="section-sm">
        <div className="container" style={{ maxWidth: 820 }}>
          <div className="verify-box">
            <form onSubmit={onSearch}>
              <div className="verify-tabs">
                <button type="button" className="verify-tab active">Par nom ou numéro</button>
              </div>
              <div className="verify-input">
                <Icon.Search size={18} />
                <input
                  placeholder="Ex. Aïcha Maïga, PH-2018-0142…"
                  value={q}
                  onChange={(e) => setQ(e.target.value)}
                  autoFocus
                />
                <button type="submit" className="btn btn-primary">
                  {loading ? "Vérification…" : <>Vérifier <Icon.ArrowRight /></>}
                </button>
              </div>
              <div className="verify-hints">
                <span className="muted">Essayez :</span>
                {["Aïcha Maïga", "PH-2018-0142", "Halima Sani"].map(h => (
                  <button key={h} type="button" className="hint-chip" onClick={() => { setQ(h); }}>{h}</button>
                ))}
              </div>
            </form>
          </div>

          {result && (
            <div className={`verify-result verify-${result.status}`}>
              {result.status === "valide" && (
                <>
                  <div className="verify-badge"><Icon.Check size={22} /></div>
                  <div className="verify-status">Inscription valide</div>
                  <h3 className="serif" style={{ marginTop: 6 }}>{result.data.nom}</h3>
                  <p className="muted">Ce pharmacien est régulièrement inscrit au tableau de l'Ordre.</p>
                  <div className="verify-meta">
                    <div><span>N°</span><b className="mono">{result.data.num}</b></div>
                    <div><span>Activité</span><b>{result.data.activite}</b></div>
                    <div><span>Ville</span><b>{result.data.ville}</b></div>
                    <div><span>Inscrit depuis</span><b>{result.data.inscrit}</b></div>
                  </div>
                  <div className="verify-actions">
                    <button className="btn btn-ghost btn-sm"><Icon.Download /> Attestation PDF</button>
                  </div>
                </>
              )}
              {result.status === "non-trouve" && (
                <>
                  <div className="verify-badge verify-badge-red"><Icon.X size={22} /></div>
                  <div className="verify-status verify-status-red">Aucune inscription trouvée</div>
                  <p className="muted" style={{ marginTop: 6 }}>
                    Aucun pharmacien correspondant à votre recherche n'est inscrit au tableau de l'Ordre. Cela ne préjuge pas d'une fraude — vérifiez l'orthographe ou contactez le secrétariat.
                  </p>
                  <div className="verify-actions">
                    <button className="btn btn-ghost btn-sm">Contacter le secrétariat</button>
                    <button className="btn btn-primary btn-sm">Signaler un exercice illégal</button>
                  </div>
                </>
              )}
              {result.status === "a-verifier" && (
                <>
                  <div className="verify-badge verify-badge-amber"><Icon.Help size={22} /></div>
                  <div className="verify-status verify-status-amber">À vérifier</div>
                  <p className="muted" style={{ marginTop: 6 }}>
                    Plusieurs résultats potentiels pour « <b>{result.query}</b> ». Affinez votre recherche par numéro d'inscription pour un résultat unique.
                  </p>
                  <div className="verify-actions">
                    <button className="btn btn-ghost btn-sm">Consulter l'annuaire complet</button>
                  </div>
                </>
              )}
            </div>
          )}

          <div className="verify-help">
            <div className="verify-help-item">
              <Icon.Shield />
              <div>
                <h4>Outil officiel</h4>
                <p>Les données proviennent directement du tableau tenu par l'Ordre. Mises à jour quotidiennes.</p>
              </div>
            </div>
            <div className="verify-help-item">
              <Icon.Alert />
              <div>
                <h4>Un doute ?</h4>
                <p>Si vous suspectez un exercice illégal, utilisez le formulaire de signalement confidentiel.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Verifier = Verifier;