/* auth.jsx — mock authentication + access control.
   Studio account sees everything. Guests (cô dâu chú rể) unlock a project
   with its access code; their session only sees granted projects.
   Persisted in localStorage `cp_auth_v1`. */

const AUTH_KEY = "cp_auth_v1";

function useAuth() {
  // Có cấu hình Supabase → auth thật. Chưa → mock localStorage.
  if (window.cpConfigured && window.cpConfigured()) return useRemoteAuth();
  return useLocalAuth();
}

function useLocalAuth() {
  const [user, setUser] = React.useState(() => {
    try { const raw = localStorage.getItem(AUTH_KEY); if (raw) return JSON.parse(raw); } catch (e) {}
    return null;
  });
  React.useEffect(() => {
    try { user ? localStorage.setItem(AUTH_KEY, JSON.stringify(user)) : localStorage.removeItem(AUTH_KEY); } catch (e) {}
  }, [user]);

  return {
    user,
    loginStudio(email) { setUser({ role: "studio", name: "Studio Lụa", email: email || "studio@lua.vn" }); },
    loginClient(name, projectId) { setUser({ role: "client", name: name || "Cô dâu & chú rể", projectIds: [projectId] }); },
    grantProject(projectId) {
      setUser((u) => u && !u.projectIds.includes(projectId) ? { ...u, projectIds: [...u.projectIds, projectId] } : u);
    },
    logout() { setUser(null); },
  };
}

function viErr(e) {
  const m = (e && (e.message || e.error_description)) || String(e || "");
  if (/Invalid login/i.test(m)) return "Email hoặc mật khẩu không đúng.";
  if (/already registered/i.test(m)) return "Email đã được đăng ký. Hãy đăng nhập.";
  if (/Email not confirmed/i.test(m)) return "Email chưa xác nhận. Kiểm tra hộp thư (hoặc tắt email-confirm trong Supabase).";
  if (/rate limit|too many/i.test(m)) return "Gửi quá nhiều lần. Đợi một lát rồi thử lại.";
  return m;
}

