/* global React, ReactDOM */
const { useState, useEffect } = React;

function OrderModal({ pkg, onClose }) {
  const { PACKAGES } = window.SITE_DATA;
  const [step, setStep] = useState(1);
  const [selectedId, setSelectedId] = useState(pkg ? pkg.id : "digital");
  const [qty, setQty] = useState(1);
  const [form, setForm] = useState({
    name: "", email: "", phone: "",
    recipient: "", story: "",
    address: "",
    payment: "card",
  });
  const [orderId] = useState(() => "GME-" + Math.random().toString(36).slice(2, 7).toUpperCase());

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);

  const selected = PACKAGES.find(p => p.id === selectedId) || PACKAGES[0];
  const subtotal = selected.price * qty;
  const promo = Math.round(subtotal * 0.1);
  const shipping = (selectedId === "physical" || selectedId === "combo-plus") ? 7 : 0;
  const total = subtotal - promo + shipping;

  const setF = (k, v) => setForm(prev => ({ ...prev, [k]: v }));
  const canStep2 = selectedId && qty > 0;
  const canStep3 = form.recipient.trim() && form.story.trim().length > 10;
  const canStep4 = form.name.trim() && /\S+@\S+\.\S+/.test(form.email);

  const titleByStep = {
    1: "Избери пакет",
    2: "Разкажи историята",
    3: "Контакт и доставка",
    4: "Готово!",
  };

  return (
    <div className="modal" onClick={onClose}>
      <div className="modal__panel" onClick={(e) => e.stopPropagation()}>
        <div className="modal__head">
          <h3 className="modal__title">
            <span style={{fontFamily:"var(--f-mono)",fontSize:11,letterSpacing:"0.1em",textTransform:"uppercase",color:"var(--muted)"}}>Стъпка {step}/4</span>
            {titleByStep[step]}
          </h3>
          <button className="modal__close" onClick={onClose} aria-label="Затвори">×</button>
        </div>

        <div className="modal__body">
          {step < 4 && (
            <div className="steps-bar">
              {[1,2,3].map((n, i) => (
                <React.Fragment key={n}>
                  <div className={`steps-bar__step ${step === n ? "is-active" : ""} ${step > n ? "is-done" : ""}`}>
                    <span className="steps-bar__dot">{step > n ? "✓" : n}</span>
                    <span>{titleByStep[n]}</span>
                  </div>
                  {i < 2 && <div className="steps-bar__line"></div>}
                </React.Fragment>
              ))}
            </div>
          )}

          {step === 1 && (
            <div style={{display:"flex",flexDirection:"column",gap:16}}>
              <div className="field">
                <label className="field__label">Пакет</label>
                <div style={{display:"grid",gridTemplateColumns:"1fr",gap:8}}>
                  {PACKAGES.map(p => (
                    <label key={p.id} style={{display:"flex",alignItems:"center",gap:14,padding:"14px 16px",border:`1px solid ${selectedId===p.id?"var(--ink)":"var(--line)"}`,borderRadius:10,background:selectedId===p.id?"var(--paper)":"transparent",cursor:"pointer"}}>
                      <input type="radio" name="pkg" checked={selectedId===p.id} onChange={()=>setSelectedId(p.id)} style={{accentColor:"var(--ink)"}} />
                      <div style={{flex:1}}>
                        <div style={{fontWeight:600,fontSize:15}}>{p.title}</div>
                        <div style={{fontSize:12,color:"var(--muted)"}}>{p.sub.slice(0,80)}…</div>
                      </div>
                      <div style={{fontFamily:"var(--f-display)",fontWeight:700,fontSize:22}}>{p.price}<small style={{fontSize:11,color:"var(--muted)"}}> €</small></div>
                    </label>
                  ))}
                </div>
              </div>
              <div className="field" style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:16}}>
                <label className="field__label" style={{margin:0}}>Брой</label>
                <div className="qty">
                  <button className="qty__btn" onClick={() => setQty(Math.max(1, qty-1))}>−</button>
                  <span className="qty__num">{qty}</span>
                  <button className="qty__btn" onClick={() => setQty(qty+1)}>+</button>
                </div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="fieldset">
              <div className="field">
                <label className="field__label">За кого е подаръкът</label>
                <input className="field__input" placeholder="Напр. „мама“, „моят съпруг“, „най-добрата ми приятелка“" value={form.recipient} onChange={e=>setF("recipient",e.target.value)} />
              </div>
              <div className="field">
                <label className="field__label">Разкажи историята · какво да включим</label>
                <textarea className="field__textarea" rows={5} placeholder="Характер, любим цвят, повод, любими дрехи или хобита, важни детайли…" value={form.story} onChange={e=>setF("story",e.target.value)}></textarea>
                <span style={{fontSize:11,color:"var(--muted)",fontFamily:"var(--f-mono)"}}>Минимум 10 символа · ще те питаме за снимка след поръчката</span>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="fieldset">
              <div className="field field--half">
                <label className="field__label">Име</label>
                <input className="field__input" value={form.name} onChange={e=>setF("name",e.target.value)} placeholder="Иван Петров" />
              </div>
              <div className="field field--half">
                <label className="field__label">Телефон</label>
                <input className="field__input" value={form.phone} onChange={e=>setF("phone",e.target.value)} placeholder="+359 88 …" />
              </div>
              <div className="field">
                <label className="field__label">Имейл</label>
                <input className="field__input" type="email" value={form.email} onChange={e=>setF("email",e.target.value)} placeholder="ivan@example.com" />
              </div>
              {(selectedId === "physical" || selectedId === "combo-plus") && (
                <div className="field">
                  <label className="field__label">Офис на Еконт</label>
                  <input className="field__input" value={form.address} onChange={e=>setF("address",e.target.value)} placeholder="Град, офис №…" />
                </div>
              )}
              <div className="field">
                <label className="field__label">Плащане</label>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
                  {[{id:"card",label:"Карта"},{id:"cod",label:"Наложен платеж"}].map(o => (
                    <label key={o.id} style={{display:"flex",alignItems:"center",gap:10,padding:"12px 14px",border:`1px solid ${form.payment===o.id?"var(--ink)":"var(--line)"}`,borderRadius:8,background:form.payment===o.id?"var(--paper)":"transparent",cursor:"pointer"}}>
                      <input type="radio" name="pay" checked={form.payment===o.id} onChange={()=>setF("payment",o.id)} style={{accentColor:"var(--ink)"}} />
                      <span style={{fontSize:14,fontWeight:500}}>{o.label}</span>
                    </label>
                  ))}
                </div>
              </div>
              <div className="field" style={{marginTop:8}}>
                <div className="summary">
                  <div className="summary__row"><span>{selected.title} × {qty}</span><span>{subtotal} €</span></div>
                  {promo > 0 && <div className="summary__row" style={{color:"var(--green)"}}><span>Промо отстъпка (-10%)</span><span>−{promo} €</span></div>}
                  {shipping > 0 && <div className="summary__row"><span>Доставка Еконт</span><span>{shipping} €</span></div>}
                  <div className="summary__row summary__row--total"><span>Общо</span><span>{total} €</span></div>
                </div>
              </div>
            </div>
          )}

          {step === 4 && (
            <div className="success">
              <div className="success__check">✓</div>
              <h3 className="success__title">Поръчката е приета!</h3>
              <p className="success__sub">Изпратихме потвърждение на <strong>{form.email}</strong>. Скоро ще те потърсим за снимката и финалните детайли.</p>
              <div className="success__order">Номер на поръчка · {orderId}</div>
            </div>
          )}
        </div>

        <div className="modal__foot">
          {step < 4 ? (
            <>
              <div className="modal__foot-price">{total} <small>€ общо</small></div>
              <div style={{display:"flex",gap:8}}>
                {step > 1 && <button className="btn btn--ghost" onClick={()=>setStep(step-1)}>← Назад</button>}
                <button
                  className="btn btn--ink"
                  disabled={(step===1&&!canStep2)||(step===2&&!canStep3)||(step===3&&!canStep4)}
                  style={{opacity:((step===1&&!canStep2)||(step===2&&!canStep3)||(step===3&&!canStep4))?.5:1}}
                  onClick={()=>setStep(step+1)}
                >{step === 3 ? "Плати " + total + " €" : "Напред"} →</button>
              </div>
            </>
          ) : (
            <>
              <span style={{fontFamily:"var(--f-mono)",fontSize:11,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--muted)"}}>Благодарим!</span>
              <button className="btn btn--ink" onClick={onClose}>Затвори</button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.OrderModal = OrderModal;