/* Quotation.jsx — ใบเสนอราคา (รายการ · ตัวสร้าง · เอกสารพิมพ์) */
const { useState: qUseState, useMemo: qUseMemo, useRef: qUseRef } = React;

/* คำนวณยอดของใบเสนอราคา */
function calcQuote(q, s) {
  const sub = q.lines.reduce((a, l) => a + Number(l.qty || 0) * Number(l.price || 0), 0);
  const discount = sub * (Number(q.discountPct || 0) / 100);
  const afterDisc = sub - discount;
  const vat = q.vat ? afterDisc * 0.07 : 0;
  const grand = afterDisc + vat;
  return { sub, discount, afterDisc, vat, grand };
}

/* ============ เอกสารใบเสนอราคา (พิมพ์ได้) ============ */
function QuoteDocument({ q }) {
  const s = useStore();
  const c = s.company;
  const t = calcQuote(q, s);
  const created = new Date(q.createdAt);
  const valid = new Date(created.getTime() + (q.validDays || 0) * 86400000);
  const dstr = (d) => `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear() + 543}`;

  return (
    <div className="quote-paper">
      {/* หัวเอกสาร */}
      <div className="q-head">
        <div className="q-company">
          {c.logo
            ? <img src={c.logo} alt="logo" className="q-logo" />
            : <div className="q-logo q-logo-ph"><Icons.layers size={26}/></div>}
          <div>
            <div className="q-cname">{c.name}</div>
            <div className="q-cmeta">{c.address}</div>
            <div className="q-cmeta">โทร. {c.phone}{c.email ? ` · ${c.email}` : ""}</div>
            <div className="q-cmeta">เลขประจำตัวผู้เสียภาษี {c.taxId}</div>
          </div>
        </div>
        <div className="q-title">
          <div className="q-title-th">ใบเสนอราคา</div>
          <div className="q-title-en">QUOTATION</div>
          <table className="q-meta-tbl">
            <tbody>
              <tr><td>เลขที่</td><td className="num">{q.id}</td></tr>
              <tr><td>วันที่</td><td className="num">{dstr(created)}</td></tr>
              <tr><td>ยืนราคาถึง</td><td className="num">{dstr(valid)}</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* ลูกค้า */}
      <div className="q-cust">
        <div className="q-cust-label">เสนอแด่</div>
        <div className="q-cust-name">{q.customer}</div>
        <div className="q-cust-meta">
          {q.attn && <span>เรียน: {q.attn}</span>}
          {q.project && <span>โครงการ: {q.project}</span>}
        </div>
      </div>

      {/* ตารางรายการ */}
      <table className="q-items">
        <thead>
          <tr>
            <th style={{ width: 38 }}>ลำดับ</th>
            <th>รายการ</th>
            <th style={{ width: 70 }} className="t-right">จำนวน</th>
            <th style={{ width: 56 }}>หน่วย</th>
            <th style={{ width: 100 }} className="t-right">ราคา/หน่วย</th>
            <th style={{ width: 110 }} className="t-right">จำนวนเงิน</th>
          </tr>
        </thead>
        <tbody>
          {q.lines.map((l, i) => {
            const it = s.itemOf(l.sku);
            return (
              <tr key={i}>
                <td className="t-center num">{i + 1}</td>
                <td><div style={{ fontWeight: 600 }}>{it ? it.name : l.sku}</div><div className="num" style={{ fontSize: 11, color: "var(--muted-2)" }}>{l.sku}</div></td>
                <td className="t-right num">{s.fmt(l.qty)}</td>
                <td>{it ? it.unit : ""}</td>
                <td className="t-right num">{s.fmtMoney(l.price)}</td>
                <td className="t-right num">{s.fmtMoney(Number(l.qty) * Number(l.price))}</td>
              </tr>
            );
          })}
          {Array.from({ length: Math.max(0, 4 - q.lines.length) }).map((_, i) => (
            <tr key={"e" + i} className="q-empty-row"><td colSpan={6}>&nbsp;</td></tr>
          ))}
        </tbody>
      </table>

      {/* สรุปยอด */}
      <div className="q-foot">
        <div className="q-note">
          {q.note && <React.Fragment><div className="q-note-label">หมายเหตุ</div><div>{q.note}</div></React.Fragment>}
          <div className="q-baht">({bahtText(t.grand)})</div>
        </div>
        <table className="q-totals">
          <tbody>
            <tr><td>รวมเป็นเงิน</td><td className="num">{s.fmtMoney(t.sub)}</td></tr>
            {q.discountPct > 0 && <tr><td>ส่วนลด {q.discountPct}%</td><td className="num">−{s.fmtMoney(t.discount)}</td></tr>}
            {q.vat && <tr><td>ภาษีมูลค่าเพิ่ม 7%</td><td className="num">{s.fmtMoney(t.vat)}</td></tr>}
            <tr className="q-grand"><td>ยอดรวมสุทธิ</td><td className="num">฿{s.fmtMoney(t.grand)}</td></tr>
          </tbody>
        </table>
      </div>

      {/* ลายเซ็น */}
      <div className="q-sign">
        <div className="q-sign-box"><div className="q-sign-line"></div>ผู้เสนอราคา<div className="q-sign-sub">{q.by || ""} · วันที่ ......./......./.......</div></div>
        <div className="q-sign-box"><div className="q-sign-line"></div>ผู้อนุมัติ / ผู้สั่งซื้อ<div className="q-sign-sub">วันที่ ......./......./.......</div></div>
      </div>
    </div>
  );
}

