// ==============================================
// Login page — supports real API + demo fallback
// ==============================================

function LoginPage({ onLogin, onClose, navigate, apiStatus }) {
  const [role, setRole] = useState("customer");
  const [mode, setMode] = useState("login");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [company, setCompany] = useState("");
  const [err, setErr] = useState("");
  const [loading, setLoading] = useState(false);
  const toast = useToast();
  const isLive = apiStatus === "live";

  // Pre-fill demo credentials for login mode
  useEffect(() => {
    if (mode !== "login") { setEmail(""); setPassword(""); return; }
    const demos = {
      customer: { email: "customer@demo.com", password: "demo" },
      dealer:   { email: "dealer@demo.com",   password: "demo" },
      admin:    { email: "admin@intersupply.co.th", password: "admin" },
    };
    setEmail(demos[role]?.email || "");
    setPassword(demos[role]?.password || "");
  }, [role, mode]);

  const submit = async () => {
    setErr("");
    if (!email.trim() || !password.trim()) { setErr("กรุณากรอกอีเมลและรหัสผ่าน"); return; }
    if (mode === "register" && !name.trim()) { setErr("กรุณากรอกชื่อ"); return; }
    setLoading(true);
    try {
      let user;
      if (isLive && window.ISP_API) {
        // ── Real API login / register ──
        if (mode === "login") {
          user = await window.ISP_API.login(email.trim(), password, role);
        } else {
          user = await window.ISP_API.register(email.trim(), password, name, company, role);
        }
      } else {
        // ── Demo fallback (no API) ──
        await new Promise(r => setTimeout(r, 500));
        if (mode === "register") {
          user = { id: "new-" + Date.now(), role, name: name || email.split("@")[0], company, email };
        } else {
          const found = USERS.find(u => u.email === email && u.password === password && u.role === role);
          if (!found) throw new Error("อีเมลหรือรหัสผ่านไม่ถูกต้อง");
          user = found;
        }
      }
      onLogin(user);
      toast(`ยินดีต้อนรับ ${(user.name || "").split(" ")[0]} 👋`);
    } catch (e) {
      setErr(e.message || "เกิดข้อผิดพลาด");
    } finally {
      setLoading(false);
    }
  };

  const features = {
    customer: [
      { ic: "file-text", t: "ขอใบเสนอราคาออนไลน์", d: "เลือกสินค้า กรอกข้อมูล รับ PDF ทันที" },
      { ic: "clock",     t: "ประวัติใบเสนอราคา",    d: "ดูใบเสนอราคาที่เคยขอย้อนหลัง" },
      { ic: "truck",     t: "ติดตามสถานะ",           d: "ดูสถานะการจัดส่งได้ทุกที่ทุกเวลา" },
    ],
    dealer: [
      { ic: "tag",          t: "ราคาพิเศษ Dealer",       d: "ส่วนลด 5-20% ตาม Bronze→Platinum" },
      { ic: "refresh",      t: "สั่งซื้อซ้ำเร็ว",        d: "สั่งซื้อจากใบเสนอราคาเดิมคลิกเดียว" },
      { ic: "trending-up",  t: "Credit Term 30 วัน",      d: "วงเงินเครดิตสำหรับ Dealer" },
    ],
    admin: [
      { ic: "dashboard", t: "Dashboard ภาพรวม",     d: "ติดตามยอดขาย ใบเสนอราคา สต็อก" },
      { ic: "package",   t: "จัดการสินค้า",          d: "เพิ่ม-แก้-ลบ สินค้า อัปโหลดรูป" },
      { ic: "users",     t: "จัดการสมาชิก / Dealer", d: "อนุมัติ Dealer กำหนดระดับส่วนลด" },
    ],
  };

  return (
    <div className="login-bg">
      <div className="login-promo">
        <div>
          <div className="brand-block">
            <div className="brand-logo" style={{ width: 56, height: 56, padding: 6 }}>
              <img src="assets/logo.png" alt="Inter Supply"/>
            </div>
            <div className="brand-name">
              <div className="th">อินเตอร์ ซัพพลาย (1992)</div>
              <div className="en">Inter Supply Co., Ltd · est. 1992</div>
            </div>
          </div>
          <button className="btn btn-ghost" style={{ color: "white", marginTop: 24, opacity: 0.8 }} onClick={onClose}>
            <Icon name="chevron-right" size={14} style={{ transform: "rotate(180deg)" }}/> กลับสู่หน้าเว็บไซต์
          </button>
        </div>

        <div>
          <h1 style={{ fontSize: 44, lineHeight: 1.1, letterSpacing: "-0.02em", margin: "0 0 20px" }}>
            {role === "customer" && <><span>ลูกค้าทั่วไป</span><br/><span style={{ opacity: 0.7 }}>ขอใบเสนอราคาได้ทุกที่</span></>}
            {role === "dealer"   && <><span>Dealer &amp; ตัวแทน</span><br/><span style={{ opacity: 0.7 }}>ราคาพิเศษเฉพาะคุณ</span></>}
            {role === "admin"    && <><span>Admin Panel</span><br/><span style={{ opacity: 0.7 }}>Inter Supply System</span></>}
          </h1>
          <div className="promo-features">
            {features[role].map((f, i) => (
              <div key={i} className="promo-feat">
                <div className="ic"><Icon name={f.ic} size={18}/></div>
                <div><div className="t">{f.t}</div><div className="d">{f.d}</div></div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ fontSize: 11, opacity: 0.5 }}>
          © 2026 Inter Supply (1992) Co., Ltd. All rights reserved. · Tax ID 0105535012345
        </div>
      </div>

      <div className="login-panel">
        <div className="login-card">
          {!isLive && (
            <div style={{ background: "#fef3c7", border: "1px solid #fde68a", borderRadius: 8, padding: "8px 12px", marginBottom: 16, fontSize: 12, color: "#92400e", display: "flex", gap: 8, alignItems: "center" }}>
              <Icon name="info" size={13}/>
              <span><b>Demo Mode</b> — API ยังไม่ได้เชื่อมต่อ ใช้บัญชี demo ด้านล่าง</span>
            </div>
          )}
          {isLive && (
            <div style={{ background: "#d1fae5", border: "1px solid #6ee7b7", borderRadius: 8, padding: "8px 12px", marginBottom: 16, fontSize: 12, color: "#065f46", display: "flex", gap: 8, alignItems: "center" }}>
              <Icon name="check" size={13}/>
              <span><b>เชื่อมต่อ Database แล้ว</b> — ข้อมูลจริงจาก Cloudflare D1</span>
            </div>
          )}

          <h2 style={{ margin: "0 0 6px", fontSize: 24 }}>{mode === "login" ? "เข้าสู่ระบบ" : "สมัครสมาชิกใหม่"}</h2>
          <p style={{ margin: "0 0 20px", color: "var(--ink-500)", fontSize: 13.5 }}>
            {mode === "login" ? "ยินดีต้อนรับกลับ กรุณาเลือกประเภทบัญชี" : "สมัครสมาชิกฟรี ใช้งานได้ทันที"}
          </p>

          <div className="role-switch">
            {["customer", "dealer", "admin"].map(r => (
              <button key={r} className={role === r ? "active" : ""} onClick={() => setRole(r)}>
                <Icon name={r === "admin" ? "shield" : r === "dealer" ? "tag" : "user"} size={13}/>
                {r === "customer" ? " Customer" : r === "dealer" ? " Dealer" : " Admin"}
              </button>
            ))}
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {mode === "register" && (
              <>
                <div className="form-field">
                  <label>ชื่อ-นามสกุล <span className="req">*</span></label>
                  <input value={name} onChange={e => setName(e.target.value)} placeholder="คุณสมชาย ใจดี"/>
                </div>
                {role === "dealer" && (
                  <div className="form-field">
                    <label>บริษัท / ร้านค้า</label>
                    <input value={company} onChange={e => setCompany(e.target.value)} placeholder="บริษัท สมชายการช่าง จำกัด"/>
                  </div>
                )}
              </>
            )}
            <div className="form-field">
              <label>อีเมล</label>
              <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="your@email.com"/>
            </div>
            <div className="form-field">
              <label>รหัสผ่าน</label>
              <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="••••••••"
                onKeyDown={e => e.key === "Enter" && submit()}/>
            </div>

            {err && (
              <div className="chip bad" style={{ width: "fit-content" }}>
                <Icon name="x" size={12}/> {err}
              </div>
            )}

            {mode === "login" && (
              <div className="flex between center small">
                <label className="filter-item" style={{ padding: 0 }}>
                  <input type="checkbox" defaultChecked/> <span>จำฉันไว้</span>
                </label>
              </div>
            )}

            <button className="btn btn-primary btn-lg btn-block" onClick={submit} disabled={loading}>
              {loading ? "กำลังดำเนินการ…" : mode === "login"
                ? <><Icon name="log-in" size={15}/> เข้าสู่ระบบ</>
                : <><Icon name="user" size={15}/> สมัครสมาชิก</>}
            </button>

            <div className="small text-right">
              {mode === "login"
                ? <>ยังไม่มีบัญชี? <a style={{ color: "var(--navy-700)", cursor: "pointer", fontWeight: 600 }} onClick={() => setMode("register")}>สมัครสมาชิก</a></>
                : <>มีบัญชีอยู่แล้ว? <a style={{ color: "var(--navy-700)", cursor: "pointer", fontWeight: 600 }} onClick={() => setMode("login")}>เข้าสู่ระบบ</a></>}
            </div>

            {mode === "login" && (
              <div className="demo-creds">
                <div className="bold">บัญชีทดลอง (Demo)</div>
                <div>Email: <code>{email}</code></div>
                <div>Password: <code>{password}</code></div>
                {isLive && <div style={{ marginTop: 4, color: "#065f46" }}>✓ ใช้กับ Cloudflare D1 ได้จริง</div>}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginPage });