// ==============================================
// Dealer Dashboard
// ==============================================

function DealerDashboard({ session, navigate, addToCart, setCart }) {
  const [tab, setTab] = useState("overview");

  const totalSpent = SAMPLE_QUOTATIONS.reduce((s, q) => s + q.total, 0);
  const approvedCount = SAMPLE_QUOTATIONS.filter(q => q.status === "approved").length;

  const kpis = [
    { label: "ใบเสนอราคา (12 เดือน)", value: 47, delta: "+12%", up: true, ic: "file-text" },
    { label: "ยอดสั่งซื้อสะสม (THB)", value: "฿" + fmtInt(Math.floor(totalSpent)), delta: "+24%", up: true, ic: "dollar" },
    { label: "ระดับ Dealer", value: "Gold", sub: "ส่วนลด 15% · ใกล้ Platinum", ic: "tag" },
    { label: "Credit คงเหลือ", value: "฿" + fmtInt(380000), sub: "วงเงิน ฿500,000", ic: "shield" },
  ];

  return (
    <div className="dash-layout">
      <aside className="dash-side">
        <div className="card-pad" style={{paddingBottom: 16}}>
          <div className="flex gap-12 center">
            <div className="avatar" style={{width: 40, height: 40, fontSize: 14}}>ช</div>
            <div>
              <div className="bold small">{session.name}</div>
              <div className="muted tiny">Dealer · <span style={{color: "var(--amber)", fontWeight: 600}}>Gold tier</span></div>
            </div>
          </div>
        </div>
        <h5>Dealer Portal</h5>
        <a className={tab === "overview" ? "active" : ""} onClick={() => setTab("overview")}>
          <Icon name="dashboard" size={15}/> ภาพรวม
        </a>
        <a className={tab === "quotes" ? "active" : ""} onClick={() => setTab("quotes")}>
          <Icon name="file-text" size={15}/> ใบเสนอราคา <span className="count">47</span>
        </a>
        <a className={tab === "orders" ? "active" : ""} onClick={() => setTab("orders")}>
          <Icon name="package" size={15}/> ประวัติการสั่งซื้อ <span className="count">23</span>
        </a>
        <a className={tab === "favorites" ? "active" : ""} onClick={() => setTab("favorites")}>
          <Icon name="heart" size={15}/> สั่งซื้อซ้ำเร็ว <span className="count">12</span>
        </a>
        <a className={tab === "prices" ? "active" : ""} onClick={() => setTab("prices")}>
          <Icon name="tag" size={15}/> ราคาพิเศษ Dealer
        </a>
        <h5>บัญชี</h5>
        <a><Icon name="settings" size={15}/> ตั้งค่าบัญชี</a>
        <a><Icon name="users" size={15}/> ทีมงาน</a>
        <a onClick={() => navigate("catalog")}><Icon name="external" size={15}/> ไปหน้าสินค้า</a>
      </aside>

      <main className="dash-main">
        {tab === "overview" && <>
          <h2 style={{margin: "0 0 4px"}}>สวัสดี, {session.name.replace("บริษัท ", "").replace(" จำกัด", "")}</h2>
          <p className="muted" style={{margin: "0 0 24px"}}>ภาพรวมบัญชี Dealer ของคุณประจำเดือนพฤษภาคม 2026</p>

          <div className="kpi-row">
            {kpis.map((k, i) => (
              <div className="kpi" key={i}>
                <div className="ic"><Icon name={k.ic} size={18}/></div>
                <div className="label">{k.label}</div>
                <div className="value">{k.value}</div>
                {k.delta && <div className={"delta " + (k.up ? "up" : "down")}><Icon name={k.up ? "arrow-up" : "arrow-down"} size={11}/> {k.delta} vs เดือนก่อน</div>}
                {k.sub && <div className="muted tiny mt-8">{k.sub}</div>}
              </div>
            ))}
          </div>

          <div className="chart-grid">
            <div className="card">
              <div className="card-head">
                <h3>ยอดสั่งซื้อรายเดือน (Last 6 months)</h3>
                <div className="muted small">฿000 THB</div>
              </div>
              <div className="card-body">
                <BarChart data={REVENUE_SERIES} color="#0a6e3d" height={220}/>
              </div>
            </div>

            <div className="card">
              <div className="card-head"><h3>โปรโมชั่น Dealer เดือนนี้</h3></div>
              <div className="card-body">
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  {[
                    { th: "Makita & Bosch ลดเพิ่ม 5%", d: "เมื่อสั่งซื้อยอด ฿20,000+ ภายในเดือนนี้", icon: "zap" },
                    { th: "ฟรี! กล่องเครื่องมือ", d: "ทุกการสั่งซื้อสว่าน 3 ตัวขึ้นไป", icon: "package" },
                    { th: "Cashback 3%", d: "ชำระด้วยบัตรเครดิตธนาคารกรุงเทพ", icon: "dollar" },
                  ].map((p, i) => (
                    <div key={i} style={{ display: "flex", gap: 12, padding: 12, border: "1px solid var(--ink-200)", borderRadius: 8, alignItems: "flex-start" }}>
                      <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--blue-50)", color: "var(--navy-700)", display: "grid", placeItems: "center", flex: "none" }}>
                        <Icon name={p.icon} size={16}/>
                      </div>
                      <div>
                        <div className="bold small">{p.th}</div>
                        <div className="muted tiny mt-8">{p.d}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div className="table-wrap">
            <div className="table-head">
              <h3>ใบเสนอราคาล่าสุด</h3>
              <div className="spacer"></div>
              <button className="btn btn-ghost btn-sm" onClick={() => setTab("quotes")}>ดูทั้งหมด <Icon name="chevron-right" size={12}/></button>
            </div>
            <QuotationsTable list={SAMPLE_QUOTATIONS.slice(0, 5)} onReorder={(q) => { setTab("quotes"); }}/>
          </div>
        </>}

        {tab === "quotes" && <>
          <h2 style={{margin: "0 0 4px"}}>ใบเสนอราคาของคุณ</h2>
          <p className="muted" style={{margin: "0 0 24px"}}>ใบเสนอราคาทั้งหมด 47 รายการ · สามารถสั่งซื้อซ้ำได้ในคลิกเดียว</p>
          <div className="table-wrap">
            <div className="table-head">
              <div className="flex gap-8">
                <button className="btn btn-outline btn-sm"><Icon name="filter" size={12}/> Filter</button>
                <button className="btn btn-outline btn-sm"><Icon name="calendar" size={12}/> ช่วงวันที่</button>
              </div>
              <div className="spacer"></div>
              <button className="btn btn-primary btn-sm" onClick={() => navigate("catalog")}><Icon name="plus" size={12}/> สร้างใบเสนอราคาใหม่</button>
            </div>
            <QuotationsTable list={SAMPLE_QUOTATIONS} onReorder={(q) => alert("ระบบจะเพิ่มสินค้าทั้งหมดจาก " + q.no + " ลงตะกร้า")}/>
          </div>
        </>}

        {tab === "favorites" && <>
          <h2 style={{margin: "0 0 4px"}}>รายการสั่งซื้อซ้ำเร็ว</h2>
          <p className="muted" style={{margin: "0 0 24px"}}>รายการที่คุณซื้อบ่อย เพิ่มลงตะกร้าด้วยคลิกเดียว</p>
          <div className="product-grid">
            {PRODUCTS.slice(0, 8).map(p => (
              <ProductCard key={p.id} product={p} onAdd={addToCart} onView={() => navigate("product", { id: p.id })} isDealer inCart={false}/>
            ))}
          </div>
        </>}

        {tab === "orders" && <>
          <h2 style={{margin: "0 0 24px"}}>ประวัติคำสั่งซื้อ</h2>
          <div className="table-wrap">
            <table className="data">
              <thead>
                <tr>
                  <th>เลขที่ PO</th>
                  <th>วันที่</th>
                  <th>รายการ</th>
                  <th>มูลค่า</th>
                  <th>สถานะจัดส่ง</th>
                  <th>การชำระเงิน</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {[
                  { no: "PO-2026-0114", date: "12 พ.ค.", items: 8, total: 48700, ship: "delivered", pay: "paid" },
                  { no: "PO-2026-0113", date: "10 พ.ค.", items: 14, total: 124380, ship: "in-transit", pay: "credit" },
                  { no: "PO-2026-0112", date: "06 พ.ค.", items: 6, total: 22150, ship: "preparing", pay: "paid" },
                  { no: "PO-2026-0109", date: "27 เม.ย.", items: 4, total: 9450, ship: "delivered", pay: "paid" },
                  { no: "PO-2026-0107", date: "20 เม.ย.", items: 11, total: 67320, ship: "delivered", pay: "paid" },
                ].map(o => (
                  <tr key={o.no}>
                    <td className="mono">{o.no}</td>
                    <td>{o.date}</td>
                    <td>{o.items} รายการ</td>
                    <td className="num bold">฿{fmtMoney(o.total)}</td>
                    <td>
                      {o.ship === "delivered" && <span className="chip ok"><Icon name="check" size={11}/> ส่งสำเร็จ</span>}
                      {o.ship === "in-transit" && <span className="chip info"><Icon name="truck" size={11}/> กำลังจัดส่ง</span>}
                      {o.ship === "preparing" && <span className="chip warn"><Icon name="package" size={11}/> เตรียมจัดส่ง</span>}
                    </td>
                    <td>
                      {o.pay === "paid" ? <span className="chip ok">ชำระแล้ว</span> : <span className="chip warn">Credit 30 วัน</span>}
                    </td>
                    <td><button className="btn btn-ghost btn-sm">ดู</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>}

        {tab === "prices" && <>
          <h2 style={{margin: "0 0 4px"}}>ราคาพิเศษ Dealer</h2>
          <p className="muted" style={{margin: "0 0 24px"}}>คุณได้รับส่วนลด <b style={{color:"var(--amber)"}}>15%</b> จากราคาขายปลีกทุกรายการ · Tier: Gold</p>

          <div className="card mb-24" style={{ background: "linear-gradient(135deg, #fff7e6 0%, #fef3c7 100%)", borderColor: "#f59e0b" }}>
            <div className="card-body">
              <div className="flex between center" style={{flexWrap:"wrap", gap: 16}}>
                <div>
                  <div className="bold" style={{ color: "#b45309", fontSize: 18 }}>🏆 Gold Tier · 15% off</div>
                  <div className="muted small mt-8">สั่งซื้ออีก ฿120,000 เพื่อขึ้นระดับ Platinum (-20%)</div>
                </div>
                <div style={{flex:1, maxWidth: 360}}>
                  <div style={{ height: 8, background: "white", borderRadius: 4, overflow: "hidden" }}>
                    <div style={{ width: "68%", height: "100%", background: "linear-gradient(90deg, #f59e0b, #d97706)" }}></div>
                  </div>
                  <div className="flex between tiny muted mt-8">
                    <span>Gold · ฿380K</span>
                    <span>Platinum · ฿500K</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="product-grid">
            {PRODUCTS.slice(0, 12).map(p => (
              <ProductCard key={p.id} product={p} onAdd={addToCart} onView={() => navigate("product", { id: p.id })} isDealer inCart={false}/>
            ))}
          </div>
        </>}
      </main>
    </div>
  );
}

function QuotationsTable({ list, onReorder }) {
  return (
    <table className="data">
      <thead>
        <tr>
          <th>เลขที่</th>
          <th>วันที่</th>
          <th>ลูกค้า</th>
          <th>รายการ</th>
          <th>มูลค่ารวม</th>
          <th>สถานะ</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {list.map(q => (
          <tr key={q.no}>
            <td className="mono">{q.no}</td>
            <td>{q.date}</td>
            <td>{q.customer}</td>
            <td className="num">{q.items}</td>
            <td className="num bold">฿{fmtMoney(q.total)}</td>
            <td>
              {q.status === "approved" && <span className="chip ok">อนุมัติ</span>}
              {q.status === "pending" && <span className="chip warn">รออนุมัติ</span>}
              {q.status === "expired" && <span className="chip neutral">หมดอายุ</span>}
            </td>
            <td>
              <div className="flex gap-8">
                <button className="btn btn-ghost btn-sm" title="ดู PDF"><Icon name="eye" size={13}/></button>
                <button className="btn btn-ghost btn-sm" title="ดาวน์โหลด"><Icon name="download" size={13}/></button>
                <button className="btn btn-outline btn-sm" onClick={() => onReorder(q)}>
                  <Icon name="refresh" size={12}/> สั่งซ้ำ
                </button>
              </div>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

/* ----- BAR CHART (SVG) ----- */
function BarChart({ data, color = "#0a6e3d", height = 200 }) {
  const max = Math.max(...data.map(d => d.value));
  const w = 100 / data.length;
  return (
    <svg viewBox="0 0 100 60" preserveAspectRatio="none" style={{ width: "100%", height, overflow: "visible" }}>
      {/* gridlines */}
      {[0, 15, 30, 45, 60].map(y => (
        <line key={y} x1="0" y1={y} x2="100" y2={y} stroke="#e2e8f0" strokeWidth="0.15" strokeDasharray="0.5,0.5"/>
      ))}
      {data.map((d, i) => {
        const h = (d.value / max) * 50;
        const x = i * w + 1.5;
        const bw = w - 3;
        return (
          <g key={i}>
            <rect x={x} y={55 - h} width={bw} height={h} fill={color} rx="0.6" opacity={i === data.length - 1 ? 1 : 0.85}/>
            <text x={x + bw / 2} y={59.2} fontSize="2.4" textAnchor="middle" fill="#64748b" fontFamily="Inter">{d.month}</text>
            <text x={x + bw / 2} y={55 - h - 1} fontSize="2.4" textAnchor="middle" fill="#0f172a" fontFamily="Inter" fontWeight="600">{d.value}</text>
          </g>
        );
      })}
    </svg>
  );
}

/* ----- DONUT CHART (SVG) ----- */
function DonutChart({ data, size = 180 }) {
  const total = data.reduce((s, d) => s + d.value, 0);
  let acc = 0;
  const cx = 50, cy = 50, r = 38, stroke = 16;
  const C = 2 * Math.PI * r;
  return (
    <div className="flex gap-16 center">
      <svg viewBox="0 0 100 100" style={{ width: size, height: size, transform: "rotate(-90deg)", flexShrink: 0 }}>
        <circle cx={cx} cy={cy} r={r} fill="none" stroke="#f1f5f9" strokeWidth={stroke}/>
        {data.map((d, i) => {
          const len = (d.value / total) * C;
          const offset = (acc / total) * C;
          acc += d.value;
          return (
            <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={d.color} strokeWidth={stroke}
              strokeDasharray={`${len} ${C - len}`} strokeDashoffset={-offset}/>
          );
        })}
        <text x="50" y="48" textAnchor="middle" fontSize="6" fill="#64748b" fontFamily="Inter" transform="rotate(90 50 50)">Total</text>
        <text x="50" y="56" textAnchor="middle" fontSize="9" fontWeight="700" fill="#0f172a" fontFamily="Inter" transform="rotate(90 50 50)">100%</text>
      </svg>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6 }}>
        {data.map((d, i) => (
          <div key={i} className="flex gap-8 center small">
            <span style={{ width: 10, height: 10, borderRadius: 2, background: d.color, flex: "none" }}></span>
            <span style={{ flex: 1 }}>{d.cat}</span>
            <span className="en bold">{d.value}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { DealerDashboard, BarChart, DonutChart, QuotationsTable });