/* แปลงจำนวนเงินเป็นข้อความภาษาไทย */
function bahtText(num) {
  num = Math.round(num * 100) / 100;
  const txt = ["ศูนย์","หนึ่ง","สอง","สาม","สี่","ห้า","หก","เจ็ด","แปด","เก้า"];
  const pos = ["","สิบ","ร้อย","พัน","หมื่น","แสน","ล้าน"];
  function read(n) {
    let s = "", str = String(n), len = str.length;
    for (let i = 0; i < len; i++) {
      const d = +str[i], p = len - i - 1;
      if (d === 0) continue;
      if (p % 6 === 0 && p > 0) { s += read(+str.slice(0, i + 1) === 0 ? 0 : "") ; }
      if (p === 1 && d === 1) s += "สิบ";
      else if (p === 1 && d === 2) s += "ยี่สิบ";
      else if (p === 0 && d === 1 && len > 1) s += "เอ็ด";
      else s += txt[d] + pos[p % 6];
    }
    return s;
  }
  const baht = Math.floor(num);
  const satang = Math.round((num - baht) * 100);
  let words = "";
  if (baht >= 1000000) {
    words += read(Math.floor(baht / 1000000)) + "ล้าน";
    const rest = baht % 1000000;
    if (rest) words += read(rest);
  } else words += read(baht);
  words = (words || "ศูนย์") + "บาท";
  words += satang ? read(satang) + "สตางค์" : "ถ้วน";
  return words;
}

