/* Calculators.jsx — เครื่องคำนวณวัสดุก่อสร้าง (เลียนแบบหน้า calculators ของ onestockhome)
   ทุกค่าตัวคูณปรับได้ เพื่อให้ตรงกับสินค้าจริงของร้าน */
const { useState: cUseState } = React;

const num = (v) => { const n = parseFloat(v); return isFinite(n) ? n : 0; };
const nf = (n, d = 2) => {
  if (!isFinite(n)) return "0";
  return new Intl.NumberFormat("th-TH", { maximumFractionDigits: d }).format(n);
};

/* การ์ดเครื่องคำนวณ */
function CalcCard({ icon, color, soft, title, sub, children }) {
  return (
    <Card pad={false} className="calc-card">
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "16px 18px", borderBottom: "1px solid var(--line)" }}>
        <span style={{ width: 40, height: 40, borderRadius: 11, background: soft, color: color, display: "grid", placeItems: "center", flex: "none" }}>{icon}</span>
        <div>
          <div style={{ fontWeight: 600, fontSize: 15 }}>{title}</div>
          {sub && <div style={{ fontSize: 12, color: "var(--muted)" }}>{sub}</div>}
        </div>
      </div>
      <div style={{ padding: 18 }}>{children}</div>
    </Card>
  );
}

function In({ label, value, onChange, type = "number", suffix, placeholder, min = "0", step = "any" }) {
  return (
    <div className="field" style={{ marginBottom: 12 }}>
      <label>{label}</label>
      <div style={{ position: "relative" }}>
        <input className="input" type={type} value={value} min={min} step={step} placeholder={placeholder}
          onChange={e => onChange(e.target.value)} style={suffix ? { paddingRight: 46, textAlign: "right" } : null} />
        {suffix && <span style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", fontSize: 12.5, color: "var(--muted-2)" }}>{suffix}</span>}
      </div>
    </div>
  );
}
function Sel({ label, value, onChange, options }) {
  return (
    <div className="field" style={{ marginBottom: 12 }}>
      <label>{label}</label>
      <select className="select" value={value} onChange={e => onChange(e.target.value)}>
        {options.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
      </select>
    </div>
  );
}
/* กล่องแสดงผลลัพธ์ */
function Out({ rows, note }) {
  return (
    <div style={{ marginTop: 4, background: "var(--primary-soft2)", border: "1px solid #e4edfb", borderRadius: 12, padding: "14px 16px" }}>
      {rows.map((r, i) => (
        <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "4px 0", borderTop: i ? "1px dashed #dbe6fb" : "none" }}>
          <span style={{ fontSize: 13.5, color: "var(--ink-2)" }}>{r.label}</span>
          <span><span className="num" style={{ fontSize: r.big ? 22 : 16, fontWeight: 700, color: "var(--primary-700)" }}>{r.value}</span> <span style={{ fontSize: 12.5, color: "var(--muted)" }}>{r.unit}</span></span>
        </div>
      ))}
      {note && <div style={{ fontSize: 11.5, color: "var(--muted-2)", marginTop: 8 }}>{note}</div>}
    </div>
  );
}

