// src/app/login/page.tsx
// 'use client';
// import { useState } from 'react';
// import { useForm } from 'react-hook-form';
// import { zodResolver } from '@hookform/resolvers/zod';
// import * as z from 'zod';
// import Link from 'next/link';
// import { Mail, Lock } from 'lucide-react';
// import { useAuth } from '@/lib/hooks/useAuth';
// import { Button } from '@/components/ui/Button';
// import { Input } from '@/components/ui/Input';
// const loginSchema = z.object({
//     email: z.string().email('Please enter a valid email address'),
//     password: z.string().min(1, 'Password is required'),
// });
// type LoginForm = z.infer<typeof loginSchema>;
// export default function LoginPage() {
//     const { login, isLoading } = useAuth();
//     const [error, setError] = useState<string | null>(null);
//     const {
//         register,
//         handleSubmit,
//         formState: { errors },
//     } = useForm<LoginForm>({
//         resolver: zodResolver(loginSchema),
//     });
//     const onSubmit = async (data: LoginForm) => {
//         try {
//             setError(null);
//             await login(data.email, data.password);
//         } catch (err: any) {
//             setError(err.message || 'Invalid email or password');
//         }
//     };
    
//     return (
//         <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
//             <div className="sm:mx-auto sm:w-full sm:max-w-md">
//                 <Link href="/" className="flex justify-center">
//                     <span className="text-3xl font-bold text-primary-600">DyoLink</span>
//                 </Link>
//                 <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
//                     Sign in to your account
//                 </h2>
//                 <p className="mt-2 text-center text-sm text-gray-600">
//                     Or{' '}
//                     <Link href="/register" className="font-medium text-primary-600 hover:text-primary-500">
//                         start your free trial
//                     </Link>
//                 </p>
//             </div>
//             <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
//                 <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
//                     <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
//                         <Input
//                             label="Email address"
//                             {...register('email')}
//                             type="email"
//                             placeholder="you@example.com"
//                             error={errors.email?.message}
//                             icon={<Mail className="h-5 w-5 text-gray-400" />}
//                         />
//                         <Input
//                             label="Password"
//                             {...register('password')}
//                             type="password"
//                             placeholder="••••••••"
//                             error={errors.password?.message}
//                             icon={<Lock className="h-5 w-5 text-gray-400" />}
//                         />
//                         <div className="flex items-center justify-between">
//                             <div className="flex items-center">
//                                 <input
//                                     id="remember-me"
//                                     name="remember-me"
//                                     type="checkbox"
//                                     className="h-4 w-4 text-primary-600 focus:ring-primary-500border-gray-300 rounded"
//                                 />
//                                 <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
//                                     Remember me
//                                 </label>
//                             </div>
//                             <div className="text-sm">
//                                 <Link href="/forgot-password" className="font-medium text-primary-600 hover:text-primary-500">
//                                     Forgot your password?
//                                 </Link>
//                             </div>
//                         </div>
//                         {error && (
//                             <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
//                                 <p className="text-sm text-red-600">{error}</p>
//                             </div>
//                         )}
//                         <Button
//                             type="submit"
//                             variant="primary"
//                             isLoading={isLoading}
//                             fullWidth
//                         >
//                             Sign in
//                         </Button>
//                     </form>
//                 </div>
//             </div>
//         </div>
//     );
// }
'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import Link from 'next/link';
import { Mail, Lock } from 'lucide-react';

import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';

const loginSchema = z.object({
  email: z.string().email('Please enter a valid email address'),
  password: z.string().min(1, 'Password is required'),
});

type LoginForm = z.infer<typeof loginSchema>;

export default function LoginPage() {
  const { login, isLoading, user, isAuthReady } = useAuth();
  const router = useRouter();

  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (isAuthReady && user) {
      router.push('/today');
    }
  }, [user, isAuthReady, router]);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginForm>({
    resolver: zodResolver(loginSchema),
  });

  const onSubmit = async (data: LoginForm) => {
    try {
      setError(null);
      await login(data.email, data.password);
    } catch (err: any) {
      setError(err.message || 'Invalid email or password');
    }
  };

  if (!isAuthReady) {
    return (
      <div className="min-h-screen app-web-bg flex items-center justify-center">
        <p className="text-text-secondary">Loading...</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        <Link href="/" className="flex justify-center">
          <span className="text-3xl font-semibold text-text-primary">DyoLink</span>
        </Link>
        <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
          Sign in to your account
        </h2>
        <p className="mt-2 text-center text-sm text-text-secondary">
          Or{' '}
          <Link href="/register" className="font-medium text-primary hover:opacity-90">
            start your free trial
          </Link>
        </p>
      </div>

      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="surface-card py-8 px-4 sm:px-10">
          <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
            <Input
              label="Email address"
              {...register('email')}
              type="email"
              placeholder="you@example.com"
              error={errors.email?.message}
              icon={<Mail className="h-5 w-5 icon-flat" />}
            />
            <Input
              label="Password"
              {...register('password')}
              type="password"
              placeholder="••••••••"
              error={errors.password?.message}
              icon={<Lock className="h-5 w-5 icon-flat" />}
            />

            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <input
                  id="remember-me"
                  name="remember-me"
                  type="checkbox"
                  className="h-4 w-4 rounded border-border bg-background-secondary text-primary focus:ring-primary/40"
                />
                <label htmlFor="remember-me" className="ml-2 block text-sm text-text-secondary">
                  Remember me
                </label>
              </div>
              <div className="text-sm">
                <Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
                  Forgot your password?
                </Link>
              </div>
            </div>

            {error && (
              <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
                <p className="text-sm text-red-600">{error}</p>
              </div>
            )}

            <Button
              type="submit"
              variant="primary"
              isLoading={isLoading}
              fullWidth
            >
              Sign in
            </Button>
          </form>
        </div>
      </div>
    </div>
  );
}