// Portal D — Nice Call Telesales CRM
function PortalD() {
  const s = YJ.useStore();
  const toast = useToast();
  const [view, setView] = useState("pool");
  const [activeLeadId, setActiveLeadId] = useState(null);

  const pending = s.leads.filter(l => l.status === "pending");
  const calling = s.leads.filter(l => l.status === "calling");
  const closedToday = s.leads.filter(l => l.status === "closed" && l.closedAt && Date.now() - l.closedAt < 86400000);

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>Nice Call CRM — Telesales Console</h1>
          <div className="sub">รับลีดจาก YJmall แบบเรียลไทม์ ปิดยอดอัพเซลล์ไม้ 2 · เลือก House Brand / แบรนด์เดิม</div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <span className="pill ok"><span className="dot live"></span> เชื่อมต่อ API: Live</span>
          <span className="pill">{pending.length} ลีดรอ</span>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 24 }}>
        <SubTabs value={view} onChange={setView} items={[
          { id: "pool", label: "Pending Pool", ico: "PP" },
          { id: "booking", label: "Booking Console", ico: "BC" },
          { id: "integration", label: "Integration Keys", ico: "IK" },
        ]} />

        <div style={{ display: "grid", gap: 18 }}>
          {view === "pool" && (
            <>
              <div className="grid cols-4">
                <Stat label="ลีดรอโทร" value={fmtNum(pending.length)} sub="ออเดอร์ไม้ 1 ใหม่" />
                <Stat label="กำลังโทรอยู่" value={fmtNum(calling.length)} />
                <Stat label="ปิดสำเร็จวันนี้" value={fmtNum(closedToday.length)} accent />
                <Stat label="Avg. Upsell" value={fmtTHB(closedToday.reduce((a, l) => {
                  const o = s.orders.find(x => x.brokerId === l.brokerId && x.maai === 2 && x.customerId === l.customerId);
                  return a + (o?.amount || 0);
                }, 0) / Math.max(1, closedToday.length))} />
              </div>

              <Section title="Pending Call Pool" sub="ลีดล่าสุดอยู่บนสุด — คลิกเพื่อเปิดเคส">
                <div style={{ display: "grid", gap: 10 }}>
                  {s.leads.length === 0 && <div className="empty">ยังไม่มีลีด — รอลูกค้าสั่งซื้อจาก Portal E</div>}
                  {s.leads.map(lead => {
                    const cust = s.customers.find(c => c.id === lead.customerId);
                    const product = s.products.find(p => p.id === lead.productId);
                    const broker = s.brokers.find(b => b.id === lead.brokerId);
                    const history = YJ.select.customerHistory(s, lead.customerId);
                    return (
                      <div key={lead.id} style={{
                        padding: 16, borderRadius: 14,
                        boxShadow: lead.status === "pending" ? "var(--neu-out-sm)" : "var(--neu-in-sm)",
                        display: "grid", gridTemplateColumns: "1fr auto auto", gap: 14, alignItems: "center",
                        opacity: lead.status === "closed" || lead.status === "rejected" ? .6 : 1,
                      }}>
                        <div>
                          <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 6 }}>
                            {lead.status === "pending" && <span className="pill"><span className="dot live"></span>รอโทร</span>}
                            {lead.status === "calling" && <span className="pill warn"><span className="dot warn"></span>กำลังโทร · {lead.assignedTo}</span>}
                            {lead.status === "closed" && <span className="pill ok">ปิดแล้ว</span>}
                            {lead.status === "rejected" && <span className="pill danger">ปฏิเสธ</span>}
                            <span className="pill ink">{fmtRelTime(lead.createdAt)}</span>
                            {lead.attempts > 0 && <span className="pill warn">{lead.attempts}x calls</span>}
                          </div>
                          <div style={{ fontWeight: 600 }}>{cust?.name} · <span className="mono" style={{ color: "var(--ink-3)" }}>{cust?.phone}</span></div>
                          <div style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 4 }}>
                            ซื้อ {product?.name} · {fmtTHB(product?.price)}
                          </div>
                          <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>
                            จากนายหน้า: {broker?.name} · ประวัติทั้งหมด {history.length} ออเดอร์
                          </div>
                        </div>
                        <div style={{ textAlign: "right" }}>
                          <div style={{ fontSize: 11, color: "var(--ink-3)" }}>ที่อยู่</div>
                          <div style={{ fontSize: 12, maxWidth: 200 }}>{cust?.addr}</div>
                        </div>
                        <div style={{ display: "flex", gap: 6 }}>
                          {lead.status === "pending" && (
                            <button className="neu-btn primary sm" onClick={() => { YJ.actions.assignLead(lead.id, "Agent-021"); setActiveLeadId(lead.id); setView("booking"); }}>
                              <Ico.phone /> โทร
                            </button>
                          )}
                          {lead.status === "calling" && (
                            <button className="neu-btn primary sm" onClick={() => { setActiveLeadId(lead.id); setView("booking"); }}>เปิดเคส</button>
                          )}
                          {lead.status === "pending" && (
                            <button className="neu-btn sm" onClick={() => { YJ.actions.rejectLead(lead.id, "ลูกค้าไม่รับสาย"); toast.push("บันทึก: ไม่รับสาย"); }}>ข้าม</button>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </Section>
            </>
          )}

          {view === "booking" && (
            <BookingConsole leadId={activeLeadId} onPickLead={(id) => setActiveLeadId(id)} toast={toast} />
          )}

          {view === "integration" && <IntegrationView toast={toast} />}
        </div>
      </div>
    </div>
  );
}

