import React, { useState, useEffect, useMemo } from 'react';
import { NavLink, useNavigate, useLocation } from 'react-router-dom';
import { ApiService } from '../api';
import { VaiTro, NguoiDung } from '../types';

interface Toast {
  id: number;
  message: string;
  type: 'success' | 'error' | 'info';
}

interface LayoutProps {
  children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const [currentUser, setCurrentUser] = useState<NguoiDung | null>(ApiService.currentUser);
  const [toasts, setToasts] = useState<Toast[]>([]);

  const [isDark, setIsDark] = useState(() => document.documentElement.classList.contains('dark'));
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [now, setNow] = useState(new Date());

  // Profile States
  const [showProfileModal, setShowProfileModal] = useState(false);
  const [editFullName, setEditFullName] = useState(currentUser?.fullName || '');
  const [editUsername, setEditUsername] = useState(currentUser?.username || '');
  const [editEmail, setEditEmail] = useState(currentUser?.email || '');
  const [isUpdating, setIsUpdating] = useState(false);

  // Change Password States
  const [showChangePass, setShowChangePass] = useState(false);
  const [oldPass, setOldPass] = useState('');
  const [newPassUI, setNewPassUI] = useState('');
  const [confirmPassUI, setConfirmPassUI] = useState('');

  useEffect(() => {
    const timer = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    if (isDark) document.documentElement.classList.add('dark');
    else document.documentElement.classList.remove('dark');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  }, [isDark]);

