// ==========================================
// Main App — Login + Shell + Routing
// ==========================================

function App() {
  const [state, _setState] = useState(() => loadState());
  const [user, setUser] = useState(() => (window.DB ? window.DB.readSession() : null));
  const [route, setRoute] = useState("dashboard");
  const [transferFilter, setTransferFilter] = useState(null); // preset project for transfer page
  const [syncing, setSyncing] = useState(false);

  function setState(next) {_setState(next);saveState(next);}

  // Restore Supabase session on reload — if a JWT is still valid in
  // localStorage, fetch the profile, hydrate state, skip the login screen.
  useEffect(() => {
    if (!window.SUPA) return;
    (async () => {
      try {
        const su = await window.AUTH.currentUser();
        if (!su) return;
        const profile = await window.AUTH.fetchProfile(su.id);
        window.__BOAT_SIGNED_IN__ = true;
        await hydrateFromCloud(profile.role);
        const u = {
          id: su.id,
          username: profile.username,
          name: profile.display_name || profile.username,
          role: profile.role, // 'pm' | 'store'
        };
        setUser(u);
        window.DB.writeSession(u);
      } catch (e) { console.warn("[app] session restore failed:", e?.message || e); }
    })();
  }, []);

  // Shared workspace: pull from cloud; if empty AND user is PM, seed defaults.
  async function hydrateFromCloud(role) {
    if (!window.SUPA) return;
    setSyncing(true);
    try {
      const cloud = await window.DB.pullFromCloud();
      if (cloud) {
        const merged = { ...defaultState(), ...cloud };
        merged.categories = defaultState().categories; // reference data, kept in code
        _setState(merged);
        window.DB.writeState(merged);
      } else if (role === "pm") {
        // PM bootstrapping a brand-new workspace.
        const seed = defaultState();
        _setState(seed);
        window.DB.writeState(seed);
        await window.DB.seedCloud(seed);
      } else {
        // Store user joined before PM has seeded — show empty state.
        const empty = { ...defaultState(), projects: [], materials: [], transactions: [] };
        _setState(empty);
        window.DB.writeState(empty);
      }
    } finally { setSyncing(false); }
  }

  // Called by LoginScreen after Supabase signIn/signUp resolves.
  async function login(u, supabaseUser) {
    if (supabaseUser) {
      window.__BOAT_SIGNED_IN__ = true;
      await hydrateFromCloud(u.role);
    }
    setUser(u);
    window.DB.writeSession(u);
  }

  function registerUser(newUser) {
    // Legacy offline-mode register: append to in-memory users list.
    // In Supabase mode, signUp is handled inside LoginScreen directly.
    const next = { ...state, users: [...(state.users || []), newUser] };
    _setState(next);
    saveState(next);
  }

  async function logout() {
    if (window.SUPA && window.AUTH) {
      try { await window.AUTH.signOut(); } catch (e) { /* ignore */ }
    }
    window.__BOAT_SIGNED_IN__ = false;
    setUser(null);
    window.DB.clearSession();
    window.DB.clearState();
    _setState(defaultState());
    setRoute("dashboard");
  }

  function resetData() {
    if (user && user.role !== "pm") { alert("เฉพาะ PM เท่านั้นที่สามารถรีเซ็ตข้อมูลได้"); return; }
    if (!confirm("รีเซ็ตข้อมูลทั้งหมดกลับเป็นค่าเริ่มต้น?")) return;
    const s = resetState();
    _setState(s);
    if (window.SUPA && window.__BOAT_SIGNED_IN__) {
      window.DB.seedCloud(s).catch((e) =>
        console.warn("[app] cloud reset push failed:", e?.message || e)
      );
    }
  }

  // Pending transfers waiting for approval (the "inbox")
  const pendingTransfers = useMemo(() => {
    if (!state) return [];
    return state.transactions.filter((t) => t.type === "transfer" && (t.status || "approved") === "pending");
  }, [state]);

  function gotoTransfer(projectId) {
    setTransferFilter(projectId || null);
    setRoute("transfer");
  }

  if (!user) {
    return (
      <ToastProvider>
        <LoginScreen onLogin={login} users={state.users} onRegister={registerUser} />
      </ToastProvider>);

  }

  return (
    <ToastProvider>
      <div className="shell">
        <Sidebar
          route={route}
          setRoute={(r) => { setTransferFilter(null); setRoute(r); }}
          user={user}
          onLogout={logout}
          onReset={resetData}
          pendingCount={pendingTransfers.length}
          pendingTransfers={pendingTransfers}
          projects={state.projects}
          materials={state.materials}
          onOpenTransfer={gotoTransfer}
        />
        <main className="main">
          {route === "dashboard" && <DashboardPage state={state} setState={setState} onNav={setRoute} />}
          {route === "stock" && <StockPage state={state} setState={setState} user={user} />}
          {route === "receive" && <TxnPage state={state} setState={setState} mode="receive" user={user} />}
          {route === "issue" && <TxnPage state={state} setState={setState} mode="issue" user={user} />}
          {route === "transfer" && <TxnPage state={state} setState={setState} mode="transfer" user={user} presetProjectFilter={transferFilter} onClearPreset={() => setTransferFilter(null)} />}
          {route === "reports" && <ReportsPage state={state} />}
          {route === "projects" && <ProjectsPage state={state} setState={setState} user={user} />}
          {route === "materials" && <MaterialsPage state={state} setState={setState} user={user} />}
        </main>
      </div>
    </ToastProvider>);

}

