lcbp3/frontend/app/(auth)/login/page.tsx

// File: app/(auth)/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 { signIn } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { Eye, EyeOff, Loader2 } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

// กำหนด Schema สำหรับตรวจสอบข้อมูลฟอร์ม
const loginSchema = z.object({
  username: z.string().min(1, 'กรุณาระบุชื่อผู้ใช้งาน'),
  password: z.string().min(1, 'กรุณาระบุรหัสผ่าน'),
});

type LoginValues = z.infer<typeof loginSchema>;

export default function LoginPage() {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  // Removed local errorMessage state in favor of toast

  // ตั้งค่า React Hook Form
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginValues>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      username: '',
      password: '',
    },
  });

  // ฟังก์ชันเมื่อกด Submit
  async function onSubmit(data: LoginValues) {
    setIsLoading(true);

    try {
      // เรียกใช้ NextAuth signIn (Credential Provider)
      const result = await signIn('credentials', {
        username: data.username,
        password: data.password,
        redirect: false, // เราจะจัดการ Redirect เอง
      });

      if (result?.error) {
        // กรณี Login ไม่สำเร็จ
        toast.error('เข้าสู่ระบบไม่สำเร็จ', {
          description: 'ชื่อผู้ใช้งานหรือรหัสผ่านไม่ถูกต้อง กรุณาลองใหม่',
        });
        return;
      }

      // Login สำเร็จ -> ไปหน้า Dashboard
      toast.success('เข้าสู่ระบบสำเร็จ', {
        description: 'กำลังพาท่านไปยังหน้า Dashboard...',
      });
      router.push('/dashboard');
      router.refresh(); // Refresh เพื่อให้ Server Component รับรู้ Session ใหม่
    } catch (_error) {
      toast.error('เกิดข้อผิดพลาด', {
        description: 'ระบบขัดข้อง กรุณาลองใหม่อีกครั้ง หรือติดต่อผู้ดูแลระบบ',
      });
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <Card className="w-full max-w-sm shadow-lg">
      <CardHeader className="space-y-1 text-center">
        <CardTitle className="text-2xl font-bold text-primary">LCBP3 DMS</CardTitle>
        <CardDescription>กรอกชื่อผู้ใช้งานและรหัสผ่านเพื่อเข้าสู่ระบบ</CardDescription>
      </CardHeader>

      <form onSubmit={handleSubmit(onSubmit)}>
        <CardContent className="grid gap-4">
          {/* Username Field */}
          <div className="grid gap-2">
            <Label htmlFor="username">ชื่อผู้ใช้งาน</Label>
            <Input
              id="username"
              placeholder="username"
              type="text"
              autoCapitalize="none"
              autoComplete="username"
              autoCorrect="off"
              disabled={isLoading}
              className={errors.username ? 'border-destructive' : ''}
              {...register('username')}
            />
            {errors.username && <p className="text-xs text-destructive">{errors.username.message}</p>}
          </div>

          {/* Password Field */}
          <div className="grid gap-2">
            <Label htmlFor="password">รหัสผ่าน</Label>
            <div className="relative">
              <Input
                id="password"
                placeholder="••••••••"
                type={showPassword ? 'text' : 'password'}
                autoComplete="current-password"
                disabled={isLoading}
                className={errors.password ? 'border-destructive pr-10' : 'pr-10'}
                {...register('password')}
              />
              {/* ปุ่ม Show/Hide Password */}
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                onClick={() => setShowPassword(!showPassword)}
                disabled={isLoading}
              >
                {showPassword ? (
                  <EyeOff className="h-4 w-4 text-muted-foreground" />
                ) : (
                  <Eye className="h-4 w-4 text-muted-foreground" />
                )}
                <span className="sr-only">{showPassword ? 'Hide password' : 'Show password'}</span>
              </Button>
            </div>
            {errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
          </div>
        </CardContent>

        <CardFooter>
          <Button className="w-full" type="submit" disabled={isLoading}>
            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            เข้าสู่ระบบ
          </Button>
        </CardFooter>
      </form>
    </Card>
  );
}