'use client';

import { useActionState } from 'react';
import { loginAction, type FormState } from '@/app/admin/actions';

const initial: FormState = { status: 'idle' };

export default function LoginForm({ supabase }: { supabase: boolean }) {
  const [state, action, pending] = useActionState(loginAction, initial);

  return (
    <form action={action} className="mt-6 space-y-4">
      {supabase && (
        <div>
          <label htmlFor="email" className="field-label">
            E-posta
          </label>
          <input
            id="email"
            name="email"
            type="email"
            required
            autoComplete="username"
            className="field"
            placeholder="admin@buelgurme.com"
          />
        </div>
      )}
      <div>
        <label htmlFor="password" className="field-label">
          Şifre
        </label>
        <input
          id="password"
          name="password"
          type="password"
          required
          autoComplete="current-password"
          className="field"
          placeholder="••••••••"
        />
      </div>

      {state.status === 'error' && (
        <p className="rounded-xl bg-red-50 px-4 py-2.5 text-sm text-red-700">{state.message}</p>
      )}

      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
        {pending ? 'Giriş yapılıyor…' : 'Giriş yap'}
      </button>
    </form>
  );
}