/* ============ ตัวสร้างใบเสนอราคา ============ */
function QuoteBuilder({ onSaved, onCancel }) {
  const s = useStore();
  const [customer, setCustomer] = qUseState("");
  const [attn, setAttn] = qUseState("");
  const [project, setProject] = qUseState("");
  const [validDays, setValidDays] = qUseState(15);
  const [discountPct, setDiscountPct] = qUseState(0);
  const [vat, setVat] = qUseState(true);
  const [note, setNote] = qUseState("");
  const [lines, setLines] = qUseState([{ sku: "", qty: "", price: "" }]);

  const setLine = (i, l) => setLines(ls => ls.map((x, k) => k === i ? l : x));
  const addLine = () => setLines(ls => [...ls, { sku: "", qty: "", price: "" }]);
  const rmLine = (i) => setLines(ls => ls.length > 1 ? ls.filter((_, k) => k !== i) : ls);
  const onPickItem = (i, sku) => { const it = s.itemOf(sku); setLine(i, { ...lines[i], sku, price: it ? it.price : "" }); };

  const valid = lines.filter(l => l.sku && Number(l.qty) > 0 && Number(l.price) >= 0);
  const draft = { customer, attn, project, validDays, discountPct: Number(discountPct), vat, note, lines: valid, by: s.currentUser?.name || "", createdAt: new Date().toISOString().slice(0, 16) };
  const t = calcQuote(draft, s);
  const canSave = customer.trim() && valid.length > 0;

  const save = async () => {
    const rec = await s.addQuote({ customer: customer.trim(), attn, project, validDays: Number(validDays), discountPct: Number(discountPct), vat, note, lines: valid.map(l => ({ sku: l.sku, qty: Number(l.qty), price: Number(l.price) })), by: s.currentUser?.name || "" });
    if (!rec) return;
    s.pushToast(`สร้างใบเสนอราคา ${rec.id} แล้ว`);
    onSaved(rec.id);
  };

  return (
    <div className="page fade-up" style={{ maxWidth: 1000 }}>
      <div className="page-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
        <div>
          <h2>สร้างใบเสนอราคา</h2>
          <p>เลขที่ <span className="num">{s.nextQuoteNo()}</span> · ออกในนาม {s.company.name}</p>
        </div>
        <button className="btn btn-ghost" onClick={onCancel}><Icons.chevR size={16} style={{ transform: "rotate(180deg)" }}/>กลับ</button>
      </div>

      <div style={{ display: "grid", gap: 16 }}>
        <Card>
          <SectionHead title="ข้อมูลลูกค้า" />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="tx-meta">
            <div className="field"><label>ชื่อลูกค้า / บริษัท <span style={{ color: "var(--red)" }}>*</span></label>
              <input className="input" list="cust-list" value={customer} onChange={e => setCustomer(e.target.value)} placeholder="พิมพ์หรือเลือกลูกค้า" />
              <datalist id="cust-list">{s.CUSTOMERS.map(c => <option key={c} value={c} />)}</datalist>
            </div>
            <div className="field"><label>เรียน (ผู้ติดต่อ)</label><input className="input" value={attn} onChange={e => setAttn(e.target.value)} placeholder="เช่น คุณสมชาย" /></div>
            <div className="field"><label>ชื่อโครงการ / งาน</label><input className="input" value={project} onChange={e => setProject(e.target.value)} placeholder="เช่น ต่อเติมอาคาร" /></div>
            <div className="field"><label>ยืนราคา (วัน)</label><input className="input" type="number" min="1" value={validDays} onChange={e => setValidDays(e.target.value)} /></div>
          </div>
        </Card>

        <Card>
          <SectionHead title="รายการสินค้า" sub={`${valid.length} รายการ`} right={<button className="btn btn-soft btn-sm" onClick={addLine}><Icons.plus size={16}/>เพิ่มรายการ</button>} />
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {lines.map((l, i) => {
              const it = s.itemOf(l.sku);
              return (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 90px 110px 110px 38px", gap: 10, alignItems: "start", padding: 12, border: "1px solid var(--line)", borderRadius: 12, background: "var(--surface-2)" }}>
                  <select className="select" value={l.sku} onChange={e => onPickItem(i, e.target.value)}>
                    <option value="">— เลือกสินค้า —</option>
                    {s.CATEGORIES.map(c => <optgroup label={c.name} key={c.id}>{s.ITEMS.filter(x => x.cat === c.id).map(x => <option key={x.sku} value={x.sku}>{x.name}</option>)}</optgroup>)}
                  </select>
                  <div><input className="input" type="number" min="1" placeholder="จำนวน" value={l.qty} onChange={e => setLine(i, { ...l, qty: e.target.value })} style={{ textAlign: "right" }} />{it && <div style={{ fontSize: 11.5, color: "var(--muted-2)", marginTop: 5, textAlign: "right" }}>{it.unit}</div>}</div>
                  <div><input className="input" type="number" min="0" placeholder="ราคา" value={l.price} onChange={e => setLine(i, { ...l, price: e.target.value })} style={{ textAlign: "right" }} /><div style={{ fontSize: 11.5, color: "var(--muted-2)", marginTop: 5, textAlign: "right" }}>บาท/หน่วย</div></div>
                  <div className="num" style={{ textAlign: "right", paddingTop: 10, fontWeight: 600, color: "var(--ink-2)" }}>{l.qty && l.price ? s.fmtMoney(Number(l.qty) * Number(l.price)) : "—"}</div>
                  <button className="icon-btn" style={{ width: 38, height: 40, color: "var(--muted-2)" }} onClick={() => rmLine(i)}><Icons.trash size={17}/></button>
                </div>
              );
            })}
          </div>
        </Card>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 16 }} className="dash-row">
          <Card>
            <SectionHead title="หมายเหตุ & เงื่อนไข" />
            <textarea className="input" rows="3" value={note} onChange={e => setNote(e.target.value)} placeholder="เช่น ราคารวมค่าขนส่ง / ยืนราคาตามที่ระบุ / ชำระเงินภายใน 30 วัน"></textarea>
            <div style={{ display: "flex", gap: 18, marginTop: 16, alignItems: "center", flexWrap: "wrap" }}>
              <div className="field" style={{ width: 130 }}><label>ส่วนลด (%)</label><input className="input" type="number" min="0" max="100" value={discountPct} onChange={e => setDiscountPct(e.target.value)} style={{ textAlign: "right" }} /></div>
              <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontWeight: 600, fontSize: 14, marginTop: 18 }}>
                <input type="checkbox" checked={vat} onChange={e => setVat(e.target.checked)} style={{ width: 18, height: 18, accentColor: "var(--primary-600)" }} />คิดภาษีมูลค่าเพิ่ม 7%
              </label>
            </div>
          </Card>
          <Card style={{ alignSelf: "start" }}>
            <SectionHead title="สรุปยอด" />
            <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--muted)" }}>รวมเป็นเงิน</span><span className="num">{s.fmtMoney(t.sub)}</span></div>
              {discountPct > 0 && <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--muted)" }}>ส่วนลด {discountPct}%</span><span className="num" style={{ color: "var(--red)" }}>−{s.fmtMoney(t.discount)}</span></div>}
              {vat && <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--muted)" }}>VAT 7%</span><span className="num">{s.fmtMoney(t.vat)}</span></div>}
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 10, display: "flex", justifyContent: "space-between", fontWeight: 600, fontSize: 18 }}><span>ยอดสุทธิ</span><span className="num" style={{ color: "var(--primary-700)" }}>฿{s.fmtMoney(t.grand)}</span></div>
            </div>
            <button className="btn btn-primary" style={{ width: "100%", marginTop: 18, height: 44 }} disabled={!canSave} onClick={save}><Icons.check size={18}/>บันทึกใบเสนอราคา</button>
          </Card>
        </div>
      </div>
    </div>
  );
}

