'use client';

import Link from 'next/link';
import { useActionState } from 'react';
import { login } from './actions';
import AuthShell from '@/components/auth/AuthShell';

export default function LoginPage() {
  const [error, formAction, pending] = useActionState(login, null);
  return (
    <AuthShell
      photo="/despues.webp"
      photoAlt="Cocina reformada"
      caption="Tus leads, ya cualificados."
      captionSub="Render IA, presupuesto orientativo y datos del cliente. Todo en un panel."
    >
      <form action={formAction} className="flex flex-col gap-5">
        <div>
          <h1 className="font-display text-3xl tracking-tight text-black">Entra en tu panel</h1>
          <p className="mt-1 text-sm text-gray-500">Gestiona tus leads y tu funnel.</p>
        </div>

        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium text-gray-700">Email</span>
          <input
            name="email"
            type="email"
            required
            autoComplete="email"
            className="rounded-lg border border-gray-300 px-3 py-2.5 focus:border-primary-700 focus:outline-none focus:ring-1 focus:ring-primary-700"
          />
        </label>
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium text-gray-700">Contraseña</span>
          <input
            name="password"
            type="password"
            required
            autoComplete="current-password"
            className="rounded-lg border border-gray-300 px-3 py-2.5 focus:border-primary-700 focus:outline-none focus:ring-1 focus:ring-primary-700"
          />
        </label>

        {error && <p className="text-sm text-red-600">{error}</p>}

        <button type="submit" disabled={pending} className="btn bg-primary-700 text-white hover:bg-primary-900 w-full disabled:opacity-60">
          {pending ? 'Entrando…' : 'Entrar'}
        </button>

        <p className="text-center text-sm text-gray-500">
          ¿No tienes cuenta?{' '}
          <Link href="/signup" className="font-semibold text-primary-700 hover:underline">
            Empieza gratis
          </Link>
        </p>
      </form>
    </AuthShell>
  );
}
