"use client";
import Input from "@/components/form/input/InputField";
import Label from "@/components/form/Label";
import { ChevronLeftIcon } from "@/icons";
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import { recoverPassword } from "@/app/actions/auth";
import { AlertTriangle, CheckCircle } from "lucide-react";

export default function RecoverForm() {
  const [errorMsg, setErrorMsg] = useState("");
  const [successMsg, setSuccessMsg] = useState("");
  const [loading, setLoading] = useState(false);

  const handleRecover = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setErrorMsg("");
    setSuccessMsg("");
    const formData = new FormData(e.target as HTMLFormElement);
    
    const res = await recoverPassword(formData);

    if (!res.success) {
      setErrorMsg(res.error || "Ocurrió un error.");
    } else {
      setSuccessMsg(res.message || "Se ha enviado la clave temporal a tu correo.");
    }
    setLoading(false);
  };

  return (
    <div className="flex flex-col flex-1 lg:w-1/2 w-full">
      <div className="w-full max-w-md sm:pt-10 mx-auto mb-5">
        <Link
          href="/signin"
          className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
        >
          <ChevronLeftIcon />
          Volver a iniciar sesión
        </Link>
      </div>
      <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
        <div>
          {/* Logo / Brand */}
          <div className="mb-7 sm:mb-9">
            <div className="flex justify-center mb-6">
               <Image src="/images/logo/logo.png" alt="CursosNirgua Logo" width={64} height={64} className="object-contain drop-shadow-md" />
            </div>
            <h1 className="mb-1 font-bold text-gray-800 text-2xl sm:text-3xl dark:text-white/90">
              Recuperar Contraseña
            </h1>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              Ingresa tu correo electrónico, cédula o RIF para recibir una clave temporal.
            </p>
          </div>

          <div>
            <form onSubmit={handleRecover}>
              <div className="space-y-5">

                {errorMsg && (
                  <div className="p-3 bg-red-50 border border-red-200 text-red-600 rounded-lg text-sm font-medium flex items-center gap-2">
                    <AlertTriangle className="w-5 h-5 shrink-0" /> {errorMsg}
                  </div>
                )}

                {successMsg && (
                  <div className="p-3 bg-green-50 border border-green-200 text-green-600 rounded-lg text-sm font-medium flex items-center gap-2">
                    <CheckCircle className="w-5 h-5 shrink-0" /> {successMsg}
                  </div>
                )}

                {!successMsg && (
                  <>
                    <div>
                      <Label>
                        Correo Electrónico, C.I o RIF <span className="text-error-500">*</span>
                      </Label>
                      <Input name="identifier" placeholder="Ej. info@cursos.nirgua.com.ve o 12345678" type="text" required />
                    </div>

                    <div>
                      <button
                        type="submit"
                        disabled={loading}
                        className="w-full bg-[#1e2a47] hover:bg-[#f04b50] disabled:opacity-60 text-white font-bold py-3.5 rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-md"
                      >
                        {loading ? (
                          <>
                            <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                            Enviando...
                          </>
                        ) : (
                          "Enviar Clave Temporal"
                        )}
                      </button>
                    </div>
                  </>
                )}
              </div>
            </form>

            <div className="mt-6 pt-6 border-t border-gray-100">
              <p className="text-xs text-center text-gray-400">
                ¿Problemas para acceder? Contacta al administrador en{" "}
                <a href="mailto:info@cursos.nirgua.com.ve" className="text-[#1e2a47] font-medium hover:underline">
                  info@cursos.nirgua.com.ve
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}