/* ============================================================
   Flow — tree detail (photo timeline), checkout, confirmation
   ============================================================ */

/* ---------- Tree detail with photo timeline ---------- */
function TreeDetail({ go, parcel, cell }) {
  if (!cell) { return <div className="wrap section"><button className="btn btn-ghost" onClick={() => go("parcels")}>Înapoi</button></div>; }
  const updates = [
    { date: "2025-03-22", title: "Plantare", note: "Puiet sănătos plantat în slotul R" + (cell.row + 1) + "·C" + (cell.col + 1) + ". Sol pregătit, mulci aplicat." },
    { date: "2025-05-30", title: "Primăvara — prima înfrunzire", note: "Mugurii s-au deschis. Creștere de ~12 cm față de plantare." },
    { date: "2025-08-18", title: "Vara — verificare hidrică", note: "Frunziș verde, fără semne de stres. Udare suplimentară în perioada secetoasă." },
    { date: "2025-10-25", title: "Toamna", note: "Frunzele se colorează. Înălțime totală ~0,9 m. Prima toamnă încheiată cu bine." },
  ].slice(0, cell.photos);
  return (
    <div className="view">
      <section style={{ background: "var(--green-tint)", borderBottom: "1px solid var(--line-soft)" }}>
        <div className="wrap" style={{ padding: "28px 0 36px" }}>
          <button className="btn btn-ghost btn-sm" onClick={() => go("parcel", { id: parcel.id })} style={{ marginBottom: 18 }}>
            <Icon name="arrowL" size={15} /> {parcel.name}
          </button>
          <div className="row between center wrapf" style={{ gap: 20 }}>
            <div className="col gap8">
              <span className="eyebrow">{cell.species.name} · {cell.species.latin}</span>
              <h1 style={{ fontSize: "clamp(30px,4vw,46px)" }}>{cell.treeName}</h1>
              <div className="row gap12 wrapf" style={{ fontSize: 13.5, marginTop: 4 }}>
                <span className="badge mono">{cell.treeId}</span>
                <span className="badge"><Icon name="user" size={12} /> {cell.donor}</span>
                <span className="badge"><Icon name="pin" size={12} /> R{cell.row + 1}·C{cell.col + 1}</span>
                <span className="badge"><Icon name="clock" size={12} /> plantat {HELP.fmtDate(cell.planted)}</span>
              </div>
            </div>
            <div className="row gap12 wrapf">
              <button className="btn btn-ghost"><Icon name="share" size={16} /> Distribuie</button>
              <button className="btn btn-clay"><Icon name="download" size={16} /> Certificat PDF</button>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 44 }}>
        <div className="wrap">
          <div className="tree-layout">
            <div className="col gap24">
              <div className="row between center">
                <SectionHead eyebrow="Jurnal foto" title="Evoluție sezonieră" />
                <span className="badge">{updates.length} actualizări</span>
              </div>
              <div className="timeline">
                {updates.map((u, i) => (
                  <div key={i} className="tl-item">
                    <div className="tl-dot"></div>
                    <div className="card" style={{ overflow: "hidden" }}>
                      <div className="imgph green" style={{ height: 240, borderRadius: 0 }}>foto · {u.title.toLowerCase()}</div>
                      <div className="col gap8" style={{ padding: 20 }}>
                        <div className="row between center wrapf" style={{ gap: 8 }}>
                          <h3 style={{ fontSize: 20 }}>{u.title}</h3>
                          <span className="badge"><Icon name="clock" size={12} /> {HELP.fmtDate(u.date)}</span>
                        </div>
                        <p className="muted" style={{ fontSize: 15 }}>{u.note}</p>
                      </div>
                    </div>
                  </div>
                ))}
                <div className="tl-item">
                  <div className="tl-dot pending"></div>
                  <div className="card" style={{ padding: 20, borderStyle: "dashed", background: "transparent", boxShadow: "none" }}>
                    <p className="muted" style={{ fontSize: 14.5 }}><b>Următoarea actualizare</b> — iarnă 2026. Vei primi un email când echipa postează o fotografie nouă.</p>
                  </div>
                </div>
              </div>
            </div>

            <aside className="col gap16" style={{ alignSelf: "start", position: "sticky", top: 88 }}>
              <div className="card" style={{ padding: 22 }}>
                <h3 style={{ fontSize: 18, marginBottom: 14 }}>Detalii copac</h3>
                <div className="col" style={{ gap: 1, background: "var(--line-soft)", borderRadius: 12, overflow: "hidden" }}>
                  <PanelRow label="Specie" value={cell.species.name} />
                  <PanelRow label="ID" value={<span className="mono">{cell.treeId}</span>} />
                  <PanelRow label="Parcelă" value={parcel.name} />
                  <PanelRow label="Tutore" value={cell.donor} />
                  <PanelRow label="CO₂ / an" value={`~${cell.species.co2} kg`} />
                  <PanelRow label="Stare" value={<span className={`pill pill-${cell.status}`}>{HELP.statusLabel(cell.status)}</span>} />
                </div>
              </div>
              <div className="card" style={{ padding: 22, background: "var(--clay-tint)", border: "1px solid var(--clay-soft)" }}>
                <Icon name="bell" size={22} style={{ color: "var(--clay-deep)" }} />
                <h3 style={{ fontSize: 17, margin: "10px 0 6px" }}>Notificări foto</h3>
                <p className="muted" style={{ fontSize: 14 }}>Primești un email automat de fiecare dată când apare o fotografie nouă cu acest copac.</p>
                <button className="btn btn-clay btn-block btn-sm" style={{ marginTop: 12 }}>Activează notificările</button>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Checkout ---------- */
