// Portal A.3 — Support & Admin
function PortalASupport() {
  const s = YJ.useStore();
  const toast = useToast();
  const confirm = useConfirm();
  const [view, setView] = useState("vendors");
  const [editBrand, setEditBrand] = useState(null);
  const [openTicket, setOpenTicket] = useState(null);
  const [addBrandOpen, setAddBrandOpen] = useState(false);

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>ฝ่ายซัพพอร์ทแพลตฟอร์ม</h1>
          <div className="sub">ช่วยเหลือแบรนด์, นายหน้า, ลูกค้า · จัดการ Affiliate templates · Ticketing</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 24 }}>
        <SubTabs value={view} onChange={setView} items={[
          { id: "vendors", label: "Vendor Management", ico: "VM" },
          { id: "affiliate", label: "Affiliate Control", ico: "AC" },
          { id: "tickets", label: "Customer Support", ico: "CS" },
        ]} />

        <div style={{ display: "grid", gap: 18 }}>
          {view === "vendors" && (
            <Section
              title="ร้านค้าคู่ค้า (Brand Partners)"
              sub="อนุมัติร้านใหม่ ตรวจเอกสาร เปิด/ปิดสถานะ"
              right={<button className="neu-btn primary" onClick={() => setAddBrandOpen(true)}>+ สร้างร้านใหม่</button>}
            >
              <table className="neu-table">
                <thead><tr><th>แบรนด์</th><th>หมวด</th><th>GP</th><th>บัญชี</th><th>เอกสาร</th><th>เข้าร่วม</th><th>สถานะ</th><th></th></tr></thead>
                <tbody>
                  {s.brands.map(b => (
                    <tr key={b.id} className="row-hover">
                      <td>
                        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                          <div style={{ width: 32, height: 32, borderRadius: 9, background: b.isHouse ? "linear-gradient(135deg,var(--accent),var(--accent-2))" : "var(--accent-soft)", color: b.isHouse ? "#fff" : "var(--accent)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 13 }}>{b.name.slice(0, 1)}</div>
                          <div>
                            <div style={{ fontWeight: 500 }}>{b.name}</div>
                            {b.isHouse && <span className="pill" style={{ fontSize: 10 }}>House Brand</span>}
                          </div>
                        </div>
                      </td>
                      <td>{b.category}</td>
                      <td className="mono">{b.gp}%</td>
                      <td className="mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>{b.bankAcc}</td>
                      <td style={{ fontSize: 12, color: "var(--ink-2)" }}>{b.regDoc}</td>
                      <td style={{ fontSize: 12, color: "var(--ink-2)" }}>{fmtDate(b.joined)}</td>
                      <td>
                        {b.status === "active" && <span className="pill ok"><span className="dot ok"></span>เปิดใช้งาน</span>}
                        {b.status === "pending" && <span className="pill warn"><span className="dot warn"></span>รออนุมัติ</span>}
                        {b.status === "suspended" && <span className="pill danger"><span className="dot danger"></span>ระงับ</span>}
                      </td>
                      <td>
                        <div style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
                          {b.status === "pending" && (
                            <button className="neu-btn sm primary" onClick={() => { YJ.actions.approveBrand(b.id); toast.push("อนุมัติ " + b.name); }}>อนุมัติ</button>
                          )}
                          <button className="neu-btn sm" onClick={() => setEditBrand(b)}>แก้ไข</button>
                          {!b.isHouse && (
                            <button className="neu-btn sm" onClick={() => YJ.actions.toggleBrandStatus(b.id)}>{b.status === "active" ? "ระงับ" : "เปิด"}</button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Section>
          )}

          {view === "affiliate" && (
            <>
              <Section title="Templates หน้าดีไซน์ Affiliate Landing">
                <div className="grid cols-3">
                  {s.affiliateTemplates.map(t => (
                    <div key={t.id} style={{ padding: 16, borderRadius: 16, boxShadow: "var(--neu-out-sm)" }}>
                      <div className="skeleton-img" style={{ height: 110, marginBottom: 12 }}>{t.name} preview</div>
                      <div style={{ fontWeight: 600 }}>{t.name}</div>
                      <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{t.category} · ใช้แล้ว {t.uses} ครั้ง</div>
                      <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
                        <button className="neu-btn sm">ดูตัวอย่าง</button>
                        <button className="neu-btn sm">แก้ไข</button>
                      </div>
                    </div>
                  ))}
                  <div style={{ padding: 16, borderRadius: 16, boxShadow: "var(--neu-in-sm)", display: "grid", placeItems: "center", color: "var(--ink-3)", minHeight: 200 }}>
                    <div style={{ textAlign: "center" }}>
                      <div style={{ fontSize: 24 }}>+</div>
                      <div style={{ fontSize: 13 }}>เพิ่ม Template ใหม่</div>
                    </div>
                  </div>
                </div>
              </Section>

              <Section title="ระบบสแกนคำหยาบ / โพสต์ผิดกฎ" sub={`พบ ${s.flaggedPosts.filter(p => p.status === "pending").length} โพสต์ที่ต้องตรวจสอบ`}>
                <div style={{ display: "grid", gap: 10 }}>
                  {s.flaggedPosts.map(p => {
                    const broker = s.brokers.find(b => b.id === p.brokerId);
                    return (
                      <div key={p.id} style={{ padding: 16, borderRadius: 14, boxShadow: "var(--neu-in-sm)", display: "grid", gridTemplateColumns: "32px 1fr auto", gap: 12, alignItems: "center" }}>
                        <div style={{ width: 32, height: 32, borderRadius: 9, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", fontWeight: 700 }}>{broker?.avatar || "?"}</div>
                        <div>
                          <div style={{ fontSize: 13 }}>{broker?.name}</div>
                          <div style={{ fontSize: 12, color: "var(--ink-2)", margin: "4px 0" }}>"{p.excerpt}"</div>
                          <div style={{ fontSize: 11, color: "var(--danger)" }}>เหตุผล: {p.reason} · {fmtRelTime(p.reportedAt)}</div>
                        </div>
                        <div style={{ display: "flex", gap: 6 }}>
                          {p.status === "pending" ? (
                            <>
                              <button className="neu-btn sm danger" onClick={() => { YJ.actions.moderatePost(p.id, "removed"); toast.push("ลบโพสต์เรียบร้อย"); }}>ลบโพสต์</button>
                              <button className="neu-btn sm" onClick={() => { YJ.actions.moderatePost(p.id, "ignored"); toast.push("ไม่ถือว่าผิด"); }}>ไม่ผิด</button>
                            </>
                          ) : <span className="pill ink">จัดการแล้ว — {p.status}</span>}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </Section>
            </>
          )}

          {view === "tickets" && (
            <div style={{ display: "grid", gridTemplateColumns: openTicket ? "1fr 1fr" : "1fr", gap: 18 }}>
              <Section title="Customer Support Tickets" sub={`${s.tickets.filter(t => t.status !== "closed").length} เคสรอจัดการ`}>
                <div style={{ display: "grid", gap: 10 }}>
                  {s.tickets.map(t => (
                    <div key={t.id} onClick={() => setOpenTicket(t.id)}
                      style={{ padding: 14, borderRadius: 14, boxShadow: openTicket === t.id ? "var(--neu-in-sm)" : "var(--neu-out-sm)", cursor: "pointer", display: "grid", gridTemplateColumns: "1fr auto", gap: 10 }}>
                      <div>
                        <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 4 }}>
                          {t.priority === "high" && <span className="pill danger">High</span>}
                          {t.priority === "medium" && <span className="pill warn">Medium</span>}
                          {t.priority === "low" && <span className="pill ink">Low</span>}
                          <span className="pill">{t.category}</span>
                          {t.status === "open" && <span className="pill"><span className="dot live"></span>เปิด</span>}
                          {t.status === "in_progress" && <span className="pill warn">กำลังจัดการ</span>}
                          {t.status === "closed" && <span className="pill ok">ปิดแล้ว</span>}
                        </div>
                        <div style={{ fontWeight: 600, fontSize: 14 }}>{t.subject}</div>
                        <div style={{ fontSize: 12, color: "var(--ink-3)" }}>โดย {t.openedBy} · {fmtRelTime(t.createdAt)}</div>
                      </div>
                      <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{t.messages.length} ข้อความ</div>
                    </div>
                  ))}
                </div>
              </Section>

              {openTicket && (
                <TicketDetail
                  ticket={s.tickets.find(t => t.id === openTicket)}
                  onClose={() => setOpenTicket(null)}
                  onReply={(text) => { YJ.actions.replyTicket(openTicket, text, "support"); toast.push("ส่งข้อความเรียบร้อย"); }}
                  onResolve={async () => {
                    const ok = await confirm.ask({ title: "ปิดเคสนี้?", body: "ลูกค้าจะได้รับอีเมลแจ้งเตือนว่าเคสปิดแล้ว", confirmLabel: "ปิดเคส" });
                    if (ok) { YJ.actions.closeTicket(openTicket); toast.push("ปิดเคสแล้ว"); }
                  }}
                />
              )}
            </div>
          )}
        </div>
      </div>

      {editBrand && <EditBrandModal brand={editBrand} onClose={() => setEditBrand(null)} onSave={(patch) => {
        YJ.setState(st => ({ ...st, brands: st.brands.map(b => b.id === editBrand.id ? { ...b, ...patch } : b) }));
        toast.push("บันทึก " + editBrand.name);
        setEditBrand(null);
      }} />}

      {addBrandOpen && <AddBrandModal onClose={() => setAddBrandOpen(false)} onAdd={(b) => {
        YJ.actions.addBrand(b);
        toast.push("เพิ่มร้านค้า " + b.name);
        setAddBrandOpen(false);
      }} />}
      {confirm.node}
    </div>
  );
}

function TicketDetail({ ticket, onClose, onReply, onResolve }) {
  const [text, setText] = useState("");
  if (!ticket) return null;
  return (
    <Section
      title={ticket.subject}
      sub={`โดย ${ticket.openedBy} · ${ticket.category}`}
      right={<button className="neu-btn ghost sm" onClick={onClose}>✕</button>}
    >
      <div style={{ maxHeight: 380, overflow: "auto", padding: 4, display: "grid", gap: 10, marginBottom: 14 }}>
        {ticket.messages.map((m, i) => (
          <div key={i} style={{
            padding: 12, borderRadius: 12,
            background: m.from === "support" ? "linear-gradient(135deg,var(--accent),var(--accent-2))" : "var(--bg)",
            color: m.from === "support" ? "#fff" : "var(--ink)",
            boxShadow: m.from === "support" ? "none" : "var(--neu-in-sm)",
            alignSelf: m.from === "support" ? "flex-end" : "flex-start",
            maxWidth: "80%",
            marginLeft: m.from === "support" ? "auto" : 0,
          }}>
            <div style={{ fontSize: 11, opacity: .8, textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 4 }}>{m.from}</div>
            <div style={{ fontSize: 13 }}>{m.text}</div>
            <div style={{ fontSize: 10, opacity: .7, marginTop: 4 }}>{fmtRelTime(m.at)}</div>
          </div>
        ))}
      </div>
      {ticket.status !== "closed" && (
        <>
          <textarea className="neu-input" rows={3} placeholder="ตอบกลับลูกค้า..." value={text} onChange={e => setText(e.target.value)} />
          <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
            <button className="neu-btn primary" disabled={!text.trim()} onClick={() => { onReply(text); setText(""); }}>ส่งคำตอบ</button>
            <button className="neu-btn" onClick={onResolve}>ปิดเคสนี้</button>
          </div>
        </>
      )}
    </Section>
  );
}

function EditBrandModal({ brand, onClose, onSave }) {
  const [b, setB] = useState({ ...brand });
  return (
    <Modal open onClose={onClose} title={"แก้ไข " + brand.name}
      footer={<>
        <button className="neu-btn ghost" onClick={onClose}>ยกเลิก</button>
        <button className="neu-btn primary" onClick={() => onSave(b)}>บันทึก</button>
      </>}
    >
      <div style={{ display: "grid", gap: 14 }}>
        <Field label="ชื่อร้าน"><input className="neu-input" value={b.name} onChange={e => setB({ ...b, name: e.target.value })} /></Field>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Field label="หมวด">
            <select className="neu-input" value={b.category} onChange={e => setB({ ...b, category: e.target.value })}>
              <option>ความงาม</option><option>อาหารเสริม</option><option>หอม-อโรม่า</option><option>ทั่วไป</option>
            </select>
          </Field>
          <Field label="GP (%)">
            <select className="neu-input" value={b.gp} onChange={e => setB({ ...b, gp: Number(e.target.value) })}>
              <option value={40}>40%</option><option value={50}>50%</option><option value={60}>60%</option>
            </select>
          </Field>
        </div>
        <Field label="บัญชีธนาคาร"><input className="neu-input mono" value={b.bankAcc} onChange={e => setB({ ...b, bankAcc: e.target.value })} /></Field>
        <Field label="เอกสารจดทะเบียน"><input className="neu-input" value={b.regDoc} onChange={e => setB({ ...b, regDoc: e.target.value })} /></Field>
      </div>
    </Modal>
  );
}

function AddBrandModal({ onClose, onAdd }) {
  const [b, setB] = useState({ name: "", category: "ความงาม", gp: 50, bankAcc: "", regDoc: "" });
  return (
    <Modal open onClose={onClose} title="สร้างร้านค้าใหม่"
      footer={<>
        <button className="neu-btn ghost" onClick={onClose}>ยกเลิก</button>
        <button className="neu-btn primary" disabled={!b.name} onClick={() => onAdd(b)}>เพิ่มร้าน</button>
      </>}
    >
      <div style={{ display: "grid", gap: 14 }}>
        <Field label="ชื่อร้าน"><input className="neu-input" value={b.name} onChange={e => setB({ ...b, name: e.target.value })} /></Field>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Field label="หมวด">
            <select className="neu-input" value={b.category} onChange={e => setB({ ...b, category: e.target.value })}>
              <option>ความงาม</option><option>อาหารเสริม</option><option>หอม-อโรม่า</option><option>ทั่วไป</option>
            </select>
          </Field>
          <Field label="GP (%)">
            <select className="neu-input" value={b.gp} onChange={e => setB({ ...b, gp: Number(e.target.value) })}>
              <option value={40}>40%</option><option value={50}>50%</option><option value={60}>60%</option>
            </select>
          </Field>
        </div>
        <Field label="บัญชีธนาคาร"><input className="neu-input mono" placeholder="เช่น KTB 123-4-56789" value={b.bankAcc} onChange={e => setB({ ...b, bankAcc: e.target.value })} /></Field>
        <Field label="เอกสาร"><input className="neu-input" placeholder="ภพ.20 / ปี" value={b.regDoc} onChange={e => setB({ ...b, regDoc: e.target.value })} /></Field>
      </div>
    </Modal>
  );
}

window.PortalASupport = PortalASupport;