function BookingConsole({ leadId, onPickLead, toast }) {
  const s = YJ.useStore();
  const lead = leadId ? s.leads.find(l => l.id === leadId) : s.leads.find(l => l.status === "calling") || s.leads.find(l => l.status === "pending");
  const [selectedProductId, setSelectedProductId] = useState(null);
  const [discount, setDiscount] = useState(0);
  const [useHouseBrand, setUseHouseBrand] = useState(false);

  useEffect(() => {
    setSelectedProductId(null); setDiscount(0); setUseHouseBrand(false);
  }, [leadId]);

  if (!lead) {
    return (
      <Section title="Booking Console" sub="เลือกลีดจาก Pending Pool เพื่อเปิดเคส">
        <div className="empty">ยังไม่มีเคสเปิดอยู่ — กลับไปที่ Pending Pool เพื่อเลือกลีด</div>
      </Section>
    );
  }

  const cust = s.customers.find(c => c.id === lead.customerId);
  const product = s.products.find(p => p.id === lead.productId);
  const history = YJ.select.customerHistory(s, lead.customerId);
  const broker = s.brokers.find(b => b.id === lead.brokerId);
  const brandOriginal = s.brands.find(b => b.id === product?.brandId);

  const availableProducts = useHouseBrand
    ? s.products.filter(p => s.brands.find(b => b.id === p.brandId)?.isHouse)
    : s.products.filter(p => p.brandId === product?.brandId);
  const selectedProduct = s.products.find(p => p.id === selectedProductId);

  const closeSale = () => {
    if (!selectedProductId) return toast.push("เลือกสินค้าก่อน", "danger");
    YJ.actions.closeUpsell({ leadId: lead.id, productId: selectedProductId, useHouseBrand, discount });
    toast.push("ปิดยอดสำเร็จ — ส่งข้อมูลกลับให้ YJmall");
    // Reset
    setSelectedProductId(null); setDiscount(0);
  };

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
      <Section title="ข้อมูลลูกค้า" sub={`เคส ${lead.id}`}>
        <div style={{ display: "grid", gap: 14 }}>
          <div style={{ padding: 14, borderRadius: 14, boxShadow: "var(--neu-in-sm)" }}>
            <div style={{ fontSize: 11, color: "var(--ink-3)" }}>ลูกค้า</div>
            <div style={{ fontWeight: 600, fontSize: 16 }}>{cust?.name}</div>
            <div className="mono" style={{ fontSize: 13, color: "var(--accent)" }}>{cust?.phone}</div>
            <div style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 4 }}>{cust?.addr}</div>
          </div>

          <div>
            <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>ประวัติการซื้อ ({history.length})</div>
            <div style={{ display: "grid", gap: 6 }}>
              {history.map(o => (
                <div key={o.id} style={{ padding: "10px 14px", borderRadius: 10, boxShadow: "var(--neu-in-sm)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }}>
                  <div>
                    <span className="pill" style={{ marginRight: 8 }}>ไม้ {o.maai}</span>
                    {o.productName}
                  </div>
                  <div className="mono" style={{ fontWeight: 600 }}>{fmtTHB(o.amount)}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 14, borderRadius: 14, boxShadow: "var(--neu-in-sm)" }}>
            <div style={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 600, marginBottom: 6 }}>Script แนะนำ</div>
            <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.6 }}>
              "สวัสดีค่ะ คุณ{cust?.name} ทาง YJmall ขอบคุณที่ซื้อ {product?.name} กับเรานะคะ — มีสินค้าโปรพิเศษเฉพาะลูกค้า VIP เช่นคุณ ขอแนะนำเพิ่มเติม..."
            </div>
          </div>
        </div>
      </Section>

      <Section title="ปิดการขาย (Upsell ไม้ 2)" sub={`ผ่านนายหน้า ${broker?.name}`}>
        <div style={{ display: "grid", gap: 14 }}>
          <div>
            <div style={{ fontSize: 12, color: "var(--ink-2)", marginBottom: 8, fontWeight: 500 }}>เลือกประเภทสินค้าอัพเซลล์</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              <button
                onClick={() => { setUseHouseBrand(false); setSelectedProductId(null); }}
                className={"neu-btn " + (!useHouseBrand ? "primary" : "")}
                style={{ padding: 16, flexDirection: "column", alignItems: "stretch", textAlign: "left" }}
              >
                <div style={{ fontSize: 11, opacity: .85 }}>OPTION A</div>
                <div style={{ fontWeight: 600, marginTop: 4 }}>แบรนด์เดิม</div>
                <div style={{ fontSize: 11, marginTop: 4, opacity: .8 }}>{brandOriginal?.name} · GP {brandOriginal?.gp}%</div>
                <div style={{ fontSize: 11, marginTop: 6, opacity: .85 }}>→ ส่งส่วนแบ่งกลับให้แบรนด์เดิมด้วย</div>
              </button>
              <button
                onClick={() => { setUseHouseBrand(true); setSelectedProductId(null); }}
                className={"neu-btn " + (useHouseBrand ? "primary" : "")}
                style={{ padding: 16, flexDirection: "column", alignItems: "stretch", textAlign: "left" }}
              >
                <div style={{ fontSize: 11, opacity: .85 }}>OPTION B</div>
                <div style={{ fontWeight: 600, marginTop: 4 }}>House Brand (Nice Care)</div>
                <div style={{ fontSize: 11, marginTop: 4, opacity: .8 }}>Zero COGS</div>
                <div style={{ fontSize: 11, marginTop: 6, opacity: .85 }}>→ ระบบคิดสัดส่วนแบรนด์เดิม = 0% ทันที</div>
              </button>
            </div>
          </div>

          <Field label="เลือกสินค้าอัพเซลล์">
            <select className="neu-input" value={selectedProductId || ""} onChange={e => setSelectedProductId(e.target.value)}>
              <option value="">— เลือก —</option>
              {availableProducts.map(p => <option key={p.id} value={p.id}>{p.name} ({fmtTHB(p.price)})</option>)}
            </select>
          </Field>

          {selectedProduct && (
            <div style={{ padding: 14, borderRadius: 14, boxShadow: "var(--neu-in-sm)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                <span>ราคาเต็ม</span><span className="mono">{fmtTHB(selectedProduct.price)}</span>
              </div>
              <Field label={`ส่วนลด Telesales (สูงสุด ฿${selectedProduct.telesalesDiscount})`}>
                <input type="range" min={0} max={selectedProduct.telesalesDiscount} value={discount} onChange={e => setDiscount(Number(e.target.value))} style={{ width: "100%" }} />
                <div className="mono" style={{ textAlign: "right", color: "var(--danger)", fontWeight: 600 }}>-{fmtTHB(discount)}</div>
              </Field>
              <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 10, borderTop: "1px solid var(--line)", fontSize: 16, fontWeight: 700 }}>
                <span>ยอดสุทธิ</span><span className="mono" style={{ color: "var(--accent)" }}>{fmtTHB(selectedProduct.price - discount)}</span>
              </div>
            </div>
          )}

          <button className="neu-btn primary" disabled={!selectedProductId} onClick={closeSale} style={{ justifyContent: "center", padding: 14, fontSize: 15 }}>
            ✓ คีย์ปิดการขาย
          </button>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="neu-btn" style={{ flex: 1, justifyContent: "center" }} onClick={() => { YJ.actions.rejectLead(lead.id, "ลูกค้าไม่สนใจอัพเซลล์"); toast.push("บันทึก: ลูกค้าไม่สนใจ"); }}>ลูกค้าไม่สนใจ</button>
            <button className="neu-btn" style={{ flex: 1, justifyContent: "center" }} onClick={() => { YJ.actions.assignLead(lead.id, "Agent-021"); toast.push("เพิ่มจำนวนครั้งโทร"); }}>นัดโทรใหม่</button>
          </div>
        </div>
      </Section>
    </div>
  );
}

