// Portal E — Customer Storefront (Landing → Cart → PDPA Checkout → Success)
function PortalE() {
  const s = YJ.useStore();
  const [step, setStep] = useState("browse"); // browse | landing | checkout | success
  const [selectedId, setSelectedId] = useState(null);
  const [lastOrder, setLastOrder] = useState(null);
  const broker = s.brokers.find(b => b.id === s.currentBrokerId) || s.brokers[0];

  const product = s.products.find(p => p.id === selectedId);

  return (
    <div className="storefront-stage">
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 20px" }}>
        <div className="page-head">
          <div>
            <h1>หน้าร้าน YJmall — ลูกค้าทั่วไป</h1>
            <div className="sub">
              ผ่านลิงก์นายหน้า <span className="mono" style={{ color: "var(--accent)" }}>yjm.co/r/{broker.id}</span> · ผู้แนะนำ: {broker.name}
            </div>
          </div>
          {step !== "browse" && (
            <button className="neu-btn" onClick={() => { setStep("browse"); setSelectedId(null); }}>← กลับไปหน้าร้าน</button>
          )}
        </div>

        {step === "browse" && (
          <BrowseView onPickProduct={(id) => { setSelectedId(id); setStep("landing"); }} broker={broker} />
        )}
        {step === "landing" && product && (
          <LandingPage product={product} onCheckout={() => setStep("checkout")} broker={broker} />
        )}
        {step === "checkout" && product && (
          <CheckoutPage
            product={product}
            broker={broker}
            onSuccess={(order) => { setLastOrder(order); setStep("success"); }}
            onBack={() => setStep("landing")}
          />
        )}
        {step === "success" && lastOrder && (
          <SuccessPage order={lastOrder} onContinue={() => { setStep("browse"); setSelectedId(null); }} />
        )}
      </div>
    </div>
  );
}

