/* ============================================================
   EOLODENT — reusable blocks (ServiceCard, BranchCard,
   BookingForm, BlogCard) shared across pages
   ============================================================ */

function money(n) { return "$" + Number(n).toLocaleString("es-MX"); }

/* ---------- Service card ---------- */
function ServiceCard({ svc, index = 0 }) {
  const t = useT();
  if (svc.key === "consulta") return null;
  return (
    <Reveal tag="article" className="svc-card" delay={(index % 3) * 80}>
      <div className="svc-card__icon"><Icon name={svc.icon} size={30} /></div>
      <h3>{svc.name}</h3>
      <p>{svc.short}</p>
      <div className="svc-card__foot">
        <a href="#/servicios" onClick={(e) => { e.preventDefault(); navigate("#/servicios#" + svc.key); }} className="link-arrow">
          {t("treat.more")} <Icon name="arrow" size={16} />
        </a>
        <span className="svc-card__price">{money(svc.price)}</span>
      </div>
    </Reveal>
  );
}

/* ---------- Branch card ---------- */
function BranchCard({ b }) {
  const t = useT();
  const maps = `https://www.google.com/maps?q=${b.lat},${b.lng}&z=16&output=embed`;
  const dir = `https://www.google.com/maps/dir/?api=1&destination=${b.lat},${b.lng}`;
  return (
    <article className="branch-card">
      <div className="branch-card__map">
        <iframe title={b.name} src={maps} loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
        {b.parking ? <span className="branch-card__badge"><Icon name="car" size={13} />{t("branches.parking")}</span> : null}
      </div>
      <div className="branch-card__body">
        <span className="chip">{b.id === "coyoacan" ? "Coyoacán" : "Narvarte"}</span>
        <h3>{b.full}</h3>
        <ul className="branch-card__meta">
          <li><Icon name="map" size={17} /><span>{b.address}</span></li>
          <li><Icon name="clock" size={17} /><span>{b.hours}</span></li>
          <li><Icon name="phone" size={17} /><span>{b.phones.join(" · ")}</span></li>
          <li><Icon name="mail" size={17} /><span>{b.email}</span></li>
        </ul>
        <div className="branch-card__actions">
          <a href="#/agenda" onClick={(e) => { e.preventDefault(); navigate("#/agenda?branch=" + b.id); }} className="btn btn--primary btn--sm">{t("branches.book")}</a>
          <a href={dir} target="_blank" rel="noopener" className="btn btn--ghost btn--sm"><Icon name="map" size={15} />{t("branches.directions")}</a>
        </div>
      </div>
    </article>
  );
}

/* ---------- Blog card ---------- */
function BlogCard({ post }) {
  const t = useT();
  const dt = new Date(post.date + "T12:00:00");
  const fdate = dt.toLocaleDateString(EoloI18n.lang === "en" ? "en-US" : "es-MX", { day: "numeric", month: "long", year: "numeric" });
  return (
    <Reveal tag="article" className="blog-card">
      <a href={"#/blog/" + post.slug} onClick={(e) => { e.preventDefault(); navigate("#/blog/" + post.slug); }} className="blog-card__media">
        <PhotoSlot id={"blogcover-" + post.slug} note={post.cover === "blog-dentista" ? "Foto del post" : "Portada"} radius={0} placeholder="Imagen del post" />
      </a>
      <div className="blog-card__body">
        <div className="blog-card__meta"><span className="chip">{post.category}</span><time>{fdate}</time></div>
        <h3><a href={"#/blog/" + post.slug} onClick={(e) => { e.preventDefault(); navigate("#/blog/" + post.slug); }}>{post.title}</a></h3>
        <p>{post.excerpt}</p>
        <a href={"#/blog/" + post.slug} onClick={(e) => { e.preventDefault(); navigate("#/blog/" + post.slug); }} className="link-arrow">{t("blog.read")} <Icon name="arrow" size={16} /></a>
      </div>
    </Reveal>
  );
}

/* ---------- Booking form ---------- */
const TIME_SLOTS = ["09:00", "10:00", "11:00", "12:00", "13:00", "16:00", "17:00", "18:00", "19:00", "20:00"];

