'use client'

import { useActionState } from 'react'
import { login } from '@/app/actions/auth'

export default function LoginPage() {
  const [state, formAction, isPending] = useActionState(login, null)

  return (
    <div className="min-h-screen flex items-center justify-center bg-cream px-4" style={{ backgroundColor: '#F5F0E8' }}>
      <div className="w-full max-w-sm bg-white rounded-2xl shadow-xl overflow-hidden">
        <div className="bg-coffee-dark px-6 py-8 text-center" style={{ backgroundColor: '#3D2B1F' }}>
          <h1 className="text-2xl font-display font-bold text-cream" style={{ color: '#F5F0E8' }}>Kozmos Admin</h1>
          <p className="text-cream/70 text-sm mt-2">Yönetim paneline giriş yapın</p>
        </div>
        
        <form action={formAction} className="px-6 py-8 space-y-5">
          {state?.error && (
            <div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm font-medium border border-red-100">
              {state.error}
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-coffee mb-1.5">Kullanıcı Adı</label>
            <input
              type="text"
              name="username"
              required
              className="w-full px-4 py-2.5 rounded-lg border border-beige/60 bg-cream/30 focus:outline-none focus:ring-2 focus:ring-teal/50"
              placeholder="admin"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-coffee mb-1.5">Şifre</label>
            <input
              type="password"
              name="password"
              required
              className="w-full px-4 py-2.5 rounded-lg border border-beige/60 bg-cream/30 focus:outline-none focus:ring-2 focus:ring-teal/50"
              placeholder="••••••••"
            />
          </div>

          <button
            type="submit"
            disabled={isPending}
            className="w-full py-3 rounded-lg text-white font-medium transition-all"
            style={{ 
              backgroundColor: '#4AAFA8',
              opacity: isPending ? 0.7 : 1
            }}
          >
            {isPending ? 'Giriş yapılıyor...' : 'Giriş Yap'}
          </button>
        </form>
      </div>
    </div>
  )
}