/* global React, Icon, Button */
const { useState } = React;

function BookingModal({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [concern, setConcern] = useState("Queda");
  const [day, setDay] = useState(null);
  const [time, setTime] = useState(null);
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");

  if (!open) return null;

  const concerns = [
    { k: "Queda", ic: "trending-down" },
    { k: "Calvície", ic: "user-x" },
    { k: "Fios danificados", ic: "sparkles" },
    { k: "Não sei ainda", ic: "help-circle" },
  ];
  const days = [
    { d: "Seg", n: "02" }, { d: "Ter", n: "03" }, { d: "Qua", n: "04" },
    { d: "Qui", n: "05" }, { d: "Sex", n: "06" }, { d: "Sáb", n: "07" },
  ];
  const times = ["09:00", "10:30", "13:00", "14:30", "16:00", "17:30"];

  const steps = ["Objetivo", "Data", "Seus dados", "Pronto"];
  const canNext = step === 0 ? concern : step === 1 ? day && time : step === 2 ? name && phone : true;

  const next = () => setStep((s) => Math.min(3, s + 1));
  const back = () => setStep((s) => Math.max(0, s - 1));
  const close = () => { onClose(); setTimeout(() => setStep(0), 300); };

  return (
    <div className="tf-modal-overlay" onClick={close}>
      <div className="tf-modal" onClick={(e) => e.stopPropagation()}>
        <button className="tf-modal-x" onClick={close}><Icon name="x" size={20} /></button>

        <div className="tf-modal-head">
          <div className="tf-modal-eye">Agendar avaliação</div>
          <div className="tf-steps">
            {steps.map((s, i) => (
              <div key={s} className={"tf-step-dot" + (i <= step ? " on" : "")}>
                <span className="dot">{i < step ? <Icon name="check" size={12} /> : i + 1}</span>
                <span className="lbl">{s}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="tf-modal-body">
          {step === 0 && (
            <div className="tf-step-pane">
              <h3 className="tf-modal-q">Qual é a sua principal preocupação?</h3>
              <div className="tf-concern-grid">
                {concerns.map((c) => (
                  <button key={c.k} className={"tf-concern" + (concern === c.k ? " on" : "")} onClick={() => setConcern(c.k)}>
                    <Icon name={c.ic} size={22} />
                    <span>{c.k}</span>
                  </button>
                ))}
              </div>
            </div>
          )}
          {step === 1 && (
            <div className="tf-step-pane">
              <h3 className="tf-modal-q">Escolha o melhor dia e horário</h3>
              <div className="tf-month">Junho 2026</div>
              <div className="tf-days">
                {days.map((d) => (
                  <button key={d.n} className={"tf-day" + (day === d.n ? " on" : "")} onClick={() => setDay(d.n)}>
                    <span className="dn">{d.d}</span><span className="nn">{d.n}</span>
                  </button>
                ))}
              </div>
              <div className="tf-times">
                {times.map((t) => (
                  <button key={t} className={"tf-time" + (time === t ? " on" : "")} onClick={() => setTime(t)}>{t}</button>
                ))}
              </div>
            </div>
          )}
          {step === 2 && (
            <div className="tf-step-pane">
              <h3 className="tf-modal-q">Para confirmarmos seu horário</h3>
              <div className="tf-form">
                <label>Nome completo
                  <div className="tf-input"><Icon name="user" size={18} /><input value={name} onChange={(e) => setName(e.target.value)} placeholder="Seu nome" /></div>
                </label>
                <label>WhatsApp
                  <div className="tf-input"><Icon name="phone" size={18} /><input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="(11) 9 9999-9999" /></div>
                </label>
                <div className="tf-summary">
                  <span><Icon name="target" size={15}/> {concern}</span>
                  <span><Icon name="calendar" size={15}/> {day ? `0${day[1]||day} Jun` : "—"} · {time || "—"}</span>
                </div>
              </div>
            </div>
          )}
          {step === 3 && (
            <div className="tf-step-pane center">
              <div className="tf-success-ic"><Icon name="check" size={34} /></div>
              <h3 className="tf-modal-q center">Avaliação solicitada!</h3>
              <p className="tf-success-txt">
                Obrigada, {name || "tudo certo"}. Vamos confirmar seu horário de
                <strong> {time}</strong> no dia <strong>{day} de junho</strong> pelo WhatsApp em até 24h.
              </p>
              <div className="tf-success-card">
                <Icon name="calendar-check" size={20} />
                <div>
                  <strong>{concern} · Avaliação tricológica</strong>
                  <span>{day} Jun 2026 · {time}</span>
                </div>
              </div>
            </div>
          )}
        </div>

        <div className="tf-modal-foot">
          {step > 0 && step < 3 && <Button variant="ghost" onClick={back} icon="arrow-left">Voltar</Button>}
          <div style={{ flex: 1 }} />
          {step < 2 && <Button variant="primary" onClick={next} iconRight="arrow-right" disabled={!canNext}>Continuar</Button>}
          {step === 2 && <Button variant="gold" onClick={next} icon="check" disabled={!canNext}>Confirmar avaliação</Button>}
          {step === 3 && <Button variant="primary" onClick={close}>Fechar</Button>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BookingModal });