function Checkout({ go, cart, setCart, completeOrder, user }) {
  const [step, setStep] = useState(cart.length ? 1 : 0); // 1 details, 2 payment
  const [method, setMethod] = useState("card");
  const [guest, setGuest] = useState(!user);
  const [gift, setGift] = useState({});
  const total = cart.length * DATA.PRICE;

  const remove = (id) => setCart(cart.filter(c => c.cellId !== id));

  if (cart.length === 0) {
    return (
      <div className="wrap section view" style={{ textAlign: "center", maxWidth: 520 }}>
        <span style={{ width: 72, height: 72, borderRadius: 24, background: "var(--green-tint)", color: "var(--green)", display: "grid", placeItems: "center", margin: "0 auto 20px" }}><Icon name="cart" size={32} /></span>
        <h1 style={{ fontSize: 32, marginBottom: 12 }}>Coșul tău e gol</h1>
        <p className="muted" style={{ fontSize: 17, marginBottom: 24 }}>Deschide o parcelă și alege o celulă disponibilă ca să adopți primul copac.</p>
        <button className="btn btn-primary btn-lg" onClick={() => go("parcels")}>Vezi parcelele</button>
      </div>
    );
  }

  return (
    <div className="view">
      <section style={{ background: "var(--surface)", borderBottom: "1px solid var(--line-soft)" }}>
        <div className="wrap" style={{ padding: "28px 0" }}>
          <button className="btn btn-ghost btn-sm" onClick={() => go("parcels")} style={{ marginBottom: 14 }}><Icon name="arrowL" size={15} /> Continuă să adopți</button>
          <h1 style={{ fontSize: "clamp(28px,3.6vw,40px)" }}>Finalizează adopția</h1>
          <Steps step={step} />
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="checkout-layout">
            <div className="col gap24">
              {/* cart items */}
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ fontSize: 19, marginBottom: 16 }}>Copaci aleși ({cart.length})</h3>
                <div className="col gap12">
                  {cart.map(c => (
                    <div key={c.cellId} className="row between center" style={{ padding: "12px 0", borderBottom: "1px solid var(--line-soft)" }}>
                      <div className="row gap16 center">
                        <div className="imgph green" style={{ width: 56, height: 56, borderRadius: 12, fontSize: 9 }}>foto</div>
                        <div className="col" style={{ gap: 2 }}>
                          <span style={{ fontWeight: 700, whiteSpace: "nowrap" }}>{c.species} · {c.label}</span>
                          <span className="faint mono" style={{ fontSize: 12.5 }}>{c.parcelName}</span>
                        </div>
                      </div>
                      <div className="row gap16 center">
                        <span style={{ fontWeight: 700 }}>{DATA.PRICE} lei</span>
                        <button className="hdr-cart" style={{ width: 34, height: 34 }} onClick={() => remove(c.cellId)}><Icon name="close" size={15} /></button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* donor details */}
              <div className="card" style={{ padding: 24 }}>
                <div className="row between center" style={{ marginBottom: 18 }}>
                  <h3 style={{ fontSize: 19 }}>Datele tale</h3>
                  {!user && (
                    <div className="seg">
                      <button className={guest ? "on" : ""} onClick={() => setGuest(true)}>Ca invitat</button>
                      <button className={!guest ? "on" : ""} onClick={() => setGuest(false)}>Cu cont</button>
                    </div>
                  )}
                </div>
                <div className="form-grid">
                  <div className="field"><label>Nume complet</label><input className="input" defaultValue={user ? user.name : ""} placeholder="Ex: Ana Popescu" /></div>
                  <div className="field"><label>Email</label><input className="input" defaultValue={user ? user.email : ""} placeholder="nume@email.ro" /></div>
                  {!guest && !user && <div className="field"><label>Parolă cont nou</label><input className="input" type="password" placeholder="••••••••" /></div>}
                  <div className="field"><label>Telefon (opțional)</label><input className="input" placeholder="07xx xxx xxx" /></div>
                </div>
                <label className="row gap8 center" style={{ marginTop: 16, fontSize: 14, cursor: "pointer" }}>
                  <input type="checkbox" onChange={e => setGift({ on: e.target.checked })} style={{ accentColor: "var(--green)", width: 17, height: 17 }} />
                  Acesta este un cadou — vreau să-i pun numele beneficiarului
                </label>
                {gift.on && (
                  <div className="form-grid" style={{ marginTop: 14 }}>
                    <div className="field"><label>Numele copacului</label><input className="input" placeholder="Ex: Stejărel" /></div>
                    <div className="field"><label>Dedicat lui</label><input className="input" placeholder="Ex: bunicului Ion" /></div>
                  </div>
                )}
              </div>

              {/* payment */}
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ fontSize: 19, marginBottom: 16 }}>Metodă de plată</h3>
                <div className="pay-methods">
                  {[
                    ["card", "Card bancar", "Stripe · Visa / Mastercard", "spark"],
                    ["paypal", "PayPal", "Plătești cu contul PayPal", "shield"],
                    ["transfer", "Transfer bancar", "Confirmat manual de echipă", "mail"],
                  ].map(([k, t, d, ic]) => (
                    <button key={k} className={"pay-opt" + (method === k ? " on" : "")} onClick={() => setMethod(k)}>
                      <span className="row between center">
                        <Icon name={ic} size={20} style={{ color: method === k ? "var(--green)" : "var(--ink-faint)" }} />
                        <span className="radio" data-on={method === k}></span>
                      </span>
                      <span style={{ fontWeight: 700, marginTop: 10, display: "block" }}>{t}</span>
                      <span className="faint" style={{ fontSize: 12.5 }}>{d}</span>
                    </button>
                  ))}
                </div>
                {method === "card" && (
                  <div className="form-grid" style={{ marginTop: 18 }}>
                    <div className="field" style={{ gridColumn: "1 / -1" }}><label>Număr card</label><input className="input mono" placeholder="4242 4242 4242 4242" /></div>
                    <div className="field"><label>Expiră</label><input className="input mono" placeholder="12 / 28" /></div>
                    <div className="field"><label>CVC</label><input className="input mono" placeholder="123" /></div>
                  </div>
                )}
                {method === "transfer" && (
                  <div className="card" style={{ background: "var(--surface-2)", padding: 16, marginTop: 16, fontSize: 14 }}>
                    <p style={{ marginBottom: 6 }}><b>Detalii transfer:</b></p>
                    <p className="mono" style={{ fontSize: 13 }}>Asociația Adopt a Tree!<br />RO49 AAAA 1B31 0075 9384 0000<br />Mențiune: adopție + email</p>
                    <p className="faint" style={{ fontSize: 12.5, marginTop: 8 }}>Sloturile rămân rezervate 5 zile până la confirmarea plății de către admin.</p>
                  </div>
                )}
              </div>
            </div>

            {/* summary */}
            <aside style={{ alignSelf: "start", position: "sticky", top: 88 }}>
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ fontSize: 19, marginBottom: 16 }}>Sumar</h3>
                <div className="col gap12" style={{ fontSize: 15 }}>
                  <div className="row between"><span className="muted">{cart.length} × adopție copac</span><span style={{ flex: "none" }}>{total} lei</span></div>
                  <div className="row between"><span className="muted">Procesare</span><span style={{ color: "var(--green)", flex: "none" }}>Gratuit</span></div>
                  <hr className="hr" />
                  <div className="row between center" style={{ gap: 12 }}>
                    <span style={{ fontWeight: 700, fontSize: 17 }}>Total</span>
                    <span style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, whiteSpace: "nowrap" }}>{total} lei</span>
                  </div>
                </div>
                <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 18 }}
                  onClick={() => completeOrder({ method, total, count: cart.length })}>
                  {method === "transfer" ? "Plasează comanda" : "Plătește " + total + " lei"} <Icon name="arrowR" size={17} />
                </button>
                <div className="row gap8 center" style={{ marginTop: 14, justifyContent: "center" }}>
                  <Icon name="shield" size={15} style={{ color: "var(--green)" }} />
                  <span className="faint" style={{ fontSize: 12.5 }}>Plată securizată · date protejate GDPR</span>
                </div>
                <div className="col gap8" style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--line-soft)" }}>
                  {["Certificat PDF de adopție", "Fotografii sezoniere pe email", "Numele tău pe copac"].map(b => (
                    <span key={b} className="row gap8 center" style={{ fontSize: 13.5 }}><Icon name="check" size={15} style={{ color: "var(--green)" }} stroke={2.5} /> {b}</span>
                  ))}
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