function BrowseView({ onPickProduct, broker }) {
  const s = YJ.useStore();
  const visible = s.products.filter(p => p.stock > 0);

  return (
    <>
      <div style={{ marginBottom: 24, padding: 30, borderRadius: 24, background: "linear-gradient(135deg, var(--accent), var(--accent-2))", color: "#fff", display: "grid", gridTemplateColumns: "2fr 1fr", gap: 20, alignItems: "center" }}>
        <div>
          <div className="pill" style={{ background: "rgba(255,255,255,.2)", color: "#fff" }}>แนะนำโดย {broker.name}</div>
          <h2 style={{ margin: "8px 0", fontSize: 28, fontWeight: 700 }}>โปรเด่นของจริง รีวิวล้น</h2>
          <p style={{ margin: 0, opacity: .85, lineHeight: 1.6 }}>เลือกสินค้าพรีเมียม คัดมาแล้วโดยทีม YJmall — ของแท้ 100% จัดส่งฟรีทั่วประเทศ มี COD</p>
        </div>
        <div className="skeleton-img" style={{ height: 140, background: "rgba(255,255,255,.15)", color: "rgba(255,255,255,.8)" }}>banner hero</div>
      </div>

      <div className="grid cols-4">
        {visible.map(p => {
          const br = s.brands.find(b => b.id === p.brandId);
          return (
            <div key={p.id} className="neu-card" style={{ padding: 16, cursor: "pointer", display: "flex", flexDirection: "column", gap: 10 }} onClick={() => onPickProduct(p.id)}>
              <div className="skeleton-img" style={{ height: 160, fontSize: 9 }}>product photo</div>
              <div>
                <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{br?.name}</div>
                <div style={{ fontWeight: 500, fontSize: 14, lineHeight: 1.3, marginTop: 2, minHeight: 36 }}>{p.name}</div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "auto" }}>
                <div className="mono" style={{ fontSize: 18, fontWeight: 700, color: "var(--accent)" }}>{fmtTHB(p.price)}</div>
                <span className="pill ok">ขายแล้ว {fmtNum(p.sold)}+</span>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
}

function LandingPage({ product, onCheckout, broker }) {
  const s = YJ.useStore();
  const brand = s.brands.find(b => b.id === product.brandId);
  const [secs, setSecs] = useState(15 * 60); // 15 min countdown
  useEffect(() => {
    const t = setInterval(() => setSecs(x => Math.max(0, x - 1)), 1000);
    return () => clearInterval(t);
  }, []);
  const mm = String(Math.floor(secs / 60)).padStart(2, "0");
  const ss = String(secs % 60).padStart(2, "0");

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 28 }}>
      {/* Left — media */}
      <div>
        <div className="skeleton-img" style={{ height: 420 }}>
          {product.name}<br/>video review hero
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginTop: 10 }}>
          {["รีวิว A", "ก่อน/หลัง", "ส่วนผสม", "FAQ"].map(t => (
            <div key={t} className="skeleton-img" style={{ height: 80, fontSize: 9 }}>{t}</div>
          ))}
        </div>

        <Section title="รีวิวจริงจากผู้ใช้" sub="คัดมาจากลูกค้าที่ใช้งานจริง">
          <div style={{ display: "grid", gap: 10 }}>
            {[
              { name: "พิมพ์ใจ", text: "ใช้แล้วผิวดีขึ้นจริง ภายใน 2 อาทิตย์ค่ะ", stars: 5 },
              { name: "กษมา", text: "คุ้มเกินราคา รีออเดอร์รอบที่ 3 แล้ว", stars: 5 },
              { name: "ณภัทร", text: "ส่งไว ของแท้ บรรจุภัณฑ์ดี", stars: 5 },
            ].map((r, i) => (
              <div key={i} style={{ padding: 14, borderRadius: 14, boxShadow: "var(--neu-in-sm)" }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span style={{ fontWeight: 600 }}>{r.name}</span>
                  <span style={{ color: "#f1a721" }}>{"★".repeat(r.stars)}</span>
                </div>
                <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 6 }}>"{r.text}"</div>
              </div>
            ))}
          </div>
        </Section>
      </div>

      {/* Right — purchase panel */}
      <div style={{ position: "sticky", top: 96, height: "fit-content" }}>
        <div className="neu-card" style={{ padding: 24 }}>
          <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{brand?.name}</div>
          <h2 style={{ margin: "4px 0 12px", fontSize: 22, lineHeight: 1.3 }}>{product.name}</h2>

          <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
            <span className="pill ok">ของแท้ 100%</span>
            <span className="pill">มี COD</span>
            <span className="pill">ส่งฟรี</span>
          </div>

          <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 6 }}>
            <span className="mono" style={{ fontSize: 32, fontWeight: 700, color: "var(--accent)" }}>{fmtTHB(product.price)}</span>
            <span className="mono" style={{ fontSize: 14, color: "var(--ink-3)", textDecoration: "line-through" }}>{fmtTHB(product.price * 1.3)}</span>
          </div>
          <div style={{ fontSize: 12, color: "var(--ok)", marginBottom: 14 }}>ประหยัด {fmtTHB(product.price * 0.3)} (23%)</div>

          {/* FOMO countdown */}
          <div style={{ padding: 14, borderRadius: 14, background: "linear-gradient(135deg, #e35062, #c43750)", color: "#fff", marginBottom: 14 }}>
            <div style={{ fontSize: 11, opacity: .9, textTransform: "uppercase", letterSpacing: ".08em" }}>โปรหมดเร็ว — เหลือ</div>
            <div className="mono" style={{ fontSize: 28, fontWeight: 700, marginTop: 4, letterSpacing: ".05em" }}>{mm}:{ss}</div>
            <div style={{ fontSize: 11, opacity: .9 }}>สต๊อกที่เหลือ: <b>{product.stock}</b> ชิ้น</div>
          </div>

          <button className="neu-btn primary" style={{ width: "100%", justifyContent: "center", padding: 16, fontSize: 16 }} onClick={onCheckout}>
            <Ico.cart /> สั่งซื้อทันที
          </button>

          <div style={{ marginTop: 14, padding: 12, borderRadius: 12, boxShadow: "var(--neu-in-sm)", fontSize: 12, color: "var(--ink-2)" }}>
            แนะนำโดย <b>{broker.name}</b> (Lv {broker.level})
            <div style={{ marginTop: 4, color: "var(--ink-3)", fontSize: 11 }}>คุณกำลังซื้อผ่านลิงก์นายหน้า — รับประกันราคาเดียวกันกับเว็บไซต์</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CheckoutPage({ product, broker, onSuccess, onBack }) {
  const s = YJ.useStore();
  const [form, setForm] = useState({
    name: "", phone: "", addr: "", note: "",
  });
  const [payment, setPayment] = useState("COD");
  const [pdpaAgree, setPdpaAgree] = useState(false);
  const [marketingAgree, setMarketingAgree] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [errors, setErrors] = useState({});
  const toast = useToast();

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "กรุณากรอกชื่อ-นามสกุล";
    if (!/^0[0-9]{9}$/.test(form.phone.replace(/[- ]/g, ""))) e.phone = "เบอร์โทรไม่ถูกต้อง (เช่น 0812345678)";
    if (!form.addr.trim()) e.addr = "กรุณากรอกที่อยู่จัดส่ง";
    if (!pdpaAgree) e.pdpa = "ต้องยอมรับเงื่อนไข PDPA";
    return e;
  };

  const submit = () => {
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length > 0) {
      toast.push("กรุณาตรวจสอบข้อมูล", "danger");
      return;
    }
    setSubmitting(true);
    setTimeout(() => {
      const order = YJ.actions.placeOrder({
        productId: product.id,
        brokerId: broker.id,
        paymentMethod: payment,
        customer: { name: form.name, phone: form.phone, addr: form.addr },
      });
      setSubmitting(false);
      if (order) {
        toast.push("สั่งซื้อสำเร็จ — ส่งข้อมูลให้ Telesales แล้ว");
        onSuccess(order);
      } else {
        toast.push("สินค้าหมด ลองใหม่อีกครั้ง", "danger");
      }
    }, 800);
  };

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24 }}>
      {/* Form */}
      <div style={{ display: "grid", gap: 18 }}>
        <Section title="ข้อมูลจัดส่ง">
          <div style={{ display: "grid", gap: 14 }}>
            <Field label="ชื่อ-นามสกุล">
              <input className="neu-input lg" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="เช่น สมหญิง รักดี" />
              {errors.name && <div style={{ color: "var(--danger)", fontSize: 12, marginTop: 4 }}>{errors.name}</div>}
            </Field>
            <Field label="เบอร์โทรศัพท์">
              <input className="neu-input lg mono" value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} placeholder="08x-xxx-xxxx" />
              {errors.phone && <div style={{ color: "var(--danger)", fontSize: 12, marginTop: 4 }}>{errors.phone}</div>}
            </Field>
            <Field label="ที่อยู่จัดส่ง">
              <textarea className="neu-input" rows={3} value={form.addr} onChange={e => setForm({ ...form, addr: e.target.value })} placeholder="บ้านเลขที่ ซอย ถนน ตำบล อำเภอ จังหวัด รหัสไปรษณีย์" />
              {errors.addr && <div style={{ color: "var(--danger)", fontSize: 12, marginTop: 4 }}>{errors.addr}</div>}
            </Field>
            <Field label="หมายเหตุ (ถ้ามี)">
              <input className="neu-input" value={form.note} onChange={e => setForm({ ...form, note: e.target.value })} placeholder="เช่น ฝากไว้หน้าบ้าน" />
            </Field>
          </div>
        </Section>

        <Section title="ช่องทางชำระเงิน">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
            {[
              { id: "COD", label: "เก็บปลายทาง", sub: "จ่ายเมื่อรับของ", ico: "📦" },
              { id: "QR", label: "PromptPay QR", sub: "สแกนจ่ายทันที", ico: "📱" },
              { id: "CARD", label: "บัตรเครดิต", sub: "Visa / Master / JCB", ico: "💳" },
            ].map(m => (
              <button key={m.id}
                onClick={() => setPayment(m.id)}
                className={"neu-btn " + (payment === m.id ? "primary" : "")}
                style={{ padding: 16, flexDirection: "column", alignItems: "flex-start", textAlign: "left", gap: 4 }}
              >
                <div style={{ fontSize: 20 }}>{m.ico}</div>
                <div style={{ fontWeight: 600 }}>{m.label}</div>
                <div style={{ fontSize: 11, opacity: .8 }}>{m.sub}</div>
              </button>
            ))}
          </div>

          {payment === "QR" && (
            <div style={{ marginTop: 14, padding: 18, borderRadius: 14, boxShadow: "var(--neu-in-sm)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 16, alignItems: "center" }}>
              <div style={{ width: 120, height: 120, borderRadius: 12, background: "#fff", display: "grid", placeItems: "center", boxShadow: "var(--neu-out-sm)" }}>
                <svg width="100" height="100" viewBox="0 0 25 25">
                  {Array.from({ length: 25 * 25 }, (_, i) => {
                    const x = i % 25, y = Math.floor(i / 25);
                    if ((x < 7 && y < 7) || (x > 17 && y < 7) || (x < 7 && y > 17)) {
                      if (x === 0 || y === 0 || x === 6 || y === 6 || (x > 1 && x < 5 && y > 1 && y < 5)) return <rect key={i} x={x} y={y} width="1" height="1" fill="#000"/>;
                      return null;
                    }
                    const seed = (x * 31 + y * 17 + product.id.charCodeAt(0)) % 100;
                    return seed > 55 ? <rect key={i} x={x} y={y} width="1" height="1" fill="#000"/> : null;
                  })}
                </svg>
              </div>
              <div>
                <div style={{ fontSize: 12, color: "var(--ink-3)" }}>สแกน QR เพื่อชำระ</div>
                <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>บริษัท YJmall จำกัด</div>
                <div className="mono" style={{ fontSize: 18, fontWeight: 700, color: "var(--accent)", marginTop: 6 }}>{fmtTHB(product.price)}</div>
              </div>
            </div>
          )}

          {payment === "CARD" && (
            <div style={{ marginTop: 14, padding: 18, borderRadius: 14, boxShadow: "var(--neu-in-sm)", display: "grid", gap: 12 }}>
              <Field label="หมายเลขบัตร"><input className="neu-input mono" placeholder="4242 4242 4242 4242" /></Field>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                <Field label="MM/YY"><input className="neu-input mono" placeholder="12/27" /></Field>
                <Field label="CVV"><input className="neu-input mono" placeholder="•••" /></Field>
              </div>
            </div>
          )}
        </Section>

        <Section title="เงื่อนไขสำคัญ (PDPA)">
          <div style={{ display: "grid", gap: 12 }}>
            <label style={{ display: "flex", gap: 12, padding: 14, borderRadius: 14, boxShadow: "var(--neu-in-sm)", cursor: "pointer", alignItems: "flex-start" }}>
              <input type="checkbox" checked={pdpaAgree} onChange={e => setPdpaAgree(e.target.checked)} style={{ marginTop: 3 }} />
              <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.6 }}>
                <b style={{ color: "var(--ink)" }}>(จำเป็น)</b> {s.settings.pdpaText}
              </div>
            </label>
            {errors.pdpa && <div style={{ color: "var(--danger)", fontSize: 12 }}>{errors.pdpa}</div>}
            <label style={{ display: "flex", gap: 12, padding: 14, borderRadius: 14, boxShadow: "var(--neu-in-sm)", cursor: "pointer", alignItems: "flex-start" }}>
              <input type="checkbox" checked={marketingAgree} onChange={e => setMarketingAgree(e.target.checked)} style={{ marginTop: 3 }} />
              <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.6 }}>
                <b style={{ color: "var(--ink)" }}>(ไม่บังคับ)</b> ยินยอมรับข้อเสนอ โปรโมชั่น และผลิตภัณฑ์อื่นๆ จาก YJmall และ Nice Call ผ่านโทรศัพท์ / SMS / Email
              </div>
            </label>
          </div>
        </Section>
      </div>

      {/* Summary */}
      <div>
        <div className="neu-card" style={{ padding: 22, position: "sticky", top: 96 }}>
          <h3 style={{ margin: "0 0 14px", fontSize: 16 }}>สรุปคำสั่งซื้อ</h3>
          <div style={{ display: "flex", gap: 12, padding: 12, borderRadius: 12, boxShadow: "var(--neu-in-sm)", marginBottom: 14 }}>
            <div className="skeleton-img" style={{ width: 60, height: 60, fontSize: 8 }}>IMG</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.3 }}>{product.name}</div>
              <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 4 }}>x 1</div>
            </div>
            <div className="mono" style={{ fontWeight: 600 }}>{fmtTHB(product.price)}</div>
          </div>

          <div style={{ display: "grid", gap: 8, fontSize: 13 }}>
            <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-3)" }}>ราคาสินค้า</span><span className="mono">{fmtTHB(product.price)}</span></div>
            <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-3)" }}>ค่าจัดส่ง</span><span className="mono" style={{ color: "var(--ok)" }}>ฟรี</span></div>
            <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-3)" }}>ช่องทาง</span><span>{payment === "COD" ? "เก็บปลายทาง" : payment === "QR" ? "PromptPay" : "บัตรเครดิต"}</span></div>
            <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 12, borderTop: "1px solid var(--line)", fontSize: 16, fontWeight: 700 }}>
              <span>รวม</span><span className="mono" style={{ color: "var(--accent)" }}>{fmtTHB(product.price)}</span>
            </div>
          </div>

          <button className="neu-btn primary" style={{ width: "100%", marginTop: 18, padding: 14, justifyContent: "center", fontSize: 15 }} disabled={submitting} onClick={submit}>
            {submitting ? "กำลังประมวลผล..." : "ยืนยันสั่งซื้อ"}
          </button>
          <button className="neu-btn ghost sm" style={{ width: "100%", marginTop: 6, justifyContent: "center" }} onClick={onBack}>← กลับไปดูสินค้า</button>
        </div>
      </div>
    </div>
  );
}