/* ========== 1) คอนกรีต ========== */
function ConcreteCalc() {
  const RATIOS = [
    { id: "1:3:5", label: "งานทั่วไป / เทพื้น (1:3:5)", c: 5.0, s: 0.55, r: 0.90 },
    { id: "1:2:4", label: "งานโครงสร้างทั่วไป (1:2:4)", c: 7.0, s: 0.45, r: 0.90 },
    { id: "1:1.5:3", label: "เสา–คาน รับน้ำหนัก (1:1.5:3)", c: 9.0, s: 0.42, r: 0.86 },
  ];
  const [w, setW] = cUseState(""); const [l, setL] = cUseState(""); const [t, setT] = cUseState("10");
  const [rid, setRid] = cUseState("1:2:4");
  const R = RATIOS.find(x => x.id === rid);
  const vol = num(w) * num(l) * (num(t) / 100);
  return (
    <CalcCard icon={<Icons.box size={20} />} color="#64748b" soft="#eef1f6" title="คอนกรีต" sub="ปูน · ทราย · หิน จากปริมาตรงาน">
      <In label="กว้าง" value={w} onChange={setW} suffix="ม." />
      <In label="ยาว" value={l} onChange={setL} suffix="ม." />
      <In label="ความหนา" value={t} onChange={setT} suffix="ซม." />
      <Sel label="อัตราส่วนผสม" value={rid} onChange={setRid} options={RATIOS} />
      <Out rows={[
        { label: "ปริมาตรคอนกรีต", value: nf(vol, 2), unit: "ลบ.ม.", big: true },
        { label: "ปูนซีเมนต์ (50 กก.)", value: nf(vol * R.c, 1), unit: "ถุง" },
        { label: "ทราย", value: nf(vol * R.s, 2), unit: "ลบ.ม." },
        { label: "หิน", value: nf(vol * R.r, 2), unit: "ลบ.ม." },
      ]} note="ค่าประมาณตามอัตราส่วนผสมโดยปริมาตร" />
    </CalcCard>
  );
}

/* ========== 2) ปูนก่อ–ฉาบ ========== */
function MortarCalc() {
  const [area, setArea] = cUseState(""); const [rate, setRate] = cUseState("1.2");
  const bags = num(area) * num(rate);
  return (
    <CalcCard icon={<Icons.layers size={20} />} color="#9a7b4f" soft="#f5efe6" title="ปูนก่อ–ฉาบ" sub="ปูนสำเร็จรูปจากพื้นที่ผนัง">
      <In label="พื้นที่งาน" value={area} onChange={setArea} suffix="ตร.ม." />
      <In label="อัตราใช้ปูน" value={rate} onChange={setRate} suffix="ถุง/ตร.ม." />
      <Out rows={[
        { label: "ปูนสำเร็จรูป (50 กก.)", value: nf(Math.ceil(bags), 0), unit: "ถุง", big: true },
      ]} note="ฉาบหนา ~1.5 ซม. ≈ 1.2 ถุง/ตร.ม. · ก่ออิฐมวลเบา ≈ 0.5 ถุง/ตร.ม. (ปรับค่าได้)" />
    </CalcCard>
  );
}

/* ========== 3) อิฐ ========== */
function BrickCalc() {
  const KINDS = [
    { id: "mon", label: "อิฐมอญ (ก่อครึ่งแผ่น)", per: 138 },
    { id: "block", label: "คอนกรีตบล็อก 7–9 ซม.", per: 12.5 },
    { id: "aac", label: "อิฐมวลเบา (20×60 ซม.)", per: 8.33 },
  ];
  const [area, setArea] = cUseState(""); const [kid, setKid] = cUseState("aac"); const [waste, setWaste] = cUseState("5");
  const K = KINDS.find(x => x.id === kid);
  const qty = num(area) * K.per * (1 + num(waste) / 100);
  return (
    <CalcCard icon={<Icons.grid size={20} />} color="#b45309" soft="#f5ece2" title="อิฐ / ผนัง" sub="จำนวนก้อนจากพื้นที่ผนัง">
      <In label="พื้นที่ผนัง" value={area} onChange={setArea} suffix="ตร.ม." />
      <Sel label="ชนิดอิฐ" value={kid} onChange={setKid} options={KINDS} />
      <In label="เผื่อเสียหาย" value={waste} onChange={setWaste} suffix="%" />
      <Out rows={[
        { label: "จำนวนที่ต้องใช้", value: nf(Math.ceil(qty), 0), unit: "ก้อน", big: true },
        { label: "อัตราต่อพื้นที่", value: nf(K.per, 2), unit: "ก้อน/ตร.ม." },
      ]} />
    </CalcCard>
  );
}

