"use client";

import { useState } from "react";
import { User, Lock, Save, AlertCircle, ArrowLeft } from "lucide-react";
import { actualizarPerfil } from "@/app/actions/perfil";
import { useRouter } from "next/navigation";

export default function PerfilClient({ user }: { user: any }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    setMessage(null);

    const formData = new FormData(e.currentTarget);
    const password = formData.get("password") as string;
    const confirmPassword = formData.get("confirmPassword") as string;

    if (password && password !== confirmPassword) {
      setMessage({ type: 'error', text: "Las contraseñas no coinciden" });
      setLoading(false);
      return;
    }

    const res = await actualizarPerfil(formData);
    
    if (res.success) {
      setMessage({ type: 'success', text: "Perfil actualizado exitosamente." });
      setTimeout(() => {
        if (user.role === "ESTUDIANTE") router.push("/estudiante");
        else if (user.role === "PROFESOR") router.push("/profesor");
        else router.push("/dashboard");
      }, 2000);
    } else {
      setMessage({ type: 'error', text: res.error || "Ocurrió un error al actualizar." });
    }
    setLoading(false);
  };

  return (
    <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10 border border-gray-200">
      <button 
        onClick={() => router.back()}
        className="mb-6 flex items-center text-sm font-semibold text-gray-500 hover:text-gray-900 transition-colors"
      >
        <ArrowLeft className="w-4 h-4 mr-1" /> Volver
      </button>

      {message && (
        <div className={`mb-6 p-4 rounded-xl text-sm font-bold flex items-center gap-2 ${message.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
          <AlertCircle className="w-5 h-5 shrink-0" />
          {message.text}
        </div>
      )}

      <form className="space-y-6" onSubmit={handleSubmit}>
        <h3 className="text-lg font-bold text-gray-900 border-b pb-2 flex items-center gap-2">
          <User className="w-5 h-5 text-blue-600" />
          Datos Personales
        </h3>

        <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
          <div>
            <label className="block text-sm font-semibold text-gray-700">Nombre</label>
            <div className="mt-1">
              <input name="name" type="text" defaultValue={user.name || ""} required className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
            </div>
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-700">Apellido</label>
            <div className="mt-1">
              <input name="apellido" type="text" defaultValue={user.apellido || ""} className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
            </div>
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-700">Cédula / RIF</label>
            <div className="mt-1">
              <input name="cedula" type="text" defaultValue={user.cedula || ""} required className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
            </div>
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-700">Correo Electrónico</label>
            <div className="mt-1">
              <input name="email" type="email" defaultValue={user.email || ""} required className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
            </div>
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-700">Teléfono</label>
            <div className="mt-1">
              <input name="telefono" type="text" defaultValue={user.telefono || ""} className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
            </div>
          </div>

          <div className="sm:col-span-2">
            <label className="block text-sm font-semibold text-gray-700">Dirección</label>
            <div className="mt-1">
              <textarea name="direccion" rows={2} defaultValue={user.direccion || ""} className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
            </div>
          </div>
        </div>

        <h3 className="text-lg font-bold text-gray-900 border-b pb-2 pt-6 flex items-center gap-2">
          <Lock className="w-5 h-5 text-red-500" />
          Actualizar Contraseña
        </h3>
        <p className="text-xs text-gray-500 mb-4">Deja estos campos en blanco si no deseas cambiar tu contraseña actual.</p>

        <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
          <div>
            <label className="block text-sm font-semibold text-gray-700">Nueva Contraseña</label>
            <div className="mt-1">
              <input name="password" type="password" minLength={6} className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
            </div>
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-700">Confirmar Contraseña</label>
            <div className="mt-1">
              <input name="confirmPassword" type="password" minLength={6} className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
            </div>
          </div>
        </div>

        <div className="pt-6">
          <button
            type="submit"
            disabled={loading}
            className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-50 items-center gap-2"
          >
            {loading ? <span className="animate-spin text-xl leading-none">⟳</span> : <Save className="w-5 h-5" />}
            Guardar Cambios
          </button>
        </div>
      </form>
    </div>
  );
}