// ---------- Login ----------
function LoginScreen({ onLogin, users, onRegister }) {
  const [mode, setMode] = useState("login"); // login | register
  const [u, setU] = useState("admin");
  const [p, setP] = useState("1234");
  const [remember, setRemember] = useState(true);
  const [err, setErr] = useState("");
  const [tick, setTick] = useState(Date.now());

  // register form
  const [reg, setReg] = useState({ name: "", username: "", password: "", confirm: "" });

  useEffect(() => {
    const t = setInterval(() => setTick(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);

  const cloudMode = !!window.SUPA;
  const [busy, setBusy] = useState(false);

  async function submit(e) {
    e.preventDefault();
    setErr("");
    if (cloudMode) {
      setBusy(true);
      try {
        const su = await window.AUTH.signIn(u, p);
        const profile = await window.AUTH.fetchProfile(su.id);
        await onLogin({
          id: su.id,
          username: profile.username,
          name: profile.display_name || profile.username,
          role: profile.role, // 'pm' | 'store'
        }, su);
      } catch (err) {
        setErr(translateAuthError(err));
      } finally { setBusy(false); }
      return;
    }
    // Offline fallback
    const found = users.find((x) => x.username === u && x.password === p);
    if (!found) { setErr("ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง"); return; }
    onLogin({ username: found.username, name: found.name, role: found.role });
  }

  async function submitRegister(e) {
    e.preventDefault();
    setErr("");
    if (reg.password !== reg.confirm) { setErr("รหัสผ่านไม่ตรงกัน"); return; }
    if (reg.password.length < 6) { setErr("รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร"); return; }
    if (!reg.username || !/^[a-z0-9_.@+\-]+$/i.test(reg.username)) {
      setErr("ใช้ได้เฉพาะ a-z, 0-9, . _ - + @ (จะใช้ username หรืออีเมลก็ได้)"); return;
    }
    if (cloudMode) {
      setBusy(true);
      try {
        const su = await window.AUTH.signUp(reg.username, reg.password, reg.name);
        // Profile is created server-side by trigger; first user → PM, others → Store.
        // Wait one tick so the row is committed before reading it.
        await new Promise((r) => setTimeout(r, 250));
        let profile = null;
        try { profile = await window.AUTH.fetchProfile(su.id); } catch (e) { /* may need a moment */ }
        await onLogin({
          id: su.id,
          username: profile?.username || reg.username,
          name: profile?.display_name || reg.name || reg.username,
          role: profile?.role || "store",
        }, su);
      } catch (err) {
        setErr(translateAuthError(err));
      } finally { setBusy(false); }
      return;
    }
    // Offline fallback
    if (users.some((x) => x.username === reg.username)) { setErr("ชื่อผู้ใช้นี้ถูกใช้แล้ว"); return; }
    const newUser = { username: reg.username, password: reg.password, name: reg.name || reg.username, role: "store" };
    onRegister(newUser);
    onLogin({ username: newUser.username, name: newUser.name, role: newUser.role });
  }

  function loginAs(username) {
    // Demo-account shortcut only works in offline mode (no real credentials in cloud).
    if (cloudMode) {
      setU(username); setP(""); setErr("กรอกรหัสผ่านเพื่อเข้าใช้งานบน Cloud");
      return;
    }
    const found = users.find((x) => x.username === username);
    if (found) onLogin({ username: found.username, name: found.name, role: found.role });
  }

  function translateAuthError(err) {
    const m = (err?.message || "").toLowerCase();
    if (m.includes("invalid login")) return "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง";
    if (m.includes("already registered") || m.includes("user already")) return "ชื่อผู้ใช้นี้ถูกใช้แล้ว";
    if (m.includes("password should be")) return "รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร";
    if (m.includes("email")) return "ชื่อผู้ใช้ไม่ถูกต้อง (ใช้ a-z, 0-9, . _ -)";
    return err?.message || "เกิดข้อผิดพลาด กรุณาลองใหม่";
  }

  const now = new Date(tick);
  const dStr = now.toLocaleDateString("th-TH", { day: "2-digit", month: "long", year: "numeric" });
  const tStr = now.toLocaleTimeString("th-TH", { hour: "2-digit", minute: "2-digit", second: "2-digit" });

  return (
    <div className="login2-wrap">
      <div className="login2-bg" />
      <div className="login2-card">
        {/* ===== LEFT side ===== */}
        <div className="login2-left">
          <div className="login2-logo-card">
            <img src="assets/boat-pattana-logo.png" alt="Boat Pattana Construction" className="login2-logo-img" />
          </div>

          <h1 className="login2-headline">BOAT INVENTORY</h1>
          <p className="login2-tag">ระบบจัดการคลังวัสดุงานก่อสร้าง</p>
          <p className="login2-sub">Boatpattana Cons. · Construction Material Hub</p>

          <div className="login2-features">
            <div className="login2-feat">
              <div className="login2-feat-icon" style={{ background: "linear-gradient(135deg, #ffb627, #ff8c42)" }}>📦</div>
              <div>
                <div className="login2-feat-title">วัสดุแยก 6 หมวด</div>
                <div className="login2-feat-sub">โครงสร้าง · สถาปัตย์ · ระบบ · เครื่องมือ</div>
              </div>
            </div>
            <div className="login2-feat">
              <div className="login2-feat-icon" style={{ background: "linear-gradient(135deg, #10b981, #059669)" }}>✓</div>
              <div>
                <div className="login2-feat-title">รับ-เบิก-โอนย้าย Real-time</div>
                <div className="login2-feat-sub">อัปเดตสต๊อกทันทีทุกการเคลื่อนไหว</div>
              </div>
            </div>
            <div className="login2-feat">
              <div className="login2-feat-icon" style={{ background: "linear-gradient(135deg, #8b5cf6, #6d28d9)" }}>🔄</div>
              <div>
                <div className="login2-feat-title">อนุมัติโอนย้ายแบบ Workflow</div>
                <div className="login2-feat-sub">ต้นทางขอ · ปลายทางอนุมัติ · แจ้งเตือนทันที</div>
              </div>
            </div>
          </div>

          <div className="login2-clock">
            <div className="login2-time">{tStr}</div>
            <div className="login2-date">{dStr}</div>
          </div>
        </div>

        {/* ===== RIGHT side ===== */}
        <div className="login2-right">
          <div className="login2-form-label">{mode === "login" ? "SIGN IN" : "SIGN UP"}</div>
          <h2 className="login2-form-title">{mode === "login" ? "ยินดีต้อนรับกลับ" : "สร้างบัญชีใหม่"}</h2>
          <p className="login2-form-sub">{mode === "login" ? "กรุณาเข้าสู่ระบบเพื่อใช้งาน Boat Inventory" : "กรอกข้อมูลเพื่อสมัครเข้าใช้ระบบ"}</p>

          {mode === "login" ? (
            <form onSubmit={submit} className="login2-form">
              <label className="login2-field">
                <span className="login2-field-label">ชื่อผู้ใช้ / อีเมล</span>
                <div className="login2-input-wrap">
                  <span className="login2-input-icon">👤</span>
                  <input value={u} onChange={(e) => setU(e.target.value)} placeholder={cloudMode ? "username หรือ email" : "username"} required autoFocus />
                </div>
              </label>
              <label className="login2-field">
                <span className="login2-field-label">รหัสผ่าน</span>
                <div className="login2-input-wrap">
                  <span className="login2-input-icon">🔒</span>
                  <input type="password" value={p} onChange={(e) => setP(e.target.value)} placeholder="••••••••" required />
                </div>
              </label>

              <div className="login2-row">
                <label className="login2-check">
                  <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
                  <span>จดจำการเข้าสู่ระบบ</span>
                </label>
                <button type="button" className="login2-link" onClick={() => { setMode("register"); setErr(""); }}>
                  ยังไม่มีบัญชี? <b>สมัครสมาชิก</b>
                </button>
              </div>

              {err && <div className="login2-err">⚠ {err}</div>}

              <button type="submit" className="login2-btn" disabled={busy}>
                {busy ? "กำลังเข้าสู่ระบบ..." : <>เข้าสู่ระบบ <span style={{ marginLeft: 8 }}>→</span></>}
              </button>
            </form>
          ) : (
            <form onSubmit={submitRegister} className="login2-form">
              <label className="login2-field">
                <span className="login2-field-label">ชื่อ-สกุล</span>
                <div className="login2-input-wrap">
                  <span className="login2-input-icon">👤</span>
                  <input value={reg.name} onChange={(e) => setReg({ ...reg, name: e.target.value })} placeholder="ชื่อ-นามสกุล" required autoFocus />
                </div>
              </label>
              <label className="login2-field">
                <span className="login2-field-label">ชื่อผู้ใช้ หรือ อีเมล</span>
                <div className="login2-input-wrap">
                  <span className="login2-input-icon">@</span>
                  <input value={reg.username} onChange={(e) => setReg({ ...reg, username: e.target.value.toLowerCase().replace(/\s/g, "") })} placeholder="ใช้อะไรก็ได้ เช่น somchai หรือ somchai@gmail.com" required />
                </div>
              </label>
              <label className="login2-field">
                <span className="login2-field-label">รหัสผ่าน</span>
                <div className="login2-input-wrap">
                  <span className="login2-input-icon">🔒</span>
                  <input type="password" value={reg.password} onChange={(e) => setReg({ ...reg, password: e.target.value })} placeholder="อย่างน้อย 6 ตัวอักษร" required minLength={6} />
                </div>
              </label>
              <label className="login2-field">
                <span className="login2-field-label">ยืนยันรหัสผ่าน</span>
                <div className="login2-input-wrap">
                  <span className="login2-input-icon">🔐</span>
                  <input type="password" value={reg.confirm} onChange={(e) => setReg({ ...reg, confirm: e.target.value })} placeholder="พิมพ์รหัสผ่านอีกครั้ง" required />
                </div>
              </label>

              <div className="login2-row">
                <span className="muted small">มีบัญชีอยู่แล้ว?</span>
                <button type="button" className="login2-link" onClick={() => { setMode("login"); setErr(""); }}>
                  <b>เข้าสู่ระบบ</b>
                </button>
              </div>

              {err && <div className="login2-err">⚠ {err}</div>}

              <button type="submit" className="login2-btn" disabled={busy}>
                {busy ? "กำลังสมัครสมาชิก..." : <>สมัครและเข้าใช้งาน <span style={{ marginLeft: 8 }}>→</span></>}
              </button>
            </form>
          )}

          {mode === "login" && !cloudMode && (
            <>
              <div className="login2-divider"><span>หรือ บัญชีตัวอย่างที่สร้างไว้</span></div>
              <div className="login2-demo-list">
                {users.map((x) => (
                  <button key={x.username} className="login2-demo" onClick={() => loginAs(x.username)}>
                    <div className="login2-demo-avatar">{x.name[0]}</div>
                    <div style={{ flex: 1, textAlign: "left" }}>
                      <div className="login2-demo-name">{x.name}</div>
                      <div className="login2-demo-sub">{x.username} · {x.role === "admin" ? "ผู้ดูแลระบบ" : "ผู้จัดการ"}</div>
                    </div>
                    <span className="login2-demo-arrow">›</span>
                  </button>
                ))}
              </div>
            </>
          )}

          <div className="login2-footer">
            🔒 ระบบสำหรับใช้ภายใน Boatpattana Construction เท่านั้น · © {new Date().getFullYear() + 543}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Sidebar ----------
function Sidebar({ route, setRoute, user, onLogout, onReset, pendingCount, pendingTransfers, projects, materials, onOpenTransfer }) {
  const [notifOpen, setNotifOpen] = useState(false);
  const notifRef = useRef(null);

  useEffect(() => {
    if (!notifOpen) return;
    function onDoc(e) {
      if (notifRef.current && !notifRef.current.contains(e.target)) setNotifOpen(false);
    }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [notifOpen]);

  const groups = [
  { title: "ภาพรวม", items: [
    { id: "dashboard", label: "Dashboard", icon: "📊" },
    { id: "stock", label: "คลังวัสดุ", icon: "📦" }]
  },
  { title: "ธุรกรรมวัสดุ", items: [
    { id: "receive", label: "รับวัสดุ", icon: "📥", color: "#10b981" },
    { id: "issue", label: "เบิก / จ่าย", icon: "📤", color: "#ef4444" },
    { id: "transfer", label: "โอนย้าย", icon: "🔄", color: "#8b5cf6", badge: pendingCount }]
  },
  { title: "รายงาน", items: [
    { id: "reports", label: "รายงานทั้งหมด", icon: "📋" }]
  },
  { title: "ตั้งค่า", items: [
    { id: "projects", label: "หน่วยงาน", icon: "🏢" },
    { id: "materials", label: "รายการวัสดุ", icon: "🧰" }]
  }];

  const matMap = Object.fromEntries((materials || []).map((m) => [m.id, m]));
  const projMap = Object.fromEntries((projects || []).map((p) => [p.id, p]));

  return (
    <aside className="sidebar" style={{ color: "rgb(199, 204, 212)" }}>
      <div className="brand">
        <div className="brand-logo">⚓</div>
        <div className="brand-text">
          <div className="brand-name">BOAT</div>
          <div className="brand-sub">Inventory</div>
        </div>
        <div className="notif-wrap" ref={notifRef}>
          <button
            className={`notif-bell ${pendingCount > 0 ? "has-pending" : ""}`}
            onClick={() => setNotifOpen((o) => !o)}
            title="การแจ้งเตือน"
          >
            🔔
            {pendingCount > 0 && <span className="notif-badge">{pendingCount}</span>}
          </button>
          {notifOpen && (
            <div className="notif-pop">
              <div className="notif-pop-head">
                <b>🔔 การแจ้งเตือน</b>
                {pendingCount > 0 && <span className="muted small">{pendingCount} รายการ</span>}
              </div>
              <div className="notif-list">
                {pendingTransfers.length === 0 && (
                  <div className="notif-empty">ไม่มีการแจ้งเตือน ✓</div>
                )}
                {pendingTransfers.slice(0, 8).map((t) => {
                  const m = matMap[t.materialId];
                  return (
                    <button
                      key={t.id}
                      className="notif-item"
                      onClick={() => {
                        setNotifOpen(false);
                        onOpenTransfer(t.toProjectId);
                      }}
                    >
                      <div className="notif-item-icon">🔄</div>
                      <div className="notif-item-body">
                        <div className="notif-item-title">รอรับโอนย้าย</div>
                        <div className="notif-item-sub">
                          <b>{m?.name}</b> · {fmtNum(t.qty)} {m?.unit}
                        </div>
                        <div className="notif-item-meta">
                          {projMap[t.fromProjectId]?.code} → <b>{projMap[t.toProjectId]?.code}</b> · {fmtDateShort(t.date)}
                        </div>
                      </div>
                    </button>
                  );
                })}
              </div>
              {pendingCount > 0 && (
                <button className="notif-foot" onClick={() => { setNotifOpen(false); onOpenTransfer(null); }}>
                  ดูคำขอทั้งหมด →
                </button>
              )}
            </div>
          )}
        </div>
      </div>

      <nav className="nav">
        {groups.map((g) =>
        <div key={g.title} className="nav-group">
            <div className="nav-group-title">{g.title}</div>
            {g.items.map((it) =>
          <button key={it.id} className={`nav-item ${route === it.id ? "active" : ""}`} onClick={() => setRoute(it.id)}>
                <span className="nav-icon" style={it.color ? { color: it.color } : null}>{it.icon}</span>
                <span style={{ flex: 1 }}>{it.label}</span>
                {it.badge > 0 && <span className="nav-item-badge">{it.badge}</span>}
              </button>
          )}
          </div>
        )}
      </nav>

      <div className="user-box">
        <div className="user-avatar">{user.name[0]}</div>
        <div className="user-info">
          <div className="user-name">{user.name}</div>
          <div className="user-role">{user.role === "pm" ? "PM · แก้ไขได้ทั้งหมด" : user.role === "store" ? "Store · จัดการคลัง" : (user.role === "admin" ? "ผู้ดูแลระบบ" : "ผู้จัดการ")}</div>
        </div>
        <button className="icon-btn" onClick={onLogout} title="ออกจากระบบ">⏻</button>
      </div>
      <button className="reset-btn" onClick={onReset} title="รีเซ็ตข้อมูล">↻ รีเซ็ตข้อมูลตัวอย่าง</button>
    </aside>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);