"use client";

import { useState } from "react";
import { login } from "@/app/actions/auth";

export default function LoginClient() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    const formData = new FormData(e.currentTarget);
    const result = await login(formData);

    if (result.success) {
      window.location.href = "/admin"; // Başarılı giriş
    } else {
      setError(result.error || "Giriş başarısız.");
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
      <div className="max-w-md w-full bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
        
        <div className="bg-charcoal p-8 text-center flex flex-col items-center">
          <img src="/logo.png" alt="Kozmos Logo" className="h-16 mb-2 brightness-0 invert opacity-90 object-contain" />
          <p className="text-cream/70 text-sm mt-1">Yönetim Paneline Giriş Yapın</p>
        </div>

        <form onSubmit={handleSubmit} className="p-8 space-y-6">
          {error && (
            <div className="bg-red-50 text-red-600 p-4 rounded-xl text-sm font-medium text-center">
              {error}
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">E-posta Adresi</label>
            <input 
              type="email" 
              name="email" 
              required
              className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none transition-all"
              placeholder="admin@kozmosbeach.com"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Şifre</label>
            <input 
              type="password" 
              name="password" 
              required
              className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none transition-all"
              placeholder="••••••••"
            />
          </div>

          <button 
            type="submit" 
            disabled={loading}
            className="w-full py-3.5 bg-turquoise text-white rounded-xl font-medium hover:bg-turquoise/90 focus:ring-4 focus:ring-turquoise/20 transition-all disabled:opacity-70 mt-2"
          >
            {loading ? "Giriş Yapılıyor..." : "Giriş Yap"}
          </button>
        </form>
        
        <div className="p-4 bg-gray-50 border-t border-gray-100 text-center">
          <a href="/" className="text-sm text-gray-500 hover:text-turquoise transition-colors">
            ← Siteye Geri Dön
          </a>
        </div>
      </div>
    </div>
  );
}