import { useState } from 'react';
import { motion } from 'framer-motion';
import { X, User, Lock, Save, ShieldCheck } from 'lucide-react';
import api from '../services/api';
import { useToast } from '../context/use-toast';

export default function SettingsPanel({ onClose }: any) {
  const { showToast } = useToast();
  const user = JSON.parse(localStorage.getItem('user') || '{}');
  const [passwords, setPasswords] = useState({ old: '', new: '' });

  const handleUpdatePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      // Endpoint que deberías tener en AuthController o UsersController
      await api.put('/users/change-password', passwords);
      showToast("Contraseña actualizada con éxito", "success");
      onClose();
    } catch (e) {
      showToast("Error: La contraseña actual es incorrecta", "error");
    }
  };

  return (
    <div className="fixed inset-0 z-[300] flex justify-end">
      <motion.div
        initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
        onClick={onClose} className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm"
      />

      <motion.div
        initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }}
        transition={{ type: 'spring', damping: 25, stiffness: 200 }}
        className="relative w-full max-w-sm bg-white h-full shadow-2xl flex flex-col border-l border-slate-200"
      >
        <div className="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
          <h3 className="text-xl font-black text-slate-900 uppercase tracking-tighter">Mi Perfil</h3>
          <button onClick={onClose} className="p-2 hover:bg-slate-200 rounded-xl transition-colors text-slate-400"><X /></button>
        </div>

        <div className="p-8 flex-1 overflow-y-auto space-y-10 custom-scrollbar">
          {/* Info del Cajero */}
          <section className="text-center">
            <div className="w-20 h-20 bg-blue-600 rounded-[2rem] flex items-center justify-center text-white mx-auto mb-4 shadow-xl shadow-blue-200">
              <User size={40} />
            </div>
            <h4 className="text-lg font-black text-slate-900 uppercase">{user.username}</h4>
            <span className="text-[10px] font-black text-blue-500 bg-blue-50 px-3 py-1 rounded-full uppercase tracking-widest border border-blue-100">
              Cajero Central
            </span>
          </section>

          {/* Cambio de Contraseña */}
          <section className="space-y-6">
            <h5 className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
              <Lock size={14} /> Seguridad de Acceso
            </h5>
            <form onSubmit={handleUpdatePassword} className="space-y-4">
              <div className="space-y-1.5">
                <label className="text-[9px] font-black text-slate-500 uppercase ml-1">Contraseña Actual</label>
                <input
                  type="password" required
                  className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl p-3 text-xs font-bold"
                  value={passwords.old}
                  onChange={e => setPasswords({ ...passwords, old: e.target.value })}
                />
              </div>
              <div className="space-y-1.5">
                <label className="text-[9px] font-black text-slate-500 uppercase ml-1">Nueva Contraseña</label>
                <input
                  type="password" required
                  className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl p-3 text-xs font-bold"
                  value={passwords.new}
                  onChange={e => setPasswords({ ...passwords, new: e.target.value })}
                />
              </div>
              <button className="w-full py-4 bg-slate-900 text-white rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-black transition-all flex items-center justify-center gap-2">
                <Save size={16} /> Guardar Cambios
              </button>
            </form>
          </section>

          <div className="p-4 bg-emerald-50 rounded-2xl border border-emerald-100 flex items-center gap-3">
            <ShieldCheck size={20} className="text-emerald-500" />
            <p className="text-[10px] text-emerald-800 font-bold uppercase leading-tight">Su terminal cuenta con cifrado de punto a punto activo.</p>
          </div>
        </div>
      </motion.div>
    </div>
  );
}