/* ========== 4) กระเบื้องปูพื้น ========== */
function TileCalc() {
  const SIZES = [
    { id: "30", label: "30×30 ซม.", a: 0.09, box: 11 },
    { id: "40", label: "40×40 ซม.", a: 0.16, box: 6 },
    { id: "60", label: "60×60 ซม.", a: 0.36, box: 4 },
    { id: "80", label: "80×80 ซม.", a: 0.64, box: 3 },
  ];
  const [area, setArea] = cUseState(""); const [sid, setSid] = cUseState("60"); const [waste, setWaste] = cUseState("10");
  const S = SIZES.find(x => x.id === sid);
  const pcs = (num(area) / S.a) * (1 + num(waste) / 100);
  const boxes = Math.ceil(pcs / S.box);
  return (
    <CalcCard icon={<Icons.grid size={20} />} color="#c026d3" soft="#f9e9fb" title="กระเบื้องปูพื้น/ผนัง" sub="จำนวนแผ่น/กล่องจากพื้นที่">
      <In label="พื้นที่" value={area} onChange={setArea} suffix="ตร.ม." />
      <Sel label="ขนาดกระเบื้อง" value={sid} onChange={setSid} options={SIZES} />
      <In label="เผื่อเสีย/ตัดมุม" value={waste} onChange={setWaste} suffix="%" />
      <Out rows={[
        { label: "จำนวนแผ่น", value: nf(Math.ceil(pcs), 0), unit: "แผ่น", big: true },
        { label: "ประมาณ", value: nf(boxes, 0), unit: `กล่อง (${S.box} แผ่น/กล่อง)` },
      ]} />
    </CalcCard>
  );
}

/* ========== 5) สีทาบ้าน ========== */
function PaintCalc() {
  const [area, setArea] = cUseState(""); const [coats, setCoats] = cUseState("2"); const [rate, setRate] = cUseState("8");
  const liters = (num(area) * num(coats)) / (num(rate) || 1);
  return (
    <CalcCard icon={<Icons.box size={20} />} color="#db2777" soft="#fce7f0" title="สีทาบ้าน" sub="ปริมาณสีจากพื้นที่ทา">
      <In label="พื้นที่ทาสี" value={area} onChange={setArea} suffix="ตร.ม." />
      <In label="จำนวนเที่ยว (รอบทา)" value={coats} onChange={setCoats} suffix="เที่ยว" />
      <In label="อัตราการทา" value={rate} onChange={setRate} suffix="ตร.ม./ล." />
      <Out rows={[
        { label: "ปริมาณสี", value: nf(liters, 1), unit: "ลิตร", big: true },
        { label: "แกลลอน (3.785 ล.)", value: nf(Math.ceil(liters / 3.785), 0), unit: "แกลลอน" },
        { label: "ถัง (18.925 ล.)", value: nf(Math.ceil(liters / 18.925), 0), unit: "ถัง" },
      ]} note="สีจริงทาได้ ~8–10 ตร.ม./ลิตร/เที่ยว (ดูข้างกระป๋อง)" />
    </CalcCard>
  );
}

/* ========== 6) เหล็กเส้น (น้ำหนัก) ========== */
function RebarCalc() {
  const SIZES = [6, 9, 10, 12, 16, 20, 25].map(d => ({ id: String(d), label: (d <= 9 ? "RB" : "DB") + d + " (Ø" + d + " มม.)", d }));
  const [sid, setSid] = cUseState("12"); const [count, setCount] = cUseState(""); const [len, setLen] = cUseState("10");
  const d = num(sid); const wpm = (d * d) / 162;
  const total = wpm * num(len) * num(count);
  return (
    <CalcCard icon={<Icons.activity size={20} />} color="#475569" soft="#eef1f6" title="เหล็กเส้น (น้ำหนัก)" sub="คำนวณน้ำหนักเหล็กเป็นกิโลกรัม">
      <Sel label="ขนาดเหล็ก" value={sid} onChange={setSid} options={SIZES} />
      <In label="จำนวน" value={count} onChange={setCount} suffix="เส้น" />
      <In label="ความยาว/เส้น" value={len} onChange={setLen} suffix="ม." />
      <Out rows={[
        { label: "น้ำหนักรวม", value: nf(total, 1), unit: "กก.", big: true },
        { label: "น้ำหนักต่อเมตร", value: nf(wpm, 3), unit: "กก./ม." },
      ]} note="สูตรมาตรฐาน: น้ำหนัก = ز ÷ 162 (กก./ม.)" />
    </CalcCard>
  );
}

