"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';

export default function LoginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    // In a real application, this would send credentials to an API
    console.log("Login attempt:", { email, password });
    alert("Login functionality is not implemented in this frontend demo.");
  };

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div className="flex min-h-screen items-center justify-center p-4">
        <div className="w-full max-w-md rounded-lg bg-card p-8 shadow-lg">
          <h1 className="mb-6 text-center text-3xl font-semibold text-foreground">
            Iniciar Sesión
          </h1>
          <form onSubmit={handleLogin}>
            <div className="mb-4">
              <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
                Correo Electrónico
              </label>
              <input
                type="email"
                id="email"
                className="w-full rounded-md border border-gray-300 bg-background px-3 py-2 text-foreground focus:border-primary-cta focus:ring-primary-cta"
                placeholder="tu@ejemplo.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
            </div>
            <div className="mb-6">
              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
                Contraseña
              </label>
              <input
                type="password"
                id="password"
                className="w-full rounded-md border border-gray-300 bg-background px-3 py-2 text-foreground focus:border-primary-cta focus:ring-primary-cta"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>
            <ButtonTextShift
              text="Entrar"
              type="submit"
              className="w-full"
              ariaLabel="Iniciar sesión"
            />
          </form>
          <p className="mt-6 text-center text-sm text-foreground">
            ¿Olvidaste tu contraseña?{" "}
            <a href="#" className="text-primary-cta hover:underline">
              Recuperar
            </a>
          </p>
        </div>
      </div>
    </ThemeProvider>
  );
}