// Portal A.1 — Co-Founder (Yiw & Dev Team) Executive dashboard
function PortalACofounder() {
  const s = YJ.useStore();
  const toast = useToast();
  const confirm = useConfirm();
  const [view, setView] = useState("summary");
  const [filter, setFilter] = useState("all"); // all | general | house

  const gmvDay = YJ.select.gmv(s, 1);
  const gmvMonth = YJ.select.gmv(s, 30);
  const gmvYear = YJ.select.gmv(s, 365);
  const byMaai = YJ.select.byMaai(s);
  const hb = YJ.select.houseBrandShare(s);
  const settlement = s.settlements[0];

  const filteredOrders = useMemo(() => {
    if (filter === "all") return s.orders;
    return s.orders.filter(o => {
      const b = s.brands.find(br => br.id === o.brandId);
      return filter === "house" ? b?.isHouse : !b?.isHouse;
    });
  }, [s.orders, s.brands, filter]);

  const filteredByMaai = useMemo(() => {
    const t = { 1: 0, 2: 0, 3: 0, 4: 0 };
    filteredOrders.forEach(o => { t[o.maai] = (t[o.maai] || 0) + o.amount; });
    return t;
  }, [filteredOrders]);

  // Build last-30-days bars
  const dayBars = useMemo(() => {
    const arr = Array.from({ length: 30 }, () => 0);
    const now = Date.now();
    s.orders.forEach(o => {
      const idx = 29 - Math.floor((now - o.createdAt) / 86400000);
      if (idx >= 0 && idx < 30) arr[idx] += o.amount;
    });
    return arr;
  }, [s.orders]);

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>หุ้นส่วนผู้ก่อตั้ง — Executive Summary</h1>
          <div className="sub">ภาพรวมสุขภาพธุรกิจ และสถานะการเงินรวมเพื่อนำไปปันผลหุ้นส่วน (พี่ยิว {s.settings.coFounderSplit.yiw}% : Dev Team {s.settings.coFounderSplit.dev}%)</div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <span className="pill ok"><span className="dot live"></span> Live</span>
          <span className="pill ink">{new Date().toLocaleDateString("th-TH", { day: "2-digit", month: "long", year: "numeric" })}</span>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 24 }}>
        <SubTabs value={view} onChange={setView} items={[
          { id: "summary", label: "Executive Summary", ico: "ES" },
          { id: "revenue", label: "Revenue Streams", ico: "RS" },
          { id: "settlement", label: "Settlement", ico: "ST" },
        ]} />

        <div style={{ display: "grid", gap: 18 }}>
          {view === "summary" && (
            <>
              <div className="grid cols-4">
                <Stat label="GMV วันนี้" value={fmtTHB(gmvDay)} delta="+12.4% MoM" />
                <Stat label="GMV เดือนนี้" value={fmtTHB(gmvMonth)} delta="+8.1%" />
                <Stat label="ปันผลพร้อมโอน" value={fmtTHB(Math.max(0, settlement.netProfit))} accent />
                <Stat label="Active Brokers / Sellers" value={`${YJ.select.activeBrokers(s)} / ${YJ.select.activeSellers(s)}`} sub="ใน 30 วันล่าสุด" />
              </div>

              <Section title="GMV ย้อนหลัง 30 วัน" sub={`รวม ${fmtTHB(gmvMonth)} · GMV ปีนี้ ${fmtTHB(gmvYear)}`}>
                <HeatRow data={dayBars} />
                <div style={{ marginTop: 14, fontSize: 12, color: "var(--ink-3)", display: "flex", justifyContent: "space-between" }}>
                  <span>30 วันก่อน</span><span>วันนี้</span>
                </div>
              </Section>

              <div className="grid cols-2">
                <Section title="Top Brokers" sub="วัดจากค่าคอมสะสม">
                  <div style={{ display: "grid", gap: 10 }}>
                    {YJ.select.topBrokers(s, 5).map(({ broker, earn }, i) => (
                      <div key={broker.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", borderRadius: 14, boxShadow: "var(--neu-in-sm)" }}>
                        <div style={{ width: 32, height: 32, borderRadius: 10, background: i === 0 ? "linear-gradient(135deg,#ffd54a,#f1a721)" : "var(--accent-soft)", color: i === 0 ? "#7a4a00" : "var(--accent)", display: "grid", placeItems: "center", fontWeight: 700 }}>{broker.avatar}</div>
                        <div style={{ flex: 1 }}>
                          <div style={{ fontWeight: 500, fontSize: 13 }}>{broker.name}</div>
                          <div style={{ fontSize: 11, color: "var(--ink-3)" }}>Level {broker.level}</div>
                        </div>
                        <div className="mono" style={{ fontWeight: 600 }}>{fmtTHB(earn)}</div>
                      </div>
                    ))}
                  </div>
                </Section>

                <Section title="สุขภาพธุรกิจ" sub="สัญญาณเบื้องต้น">
                  <div style={{ display: "grid", gap: 12 }}>
                    <BarRow label="Conversion" value={3.8} max={10} sub="3.8%" />
                    <BarRow label="Avg. Order Value" value={780} max={1500} sub={fmtTHB(780)} />
                    <BarRow label="Repeat Rate (ไม้3+4)" value={42} max={100} sub="42%" />
                    <BarRow label="House Brand Mix" value={(hb.house / Math.max(1, hb.total)) * 100} max={100} sub={Math.round(hb.house / Math.max(1, hb.total) * 100) + "%"} />
                  </div>
                </Section>
              </div>
            </>
          )}

          {view === "revenue" && (
            <>
              <Section
                title="Revenue Stream Analytics"
                sub="กราฟแยกรายได้ตามไม้ 1-4 และสัดส่วน House Brand vs General"
                right={
                  <div style={{ display: "flex", gap: 6, padding: 4, borderRadius: 10, boxShadow: "var(--neu-in-sm)" }}>
                    {[["all", "ทั้งหมด"], ["general", "แบรนด์ทั่วไป"], ["house", "House Brand"]].map(([k, l]) => (
                      <button key={k} className={"neu-btn sm " + (filter === k ? "primary" : "ghost")} onClick={() => setFilter(k)}>{l}</button>
                    ))}
                  </div>
                }
              >
                <div style={{ display: "grid", gap: 14 }}>
                  {[
                    { key: 1, label: "ไม้ 1 — ลิงก์แชร์", color: "var(--accent)" },
                    { key: 2, label: "ไม้ 2 — อัพเซลล์", color: "#7b61ff" },
                    { key: 3, label: "ไม้ 3 — ซื้อซ้ำปี 1", color: "#18a96a" },
                    { key: 4, label: "ไม้ 4 — ซื้อซ้ำปี 2+", color: "#e8a534" },
                  ].map(r => {
                    const total = Object.values(filteredByMaai).reduce((a, b) => a + b, 0) || 1;
                    const v = filteredByMaai[r.key];
                    return (
                      <div key={r.key} style={{ display: "grid", gridTemplateColumns: "170px 1fr 130px 60px", gap: 12, alignItems: "center", fontSize: 13 }}>
                        <div>{r.label}</div>
                        <div className="bar-track"><div className="bar-fill" style={{ width: ((v / total) * 100) + "%", background: r.color }}></div></div>
                        <div className="mono" style={{ textAlign: "right", fontWeight: 600 }}>{fmtTHB(v)}</div>
                        <div className="mono" style={{ textAlign: "right", color: "var(--ink-3)" }}>{((v / total) * 100).toFixed(1)}%</div>
                      </div>
                    );
                  })}
                </div>
              </Section>

              <div className="grid cols-2">
                <Section title="House Brand vs General" sub="ฐาน Zero COGS = ต้นทุนต่ำ กำไรสูง">
                  <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
                    <Donut size={180} slices={[
                      { value: hb.house, color: "var(--accent)" },
                      { value: hb.general, color: "#c9d4ec" },
                    ]} />
                    <div style={{ display: "grid", gap: 12 }}>
                      <div>
                        <div style={{ fontSize: 12, color: "var(--ink-3)" }}>House Brand (Nice Care)</div>
                        <div className="mono" style={{ fontSize: 22, fontWeight: 700, color: "var(--accent)" }}>{fmtTHB(hb.house)}</div>
                        <div style={{ fontSize: 11, color: "var(--ink-3)" }}>กำไรขั้นต้นประมาณ 100% (Zero COGS)</div>
                      </div>
                      <div>
                        <div style={{ fontSize: 12, color: "var(--ink-3)" }}>General Brands</div>
                        <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>{fmtTHB(hb.general)}</div>
                        <div style={{ fontSize: 11, color: "var(--ink-3)" }}>หัก GP 40-60% ตามแบรนด์</div>
                      </div>
                    </div>
                  </div>
                </Section>

                <Section title="GMV รายไม้" sub="ตัวเลขปัจจุบัน หลัง filter">
                  <div className="grid cols-2" style={{ gap: 12 }}>
                    {[1, 2, 3, 4].map(n => (
                      <div key={n} style={{ padding: 16, borderRadius: 14, boxShadow: "var(--neu-in-sm)" }}>
                        <div style={{ fontSize: 12, color: "var(--ink-3)" }}>ไม้ {n}</div>
                        <div className="mono" style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>{fmtTHB(filteredByMaai[n])}</div>
                        <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>{filteredOrders.filter(o => o.maai === n).length} ออเดอร์</div>
                      </div>
                    ))}
                  </div>
                </Section>
              </div>
            </>
          )}

          {view === "settlement" && (
            <SettlementView settlement={settlement} confirm={confirm} toast={toast} />
          )}
        </div>
      </div>
      {confirm.node}
    </div>
  );
}