function IntegrationView({ toast }) {
  const s = YJ.useStore();
  const [url, setUrl] = useState(s.settings.webhookUrl);
  const [showToken, setShowToken] = useState(false);

  const regen = () => {
    const t = "yjm_live_" + Math.random().toString(36).slice(2, 14);
    YJ.actions.updateSettings({ apiToken: t });
    toast.push("Token ใหม่ถูกสร้าง — Save ที่ฝั่ง Nice Call ด้วย");
  };

  return (
    <>
      <Section title="Webhook URL" sub="YJmall จะยิงสถานะออเดอร์ใหม่มาที่ URL นี้แบบเรียลไทม์">
        <div style={{ display: "flex", gap: 8 }}>
          <input className="neu-input mono" value={url} onChange={e => setUrl(e.target.value)} />
          <button className="neu-btn primary" onClick={() => { YJ.actions.updateSettings({ webhookUrl: url }); toast.push("บันทึก URL"); }}>บันทึก</button>
        </div>
        <div style={{ marginTop: 14, padding: 12, borderRadius: 12, boxShadow: "var(--neu-in-sm)", fontSize: 11, color: "var(--ink-2)", fontFamily: "JetBrains Mono, monospace" }}>
          POST /yjmall/webhooks/v1<br/>
          Content-Type: application/json<br/>
          {`{`}<br/>
          &nbsp;&nbsp;"event": "order.maai1.created",<br/>
          &nbsp;&nbsp;"order_id": "o20250519_...",<br/>
          &nbsp;&nbsp;"customer": {`{ "name": "...", "phone": "..." }`},<br/>
          &nbsp;&nbsp;"product_id": "p4",<br/>
          &nbsp;&nbsp;"broker_id": "br3"<br/>
          {`}`}
        </div>
      </Section>

      <Section title="API Token" sub="ใช้สำหรับยิงข้อมูลกลับเข้า YJmall เมื่อปิดยอด">
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <div className="neu-input mono" style={{ flex: 1, padding: 12 }}>{showToken ? s.settings.apiToken : "•".repeat(s.settings.apiToken.length)}</div>
          <button className="neu-btn" onClick={() => setShowToken(!showToken)}>{showToken ? "ซ่อน" : "แสดง"}</button>
          <button className="neu-btn" onClick={() => { navigator.clipboard?.writeText(s.settings.apiToken); toast.push("คัดลอกแล้ว"); }}><Ico.copy /></button>
          <button className="neu-btn danger" onClick={regen}>สร้างใหม่</button>
        </div>
      </Section>

      <Section title="Event ที่ส่ง" sub="ทีมไอที Nice Call & YJmall ต้อง handle event เหล่านี้">
        <table className="neu-table">
          <thead><tr><th>Event</th><th>Direction</th><th>Payload</th></tr></thead>
          <tbody>
            {[
              ["order.maai1.created", "YJmall → Nice Call", "ลูกค้าสั่งซื้อไม้ 1 — เปิดลีดใน Pool"],
              ["lead.assigned", "Nice Call → YJmall", "Agent รับเคสไปโทร"],
              ["order.maai2.closed", "Nice Call → YJmall", "ปิดยอดอัพเซลล์สำเร็จ — แจ้ง house brand flag"],
              ["lead.rejected", "Nice Call → YJmall", "ลูกค้าไม่สนใจ / ติดต่อไม่ได้"],
              ["order.maai3+.detected", "YJmall → Nice Call", "ลูกค้าซื้อซ้ำ ปีถัดไป — ปันส่วนกลับให้นายหน้าเดิม"],
            ].map(([ev, dir, desc]) => (
              <tr key={ev}><td className="mono">{ev}</td><td>{dir}</td><td style={{ color: "var(--ink-2)" }}>{desc}</td></tr>
            ))}
          </tbody>
        </table>
      </Section>
    </>
  );
}

window.PortalD = PortalD;