'use client';

import { useActionState } from 'react';
import { login } from './actions';

export default function LoginPage() {
  const [state, loginAction, isPending] = useActionState(login, undefined);

  return (
    <div className="min-h-screen bg-white py-4 px-4">
      <main className="max-w-7xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
        <h1 className="text-3xl font-bold mb-6">Ausgaben - Log</h1>

        <div className="flex items-center justify-center py-8">
          <div className="max-w-md w-full space-y-8 bg-white p-8 rounded-2xl shadow-xl">
            <div className="text-center">
              <h2 className="text-2xl font-bold mb-2">Anmeldung</h2>
              <p className="text-gray-600">
                Bitte melden Sie sich an, um fortzufahren
              </p>
            </div>

            <form action={loginAction} className="mt-8 space-y-6">
              <div className="space-y-4">
                <div>
                  <label
                    htmlFor="username"
                    className="block text-sm font-medium text-gray-700 mb-1"
                  >
                    Benutzername
                  </label>
                  <input
                    id="username"
                    name="username"
                    type="text"
                    required
                    autoComplete="off"
                    className="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 bg-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                    placeholder="Benutzername"
                    disabled={isPending}
                  />
                </div>

                <div>
                  <label
                    htmlFor="password"
                    className="block text-sm font-medium text-gray-700 mb-1"
                  >
                    Passwort
                  </label>
                  <input
                    id="password"
                    name="password"
                    type="password"
                    required
                    autoComplete="new-password"
                    className="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 bg-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                    placeholder="Passwort"
                    disabled={isPending}
                  />
                </div>
              </div>

              {state?.error && (
                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
                  {state.error}
                </div>
              )}

              <button
                type="submit"
                disabled={isPending}
                className="w-full flex justify-center py-3 px-4 border border-transparent text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-lg hover:shadow-xl"
              >
                {isPending ? 'Anmeldung läuft...' : 'Anmelden'}
              </button>
            </form>
          </div>
        </div>
      </main>
    </div>
  );
}