import React, { memo } from 'react';
import { User, Lock, History, Save, LogOut, X, Edit, Briefcase, ShieldCheck, CheckCircle2, MapPin, CalendarDays, ChevronDown, ChevronRight } from 'lucide-react';
import Modal from '../Modal';
import Input from '../common/Input';
import Button from '../common/Button';
import { useAuthStore } from '../../store/useAuthStore';
import { useUIStore } from '../../store/useUIStore';
import { useProfileModal } from '../../hooks/useProfileModal';

const ProfileModal: React.FC = memo(() => {
  const { user, logout } = useAuthStore();
  const { isProfileModalOpen, setProfileModalOpen } = useUIStore();
  const {
    activeProfileTab,
    setActiveProfileTab,
    userLogs,
    hasMoreLogs,
    isLoadingLogs,
    expandedDates,
    isEditingEmail,
    setIsEditingEmail,
    editedEmail,
    setEditedEmail,
    isEditingName,
    setIsEditingName,
    editedName,
    setEditedName,
    passwordForm,
    setPasswordForm,
    handleLoadMoreLogs,
    groupLogsByDate,
    toggleDateExpansion,
    handleChangePassword,
    handleUpdateEmail,
    handleUpdateName
  } = useProfileModal();

  const handleLogout = async () => {
    const confirmLogout = window.confirm("Bạn có chắc chắn muốn đăng xuất?");
    if (confirmLogout) {
      // Phải AWAIT: logout() xoá token bất đồng bộ (gọi API + removeItem trong
      // finally). Trước đây reload chạy trước khi token bị xoá nên sau reload
      // initAuth thấy token cũ → tự đăng nhập lại → "không thoát ra được".
      await logout();
      window.location.reload();
    }
  };

  if (!isProfileModalOpen) return null;

  return (
    <Modal
      isOpen={isProfileModalOpen}
      onClose={() => setProfileModalOpen(false)}
      title="Hồ sơ người dùng"
      maxWidth="5xl"
    >
      <div className="flex flex-col md:flex-row gap-0 overflow-hidden -m-6 h-[80vh] md:h-auto max-h-[700px]">
        {/* Sidebar */}
        <div className="w-full md:w-64 bg-slate-50 dark:bg-slate-900/50 border-b md:border-b-0 md:border-r border-slate-200 dark:border-slate-800 flex flex-col">
          <div className="p-6 text-center relative overflow-hidden">
            <div className="absolute top-0 left-0 w-full h-24 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-10 dark:opacity-20 flex-shrink-0"></div>
            <div className="relative pt-4">
              <div className="w-24 h-24 mx-auto bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center text-3xl font-bold text-white shadow-xl mb-4 transform -rotate-3 hover:rotate-0 transition-transform duration-300 ring-4 ring-white dark:ring-slate-800">
                {user?.name.charAt(0)}
              </div>
              <h3 className="font-bold text-lg text-slate-800 dark:text-white truncate">{user?.name}</h3>
              <p className="text-sm text-slate-500 dark:text-slate-400 mb-2 truncate">{user?.role}</p>
              <div className="inline-flex items-center gap-1.5 px-3 py-1 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-xs rounded-full font-bold uppercase tracking-wider">
                <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></span>
                Đang hoạt động
              </div>
            </div>
          </div>

          <nav className="flex-1 px-3 pb-6 md:pb-3 flex md:flex-col overflow-x-auto md:overflow-x-visible scrollbar-hide">
            <div className="flex md:flex-col w-full min-w-max md:min-w-0 gap-1">
              {[
                { id: 'info', label: 'Thông tin tài khoản', icon: <User size={18} /> },
                { id: 'password', label: 'Bảo mật & Mật khẩu', icon: <Lock size={18} /> },
                { id: 'logs', label: 'Nhật ký hoạt động', icon: <History size={18} /> },
              ].map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveProfileTab(tab.id as any)}
                  className={`
                    flex items-center justify-center md:justify-start gap-0 md:gap-3 p-3 md:px-4 md:py-3 text-sm font-semibold rounded-xl transition-all duration-300 flex-1 md:flex-none
                    ${activeProfileTab === tab.id
                      ? 'bg-blue-600 text-white shadow-md shadow-blue-200 dark:shadow-none'
                      : 'text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-slate-800 hover:shadow-sm'}
                  `}
                  title={tab.label}
                >
                  <span className={activeProfileTab === tab.id ? 'text-white' : 'text-blue-500'}>{tab.icon}</span>
                  <span className="hidden md:block whitespace-nowrap">{tab.label}</span>
                </button>
              ))}

              <div className="hidden md:block my-2 border-t border-slate-200 dark:border-slate-800 mx-2"></div>

              <button
                onClick={handleLogout}
                className="flex items-center justify-center md:justify-start gap-0 md:gap-3 p-3 md:px-4 md:py-3 text-sm font-semibold rounded-xl text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all duration-300 flex-1 md:flex-none"
                title="Đăng xuất"
              >
                <LogOut size={18} className="text-red-500" />
                <span className="hidden md:block">Đăng xuất</span>
              </button>
            </div>
          </nav>
        </div>

        {/* Content */}
        <div className="flex-1 flex flex-col bg-white dark:bg-slate-800 min-h-0">
          <div className="p-6 md:p-8 overflow-y-auto flex-1 custom-scrollbar">
            {activeProfileTab === 'info' && (
              <div className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-300">
                <header>
                  <h4 className="text-xl font-bold text-slate-800 dark:text-white">Thông tin tài khoản</h4>
                  <p className="text-sm text-slate-500 mt-1">Quản lý thông tin cá nhân và phạm vi truy cập của bạn.</p>
                </header>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div className="group">
                    <label className="flex items-center gap-2 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 transition-colors group-hover:text-blue-500">
                      <User size={14} /> Họ và tên
                    </label>
                    <div className="flex items-center gap-2">
                      {isEditingName ? (
                        <div className="flex-1 flex items-center gap-2 animate-in fade-in zoom-in-95 duration-200">
                          <div className="relative flex-1">
                            <input
                              type="text"
                              value={editedName}
                              onChange={(e) => setEditedName(e.target.value)}
                              onKeyDown={(e) => e.key === 'Enter' && handleUpdateName()}
                              className="w-full px-4 py-3 bg-white dark:bg-slate-900 border-2 border-blue-500 rounded-xl text-sm font-medium text-slate-800 dark:text-slate-200 shadow-sm focus:outline-none focus:ring-4 focus:ring-blue-500/10 transition-all"
                              autoFocus
                              placeholder="Nhập họ và tên mới..."
                            />
                          </div>
                          <div className="flex items-center gap-1">
                            <button
                              onClick={handleUpdateName}
                              className="flex items-center gap-2 px-4 py-3 sm:px-6 sm:py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl shadow-lg shadow-blue-200 dark:shadow-none transition-all text-xs font-bold uppercase tracking-wider"
                              title="Lưu thay đổi"
                            >
                              <Save size={16} />
                              <span className="hidden sm:inline">Lưu</span>
                            </button>
                            <button
                              onClick={() => {
                                setIsEditingName(false);
                                setEditedName(user?.name || '');
                              }}
                              className="p-3 bg-slate-100 dark:bg-slate-800 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 rounded-xl transition-all"
                              title="Hủy"
                            >
                              <X size={18} />
                            </button>
                          </div>
                        </div>
                      ) : (
                        <>
                          <div
                            onClick={() => setIsEditingName(true)}
                            className="flex-1 px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800 rounded-xl text-sm font-medium text-slate-800 dark:text-slate-200 shadow-sm flex items-center justify-between group-hover:bg-slate-100 dark:group-hover:bg-slate-800 transition-all cursor-pointer"
                          >
                            <span>{user?.name}</span>
                          </div>
                          <button
                            onClick={() => setIsEditingName(true)}
                            className="p-3 text-blue-600 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-xl transition-all shadow-sm flex-shrink-0 group-hover:scale-110 active:scale-95"
                            title="Chỉnh sửa tên"
                          >
                            <Edit size={18} />
                          </button>
                        </>
                      )}
                    </div>
                  </div>

                  <div className="group">
                    <label className="flex items-center gap-2 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 transition-colors group-hover:text-blue-500">
                      <User size={14} /> Địa chỉ Email
                    </label>
                    <div className="flex items-center gap-2">
                      {isEditingEmail ? (
                        <div className="flex-1 flex items-center gap-2 animate-in fade-in zoom-in-95 duration-200">
                          <div className="relative flex-1">
                            <input
                              type="email"
                              value={editedEmail}
                              onChange={(e) => setEditedEmail(e.target.value)}
                              onKeyDown={(e) => e.key === 'Enter' && handleUpdateEmail()}
                              className="w-full px-4 py-3 bg-white dark:bg-slate-900 border-2 border-blue-500 rounded-xl text-sm font-medium text-slate-800 dark:text-slate-200 shadow-sm focus:outline-none focus:ring-4 focus:ring-blue-500/10 transition-all font-mono"
                              autoFocus
                              placeholder="Nhập email mới..."
                            />
                          </div>
                          <div className="flex items-center gap-1">
                            <button
                              onClick={handleUpdateEmail}
                              className="flex items-center gap-2 px-4 py-3 sm:px-6 sm:py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl shadow-lg shadow-blue-200 dark:shadow-none transition-all text-xs font-bold uppercase tracking-wider"
                              title="Lưu thay đổi"
                            >
                              <Save size={16} />
                              <span className="hidden sm:inline">Lưu</span>
                            </button>
                            <button
                              onClick={() => {
                                setIsEditingEmail(false);
                                setEditedEmail(user?.email || '');
                              }}
                              className="p-3 bg-slate-100 dark:bg-slate-800 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 rounded-xl transition-all"
                              title="Hủy"
                            >
                              <X size={18} />
                            </button>
                          </div>
                        </div>
                      ) : (
                        <>
                          <div
                            onClick={() => setIsEditingEmail(true)}
                            className="flex-1 px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800 rounded-xl text-sm font-medium text-slate-800 dark:text-slate-200 shadow-sm flex items-center justify-between group-hover:bg-slate-100 dark:group-hover:bg-slate-800 transition-all cursor-pointer group/email"
                          >
                            <span className="font-mono">{user?.email}</span>
                            <div className="flex items-center gap-2">
                              <span className="text-[10px] text-slate-400 bg-white dark:bg-slate-800 px-1.5 py-0.5 rounded border border-slate-100 dark:border-slate-700 opacity-0 group-hover:opacity-100 transition-all uppercase font-black tracking-tight">Cần thay đổi?</span>
                              <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
                            </div>
                          </div>
                          <button
                            onClick={() => setIsEditingEmail(true)}
                            className="p-3 text-blue-600 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-xl transition-all shadow-sm flex-shrink-0 group-hover:scale-110 active:scale-95"
                            title="Chỉnh sửa email"
                          >
                            <Edit size={18} />
                          </button>
                        </>
                      )}
                    </div>
                  </div>

                  <div className="group">
                    <label className="flex items-center gap-2 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 transition-colors group-hover:text-blue-500">
                      <Briefcase size={14} /> Phòng ban
                    </label>
                    <div className="px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl text-sm font-medium text-slate-800 dark:text-slate-200 shadow-sm">
                      {user?.department || 'Chưa xác định'}
                    </div>
                  </div>

                  <div className="group">
                    <label className="flex items-center gap-2 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 transition-colors group-hover:text-blue-500">
                      <ShieldCheck size={14} /> Vai trò hệ thống
                    </label>
                    <div className="flex items-center gap-2 px-4 py-3 bg-blue-50/50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/30 rounded-xl text-sm font-bold text-blue-700 dark:text-blue-300">
                      <div className="w-2 h-2 rounded-full bg-blue-500"></div>
                      {user?.role}
                    </div>
                  </div>
                </div>

                <div className="space-y-3">
                  <label className="flex items-center gap-2 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
                    <CheckCircle2 size={14} /> Phạm vi truy cập dự án (Scope)
                  </label>
                  <div className="flex flex-wrap gap-2">
                    {user?.scope.map(s => (
                      <div key={s} className="group relative">
                        <span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 text-xs font-semibold rounded-lg shadow-sm hover:border-blue-400 dark:hover:border-blue-500 transition-colors">
                          <MapPin size={12} className="text-blue-500" />
                          {s}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {activeProfileTab === 'password' && (
              <div className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-300">
                <header>
                  <h4 className="text-xl font-bold text-slate-800 dark:text-white">Bảo mật tài khoản</h4>
                  <p className="text-sm text-slate-500 mt-1">Cập nhật mật khẩu thường xuyên để tăng cường bảo mật.</p>
                </header>

                <div className="max-w-md space-y-5">
                  <Input
                    type="password"
                    label="Mật khẩu hiện tại"
                    placeholder="••••••••"
                    value={passwordForm.current}
                    onChange={e => setPasswordForm({ ...passwordForm, current: e.target.value })}
                  />
                  <div className="space-y-4">
                    <Input
                      type="password"
                      label="Mật khẩu mới"
                      placeholder="••••••••"
                      value={passwordForm.new}
                      onChange={e => setPasswordForm({ ...passwordForm, new: e.target.value })}
                    />
                    <Input
                      type="password"
                      label="Xác nhận mật khẩu mới"
                      placeholder="••••••••"
                      value={passwordForm.confirm}
                      onChange={e => setPasswordForm({ ...passwordForm, confirm: e.target.value })}
                    />
                  </div>

                  <div className="pt-4">
                    <Button
                      onClick={handleChangePassword}
                      className="w-full md:w-auto px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl shadow-lg shadow-blue-200 dark:shadow-none transition-all font-bold"
                    >
                      Lưu mật khẩu mới
                    </Button>
                  </div>
                </div>
              </div>
            )}

            {activeProfileTab === 'logs' && (
              <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300 h-full flex flex-col">
                <header>
                  <div className="flex items-center justify-between">
                    <div>
                      <h4 className="text-xl font-bold text-slate-800 dark:text-white">Nhật ký hoạt động</h4>
                      <p className="text-sm text-slate-500 mt-1">Theo dõi các hoạt động gần đây của tài khoản.</p>
                    </div>
                    <div className="bg-blue-50 dark:bg-blue-900/20 px-3 py-1 rounded-full text-xs font-bold text-blue-600 dark:text-blue-400">
                      {userLogs.length} sự kiện
                    </div>
                  </div>
                </header>

                <div className="flex-1 overflow-y-auto px-1 custom-scrollbar">
                  {Object.entries(groupLogsByDate(userLogs)).map(([date, logs]) => {
                    const isExpanded = expandedDates.has(date);
                    return (
                      <div key={date} className="mb-4">
                        <button
                          onClick={() => toggleDateExpansion(date)}
                          className="w-full flex items-center justify-between p-3 bg-slate-100/50 dark:bg-slate-900/30 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-colors mb-2 group"
                        >
                          <span className="text-sm font-bold text-slate-600 dark:text-slate-400 flex items-center gap-2">
                            <CalendarDays size={16} className="text-blue-500" />
                            {date === new Date().toLocaleDateString('vi-VN') ? 'Hôm nay' : date}
                          </span>
                          <div className="flex items-center gap-3">
                            <span className="text-xs font-medium text-slate-400 group-hover:text-slate-500">{logs.length} sự kiện</span>
                            {isExpanded ? <ChevronDown size={16} className="text-slate-400" /> : <ChevronRight size={16} className="text-slate-400" />}
                          </div>
                        </button>

                        {isExpanded && (
                          <div className="relative pl-8 pt-2 space-y-4">
                            <div className="absolute left-3 top-0 bottom-4 w-px bg-slate-200 dark:bg-slate-700/50"></div>
                            {logs.map((log) => (
                              <div key={log._id} className="relative group">
                                <div className="absolute -left-[24.5px] top-2 w-3 h-3 rounded-full border-2 border-white dark:border-slate-800 bg-blue-500 z-10"></div>
                                <div className="p-4 bg-white dark:bg-slate-900/20 rounded-2xl border border-slate-100 dark:border-slate-800 hover:border-blue-100 dark:hover:border-blue-900 hover:shadow-sm transition-all">
                                  <div className="flex items-center justify-between gap-2 mb-1.5">
                                    <span className="font-bold text-sm text-slate-800 dark:text-slate-200">{log.action}</span>
                                    <span className="text-[10px] font-bold text-slate-400 bg-slate-50 dark:bg-slate-800/50 px-2 py-0.5 rounded uppercase tracking-wider">
                                      {new Date(log.timestamp).toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit' })}
                                    </span>
                                  </div>
                                  <p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">{log.details}</p>
                                </div>
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    );
                  })}

                  {userLogs.length > 0 && hasMoreLogs && (
                    <div className="py-6 text-center">
                      <Button
                        onClick={handleLoadMoreLogs}
                        disabled={isLoadingLogs}
                        variant="outline"
                        size="sm"
                        className="px-8"
                      >
                        {isLoadingLogs ? 'Đang tải...' : 'Tải thêm hoạt động'}
                      </Button>
                    </div>
                  )}

                  {!isLoadingLogs && userLogs.length === 0 && (
                    <div className="py-20 text-center bg-slate-50 dark:bg-slate-900/30 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800">
                      <History size={48} className="mx-auto mb-4 text-slate-300 dark:text-slate-700" />
                      <p className="text-slate-500 font-medium">Chưa có hoạt động nào được ghi nhận</p>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </Modal>
  );
});

ProfileModal.displayName = 'ProfileModal';

export default ProfileModal;