function Steps({ step }) {
  const s = ["Coș", "Detalii", "Plată"];
  return (
    <div className="row gap12 center" style={{ marginTop: 16 }}>
      {s.map((l, i) => (
        <React.Fragment key={i}>
          <span className="row gap8 center" style={{ fontSize: 13.5, fontWeight: 600, color: i <= step ? "var(--green-deep)" : "var(--ink-faint)" }}>
            <span style={{ width: 22, height: 22, borderRadius: "50%", display: "grid", placeItems: "center", fontSize: 12, background: i <= step ? "var(--green)" : "var(--surface-2)", color: i <= step ? "#fff" : "var(--ink-faint)" }}>{i + 1}</span>
            {l}
          </span>
          {i < s.length - 1 && <span style={{ width: 28, height: 1.5, background: "var(--line)" }}></span>}
        </React.Fragment>
      ))}
    </div>
  );
}

/* ---------- Confirmation ---------- */
function Confirmation({ go, order }) {
  return (
    <div className="view wrap section" style={{ maxWidth: 640, textAlign: "center" }}>
      <span style={{ width: 84, height: 84, borderRadius: 28, background: "var(--green)", color: "#fff", display: "grid", placeItems: "center", margin: "0 auto 24px" }}>
        <Icon name="check" size={42} stroke={2.5} />
      </span>
      <span className="eyebrow">Comandă {order.id}</span>
      <h1 style={{ fontSize: "clamp(32px,4.4vw,46px)", margin: "12px 0 14px" }}>
        {order.method === "transfer" ? "Comanda a fost înregistrată!" : "Mulțumim! Copacii sunt ai tăi"}
      </h1>
      <p className="muted" style={{ fontSize: 18, maxWidth: 480, margin: "0 auto 28px" }}>
        {order.method === "transfer"
          ? `Ți-am rezervat ${order.count} ${order.count === 1 ? "slot" : "sloturi"}. Le confirmăm imediat ce vedem transferul. Detaliile au plecat pe email.`
          : `Am plantat în numele tău ${order.count} ${order.count === 1 ? "copac" : "copaci"}. Certificatul PDF și primele fotografii ajung pe email.`}
      </p>
      <div className="card" style={{ padding: 24, textAlign: "left", marginBottom: 24 }}>
        <div className="row between center" style={{ marginBottom: 14 }}>
          <h3 style={{ fontSize: 18 }}>Ce urmează</h3>
          <span className="badge"><Icon name="mail" size={12} /> email trimis</span>
        </div>
        <div className="col gap12">
          {[
            ["download", "Certificat de adopție", "PDF personalizat, gata de printat"],
            ["camera", "Fotografii sezoniere", "Primești o poză nouă la fiecare actualizare"],
            ["user", "Urmărește în cont", "Vezi copacii și jurnalul lor în profilul tău"],
          ].map(([ic, t, d]) => (
            <div key={t} className="row gap16 center">
              <span style={{ width: 44, height: 44, borderRadius: 12, background: "var(--green-tint)", color: "var(--green)", display: "grid", placeItems: "center", flex: "none" }}><Icon name={ic} size={20} /></span>
              <div className="col"><span style={{ fontWeight: 700 }}>{t}</span><span className="faint" style={{ fontSize: 13 }}>{d}</span></div>
            </div>
          ))}
        </div>
      </div>
      <div className="row gap12" style={{ justifyContent: "center", flexWrap: "wrap" }}>
        <button className="btn btn-primary btn-lg" onClick={() => go("profile")}>Vezi copacii mei</button>
        <button className="btn btn-clay btn-lg"><Icon name="download" size={17} /> Descarcă certificatul</button>
        <button className="btn btn-ghost btn-lg" onClick={() => go("parcels")}>Adoptă încă unul</button>
      </div>
    </div>
  );
}

Object.assign(window, { TreeDetail, Checkout, Confirmation });