function BookingForm({ dark = false, preBranch = "" }) {
  const t = useT();
  const store = useStore();
  const branches = store.get("branches");
  const services = store.get("services").filter((s) => s.active);
  const [done, setDone] = useState(false);
  const [errors, setErrors] = useState({});
  const today = new Date().toISOString().slice(0, 10);
  const [form, setForm] = useState({
    name: "", phone: "", email: "", branch: preBranch || "coyoacan",
    service: services[0] ? services[0].name : "", date: "", time: "", notes: "",
  });
  useEffect(() => { if (preBranch) setForm((f) => ({ ...f, branch: preBranch })); }, [preBranch]);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = true;
    if (!/^\d{8,12}$/.test(form.phone.replace(/\s/g, ""))) er.phone = true;
    if (!form.date) er.date = true;
    if (!form.time) er.time = true;
    setErrors(er);
    return Object.keys(er).length === 0;
  };
  const submit = (e) => {
    e.preventDefault();
    if (!validate()) return;
    const svc = services.find((s) => s.name === form.service);
    const when = new Date(form.date + "T" + form.time + ":00").toISOString();
    store.add("appointments", {
      patient: form.name, patientId: null, phone: form.phone, email: form.email,
      branch: form.branch, service: form.service, dentist: "Por asignar",
      when, status: "pendiente", price: svc ? svc.price : 0, notes: form.notes, source: "web",
    });
    setDone(true);
  };

  if (done) {
    return (
      <div className={`booking-form booking-form--done ${dark ? "on-dark" : ""}`}>
        <div className="booking-done__icon"><Icon name="check" size={34} /></div>
        <h3>{t("book.success")}</h3>
        <p>{t("book.successSub")}</p>
        <button className="btn btn--cyan" onClick={() => { setDone(false); setForm((f) => ({ ...f, name: "", phone: "", email: "", date: "", time: "", notes: "" })); }}>{t("book.another")}</button>
      </div>
    );
  }

  return (
    <form className={`booking-form ${dark ? "on-dark" : ""}`} onSubmit={submit} noValidate>
      <div className="bf-row">
        <label className="bf-field">
          <span>{t("book.name")}</span>
          <input className={errors.name ? "err" : ""} value={form.name} onChange={set("name")} placeholder="¿Cómo te llamas?" />
        </label>
        <label className="bf-field">
          <span>{t("book.phone")}</span>
          <input className={errors.phone ? "err" : ""} value={form.phone} onChange={set("phone")} placeholder="10 dígitos" inputMode="tel" />
        </label>
      </div>
      <div className="bf-row">
        <label className="bf-field">
          <span>{t("book.email")}</span>
          <input value={form.email} onChange={set("email")} placeholder="tucorreo@correo.com" type="email" />
        </label>
        <label className="bf-field">
          <span>{t("book.branch")}</span>
          <select value={form.branch} onChange={set("branch")}>
            {branches.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}
          </select>
        </label>
      </div>
      <div className="bf-row">
        <label className="bf-field">
          <span>{t("book.service")}</span>
          <select value={form.service} onChange={set("service")}>
            {services.map((s) => <option key={s.id} value={s.name}>{s.name} · {money(s.price)}</option>)}
          </select>
        </label>
        <label className="bf-field">
          <span>{t("book.date")}</span>
          <input className={errors.date ? "err" : ""} type="date" min={today} value={form.date} onChange={set("date")} />
        </label>
      </div>
      <div className="bf-field">
        <span>{t("book.time")}</span>
        <div className="bf-slots">
          {TIME_SLOTS.map((s) => (
            <button type="button" key={s} className={`bf-slot ${form.time === s ? "on" : ""} ${errors.time ? "err" : ""}`} onClick={() => setForm((f) => ({ ...f, time: s }))}>{s}</button>
          ))}
        </div>
      </div>
      <label className="bf-field">
        <span>{t("book.notes")}</span>
        <textarea rows="2" value={form.notes} onChange={set("notes")} placeholder="¿Algo que debamos saber? (dolor, urgencia, dudas…)"></textarea>
      </label>
      <button type="submit" className="btn btn--cyan btn--lg btn--block">{t("book.submit")} <Icon name="arrow" size={18} /></button>
      <p className="bf-fine">Sin costo de reserva · Te confirmamos por teléfono o WhatsApp</p>
    </form>
  );
}

Object.assign(window, { money, ServiceCard, BranchCard, BlogCard, BookingForm, TIME_SLOTS });