/* ============================================================
   IMPORT CENTER — window.ImportCenter
   ============================================================ */
(function () {
  const { useState } = React;
  const { useT, Icon, Panel, Badge, DataTable, PageHead } = window.UI;

  const sources = [
    { key: "myorder", en: "MyOrder Export", th: "ออเดอร์จาก MyOrder", icon: "chat", color: "var(--fb)", fmt: ".xlsx · .csv", last: "วันนี้ 09:10", rows: "138 rows" },
    { key: "tiktok", en: "TikTok Orders", th: "ออเดอร์ติ๊กต็อก", icon: "play", color: "var(--tiktok)", fmt: ".csv", last: "วันนี้ 08:40", rows: "27 rows" },
    { key: "cod", en: "COD / Tracking", th: "พัสดุ & COD", icon: "truck", color: "var(--warn)", fmt: "Flash · SPX", last: "เมื่อวาน", rows: "412 rows" },
    { key: "stock", en: "Stock Movements", th: "การเคลื่อนไหวสต๊อก", icon: "box", color: "var(--shopee)", fmt: ".xlsx", last: "เมื่อวาน", rows: "64 rows" },
    { key: "ads", en: "Ad Spend", th: "ค่าแอด", icon: "spark", color: "var(--accent)", fmt: "FB · TikTok", last: "วันนี้ 07:55", rows: "12 rows" },
    { key: "shifts", en: "Staff Shifts", th: "กะพนักงาน", icon: "clock", color: "var(--ig)", fmt: "Google Form", last: "วันนี้ 10:00", rows: "8 rows" },
  ];

  const recent = [
    { file: "myorder_export_0602.xlsx", src: "MyOrder", rows: 138, status: "สำเร็จ", st: "ok", time: "09:10", warn: "" },
    { file: "tiktok_orders_0602.csv", src: "TikTok", rows: 27, status: "สำเร็จ", st: "ok", time: "08:40", warn: "" },
    { file: "flash_cod_0601.csv", src: "COD", rows: 412, status: "มีคำเตือน", st: "warn", time: "เมื่อวาน", warn: "3 วันที่สลับรูปแบบ — แปลงอัตโนมัติแล้ว" },
    { file: "stock_update_may.xlsx", src: "Stock", rows: 64, status: "สำเร็จ", st: "ok", time: "เมื่อวาน", warn: "" },
    { file: "ads_spend_0602.csv", src: "Ads", rows: 12, status: "ต้องจับคู่ชื่อ", st: "danger", time: "07:55", warn: "2 ชื่อสินค้าไม่ตรงรหัสกลาง" },
  ];

  function ImportCenter({ onNav }) {
    const t = useT();
    const [active, setActive] = useState("myorder");
    const cols = [
      { key: "file", label: t("FILE", "ไฟล์"), render: (r) => <span className="mono strong">{r.file}</span> },
      { key: "src", label: t("SOURCE", "ที่มา"), render: (r) => <Badge kind="neutral">{r.src}</Badge> },
      { key: "rows", label: t("ROWS", "แถว"), render: (r) => <span className="num">{r.rows}</span> },
      { key: "time", label: t("TIME", "เวลา"), render: (r) => <span className="mono" style={{ color: "var(--tx-faint)" }}>{r.time}</span> },
      { key: "status", label: t("STATUS", "สถานะ"), render: (r) => <div><Badge kind={r.st} dot>{r.status}</Badge>{r.warn ? <div style={{ fontSize: 10.5, color: "var(--tx-faint)", marginTop: 3 }}>{r.warn}</div> : null}</div> },
      { key: "act", label: "", render: (r) => r.st !== "ok" ? <button className="chip" style={{ padding: "5px 10px" }}>{t("Fix", "แก้ไข")}</button> : <span style={{ color: "var(--ok)" }}><Icon name="check" size={15} /></span> },
    ];
    return (
      <div className="main">
        <PageHead
          crumbs={<><a onClick={() => onNav("city")}>{t("System Map", "แผนที่ระบบ")}</a><Icon name="chev" size={12} /><span style={{ color: "var(--cyan)" }}>Import Center</span></>}
          title="Import Center" th="ศูนย์นำเข้าข้อมูล" />

        <div className="grid" style={{ gridTemplateColumns: "minmax(0,1fr) 360px", alignItems: "start" }}>
          <div style={{ display: "grid", gap: 16 }}>
            <Panel title={t("Data sources", "แหล่งข้อมูล")} th={t("the gateway into Playground", "ประตูเข้าระบบ")}>
              <div className="panel-pad" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12 }}>
                {sources.map((s) => (
                  <button key={s.key} className={"chip"} style={{ display: "block", textAlign: "left", padding: 14, borderColor: active === s.key ? s.color : "var(--hairline-soft)", background: active === s.key ? "oklch(0.25 0.036 268 / 0.6)" : "var(--panel)" }} onClick={() => setActive(s.key)}>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                      <span style={{ width: 32, height: 32, borderRadius: 9, display: "grid", placeItems: "center", background: s.color + "22", color: s.color, boxShadow: `inset 0 0 0 1px ${s.color}55` }}><Icon name={s.icon} size={17} /></span>
                      <Icon name="chev" size={14} />
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: "var(--tx)" }}>{s.en}</div>
                    <div style={{ fontSize: 10.5, color: "var(--tx-faint)" }}>{s.th}</div>
                    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10, fontFamily: "var(--mono)", fontSize: 9.5, color: "var(--tx-ghost)" }}><span>{s.fmt}</span><span>{s.last}</span></div>
                  </button>
                ))}
              </div>
            </Panel>

            <Panel title={t("Recent imports", "ประวัติการนำเข้า")} right={<Badge kind="warn">2 {t("need attention", "ต้องดู")}</Badge>}>
              <DataTable columns={cols} rows={recent} />
            </Panel>
          </div>

          <div style={{ display: "grid", gap: 16 }}>
            <Panel title={t("Upload", "อัปโหลด")} th={sources.find((s) => s.key === active).en}>
              <div className="panel-pad">
                <div style={{ border: "2px dashed var(--hairline)", borderRadius: 14, padding: "34px 20px", textAlign: "center", background: "oklch(0.18 0.03 268 / 0.5)" }}>
                  <div style={{ width: 52, height: 52, borderRadius: 14, margin: "0 auto 14px", display: "grid", placeItems: "center", background: "var(--accent-dim)", color: "var(--accent-bright)" }}><Icon name="import" size={26} /></div>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{t("Drop file or click to browse", "ลากไฟล์มาวาง หรือคลิกเลือก")}</div>
                  <div style={{ fontSize: 11.5, color: "var(--tx-faint)", marginTop: 4 }}>{t("Excel / CSV / Google Sheet link", "Excel / CSV / ลิงก์ Google Sheet")}</div>
                  <button className="btn primary" style={{ marginTop: 16 }}><Icon name="dl" size={15} />{t("Choose file", "เลือกไฟล์")}</button>
                </div>
                <div style={{ marginTop: 14, fontSize: 11.5, color: "var(--tx-faint)", lineHeight: 1.6 }}>
                  {t("Dates are normalized on import. Product names map to a central SKU; unmatched names go to a review queue.", "วันที่จะถูกแปลงเป็นรูปแบบมาตรฐาน ชื่อสินค้าจะจับคู่กับรหัสกลาง ชื่อที่ไม่ตรงจะเข้าคิวให้ตรวจสอบ")}
                </div>
              </div>
            </Panel>
            <Panel title={t("Column mapping", "จับคู่คอลัมน์")} th={t("preview", "ตัวอย่าง")}>
              <div className="panel-pad" style={{ display: "grid", gap: 9 }}>
                {[["Order No.", "order_id", "ok"], ["วันที่", "order_date", "ok"], ["ลูกค้า", "customer", "ok"], ["สินค้า", "product → SKU", "warn"], ["COD", "cod_amount", "ok"], ["Tracking", "tracking_number", "ok"]].map((m, i) => (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12 }}>
                    <span className="mono" style={{ flex: 1, color: "var(--tx-dim)" }}>{m[0]}</span>
                    <Icon name="chev" size={13} />
                    <span className="mono" style={{ flex: 1, textAlign: "right", color: m[2] === "warn" ? "var(--warn)" : "var(--tx)" }}>{m[1]}</span>
                    <span className={"sdot " + (m[2] === "warn" ? "warn" : "ok")} />
                  </div>
                ))}
              </div>
            </Panel>
          </div>
        </div>
      </div>
    );
  }
  window.ImportCenter = ImportCenter;
})();