// VFM Auth — modal + useAuth hook
// Requires vfm-api.js loaded before this file.

const AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  const [user, setUser]       = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    window.vfmAuth.getUser().then(({ data: { user } }) => {
      setUser(user);
      setLoading(false);
    });
    const { data: { subscription } } = window.vfmAuth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null);
    });
    return () => subscription.unsubscribe();
  }, []);

  return (
    <AuthContext.Provider value={{ user, loading }}>
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  return React.useContext(AuthContext);
}

// ---- Auth Modal ----
function AuthModal({ open, onClose, defaultTab = 'signin' }) {
  const [tab, setTab]           = React.useState(defaultTab);
  const [email, setEmail]       = React.useState('');
  const [password, setPassword] = React.useState('');
  const [name, setName]         = React.useState('');
  const [error, setError]       = React.useState('');
  const [busy, setBusy]         = React.useState(false);
  const [done, setDone]         = React.useState(false);

  React.useEffect(() => {
    if (open) { setError(''); setDone(false); setTab(defaultTab); }
  }, [open, defaultTab]);

  if (!open) return null;

  async function handleSubmit(e) {
    e.preventDefault();
    setBusy(true); setError('');
    try {
      if (tab === 'signup') {
        const { error } = await window.vfmAuth.signUp(email, password, name);
        if (error) throw error;
        setDone(true);
      } else {
        const { error } = await window.vfmAuth.signIn(email, password);
        if (error) throw error;
        onClose();
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setBusy(false);
    }
  }

  async function handleReset(e) {
    e.preventDefault();
    if (!email) { setError('Enter your email above first.'); return; }
    setBusy(true);
    const { error } = await window.vfmAuth.resetPassword(email);
    setBusy(false);
    if (error) setError(error.message);
    else setError('Password reset email sent!');
  }

  return (
    <div className="auth-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="auth-modal" role="dialog" aria-modal="true" aria-label="Sign in">
        <button className="auth-close" onClick={onClose} aria-label="Close">✕</button>

        <div className="auth-logo">VFM</div>
        <p className="auth-tagline">Vancouver Film Maker</p>

        <div className="auth-tabs">
          {['signin','signup'].map(t => (
            <button
              key={t}
              className={`auth-tab${tab === t ? ' auth-tab--active' : ''}`}
              onClick={() => { setTab(t); setError(''); setDone(false); }}
            >
              {t === 'signin' ? 'Sign In' : 'Create Account'}
            </button>
          ))}
        </div>

        {done ? (
          <div className="auth-success">
            <div style={{ fontSize: '2.5rem', marginBottom: '0.75rem' }}>📬</div>
            <p>Check your email to confirm your account, then sign in.</p>
            <button className="auth-btn" onClick={() => { setDone(false); setTab('signin'); }}>
              Back to Sign In
            </button>
          </div>
        ) : (
          <form className="auth-form" onSubmit={handleSubmit}>
            {tab === 'signup' && (
              <div className="auth-field">
                <label className="auth-label">Full Name</label>
                <input
                  className="auth-input"
                  type="text"
                  placeholder="Jane Doe"
                  value={name}
                  onChange={e => setName(e.target.value)}
                  required
                  autoComplete="name"
                />
              </div>
            )}
            <div className="auth-field">
              <label className="auth-label">Email</label>
              <input
                className="auth-input"
                type="email"
                placeholder="you@example.com"
                value={email}
                onChange={e => setEmail(e.target.value)}
                required
                autoComplete="email"
              />
            </div>
            <div className="auth-field">
              <label className="auth-label">Password</label>
              <input
                className="auth-input"
                type="password"
                placeholder={tab === 'signup' ? 'Minimum 8 characters' : '••••••••'}
                value={password}
                onChange={e => setPassword(e.target.value)}
                required
                minLength={8}
                autoComplete={tab === 'signup' ? 'new-password' : 'current-password'}
              />
            </div>

            {error && <p className="auth-error">{error}</p>}

            <button className="auth-btn" type="submit" disabled={busy}>
              {busy ? 'Please wait…' : tab === 'signin' ? 'Sign In' : 'Create Account'}
            </button>

            {tab === 'signin' && (
              <button type="button" className="auth-forgot" onClick={handleReset} disabled={busy}>
                Forgot password?
              </button>
            )}
          </form>
        )}
      </div>
    </div>
  );
}

// ---- User Avatar Menu ----
function UserMenu({ user, onOpenDashboard, onSignOut }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const initials = (user.user_metadata?.full_name || user.email || 'U')
    .split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();

  React.useEffect(() => {
    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  return (
    <div className="user-menu-wrap" ref={ref}>
      <button
        className="user-avatar-btn"
        onClick={() => setOpen(o => !o)}
        aria-label="Account menu"
        aria-expanded={open}
      >
        <span className="user-avatar">{initials}</span>
      </button>
      {open && (
        <div className="user-dropdown" role="menu">
          <div className="user-dropdown-email">{user.email}</div>
          <button className="user-dropdown-item" onClick={() => { setOpen(false); onOpenDashboard(); }}>
            🎬 My Courses
          </button>
          <button className="user-dropdown-item user-dropdown-item--danger" onClick={() => { setOpen(false); onSignOut(); }}>
            Sign Out
          </button>
        </div>
      )}
    </div>
  );
}

// Expose globally
window.AuthProvider  = AuthProvider;
window.useAuth       = useAuth;
window.AuthModal     = AuthModal;
window.UserMenu      = UserMenu;