  const addToast = (message: string, type: Toast['type'] = 'success') => {
    const id = Date.now();
    setToasts(prev => [...prev, { id, message, type }]);
    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 3000);
  };

  const handleUpdateProfile = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!currentUser || !editFullName.trim() || !editUsername.trim()) return;
    setIsUpdating(true);
    try {
      const updated = await ApiService.updateProfile(currentUser.id, editFullName, editUsername, editEmail);
      setCurrentUser(updated);
      addToast('Cập nhật thông tin thành công');
      setTimeout(() => setShowProfileModal(false), 500);
    } catch (err: any) {
      addToast(err.message, 'error');
    } finally {
      setIsUpdating(false);
    }
  };

  const handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!currentUser) return;
    if (newPassUI !== confirmPassUI) {
      addToast('Mật khẩu xác nhận không khớp', 'error');
      return;
    }
    setIsUpdating(true);
    try {
      await ApiService.changePassword(currentUser.id, oldPass, newPassUI);
      addToast('Đổi mật khẩu thành công');
      setShowChangePass(false);
      setOldPass('');
      setNewPassUI('');
      setConfirmPassUI('');
    } catch (err: any) {
      addToast(err.message, 'error');
    } finally {
      setIsUpdating(false);
    }
  };

  const menuItems = useMemo(() => {
    const items = [
      { to: '/', label: 'Tổng quan', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6', roles: [VaiTro.QUAN_TRI_VIEN, VaiTro.NHAN_VIEN_XU_LY, VaiTro.NGUOI_XEM] },
      { to: '/ho-so', label: 'Hồ sơ xử lý', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', roles: [VaiTro.QUAN_TRI_VIEN, VaiTro.NHAN_VIEN_XU_LY, VaiTro.NGUOI_XEM] },
      { to: '/mau-ho-so', label: 'Cấu hình mẫu', icon: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z', roles: [VaiTro.QUAN_TRI_VIEN, VaiTro.NHAN_VIEN_XU_LY] },
      { to: '/nguoi-dung', label: 'Quản trị viên', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z', roles: [VaiTro.QUAN_TRI_VIEN] },
    ];
    return items.filter(item => item.roles.includes(currentUser?.role || VaiTro.NGUOI_XEM));
  }, [currentUser]);

  if (!currentUser) return <>{children}</>;

  return (
    <div className="flex h-screen bg-gray-100 dark:bg-slate-950 transition-colors overflow-hidden font-sans">
      {/* Toast System */}
      <div className="fixed top-6 right-6 z-[999] space-y-3 pointer-events-none">
        {toasts.map(t => (
          <div key={t.id} className={`px-6 py-4 rounded-2xl shadow-2xl pointer-events-auto animate-in slide-in-from-right duration-300 flex items-center space-x-3 min-w-[300px] border ${t.type === 'success' ? 'bg-white dark:bg-slate-800 border-green-500 text-green-600' : 'bg-red-50 dark:bg-slate-800 border-red-500 text-red-600'
            }`}>
            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${t.type === 'success' ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'}`}>
              {t.type === 'success' ? '✓' : '!'}
            </div>
            <span className="text-sm font-bold">{t.message}</span>
          </div>
        ))}
      </div>

      {/* Sidebar Overlay */}
      {isSidebarOpen && (
        <div 
          className="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 lg:hidden"
          onClick={() => setIsSidebarOpen(false)}
        />
      )}

      <aside className={`fixed inset-y-0 left-0 z-40 w-72 bg-white dark:bg-slate-900 border-r border-gray-200 dark:border-slate-800 flex flex-col transition-transform lg:translate-x-0 lg:static ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
        <div className="p-8 border-b border-gray-100 dark:border-slate-800 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-blue-500/20 font-black italic">HP</div>
            <span className="font-black text-slate-800 dark:text-white tracking-tighter text-lg">Docs PRO</span>
          </div>
          <button 
            onClick={() => setIsSidebarOpen(false)}
            className="lg:hidden p-2 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-800 transition-all"
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <nav className="flex-1 p-6 space-y-1.5 overflow-y-auto custom-scrollbar">
          {menuItems.map(item => (
            <NavLink 
              key={item.to} 
              to={item.to} 
              onClick={() => setIsSidebarOpen(false)}
              className={({ isActive }) => `flex items-center space-x-3 px-5 py-3.5 rounded-2xl transition-all font-bold text-sm ${isActive ? 'bg-blue-600 text-white shadow-xl shadow-blue-500/30' : 'text-slate-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800'}`}
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={item.icon} /></svg>
              <span>{item.label}</span>
            </NavLink>
          ))}
        </nav>

        <div className="p-6 border-t border-gray-100 dark:border-slate-800">
          <div onClick={() => { setEditFullName(currentUser.fullName); setEditUsername(currentUser.username); setEditEmail(currentUser.email || ''); setShowProfileModal(true); }} className="flex items-center p-3.5 bg-gray-50 dark:bg-slate-800/50 rounded-2xl border border-gray-100 dark:border-slate-800 cursor-pointer hover:bg-white dark:hover:bg-slate-800 hover:shadow-xl hover:-translate-y-1 transition-all group">
            <div className="w-10 h-10 rounded-xl bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center text-blue-600 dark:text-blue-400 font-black mr-3 shadow-sm group-hover:rotate-6 transition-transform">
              {currentUser.fullName.charAt(0).toUpperCase()}
            </div>
            <div className="flex-1 overflow-hidden">
              <p className="text-sm font-black truncate text-slate-800 dark:text-white">{currentUser.fullName}</p>
              <p className="text-[10px] text-blue-600 font-black uppercase tracking-widest">{currentUser.role.split('_')[0]}</p>
            </div>
          </div>
        </div>
      </aside>

      <main className="flex-1 flex flex-col min-w-0">
        <header className="h-16 md:h-20 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-b border-gray-200 dark:border-slate-800 flex items-center justify-between px-4 md:px-8 z-30">
          <div className="flex items-center space-x-2 md:space-x-4 flex-1 min-w-0">
            <button onClick={() => setIsSidebarOpen(true)} className="lg:hidden p-2 md:p-3 bg-gray-50 dark:bg-slate-800 rounded-xl text-slate-500 flex-shrink-0">
              <svg className="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
            <div className="min-w-0 flex-1">
              <h2 className="hidden md:block text-sm font-bold text-slate-400 uppercase tracking-widest">Hệ thống</h2>
              <h1 className="text-base md:text-xl font-black text-slate-800 dark:text-white truncate">
                <span className="hidden md:inline">Chào quay lại, </span>
                {currentUser.fullName.split(' ').pop()}!
              </h1>
            </div>
          </div>

          <div className="flex items-center space-x-2 md:space-x-5 flex-shrink-0">
            <div className="hidden md:flex flex-col items-end px-6 border-r border-gray-100 dark:border-slate-800">
              <span className="text-[10px] font-black text-blue-600 uppercase tracking-widest">{now.toLocaleDateString('vi-VN', { weekday: 'long', day: '2-digit', month: '2-digit' })}</span>
              <span className="text-lg font-mono font-black text-slate-700 dark:text-slate-300 tracking-tighter">{now.toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}</span>
            </div>
            <button onClick={() => setIsDark(!isDark)} className="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-2xl bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 text-slate-500 dark:text-slate-400 hover:shadow-lg transition-all text-lg md:text-xl">
              {isDark ? '☀' : '🌙'}
            </button>
            <button onClick={() => { ApiService.dangXuat(); navigate('/dang-nhap'); }} className="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-2xl bg-red-50 dark:bg-red-900/20 text-red-500 border border-red-100 dark:border-red-900/30 hover:bg-red-500 hover:text-white transition-all">
              <svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
            </button>
          </div>
        </header>

        <div className="flex-1 overflow-y-auto p-8 bg-gray-50 dark:bg-slate-950 custom-scrollbar">
          {children}
        </div>
      </main>

      {/* Profile Modal */}
      {showProfileModal && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-md flex items-center justify-center z-[100] p-4 animate-in fade-in">
          <div className="bg-white dark:bg-slate-900 w-full max-w-lg rounded-[2.5rem] shadow-2xl overflow-hidden border border-slate-200 dark:border-slate-800 animate-in zoom-in duration-300">
            <div className="h-32 bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-700 relative">
              <button onClick={() => setShowProfileModal(false)} className="absolute top-6 right-6 p-2 bg-white/10 hover:bg-white/20 text-white rounded-full backdrop-blur-md transition-all"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
            </div>

            <div className="px-10 pb-10">
              <div className="relative -mt-16 mb-8">
                <div className="w-32 h-32 rounded-[2.5rem] bg-white dark:bg-slate-900 p-2 shadow-2xl">
                  <div className="w-full h-full rounded-[2rem] bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center text-5xl font-black text-blue-600 tracking-tighter italic">
                    {currentUser.fullName.charAt(0)}
                  </div>
                </div>
              </div>

              <form onSubmit={handleUpdateProfile} className="space-y-6">
                <div className="space-y-2">
                  <label className="text-[10px] font-black uppercase text-slate-400 tracking-widest px-1">Cài đặt danh tính</label>
                  <input
                    className="w-full px-6 py-4 rounded-2xl border border-gray-200 dark:border-slate-800 bg-gray-50 dark:bg-slate-800/50 font-black text-slate-800 dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10 transition-all"
                    value={editFullName}
                    onChange={(e) => setEditFullName(e.target.value)}
                    placeholder="Họ và tên đầy đủ..."
                    required
                  />
                </div>

                <div className="space-y-2">
                  <label className="text-[10px] font-black uppercase text-slate-400 tracking-widest px-1">Tên truy cập</label>
                  <input
                    className="w-full px-6 py-4 rounded-2xl border border-gray-200 dark:border-slate-800 bg-gray-50 dark:bg-slate-800/50 font-black text-slate-800 dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10 transition-all"
                    value={editUsername}
                    onChange={(e) => setEditUsername(e.target.value)}
                    placeholder="Tên truy cập..."
                    required
                  />
                </div>

                <div className="space-y-2">
                  <label className="text-[10px] font-black uppercase text-slate-400 tracking-widest px-1">Email</label>
                  <input
                    type="email"
                    className="w-full px-6 py-4 rounded-2xl border border-gray-200 dark:border-slate-800 bg-gray-50 dark:bg-slate-800/50 font-black text-slate-800 dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10 transition-all"
                    value={editEmail}
                    onChange={(e) => setEditEmail(e.target.value)}
                    placeholder="email@example.com"
                  />
                </div>

                <div className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/30 border border-slate-100 dark:border-slate-800">
                  <span className="block text-[9px] font-black text-slate-400 uppercase tracking-tighter mb-1">Cấp bậc</span>
                  <span className="font-bold text-sm text-slate-600 dark:text-slate-300">{currentUser.role.replace(/_/g, ' ')}</span>
                </div>

                <button disabled={isUpdating} type="submit" className="w-full py-5 bg-blue-600 text-white font-black rounded-3xl shadow-2xl shadow-blue-600/30 hover:bg-blue-700 transition-all active:scale-95 disabled:opacity-50">
                  {isUpdating ? 'ĐANG LƯU DỮ LIỆU...' : 'LƯU THAY ĐỔI'}
                </button>

                <div className="pt-6 border-t border-gray-100 dark:border-slate-800 flex flex-col space-y-4">
                  <button type="button" onClick={() => { setShowProfileModal(false); setShowChangePass(true); }} className="w-full py-4 rounded-2xl text-blue-600 font-bold bg-blue-50 dark:bg-blue-900/10 hover:bg-blue-100 transition-all text-sm flex items-center justify-center">
                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
                    Thay đổi mật khẩu tài khoản
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )}

      {/* Change Password Modal */}
      {showChangePass && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-md flex items-center justify-center z-[120] p-4 animate-in fade-in">
          <div className="bg-white dark:bg-slate-900 w-full max-w-md rounded-[2.5rem] shadow-2xl overflow-hidden border border-slate-200 dark:border-slate-800 animate-in zoom-in duration-300">
            <div className="h-24 bg-gradient-to-br from-slate-700 to-slate-900 relative flex items-center px-8">
              <h3 className="text-xl font-black text-white">Đổi mật khẩu</h3>
              <button onClick={() => setShowChangePass(false)} className="absolute top-6 right-6 p-2 bg-white/10 hover:bg-white/20 text-white rounded-full backdrop-blur-md transition-all"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
            </div>

            <div className="p-10 space-y-6">
              <div className="space-y-4">
                <div className="space-y-1">
                  <label className="text-[10px] font-black uppercase text-slate-400 tracking-widest px-1">Mật khẩu hiện tại</label>
                  <input
                    type="password"
                    className="w-full px-5 py-4 rounded-2xl border border-gray-200 dark:border-slate-800 bg-gray-50 dark:bg-slate-800/50 font-bold text-slate-800 dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10 transition-all"
                    value={oldPass}
                    onChange={(e) => setOldPass(e.target.value)}
                    placeholder="••••••••"
                  />
                </div>
                <div className="space-y-1">
                  <label className="text-[10px] font-black uppercase text-slate-400 tracking-widest px-1">Mật khẩu mới</label>
                  <input
                    type="password"
                    className="w-full px-5 py-4 rounded-2xl border border-gray-200 dark:border-slate-800 bg-gray-50 dark:bg-slate-800/50 font-bold text-slate-800 dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10 transition-all"
                    value={newPassUI}
                    onChange={(e) => setNewPassUI(e.target.value)}
                    placeholder="Tối thiểu 6 ký tự..."
                  />
                </div>
                <div className="space-y-1">
                  <label className="text-[10px] font-black uppercase text-slate-400 tracking-widest px-1">Xác nhận mật khẩu</label>
                  <input
                    type="password"
                    className="w-full px-5 py-4 rounded-2xl border border-gray-200 dark:border-slate-800 bg-gray-50 dark:bg-slate-800/50 font-bold text-slate-800 dark:text-white outline-none focus:ring-4 focus:ring-blue-500/10 transition-all"
                    value={confirmPassUI}
                    onChange={(e) => setConfirmPassUI(e.target.value)}
                    placeholder="Nhập lại mật khẩu..."
                  />
                </div>
              </div>

              <button
                onClick={handleChangePassword}
                disabled={isUpdating}
                className="w-full py-5 bg-blue-600 text-white font-black rounded-3xl shadow-2xl shadow-blue-600/30 hover:bg-blue-700 transition-all active:scale-95 disabled:opacity-50"
              >
                {isUpdating ? 'ĐANG XỬ LÝ...' : 'CẬP NHẬT MẬT KHẨU MỚI'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Layout;