/* global React, SERVICES_DATA, POLE_ICONS */
const { useState: useState_r, useMemo: useMemo_r } = React;

const RDV_STEPS = [
  { id: 1, label: "Spécialité" },
  { id: 2, label: "Médecin (optionnel)" },
  { id: 3, label: "Créneau" },
  { id: 4, label: "Coordonnées" },
  { id: 5, label: "Paiement" },
  { id: 6, label: "Confirmation" },
];

const MOCK_DOCTORS = {
  default: [
    { name: "Dr. Aïssatou Kpogli", role: "Médecin senior", lang: "FR · EN" },
    { name: "Pr. Mathieu Aklassou", role: "Hospitalo-universitaire", lang: "FR" },
    { name: "Dr. Évariste Dossou", role: "Praticien hospitalier", lang: "FR · EN" },
  ],
};

const MOCK_SLOTS = ["08:30", "09:00", "09:30", "10:30", "11:00", "11:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30"];

function CalendarMini({ value, onChange }) {
  const today = new Date();
  const [month, setMonth] = useState_r(new Date(today.getFullYear(), today.getMonth(), 1));
  const monthLabel = month.toLocaleDateString("fr-FR", { month: "long", year: "numeric" });

  const days = useMemo_r(() => {
    const arr = [];
    const first = new Date(month);
    const startDow = (first.getDay() + 6) % 7; // Mon=0
    for (let i = 0; i < startDow; i++) arr.push(null);
    const last = new Date(month.getFullYear(), month.getMonth() + 1, 0);
    for (let d = 1; d <= last.getDate(); d++) arr.push(new Date(month.getFullYear(), month.getMonth(), d));
    return arr;
  }, [month]);

  const isDisabled = (d) => {
    if (!d) return true;
    const day = d.getDay();
    if (day === 0 || day === 6) return true; // closed weekends
    const t0 = new Date(); t0.setHours(0,0,0,0);
    return d < t0;
  };

  const dow = ["L", "M", "M", "J", "V", "S", "D"];

  return (
    <div>
      <div className="cal-month">
        <h4 className="h4" style={{textTransform:"capitalize"}}>{monthLabel}</h4>
        <div style={{display:"flex", gap: 6}}>
          <button className="btn btn-ghost btn-sm" onClick={() => setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1))} aria-label="Mois précédent">
            <IconChevLeft size={14} />
          </button>
          <button className="btn btn-ghost btn-sm" onClick={() => setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1))} aria-label="Mois suivant">
            <IconChevRight size={14} />
          </button>
        </div>
      </div>
      <div className="cal-grid">
        {dow.map((d, i) => <div key={i} className="cal-dow">{d}</div>)}
        {days.map((d, i) => {
          if (!d) return <span key={i} />;
          const sel = value && d.toDateString() === value.toDateString();
          const dis = isDisabled(d);
          const we = d.getDay() === 0 || d.getDay() === 6;
          return (
            <button key={i} className={`cal-day ${sel ? "selected" : ""} ${we ? "weekend" : ""}`} disabled={dis} onClick={() => onChange(d)}>
              {d.getDate()}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function RdvPage({ presetSpecialty }) {
  const [step, setStep] = useState_r(1);
  const [spec, setSpec] = useState_r(presetSpecialty || null);
  const [doctor, setDoctor] = useState_r(null);
  const [date, setDate] = useState_r(null);
  const [slot, setSlot] = useState_r(null);
  const [info, setInfo] = useState_r({ first: "", last: "", phone: "", email: "", reason: "" });
  const [mm, setMm] = useState_r(null);

  const openSpecs = SERVICES_DATA.filter(s => s.status === "open");

  const goNext = () => setStep(s => Math.min(6, s + 1));
  const goBack = () => setStep(s => Math.max(1, s - 1));

  const canNext =
    step === 1 ? !!spec :
    step === 2 ? true :
    step === 3 ? !!(date && slot) :
    step === 4 ? !!(info.first && info.last && info.phone) :
    step === 5 ? !!mm :
    true;

  return (
    <main>
      {/* Hero light */}
      <section style={{padding: "clamp(64px, 7vw, 96px) 0 clamp(24px, 3vw, 40px)", background: "var(--chic-50)"}}>
        <div className="container">
          <Crumbs trail={[
            { label: "Accueil", href: "#/" },
            { label: "Venir au CHIC", href: "#/rdv" },
            { label: "Prise de RDV" },
          ]} />
          <div className="eyebrow" style={{marginTop: 12, marginBottom: 18}}>Prise de rendez-vous · en ligne</div>
          <h1 className="h1" style={{fontSize:"clamp(36px, 4.8vw, 60px)", maxWidth:"22ch"}}>
            Réservez votre consultation en quelques étapes.
          </h1>
          <p className="lead" style={{marginTop: 18, maxWidth: "60ch"}}>
            Le CHIC fonctionne exclusivement sur rendez-vous. Consultations du lundi au vendredi, 8h–17h.
            Paiement par Mobile Money à la prise de RDV.
          </p>

          <div className="rdv-alert" style={{ marginTop: 28 }}>
            <span className="ic"><IconAlert size={18} /></span>
            <p>
              <b>L'accès aux consultations et examens se fait uniquement sur rendez-vous.</b>
              {" "}Aucun accueil d'urgence n'est possible pour le moment.
            </p>
          </div>
        </div>
      </section>

      <div className="container">
        <div className="rdv">
          {/* Stepper */}
          <aside>
            <div className="stepper">
              {RDV_STEPS.map((s, i) => {
                const state = step === s.id ? "active" : step > s.id ? "done" : "";
                return (
                  <div key={s.id} className={`stepper-item ${state}`}>
                    <div className="num">{step > s.id ? <IconCheck size={14} /> : s.id}</div>
                    <div className="label">{s.label}</div>
                  </div>
                );
              })}
            </div>
            <div className="rdv-help">
              <div className="eyebrow" style={{marginBottom: 10}}>Besoin d’aide ?</div>
              <p style={{color:"var(--chic-700)", margin: 0}}>Appelez la prise de RDV : <b>+229 01 21 400 111</b><br /><small style={{color:"var(--chic-400)"}}>Lun.–ven., 8h–17h</small></p>
            </div>
          </aside>

          {/* Form */}
          <div className="rdv-card">
            {step === 1 && (
              <>
                <h2 className="h2">Pour quelle spécialité ?</h2>
                <p className="lead">Sélectionnez parmi les services actuellement ouverts. Les autres seront disponibles prochainement.</p>
                <div className="tracker-search" style={{marginTop: 20}}>
                  <IconSearch size={18} />
                  <input placeholder="Rechercher une spécialité…" aria-label="Rechercher" />
                </div>
                <div className="rdv-grid">
                  {openSpecs.map(s => {
                    const Icon = POLE_ICONS[s.pole] || IconHeart;
                    const sel = spec && spec.name === s.name;
                    return (
                      <button key={s.name} className={`rdv-spec ${sel ? "selected" : ""}`} onClick={() => setSpec(s)}>
                        <div className="head">
                          <span style={{
                            width: 32, height: 32, borderRadius: 8,
                            background: "var(--chic-50)", color: "var(--chic-800)",
                            display: "inline-flex", alignItems: "center", justifyContent: "center"
                          }}><Icon size={16} /></span>
                          <span className="check"><IconCheck size={12} /></span>
                        </div>
                        <div className="name">{s.name}</div>
                        <div className="pole">{s.pole}</div>
                      </button>
                    );
                  })}
                </div>
              </>
            )}

            {step === 2 && (
              <>
                <h2 className="h2">Choisir un médecin</h2>
                <p className="lead">Optionnel — vous pouvez laisser l’équipe vous orienter vers le praticien disponible.</p>
                <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 12, marginTop: 20}}>
                  <button className={`rdv-spec ${doctor === null ? "selected" : ""}`} onClick={() => setDoctor(null)} style={{minHeight: 120}}>
                    <div className="head">
                      <span style={{width:32,height:32,borderRadius:8, background:"var(--chic-50)", color:"var(--chic-800)", display:"inline-flex", alignItems:"center", justifyContent:"center"}}><IconUser size={16} /></span>
                      <span className="check"><IconCheck size={12} /></span>
                    </div>
                    <div className="name">Sans préférence</div>
                    <div className="pole">Le CHIC m’oriente</div>
                  </button>
                  {MOCK_DOCTORS.default.map(d => (
                    <button key={d.name} className={`rdv-spec ${doctor && doctor.name === d.name ? "selected" : ""}`} onClick={() => setDoctor(d)} style={{minHeight: 120}}>
                      <div className="head">
                        <span style={{width:32,height:32,borderRadius:8, background:"var(--chic-50)", color:"var(--chic-800)", display:"inline-flex", alignItems:"center", justifyContent:"center"}}><IconUser size={16} /></span>
                        <span className="check"><IconCheck size={12} /></span>
                      </div>
                      <div className="name">{d.name}</div>
                      <div className="pole">{d.role} · {d.lang}</div>
                    </button>
                  ))}
                </div>
              </>
            )}

            {step === 3 && (
              <>
                <h2 className="h2">Choisir un créneau</h2>
                <p className="lead">Le CHIC est ouvert du lundi au vendredi, de 8h à 17h.</p>
                <div className="cal">
                  <CalendarMini value={date} onChange={d => { setDate(d); setSlot(null); }} />
                  <div className="slots">
                    <h4 className="h4">
                      {date ? `Créneaux du ${date.toLocaleDateString("fr-FR", { weekday: "long", day: "numeric", month: "long" })}` : "Sélectionnez une date"}
                    </h4>
                    {date ? (
                      <div className="slot-list">
                        {MOCK_SLOTS.map(s => (
                          <button key={s} className={`slot ${slot === s ? "selected" : ""}`} onClick={() => setSlot(s)}>{s}</button>
                        ))}
                      </div>
                    ) : (
                      <div style={{padding: 32, textAlign:"center", color:"var(--chic-400)", border:"1px dashed var(--chic-200)", borderRadius:"var(--r)"}}>
                        <IconCalendar size={24} />
                        <p style={{margin:"10px 0 0"}}>Choisissez d’abord une date à gauche.</p>
                      </div>
                    )}
                  </div>
                </div>
              </>
            )}

            {step === 4 && (
              <>
                <h2 className="h2">Vos coordonnées</h2>
                <p className="lead">Nous utilisons ces informations pour confirmer votre rendez-vous et vous joindre si besoin.</p>
                <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 18, marginTop: 24}}>
                  <div>
                    <label className="label">Prénom *</label>
                    <input className="input" value={info.first} onChange={e => setInfo({...info, first: e.target.value})} />
                  </div>
                  <div>
                    <label className="label">Nom *</label>
                    <input className="input" value={info.last} onChange={e => setInfo({...info, last: e.target.value})} />
                  </div>
                  <div>
                    <label className="label">Téléphone *</label>
                    <input className="input" placeholder="+229 …" value={info.phone} onChange={e => setInfo({...info, phone: e.target.value})} />
                  </div>
                  <div>
                    <label className="label">E-mail</label>
                    <input type="email" className="input" value={info.email} onChange={e => setInfo({...info, email: e.target.value})} />
                  </div>
                  <div style={{gridColumn:"1/-1"}}>
                    <label className="label">Motif de consultation (optionnel)</label>
                    <textarea className="input" rows={3} value={info.reason} onChange={e => setInfo({...info, reason: e.target.value})} />
                  </div>
                </div>
              </>
            )}

            {step === 5 && (
              <>
                <h2 className="h2">Paiement Mobile Money</h2>
                <p className="lead">Le règlement de la consultation se fait à la prise de rendez-vous, par Mobile Money.</p>

                <div className="rdv-summary">
                  <div className="row"><span className="k">Spécialité</span><span className="v">{spec ? spec.name : "—"}</span></div>
                  <div className="row"><span className="k">Médecin</span><span className="v">{doctor ? doctor.name : "Sans préférence"}</span></div>
                  <div className="row"><span className="k">Date & heure</span><span className="v">{date ? date.toLocaleDateString("fr-FR", {weekday:"long", day:"numeric", month:"long"}) : "—"}{slot ? ` · ${slot}` : ""}</span></div>
                  <div className="row"><span className="k">Patient</span><span className="v">{info.first} {info.last}</span></div>
                  <div className="row" style={{paddingTop: 10, borderTop:"1px solid var(--chic-200)"}}><span className="k">Montant consultation</span><span className="v" style={{fontSize: 18}}>25 000 FCFA</span></div>
                </div>

                <div className="label">Choisir un opérateur</div>
                <div className="mm-options">
                  <button className={`mm-card ${mm === "mtn" ? "selected" : ""}`} onClick={() => setMm("mtn")}>
                    <span className="logo" style={{background:"#FFCB05", color:"#000"}}>MTN</span>
                    <div><div className="name">MTN Mobile Money</div><small>Vous recevrez un code USSD</small></div>
                  </button>
                  <button className={`mm-card ${mm === "moov" ? "selected" : ""}`} onClick={() => setMm("moov")}>
                    <span className="logo" style={{background:"#0066B3"}}>M</span>
                    <div><div className="name">Moov Money</div><small>Vous recevrez un code USSD</small></div>
                  </button>
                </div>

                <div style={{marginTop: 24, padding: 16, background:"var(--soon-bg)", borderRadius:"var(--r)", color:"var(--soon)", fontSize: 13, display:"flex", gap: 12, alignItems:"flex-start"}}>
                  <IconAlert size={18} />
                  <div>Les Urgences ne sont pas encore ouvertes. En cas d’urgence vitale, appelez le standard <b>+229 01 21 400 100</b> qui vous orientera.</div>
                </div>
              </>
            )}

            {step === 6 && (
              <>
                <div className="confirm-badge"><IconCheck size={36} /></div>
                <h2 className="h2">Rendez-vous confirmé.</h2>
                <p className="lead">Un récapitulatif vous a été envoyé par SMS{info.email ? ` et par e-mail à ${info.email}` : ""}.</p>
                <div className="rdv-summary" style={{marginTop: 28}}>
                  <div className="row"><span className="k">Référence</span><span className="v" style={{fontFamily:"var(--mono)"}}>CHIC-{Math.floor(Math.random()*900000+100000)}</span></div>
                  <div className="row"><span className="k">Spécialité</span><span className="v">{spec ? spec.name : "—"}</span></div>
                  <div className="row"><span className="k">Médecin</span><span className="v">{doctor ? doctor.name : "Sans préférence"}</span></div>
                  <div className="row"><span className="k">Date & heure</span><span className="v">{date ? date.toLocaleDateString("fr-FR", {weekday:"long", day:"numeric", month:"long"}) : "—"}{slot ? ` · ${slot}` : ""}</span></div>
                  <div className="row"><span className="k">Patient</span><span className="v">{info.first} {info.last} · {info.phone}</span></div>
                </div>
                <div style={{marginTop: 36, padding: 20, background:"var(--chic-50)", borderRadius:"var(--r)"}}>
                  <h4 className="h4" style={{marginBottom: 12}}>À savoir</h4>
                  <ul style={{margin: 0, paddingLeft: 20, color:"var(--chic-700)", fontSize: 14, lineHeight: 1.6}}>
                    <li>Présentez-vous 20 minutes avant l’heure de votre rendez-vous.</li>
                    <li>Apportez vos examens et ordonnances antérieurs si applicable.</li>
                    <li>Le standard d’accueil : <b>+229 01 21 400 100</b>.</li>
                  </ul>
                </div>
              </>
            )}

            {/* Navigation */}
            {step < 6 && (
              <div className="rdv-actions">
                <button className="btn btn-ghost" onClick={goBack} disabled={step === 1} style={{opacity: step === 1 ? 0.3 : 1}}>
                  <IconChevLeft size={14} /> Retour
                </button>
                <button className="btn btn-primary" onClick={goNext} disabled={!canNext} style={{opacity: canNext ? 1 : 0.4}}>
                  {step === 5 ? "Confirmer le rendez-vous" : "Continuer"}
                  <IconArrowRight size={14} />
                </button>
              </div>
            )}
            {step === 6 && (
              <div className="rdv-actions">
                <a className="btn btn-outline" href="#/">Retour à l’accueil</a>
                <button className="btn btn-primary" onClick={() => { setStep(1); setSpec(null); setDoctor(null); setDate(null); setSlot(null); setInfo({first:"",last:"",phone:"",email:"",reason:""}); setMm(null); }}>
                  Prendre un autre RDV <IconArrowRight size={14} />
                </button>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Documents à préparer + Bon à savoir */}
      <section className="section">
        <div className="container">
          <div className="rdv-info-grid">
            <FadeUp>
              <article className="rdv-info-card">
                <div className="eyebrow" style={{ marginBottom: 18 }}>Documents à préparer</div>
                <h3 className="h3" style={{ marginBottom: 18 }}>Le jour de votre rendez-vous</h3>
                <ul className="rich-list">
                  <li>
                    Une <b>pièce d'identité avec photo</b> en cours de validité — carte d'identité,
                    passeport ou à défaut un titre de séjour
                  </li>
                  <li>
                    Vos <b>documents médicaux</b> — courrier du médecin référent, radiographies,
                    résultats d'examens, ordonnances en cours
                  </li>
                  <li>
                    Un <b>moyen de règlement</b> — carte bancaire, espèces ou Mobile Money
                  </li>
                  <li>
                    Votre <b>carte d'assurance</b>, si vous en disposez *
                  </li>
                </ul>
                <p className="rdv-note">
                  * La prise en charge sans avance de frais n'est possible que si votre organisme
                  d'assurance a signé une convention avec le CHIC. Dans le cas contraire, les frais
                  devront être réglés avant la consultation ou l'examen.
                </p>
              </article>
            </FadeUp>

            <FadeUp delay={120}>
              <article className="rdv-info-card highlight">
                <div className="eyebrow" style={{ marginBottom: 18 }}>Bon à savoir</div>
                <h3 className="h3" style={{ marginBottom: 24 }}>Quelques règles d'or</h3>
                <ul className="info-icon-list">
                  <li>
                    <span className="ic"><IconClock size={16} /></span>
                    <div>
                      <b>Arrivez 30 minutes avant</b> l'heure du rendez-vous afin de finaliser
                      votre dossier administratif.
                    </div>
                  </li>
                  <li>
                    <span className="ic"><IconUser size={16} /></span>
                    <div>
                      L'accès au site est réservé aux patients ayant un rendez-vous programmé
                      pour le jour concerné. Vous pouvez être <b>accompagné·e d'un proche</b> si nécessaire.
                    </div>
                  </li>
                  <li>
                    <span className="ic"><IconMap size={16} /></span>
                    <div>
                      L'accueil se trouve dans le <b>hall principal, sous l'apatam</b>.
                    </div>
                  </li>
                </ul>
              </article>
            </FadeUp>
          </div>

          {/* Spécialités & imagerie disponibles */}
          <div className="rdv-availability">
            <FadeUp>
              <div className="ra-block">
                <div className="eyebrow" style={{ marginBottom: 14 }}>Consultations disponibles</div>
                <p style={{ marginBottom: 18, color: "var(--chic-400)" }}>
                  Spécialités médicales actuellement accessibles, uniquement sur rendez-vous :
                </p>
                <div className="chip-cloud">
                  {(window.RDV_SPECIALTIES || []).map(s => (
                    <span key={s} className="chip"><IconCheck size={11} /> {s}</span>
                  ))}
                </div>
              </div>
            </FadeUp>
            <FadeUp delay={100}>
              <div className="ra-block">
                <div className="eyebrow" style={{ marginBottom: 14 }}>Examens d'imagerie disponibles</div>
                <p style={{ marginBottom: 18, color: "var(--chic-400)" }}>
                  Sur prescription d'un médecin référent.
                </p>
                <div className="chip-cloud">
                  {(window.RDV_IMAGING || []).map(s => (
                    <span key={s} className="chip"><IconCheck size={11} /> {s}</span>
                  ))}
                </div>
              </div>
            </FadeUp>
          </div>
        </div>
      </section>
    </main>
  );
}

window.RdvPage = RdvPage;