'use client';
import { useState, useRef } from 'react';
import { useRouter } from 'next/navigation';

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [captcha, setCaptcha] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const captchaImgRef = useRef(null);

  const refreshCaptcha = () => {
    if (captchaImgRef.current) {
      captchaImgRef.current.src = `/api/captcha?${new Date().getTime()}`;
    }
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    setError('');
    setSuccess('');

    const res = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password, captcha })
    });

    const data = await res.json();
    if (!res.ok) {
      setError(data.error);
      refreshCaptcha();
      setCaptcha('');
    } else {
      setSuccess(data.message);
      router.push(data.redirect || '/dash');
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 text-gray-900 font-sans">
      <div className="bg-white p-8 rounded-lg shadow-xl w-full max-w-md border border-gray-100">
        <h1 className="text-2xl font-bold mb-6 text-center text-[#28CC95]">Kalbot Access</h1>

        {error && <div className="bg-red-50 border border-red-200 text-red-600 p-3 rounded mb-4 text-sm">{error}</div>}
        {success && <div className="bg-green-50 border border-green-200 text-green-600 p-3 rounded mb-4 text-sm">{success}</div>}

        <form onSubmit={handleLogin} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
            <input type="email" required className="w-full bg-white border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-[#28CC95] focus:ring-1 focus:ring-[#28CC95] transition-shadow" value={email} onChange={(e) => setEmail(e.target.value)} />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
            <input type="password" required className="w-full bg-white border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-[#28CC95] focus:ring-1 focus:ring-[#28CC95] transition-shadow" value={password} onChange={(e) => setPassword(e.target.value)} />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Captcha Verification</label>
            <div className="flex items-center space-x-3 mb-2">
              <img ref={captchaImgRef} src="/api/captcha" alt="captcha" className="h-12 rounded cursor-pointer border border-gray-300" onClick={refreshCaptcha} title="Click to refresh" />
              <button type="button" onClick={refreshCaptcha} className="text-sm font-medium text-[#28CC95] hover:opacity-80 transition-opacity">Refresh</button>
            </div>
            <input type="text" required placeholder="Enter the text above" className="w-full bg-white border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-[#28CC95] focus:ring-1 focus:ring-[#28CC95] transition-shadow" value={captcha} onChange={(e) => setCaptcha(e.target.value)} />
          </div>
          <button type="submit" className="w-full bg-[#28CC95] hover:brightness-95 text-white font-bold py-2 px-4 rounded transition-all mt-6 shadow-sm">Login</button>
        </form>
      </div>
    </div>
  );
}