function SuccessPage({ order, onContinue }) {
  const s = YJ.useStore();
  const cust = s.customers.find(c => c.id === order.customerId);
  const product = s.products.find(p => p.id === order.productId);

  return (
    <div style={{ maxWidth: 600, margin: "40px auto", textAlign: "center" }}>
      <div className="neu-card" style={{ padding: 40 }}>
        <div style={{ width: 80, height: 80, borderRadius: "50%", background: "linear-gradient(135deg, var(--ok), #14935f)", color: "#fff", display: "grid", placeItems: "center", margin: "0 auto 18px", fontSize: 36, boxShadow: "0 12px 30px rgba(24,169,106,.3)" }}>✓</div>
        <h2 style={{ margin: "0 0 8px", fontSize: 24 }}>สั่งซื้อสำเร็จ!</h2>
        <div style={{ color: "var(--ink-2)", fontSize: 14, marginBottom: 22 }}>
          ขอบคุณคุณ <b>{cust?.name}</b> — ทีมงานจะติดต่อยืนยันออเดอร์ผ่านเบอร์ {cust?.phone}
        </div>

        <div style={{ padding: 18, borderRadius: 14, boxShadow: "var(--neu-in-sm)", textAlign: "left", display: "grid", gap: 10 }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ color: "var(--ink-3)", fontSize: 12 }}>Order ID</span>
            <span className="mono">{order.id}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ color: "var(--ink-3)", fontSize: 12 }}>สินค้า</span>
            <span style={{ fontSize: 13, fontWeight: 500 }}>{product?.name}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ color: "var(--ink-3)", fontSize: 12 }}>ยอดรวม</span>
            <span className="mono" style={{ fontWeight: 700, color: "var(--accent)" }}>{fmtTHB(order.amount)}</span>
          </div>
        </div>

        <div style={{ marginTop: 18, padding: 16, borderRadius: 14, background: "var(--accent-soft)", color: "var(--accent)", fontSize: 13 }}>
          💡 ออเดอร์นี้ถูกส่งเข้า <b>Nice Call Pool</b> แล้ว — เปลี่ยนไปที่ Portal D เพื่อดูลีดใหม่ที่เพิ่งสร้างขึ้น
        </div>

        <button className="neu-btn primary" style={{ marginTop: 22, padding: "12px 28px" }} onClick={onContinue}>← เลือกสินค้าอีกชิ้น</button>
      </div>
    </div>
  );
}

window.PortalE = PortalE;