/* projects.jsx — React via Babel standalone, no imports.
   Bề mặt thương hiệu BIM-UP: màn đăng nhập + trang chọn dự án. */

(function () {
  const { useState } = React;

  const firstChar = (s) => ((s || "").trim()[0] || "?").toUpperCase();

  // ---------- QR placeholder (đồ hoạ giống mã QR; tính năng đang phát triển) ----------
  function QrCode({ size = 196 }) {
    const N = 25, cell = size / N;
    const inBox = (r, c, br, bc) => r >= br && r < br + 7 && c >= bc && c < bc + 7;
    const isFinder = (r, c) => inBox(r, c, 0, 0) || inBox(r, c, 0, N - 7) || inBox(r, c, N - 7, 0);
    let seed = 0x9e3779b9;
    const rnd = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 0xffffffff; };
    const rects = [];
    for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) {
      if (isFinder(r, c)) continue;
      if (r >= 9 && r < 16 && c >= 9 && c < 16) continue; // chừa giữa cho logo
      if (rnd() > 0.5) rects.push(<rect key={r + "-" + c} x={c * cell} y={r * cell} width={cell} height={cell} rx={cell * 0.22} />);
    }
    const finder = (br, bc) => (
      <React.Fragment>
        <rect x={bc * cell} y={br * cell} width={7 * cell} height={7 * cell} rx={cell * 1.4} fill="none" stroke="currentColor" strokeWidth={cell} />
        <rect x={(bc + 2) * cell} y={(br + 2) * cell} width={3 * cell} height={3 * cell} rx={cell * 0.7} />
      </React.Fragment>
    );
    return (
      <svg className="qr-svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
        <g fill="currentColor">{rects}</g>
        <g fill="currentColor">{finder(0, 0)}{finder(0, N - 7)}{finder(N - 7, 0)}</g>
      </svg>
    );
  }

  // ---------- LoginScreen ----------
  function LoginScreen() {
    const [mode, setMode] = useState("signin"); // signin | signup | qr
    const [email, setEmail] = useState("");
    const [pw, setPw] = useState("");
    const [name, setName] = useState("");
    const [org, setOrg] = useState("");
    const [show, setShow] = useState(false);
    const [err, setErr] = useState("");
    const [info, setInfo] = useState("");
    const [busy, setBusy] = useState(false);

    const reset = () => { setErr(""); setInfo(""); };
    const go = (m) => { reset(); setMode(m); };

    const signIn = async () => {
      setBusy(true); reset();
      try { await window.cdeAuth.signIn(email, pw); }       // onAuthStateChange tự chuyển màn
      catch (e) { setErr(e.message || "Đăng nhập thất bại"); }
      finally { setBusy(false); }
    };
    const signUp = async () => {
      setBusy(true); reset();
      try {
        if (!name.trim()) throw new Error("Vui lòng nhập họ và tên");
        if (window.sb && window.sb.auth && window.sb.auth.signUp) {
          const { error } = await window.sb.auth.signUp({
            email, password: pw, options: { data: { full_name: name, company: org } },
          });
          if (error) throw error;
          setInfo("Đã gửi email xác nhận tới " + email + ". Kiểm tra hộp thư để kích hoạt tài khoản.");
        } else {
          setInfo("Đăng ký sẽ được kích hoạt khi hệ thống mở công khai.");
        }
      } catch (e) { setErr(e.message || "Đăng ký thất bại"); }
      finally { setBusy(false); }
    };
    const onKey = (e) => { if (e.key === "Enter") (mode === "signup" ? signUp() : signIn()); };

    const pwField = (
      <div className="login-pw-wrap">
        <input type={show ? "text" : "password"} value={pw} placeholder="Mật khẩu"
          onChange={(e) => setPw(e.target.value)} onKeyDown={onKey} />
        <button className="login-pw-toggle" type="button" title={show ? "Ẩn" : "Hiện"}
          onClick={() => setShow(!show)}>
          {show ? <Icon.eyeOff size={17} /> : <Icon.eye size={17} />}
        </button>
      </div>
    );

    return (
      <div className="login-wrap">
        {/* panel thương hiệu */}
        <div className="login-brand">
          <span className="login-glow" aria-hidden="true" />
          <span className="login-glow b" aria-hidden="true" />
          <img src="/cde/bimup-mark.png" className="login-watermark" alt="" aria-hidden="true" />
          <div className="login-lockup">
            <img src="/cde/bimup-mark.png" className="login-mark" alt="BIM-UP" />
            <div className="login-wordmark">BIMUP CDE<small>BIM-UP STUDIO</small></div>
          </div>
          <div className="login-brand-mid">
            <div className="login-eyebrow">COMMON DATA ENVIRONMENT</div>
            <h1 className="login-hero">Dữ liệu dự án, một nơi duy nhất.</h1>
          </div>
          <div className="login-brand-foot">
            <span>BIM-UP Studio</span>
            <span className="dot" />
            <span>cde.bimupstudio.com</span>
          </div>
        </div>

        {/* cột phải */}
        <div className="login-form">
          <div className="login-card">
            <img src="/cde/bimup-mark.png" className="login-card-mark" alt="" aria-hidden="true" />

            {mode === "qr" ? (
              <React.Fragment>
                <button className="login-back" type="button" onClick={() => go("signin")}>
                  <Icon.chevL size={16} /> Quay lại
                </button>
                <div className="login-title">Đăng nhập bằng QR</div>
                <div className="login-subtitle">Quét nhanh bằng điện thoại — không cần nhập mật khẩu.</div>
                <div className="qr-card">
                  <QrCode />
                  <img src="/cde/bimup-mark.png" className="qr-logo" alt="" />
                </div>
                <ol className="login-steps">
                  <li>Mở ứng dụng <b>BIM-UP</b> trên điện thoại</li>
                  <li>Vào <b>Cài đặt → Quét mã</b></li>
                  <li>Hướng camera vào mã QR ở trên</li>
                </ol>
                <div className="login-note">Tính năng đăng nhập QR đang phát triển.</div>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <div className="login-tabs">
                  <button className={"login-tab " + (mode === "signin" ? "active" : "")}
                    onClick={() => go("signin")}>Đăng nhập</button>
                  <button className={"login-tab " + (mode === "signup" ? "active" : "")}
                    onClick={() => go("signup")}>Đăng ký</button>
                </div>

                {mode === "signin" ? (
                  <React.Fragment>
                    <div className="login-fields">
                      <input type="text" value={email} placeholder="Email"
                        onChange={(e) => setEmail(e.target.value)} onKeyDown={onKey} />
                      {pwField}
                    </div>
                    <div className="login-row">
                      <label className="login-check">
                        <input type="checkbox" defaultChecked /> <span>Ghi nhớ đăng nhập</span>
                      </label>
                      <a className="login-link" href="#"
                        onClick={(e) => { e.preventDefault(); setInfo("Liên hệ quản trị viên để đặt lại mật khẩu."); }}>
                        Quên mật khẩu?
                      </a>
                    </div>
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <div className="login-fields">
                      <input type="text" value={name} placeholder="Họ và tên"
                        onChange={(e) => setName(e.target.value)} onKeyDown={onKey} />
                      <input type="text" value={email} placeholder="Email"
                        onChange={(e) => setEmail(e.target.value)} onKeyDown={onKey} />
                      <input type="text" value={org} placeholder="Đơn vị / Công ty (tuỳ chọn)"
                        onChange={(e) => setOrg(e.target.value)} onKeyDown={onKey} />
                      {pwField}
                    </div>
                  </React.Fragment>
                )}

                {err && <div className="login-err">{err}</div>}
                {info && <div className="login-note ok">{info}</div>}

                <button className="btn login-submit" disabled={busy}
                  onClick={mode === "signup" ? signUp : signIn}>
                  {busy ? "Đang xử lý…" : mode === "signup" ? "Tạo tài khoản" : "Đăng nhập"}
                </button>

                <div className="login-divider">hoặc</div>
                <button className="btn login-qrbtn" type="button" onClick={() => go("qr")}>
                  <Icon.grid size={17} /> Quét mã QR để đăng nhập
                </button>

                <div className="login-hint">
                  {mode === "signin"
                    ? <React.Fragment>Dùng tài khoản được cấp để đăng nhập.</React.Fragment>
                    : <React.Fragment>Bằng việc đăng ký, bạn đồng ý với <b>Điều khoản</b> &amp; <b>Bảo mật</b>.</React.Fragment>}
                </div>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>
    );
  }

  // ---------- ProjectCard ----------
  function ProjectCard({ project, onOpen, onArchive, onDelete }) {
    const admin = !!(onArchive || onDelete);
    const manage = (window.MANAGE_ROLES || ["admin"]).includes(project.role);
    const abbr = (project.code || "").replace(/[^A-Za-z0-9]/g, "").slice(0, 2).toUpperCase();
    const accent = project.accent || "#1f97da";
    const archived = project.status === "archived";
    // Nút thao tác bấm trực tiếp trên thẻ — bỏ menu 3-chấm popup (hay nháy/clip vì
    // card có transform hover + overflow:hidden). Đặt top-left để không đè badge vai trò.
    const actBtn = { width: 28, height: 28, borderRadius: 8, border: "none", background: "rgba(255,255,255,.9)",
      color: "#0f1f24", cursor: "pointer", display: "grid", placeItems: "center", boxShadow: "var(--shadow-sm)" };
    return (
      <div className="proj-card" onClick={() => onOpen(project)} style={{ "--pc": accent }}>
        <div className="proj-cover">
          <span className="proj-mono">{abbr}</span>
          <span className={"proj-role " + (manage ? "manage" : "join")}>
            {manage ? "Quản lý" : "Tham gia"}
          </span>
          {admin && (
            <div onClick={(e) => e.stopPropagation()} style={{ position: "absolute", top: 10, left: 12, zIndex: 3, display: "flex", gap: 6 }}>
              {onArchive && (
                <button title={archived ? "Bỏ lưu trữ" : "Lưu trữ"} onClick={() => onArchive(project)} style={actBtn}>
                  <Icon.inbox size={15} />
                </button>
              )}
              {onDelete && (
                <button title="Xóa vĩnh viễn" onClick={() => onDelete(project)} style={{ ...actBtn, color: "var(--danger)" }}>
                  <Icon.trash size={15} />
                </button>
              )}
            </div>
          )}
        </div>
        <div className="proj-body">
          <div className="proj-head">
            <span className="proj-code">{project.code}</span>
            {project.status === "archived" && <span className="proj-status">Lưu trữ</span>}
          </div>
          <div className="proj-name">{project.name}</div>
          <div className="proj-sub">{project.client}</div>
          <div className="proj-phase"><Icon.flow size={12} /> {project.phase}</div>
          <div className="proj-divider" />
          <div className="proj-meta">
            <span className="proj-stat" title="Tài liệu"><Icon.doc size={13} /> {project.docs}</span>
            <span className="proj-stat" title="Issues mở"><Icon.flag size={13} /> {project.issues}</span>
            <span className="proj-time"><Icon.clock size={13} /> {project.lastActive}</span>
          </div>
        </div>
        <span className="proj-open">Mở <Icon.chevR size={14} /></span>
      </div>
    );
  }

  // ---------- ProjectsHome ----------
  function ProjectsHome({ auth, projects, onOpen, onLogout, theme, setTheme }) {
    const [tab, setTab] = useState("all");
    const [q, setQ] = useState("");

    const name =
      (auth && auth.profile && auth.profile.full_name) ||
      (auth && auth.user && auth.user.email) || "bạn";

    const MR = window.MANAGE_ROLES || ["admin"];
    const manageList = projects.filter((p) => MR.includes(p.role));
    const joinList = projects.filter((p) => !MR.includes(p.role));

    let base;
    if (tab === "manage") base = manageList;
    else if (tab === "join") base = joinList;
    else if (tab === "recent") base = projects.slice(0, 6);
    else base = projects;

    const ql = q.trim().toLowerCase();
    const shown = ql
      ? base.filter((p) => (p.name + " " + p.code + " " + (p.client || "")).toLowerCase().includes(ql))
      : base;

    const isAdmin = auth && auth.profile && auth.profile.role === "admin";

    const TABS = [
      { id: "all", label: "Tất cả", n: projects.length },
      { id: "manage", label: "Quản lý", n: manageList.length },
      { id: "join", label: "Tham gia", n: joinList.length },
      { id: "recent", label: "Gần đây", n: null },
    ];

    return (
      <div className="ph-root">
        <header className="ph-top">
          <div className="ph-lockup">
            <img src="/cde/bimup-mark.png" className="ph-logo" alt="BIM-UP" />
            <div className="ph-brand">BIMUP CDE</div>
          </div>
          <div className="ph-search">
            <Icon.search size={16} />
            <input placeholder="Tìm dự án theo tên, mã, chủ đầu tư…"
              value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
          <button className="icon-btn" title="Đổi giao diện sáng/tối"
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
            {theme === "dark" ? <Icon.sun size={18} /> : <Icon.moon size={18} />}
          </button>
          <div className="ph-user">
            <div className="ph-avatar">{firstChar(name)}</div>
            <button className="btn ph-logout" onClick={onLogout}>Đăng xuất</button>
          </div>
        </header>

        <div className="ph-body">
          <div className="ph-hero">
            <div className="ph-hello">Chào, {name} 👋</div>
            <div className="ph-count">
              Bạn đang có <b>{projects.length}</b> dự án — chọn một dự án để vào không gian làm việc.
            </div>
          </div>

          <div className="ph-tabs">
            {TABS.map((t) => (
              <button key={t.id} className={"ph-tab " + (tab === t.id ? "active" : "")}
                onClick={() => setTab(t.id)}>
                {t.label}{t.n != null && <span className="ph-tab-n">{t.n}</span>}
              </button>
            ))}
          </div>

          <div className="ph-grid">
            {shown.map((p) => <ProjectCard key={p.code} project={p} onOpen={onOpen} />)}
            {/* Màn chọn dự án thật là ProjectHub (hub.jsx) — nút tạo dự án đã làm ở đó.
                ProjectsHome này là code legacy không còn render; bỏ stub "Sắp có". */}
            {shown.length === 0 && (
              <div className="ph-empty">
                <Icon.search size={26} />
                <div>Không tìm thấy dự án phù hợp</div>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  // ---------- export ----------
  window.LoginScreen = LoginScreen;
  window.ProjectsHome = ProjectsHome;
  window.ProjectCard = ProjectCard;
  window.MANAGE_ROLES = ["admin"];
})();