function LoginScreen({ store, auth }) {
  const configured = !!auth.configured;
  const [tab, setTab] = React.useState("client");
  const [email, setEmail] = React.useState("");
  const [pass, setPass] = React.useState("");
  const [name, setName] = React.useState("");
  const [code, setCode] = React.useState("");
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [signup, setSignup] = React.useState(false);     // studio: chế độ tạo tài khoản
  const [otpStage, setOtpStage] = React.useState("enter"); // khách: 'enter' → 'code'
  const [otp, setOtp] = React.useState("");
  const [info, setInfo] = React.useState("");
  const cover = window.makePhoto(424242, 900, 1200);

  const codes = store._data.projects.filter((p) => p.code).map((p) => ({ code: p.code, name: p.name }));

  // ----- chế độ thật (Supabase) -----
  const doStudioReal = async () => {
    if (!email.trim() || !pass) { setErr("Nhập email và mật khẩu."); return; }
    setBusy(true); setErr("");
    try {
      if (signup) await auth.auth.signUpStudio(email.trim(), pass, name.trim());
      else await auth.auth.signInStudio(email.trim(), pass);
      // onAuthStateChange sẽ tự cập nhật user → app chuyển sang dashboard
    } catch (e) { setErr(viErr(e)); } finally { setBusy(false); }
  };
  // Khách (chế độ thật): đăng nhập ẩn danh bằng TÊN rồi vào album bằng MÃ studio cấp.
  const doClientReal = async () => {
    if (!code.trim()) { setErr("Nhập mã truy cập studio đã gửi."); return; }
    setBusy(true); setErr("");
    try {
      await auth.auth.signInClientAnon(name.trim());
      await window.CP_CLOUD.db.redeemCode(code.trim());
      await store.reload();
      // auth onChange + reload sẽ chuyển sang dashboard và hiện album
    } catch (e) {
      setErr("Mã không đúng, hoặc chưa bật Anonymous sign-in trong Supabase.");
      try { await auth.auth.signOut(); } catch (e2) {}
      setBusy(false);
    }
  };

  // ----- chế độ demo (localStorage) -----
  const doStudioMock = () => { if (!email.trim()) return; auth.loginStudio(email.trim()); };
  const doClientMock = () => {
    const proj = store.projectByCode(code);
    if (!proj) { setErr("Mã không đúng hoặc album chưa được cấp quyền."); return; }
    auth.loginClient(name.trim() || proj.guests[0]?.name, proj.id);
  };

  return (
    <div className="login">
      <div className="login-art" style={{ backgroundImage: `url(${cover})` }}>
        <div className="login-art-veil" />
        <div className="login-art-inner">
          <div className="brand" style={{ color: "#fff" }}>
            <div className="brand-mark"><Icon name="camera" size={19} sw={1.9} /></div>
            <div><div className="brand-name" style={{ color: "#fff" }}>Chọn Ảnh</div></div>
          </div>
          <div className="login-quote">
            <div className="serif">Mỗi khung hình<br />xứng đáng<br />được lựa chọn.</div>
            <p>Nền tảng chọn &amp; duyệt ảnh cưới giữa studio và cô dâu chú rể.</p>
          </div>
        </div>
      </div>

      <div className="login-form">
        <div className="login-box">
          <h1 className="serif">Chào mừng trở lại</h1>
          <p className="login-sub">Đăng nhập để xem album của bạn.</p>

          <div className="login-tabs">
            <button className={tab === "client" ? "on" : ""} onClick={() => { setTab("client"); setErr(""); }}>
              <Icon name="heart" size={16} /> Cô dâu &amp; chú rể
            </button>
            <button className={tab === "studio" ? "on" : ""} onClick={() => { setTab("studio"); setErr(""); }}>
              <Icon name="camera" size={16} /> Studio
            </button>
          </div>

          {tab === "client" ? (
            configured ? (
              <div className="login-fields">
                <div className="input-group"><label>Tên của bạn</label>
                  <input value={name} onChange={(e) => setName(e.target.value)} placeholder="VD: Minh Linh" autoFocus /></div>
                <div className="input-group"><label>Mã truy cập album</label>
                  <input value={code} onChange={(e) => { setCode(e.target.value.toUpperCase()); setErr(""); }}
                    placeholder="Nhập mã studio đã gửi" style={{ letterSpacing: "0.18em", fontWeight: 700 }}
                    onKeyDown={(e) => e.key === "Enter" && doClientReal()} /></div>
                {err && <div className="login-err"><Icon name="info" size={15} /> {err}</div>}
                <button className="btn btn-primary btn-lg" style={{ width: "100%" }} onClick={doClientReal} disabled={busy}>
                  <Icon name="right" size={18} /> {busy ? "Đang vào…" : "Vào album"}
                </button>
                <p className="login-note">Chỉ cần tên và mã studio gửi — không cần email. Mỗi album một mã riêng.</p>
              </div>
            ) : (
              <div className="login-fields">
                <div className="input-group"><label>Tên của bạn (tuỳ chọn)</label>
                  <input value={name} onChange={(e) => setName(e.target.value)} placeholder="VD: Minh Linh" /></div>
                <div className="input-group"><label>Mã truy cập album</label>
                  <input value={code} onChange={(e) => { setCode(e.target.value.toUpperCase()); setErr(""); }}
                    placeholder="Nhập mã studio đã gửi" style={{ letterSpacing: "0.18em", fontWeight: 700 }}
                    onKeyDown={(e) => e.key === "Enter" && doClientMock()} /></div>
                {err && <div className="login-err"><Icon name="info" size={15} /> {err}</div>}
                <button className="btn btn-primary btn-lg" style={{ width: "100%" }} onClick={doClientMock}>
                  <Icon name="right" size={18} /> Vào album
                </button>
                {codes.length > 0 && (
                  <div className="login-demo">
                    <span>Mã demo:</span>
                    {codes.map((c) => (
                      <button key={c.code} className="code-chip" onClick={() => { setCode(c.code); setErr(""); }} title={c.name}>{c.code}</button>
                    ))}
                  </div>
                )}
                <p className="login-note">Bạn chỉ thấy được album mà studio đã cấp mã. Mỗi album một mã riêng.</p>
              </div>
            )
          ) : (
            configured ? (
              <div className="login-fields">
                {signup && (
                  <div className="input-group"><label>Tên studio</label>
                    <input value={name} onChange={(e) => setName(e.target.value)} placeholder="VD: Studio Lụa" /></div>
                )}
                <div className="input-group"><label>Email</label>
                  <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email@studio.vn" /></div>
                <div className="input-group"><label>Mật khẩu</label>
                  <input type="password" value={pass} onChange={(e) => setPass(e.target.value)}
                    onKeyDown={(e) => e.key === "Enter" && doStudioReal()} /></div>
                {err && <div className="login-err"><Icon name="info" size={15} /> {err}</div>}
                <button className="btn btn-primary btn-lg" style={{ width: "100%" }} onClick={doStudioReal} disabled={busy}>
                  <Icon name="camera" size={17} /> {busy ? "Đang xử lý…" : (signup ? "Tạo tài khoản studio" : "Đăng nhập Studio")}
                </button>
                <button className="btn btn-ghost btn-sm" style={{ width: "100%" }} onClick={() => { setSignup((v) => !v); setErr(""); }}>
                  {signup ? "Đã có tài khoản? Đăng nhập" : "Chưa có tài khoản? Tạo mới"}
                </button>
              </div>
            ) : (
              <div className="login-fields">
                <div className="input-group"><label>Email</label>
                  <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email@studio.vn" /></div>
                <div className="input-group"><label>Mật khẩu</label>
                  <input type="password" value={pass} onChange={(e) => setPass(e.target.value)}
                    onKeyDown={(e) => e.key === "Enter" && doStudioMock()} /></div>
                <button className="btn btn-primary btn-lg" style={{ width: "100%" }} onClick={doStudioMock}>
                  <Icon name="camera" size={17} /> Đăng nhập Studio
                </button>
                <p className="login-note">Tài khoản studio quản lý mọi project và cấp quyền cho khách. (Bản demo: bấm đăng nhập là vào.)</p>
              </div>
            )
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { useAuth, LoginScreen });