/* ========== 7) กระเบื้องหลังคา ========== */
function RoofCalc() {
  const KINDS = [
    { id: "concrete", label: "กระเบื้องคอนกรีต (ลอน)", per: 10 },
    { id: "fiber", label: "ไฟเบอร์ซีเมนต์ ลอนคู่", per: 2.2 },
    { id: "ceramic", label: "เซรามิก (ลอน)", per: 14 },
  ];
  const [area, setArea] = cUseState(""); const [kid, setKid] = cUseState("concrete"); const [per, setPer] = cUseState("10"); const [waste, setWaste] = cUseState("7");
  const setKind = (id) => { setKid(id); const k = KINDS.find(x => x.id === id); if (k) setPer(String(k.per)); };
  const qty = num(area) * num(per) * (1 + num(waste) / 100);
  return (
    <CalcCard icon={<Icons.report size={20} />} color="#b91c1c" soft="#fbeaea" title="กระเบื้องหลังคา" sub="จำนวนแผ่นจากพื้นที่หลังคา">
      <In label="พื้นที่หลังคา" value={area} onChange={setArea} suffix="ตร.ม." />
      <Sel label="ชนิดกระเบื้อง" value={kid} onChange={setKind} options={KINDS} />
      <In label="แผ่นต่อพื้นที่" value={per} onChange={setPer} suffix="แผ่น/ตร.ม." />
      <In label="เผื่อเสีย/ครอบ" value={waste} onChange={setWaste} suffix="%" />
      <Out rows={[{ label: "จำนวนกระเบื้อง", value: nf(Math.ceil(qty), 0), unit: "แผ่น", big: true }]}
        note="พื้นที่หลังคา = พื้นที่อาคาร × ตัวคูณความลาดเอียง (~1.1–1.3)" />
    </CalcCard>
  );
}

/* ========== 8) ฝ้าเพดาน / ยิปซั่ม ========== */
function CeilingCalc() {
  const [area, setArea] = cUseState(""); const [waste, setWaste] = cUseState("8");
  const board = 1.2 * 2.4; // 2.88 ตร.ม./แผ่น
  const sheets = Math.ceil((num(area) / board) * (1 + num(waste) / 100));
  const frame = Math.ceil(num(area) * 3); // ม. โครงคร่าวโดยประมาณ
  return (
    <CalcCard icon={<Icons.layers size={20} />} color="#7c3aed" soft="#f1ebfe" title="ฝ้าเพดาน / ยิปซั่ม" sub="แผ่นยิปซั่ม + โครงคร่าว">
      <In label="พื้นที่ฝ้า" value={area} onChange={setArea} suffix="ตร.ม." />
      <In label="เผื่อเสีย" value={waste} onChange={setWaste} suffix="%" />
      <Out rows={[
        { label: "แผ่นยิปซั่ม (1.2×2.4 ม.)", value: nf(sheets, 0), unit: "แผ่น", big: true },
        { label: "โครงคร่าว (ประมาณ)", value: nf(frame, 0), unit: "เมตร" },
      ]} />
    </CalcCard>
  );
}

function Calculators({ go }) {
  return (
    <div className="page fade-up">
      <div className="page-head">
        <h2>เครื่องคำนวณวัสดุก่อสร้าง</h2>
        <p>คำนวณปริมาณวัสดุที่ต้องใช้ให้เหมาะกับงาน · ปรับตัวเลขให้ตรงกับสินค้าของร้านได้</p>
      </div>
      <div className="calc-grid">
        <ConcreteCalc />
        <MortarCalc />
        <BrickCalc />
        <TileCalc />
        <PaintCalc />
        <RebarCalc />
        <RoofCalc />
        <CeilingCalc />
      </div>
      <div style={{ marginTop: 16, fontSize: 12.5, color: "var(--muted-2)", textAlign: "center" }}>
        * ผลลัพธ์เป็นค่าประมาณการเพื่อช่วยวางแผนสั่งซื้อ ควรเผื่อตามหน้างานจริง
      </div>
    </div>
  );
}
window.Calculators = Calculators;