/* ============ มุมมองเอกสาร + พิมพ์ ============ */
function QuoteView({ id, onBack }) {
  const s = useStore();
  const q = s.quotes.find(x => x.id === id);
  if (!q) return null;
  return (
    <div className="page fade-up">
      <div className="no-print" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18, flexWrap: "wrap", gap: 10 }}>
        <button className="btn btn-ghost" onClick={onBack}><Icons.chevR size={16} style={{ transform: "rotate(180deg)" }}/>กลับรายการ</button>
        <div style={{ display: "flex", gap: 10 }}>
          <button className="btn btn-ghost" onClick={() => { s.deleteQuote(id); onBack(); s.pushToast("ลบใบเสนอราคาแล้ว"); }} style={{ color: "var(--red)" }}><Icons.trash size={16}/>ลบ</button>
          <button className="btn btn-primary" onClick={() => window.print()}><Icons.print size={17}/>พิมพ์ / บันทึก PDF</button>
        </div>
      </div>
      <div className="quote-stage"><QuoteDocument q={q} /></div>
    </div>
  );
}

/* ============ หน้าใบเสนอราคา (รวม) ============ */
function Quotations({ go }) {
  const s = useStore();
  const [mode, setMode] = qUseState("list");  // list | build | view
  const [viewId, setViewId] = qUseState(null);

  if (mode === "build") return <QuoteBuilder onSaved={(id) => { setViewId(id); setMode("view"); }} onCancel={() => setMode("list")} />;
  if (mode === "view") return <QuoteView id={viewId} onBack={() => setMode("list")} />;

  const totalValue = s.quotes.reduce((a, q) => a + calcQuote(q, s).grand, 0);

  return (
    <div className="page fade-up">
      <div className="page-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 14 }}>
        <div><h2>ใบเสนอราคา</h2><p>ออกใบเสนอราคาในนาม {s.company.name}</p></div>
        <button className="btn btn-primary" onClick={() => setMode("build")}><Icons.plus size={17}/>สร้างใบเสนอราคา</button>
      </div>

      <div className="kpi-grid stagger" style={{ marginBottom: 18, gridTemplateColumns: "repeat(3,1fr)" }}>
        {[
          { l: "ใบเสนอราคาทั้งหมด", v: s.quotes.length, sub: "ใบ", c: "var(--primary-600)", soft: "var(--primary-soft)", ic: <Icons.report size={20}/> },
          { l: "มูลค่ารวม", v: `฿${s.fmtMoney(totalValue)}`, c: "#7c3aed", soft: "#f1ebfe", ic: <Icons.box size={20}/> },
          { l: "ออกล่าสุด", v: s.quotes[0] ? s.quotes[0].id : "—", c: "var(--green)", soft: "var(--green-soft)", ic: <Icons.calendar size={20}/> },
        ].map((k, i) => (
          <div className="kpi" key={i}><div className="k-top"><span className="k-label">{k.l}</span><span className="k-ic" style={{ background: k.soft, color: k.c }}>{k.ic}</span></div><div className="k-val num">{k.v} {k.sub && <small>{k.sub}</small>}</div></div>
        ))}
      </div>

      <Card pad={false}>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>เลขที่</th><th>ลูกค้า</th><th>โครงการ</th><th className="t-center">รายการ</th><th className="t-right">ยอดสุทธิ</th><th>ผู้ออก</th><th>วันที่</th><th></th></tr></thead>
            <tbody>
              {s.quotes.map(q => {
                const t = calcQuote(q, s);
                return (
                  <tr key={q.id} style={{ cursor: "pointer" }} onClick={() => { setViewId(q.id); setMode("view"); }}>
                    <td className="num" style={{ fontWeight: 600 }}>{q.id}</td>
                    <td style={{ maxWidth: 200 }}>{q.customer}</td>
                    <td style={{ color: "var(--muted)" }}>{q.project || "—"}</td>
                    <td className="t-center num">{q.lines.length}</td>
                    <td className="t-right num" style={{ fontWeight: 600 }}>฿{s.fmtMoney(t.grand)}</td>
                    <td style={{ color: "var(--muted)", fontSize: 13 }}>{q.by || "—"}</td>
                    <td className="num" style={{ color: "var(--muted)", fontSize: 12.5 }}>{s.fmtDate(q.createdAt)}</td>
                    <td className="t-right"><Icons.chevR size={17} style={{ color: "var(--muted-2)" }}/></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        {s.quotes.length === 0 && <Empty icon={<Icons.report size={22}/>} title="ยังไม่มีใบเสนอราคา" sub="กดปุ่ม สร้างใบเสนอราคา เพื่อเริ่มต้น" />}
      </Card>
    </div>
  );
}
window.Quotations = Quotations;