function SettlementView({ settlement, confirm, toast }) {
  const s = YJ.useStore();
  const grossShare = settlement.gmv * 0.45; // ตัวอย่าง: บริษัท YJmall ได้ส่วนนี้
  const yiwShare = settlement.netProfit * s.settings.coFounderSplit.yiw / 100;
  const devShare = settlement.netProfit * s.settings.coFounderSplit.dev / 100;
  const payRef = useRef(null);

  const handlePay = async () => {
    if (settlement.paidOut) return;
    const ok = await confirm.ask({
      title: "ยืนยันปันผลสุทธิ",
      body: `จะปันผล ${fmtTHB(settlement.netProfit)} แบบ ${s.settings.coFounderSplit.yiw}:${s.settings.coFounderSplit.dev} เข้าบัญชีหุ้นส่วนทันที — โปร่งใส บันทึกใน Audit log`,
      confirmLabel: "ยืนยันโอน",
    });
    if (!ok) return;
    YJ.actions.payDividend(settlement.id);
    if (payRef.current) shootCoins(payRef.current, 12);
    toast.push("โอนปันผลสำเร็จ — บันทึกใน Audit log", "ok");
  };

  return (
    <div style={{ display: "grid", gap: 18 }}>
      <Section title="Co-Founder Settlement" sub={`ช่วง ${fmtDate(settlement.periodStart)} – ${fmtDate(settlement.periodEnd)}`}>
        <div className="grid cols-4">
          <Stat label="GMV รวม" value={fmtTHB(settlement.gmv)} />
          <Stat label="ส่วนแบ่งของแพลตฟอร์ม (~45%)" value={fmtTHB(grossShare)} />
          <Stat label="ค่าใช้จ่ายรวม" value={fmtTHB(settlement.fixedCost + settlement.gatewayFee + settlement.marketingSpent)} />
          <Stat label="กำไรสุทธิ" value={fmtTHB(settlement.netProfit)} accent />
        </div>
      </Section>

      <div className="grid cols-2">
        <Section title="ค่าใช้จ่ายคงที่ (Fixed)">
          <div style={{ display: "grid", gap: 10 }}>
            {[
              ["Server / Infrastructure", 38000],
              ["Nice Call API + CRM License", 22000],
              ["พนักงานซัพพอร์ท (4 คน)", 26000],
            ].map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderRadius: 12, boxShadow: "var(--neu-in-sm)" }}>
                <span>{k}</span><span className="mono">{fmtTHB(v)}</span>
              </div>
            ))}
            <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", fontWeight: 600 }}>
              <span>รวม</span><span className="mono">{fmtTHB(settlement.fixedCost)}</span>
            </div>
          </div>
        </Section>
        <Section title="ค่าใช้จ่ายผันแปร (Variable)">
          <div style={{ display: "grid", gap: 10 }}>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderRadius: 12, boxShadow: "var(--neu-in-sm)" }}>
              <span>ค่าธรรมเนียม Payment Gateway (2.5%)</span>
              <span className="mono">{fmtTHB(settlement.gatewayFee)}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderRadius: 12, boxShadow: "var(--neu-in-sm)" }}>
              <span>ค่าแคมเปญการตลาด</span>
              <span className="mono">{fmtTHB(settlement.marketingSpent)}</span>
            </div>
          </div>
        </Section>
      </div>

      <Section title="ปุ่มกดปันผล (Transparency Payout)" sub="กดครั้งเดียว — บันทึก audit log ปฏิเสธไม่ได้">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
          <div style={{ padding: 18, borderRadius: 18, boxShadow: "var(--neu-in-sm)" }}>
            <div style={{ fontSize: 12, color: "var(--ink-3)" }}>พี่ยิว — {s.settings.coFounderSplit.yiw}%</div>
            <div className="mono" style={{ fontSize: 24, fontWeight: 700, marginTop: 4 }}>{fmtTHB(yiwShare)}</div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 4 }}>SCB xxx-x-x4521</div>
          </div>
          <div style={{ padding: 18, borderRadius: 18, boxShadow: "var(--neu-in-sm)" }}>
            <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Dev Team — {s.settings.coFounderSplit.dev}%</div>
            <div className="mono" style={{ fontSize: 24, fontWeight: 700, marginTop: 4 }}>{fmtTHB(devShare)}</div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 4 }}>KBank xxx-x-x9831</div>
          </div>
          <div style={{ padding: 18, borderRadius: 18, background: "linear-gradient(135deg, var(--accent), var(--accent-2))", color: "#fff", display: "grid", gap: 10 }}>
            <div style={{ fontSize: 12, opacity: .8 }}>สถานะ</div>
            <div style={{ fontSize: 18, fontWeight: 600 }}>{settlement.paidOut ? "✓ โอนแล้ว" : "พร้อมปันผล"}</div>
            <button ref={payRef} className="neu-btn" style={{ background: "#fff", color: "var(--accent)", justifyContent: "center" }} onClick={handlePay} disabled={settlement.paidOut}>
              {settlement.paidOut ? "ดู Audit log" : "ปันผลโอนเงินออก"}
            </button>
          </div>
        </div>
        {settlement.paidOut && (
          <div style={{ marginTop: 16, padding: 14, borderRadius: 12, boxShadow: "var(--neu-in-sm)", fontSize: 12, color: "var(--ink-2)" }}>
            <span className="mono">[{fmtDate(settlement.paidAt)} {fmtTime(settlement.paidAt)}]</span> โอนเงินปันผลรอบ {fmtDate(settlement.periodEnd)} สำเร็จ — TxRef: YJM-{settlement.id}-{settlement.paidAt}
          </div>
        )}
      </Section>
    </div>
  );
}

window.PortalACofounder = PortalACofounder;