'use client';
import { useState } from 'react';
import { signIn } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

export default function ParentLogin() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true); setError('');
    const res = await signIn('credentials', { email, password, redirect: false });
    setLoading(false);
    if (res?.error) { setError('Email atau password salah'); return; }
    router.push('/parent/dashboard');
  };

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className="w-full max-w-sm bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <h1 className="text-xl font-bold text-gray-900 mb-1">Masuk Orang Tua</h1>
        <p className="text-sm text-gray-500 mb-5">Kelola tugas & progress anak</p>
        {error && <p className="text-sm text-red-600 mb-3">{error}</p>}
        <form onSubmit={submit} className="space-y-3">
          <input type="email" required placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)}
            className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#4285F4]" />
          <input type="password" required placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)}
            className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#4285F4]" />
          <button disabled={loading} type="submit"
            className="w-full bg-[#4285F4] text-white py-2.5 rounded-lg hover:bg-blue-600 text-sm font-semibold disabled:opacity-60">
            {loading ? 'Memproses…' : 'Masuk'}
          </button>
        </form>
        <button onClick={() => signIn('google', { callbackUrl: '/parent/dashboard' })}
          className="w-full mt-3 border border-gray-200 text-gray-700 py-2.5 rounded-lg hover:bg-gray-50 text-sm">
          Masuk dengan Google
        </button>
        <p className="text-sm text-gray-500 mt-4 text-center">
          Belum punya akun? <Link href="/parent/register" className="text-[#4285F4] font-medium">Daftar</Link>
        </p>
      </div>
    </div>
  );
}