'use client';

import { useState, useEffect } from 'react';

export const LAST_USED_KEY = '_app_last_login_method';

export default function LoginPage() {
  const [lastUsedMethod, setLastUsedMethod] = useState(null);
  const [showEmailFields, setShowEmailFields] = useState(false);

  // Tải phương thức đã sử dụng trên mount của component
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const stored = localStorage.getItem(LAST_USED_KEY);
      setLastUsedMethod(stored);
    }
  }, []);

  // Khi nút email được nhấn, hiển thị các trường biểu mẫu và ẩn các phương thức xác thực khác
  const handleEmailLogin = () => {
    setShowEmailFields(true);
  };

  if (showEmailFields) {
    return (
      // Component trường email (thực hiện biểu mẫu của bạn ở đây)
      <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
        <h2 className="text-2xl font-bold mb-6 text-center">Đăng Nhập Bằng Email</h2>
        {/* Thêm các trường biểu mẫu email/mật khẩu, nút gửi, v.v. */}
      </div>
    );
  }

  return (
    <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-6 text-center">Đăng Nhập</h2>

      {/* Đăng Nhập Bằng Email/Mật Khẩu */}
      <div className="relative mb-4">
        <button 
          className="w-full p-3 border border-gray-300 rounded-lg hover:bg-gray-50"
          onClick={handleEmailLogin}
        >
          Tiếp Tục Bằng Email
        </button>
        {lastUsedMethod === 'EMAIL' && <LastUsedBadge />}
      </div>

      <div className="text-center text-gray-400 text-sm mb-4">HOẶC</div>

      {/* Google OAuth */}
      <div className="relative">
        <button 
          className="w-full p-3 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center justify-center"
          onClick={() => handleGoogleLogin()} // Định nghĩa handleGoogleLogin bên dưới
        >
          <GoogleIcon className="w-5 h-5 mr-2" /> {/* Giả định GoogleIcon đã được nhập */}
          Tiếp Tục Bằng Google
        </button>
        {lastUsedMethod === 'GOOGLE' && <LastUsedBadge />}
      </div>
    </div>
  );
}

const LastUsedBadge = () => {
  return (
    <div className="absolute -top-2 -right-2 z-10">
      <span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full border border-blue-200">
        Đã sử dụng cuối
      </span>
    </div>
  );
};

// Hàm tiện ích để lưu phương thức đăng nhập
const saveLoginMethod = (method) => {
  if (typeof window !== 'undefined') {
    localStorage.setItem(LAST_USED_KEY, method);
  }
};

// Xử lý xác thực Email/Mật khẩu (thêm vào logic gửi biểu mẫu)
const handleEmailSubmit = async (formData) => {
  try {
    // Logic xác thực của bạn ở đây
    const response = await signInWithEmail(formData);

    if (response.success) {
      // Lưu phương thức sau khi đăng nhập thành công
      saveLoginMethod('EMAIL');

      // Chuyển hướng đến dashboard
      router.push('/dashboard');
    }
  } catch (error) {
    console.error('Đăng nhập bằng email không thành công:', error);
  }
};

// Xử lý đăng nhập Google
const handleGoogleLogin = async () => {
  try {
    // Bắt đầu quy trình OAuth
    const response = await signInWithGoogle();

    if (response.success) {
      // Lưu phương thức khi thành công
      saveLoginMethod('GOOGLE');

      // OAuth sẽ tự động xử lý chuyển hướng
    }
  } catch (error) {
    console.error('Đăng nhập Google không thành công:', error);
  }
};

// Đối với các nhà cung cấp cho phép hoàn tất phía client
const handleGoogleLogin = async () => {
  // Lưu sở thích trước khi bắt đầu OAuth
  saveLoginMethod('GOOGLE');

  // Bắt đầu quy trình OAuth
  window.location.href = '/auth/google';
};

// Trong handler callback OAuth (/api/auth/callback/google.js)
export default async function handler(req, res) {
  try {
    // Xử lý logic callback OAuth
    const { user, session } = await processOAuthCallback(req);

    if (user) {
      // Chuyển hướng với tham số phương thức đăng nhập
      res.redirect('/dashboard?login_method=GOOGLE');
    }
  } catch (error) {
    res.redirect('/login?error=oauth_failed');
  }
}

// Hook để xử lý phương thức đăng nhập từ tham số URL
const useLoginMethodTracker = () => {
  const router = useRouter();

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const loginMethod = urlParams.get('login_method');

    if (loginMethod) {
      saveLoginMethod(loginMethod);

      // Dọn dẹp URL
      const url = new URL(window.location);
      url.searchParams.delete('login_method');
      window.history.replaceState({}, '', url);
    }
  }, []);
};

// Sử dụng trong dashboard hoặc các trang bảo vệ
export default function Dashboard() {
  useLoginMethodTracker();

  return <div>Chào mừng bạn đến với dashboard của bạn!</div>;
};