import React, { memo, useState, useCallback } from 'react';
import { Menu, Search, Moon, Sun, Bell, X, XCircle, AlertTriangle, Info, Check, Trash2 } from 'lucide-react';
import { useUIStore } from '../../store/useUIStore';
import { useAuthStore } from '../../store/useAuthStore';
import NotificationsDropdown from './NotificationsDropdown';
import Modal from '../Modal';
import { useNotifications } from '../../hooks/useNotifications';
import { IAlert } from '../../types';
import { alertSeverityVi, alertTypeVi } from '../../utils/displayVi';

interface TopbarProps {
  isSidebarOpen: boolean;
  setSidebarOpen: (open: boolean) => void;
  onProfileClick: () => void;
}

const Topbar: React.FC<TopbarProps> = memo(({ isSidebarOpen, setSidebarOpen, onProfileClick }) => {
  const { isDarkMode, toggleTheme } = useUIStore();
  const { user } = useAuthStore();
  const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
  const {
    isNotificationsOpen,
    setIsNotificationsOpen,
    isAllNotificationsModalOpen,
    setIsAllNotificationsModalOpen,
    alerts,
    unreadCount,
    handleMarkAsRead,
    handleMarkAllAsRead,
    handleDeleteAlert,
    notificationRef,
  } = useNotifications();

  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Escape') {
      setIsMobileSearchOpen(false);
    }
  }, []);

  return (
    <header className="h-16 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between px-4 sm:px-6 shadow-sm z-10 sticky top-0 transition-colors">
      <div className="flex-1 flex items-center min-w-0">
        <button
          type="button"
          onClick={() => setSidebarOpen(!isSidebarOpen)}
          className={`p-2 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 mr-2 transition-colors flex-shrink-0 ${isMobileSearchOpen ? 'hidden sm:block' : ''}`}
          aria-label="Toggle sidebar"
        >
          <Menu size={20} />
        </button>
        <div className={`relative flex-1 sm:flex-none min-w-0 transition-all duration-300 ${isMobileSearchOpen ? 'block' : 'hidden md:block'}`}>
          <span className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <Search size={16} className="text-slate-400" />
          </span>
          <input
            type="text"
            placeholder="Tìm kiếm... (Ctrl+K)"
            autoFocus={isMobileSearchOpen}
            onKeyDown={handleSearchKeyDown}
            className="pl-10 pr-10 md:pr-4 py-2 border border-slate-300 dark:border-slate-600 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-48 lg:w-64 transition-all bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400"
          />
          {isMobileSearchOpen && (
            <button
              type="button"
              onClick={() => setIsMobileSearchOpen(false)}
              className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 sm:hidden"
              aria-label="Đóng tìm kiếm"
            >
              <X size={16} />
            </button>
          )}
        </div>

        {!isMobileSearchOpen && (
          <>
            <button
              type="button"
              onClick={() => setIsMobileSearchOpen(true)}
              className="p-2 md:hidden text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-full flex-shrink-0"
              aria-label="Mở tìm kiếm"
            >
              <Search size={20} />
            </button>
            <button
              type="button"
              onClick={toggleTheme}
              className="p-2 md:hidden rounded-full hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-yellow-400 transition-colors flex-shrink-0 ml-1"
              aria-label={isDarkMode ? 'Chuyển sang chế độ sáng' : 'Chuyển sang chế độ tối'}
            >
              {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
            </button>
          </>
        )}
      </div>

      <div className="flex items-center gap-1 sm:gap-2 md:gap-3 flex-shrink-0">
        <button
          type="button"
          onClick={toggleTheme}
          className="hidden md:block p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-yellow-400 transition-colors flex-shrink-0"
          aria-label={isDarkMode ? 'Chuyển sang chế độ sáng' : 'Chuyển sang chế độ tối'}
        >
          {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
        </button>

        <div className="relative flex-shrink-0">
          <button
            type="button"
            onClick={() => setIsNotificationsOpen(!isNotificationsOpen)}
            className="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 transition-colors relative"
            aria-label={`Thông báo${unreadCount > 0 ? ` (${unreadCount} chưa đọc)` : ''}`}
            aria-expanded={isNotificationsOpen}
          >
            <Bell size={20} />
            {unreadCount > 0 && (
              <span className="absolute top-1.5 right-1.5 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white dark:border-slate-800" aria-label={`${unreadCount} thông báo chưa đọc`}></span>
            )}
          </button>

          <NotificationsDropdown
            isOpen={isNotificationsOpen}
            alerts={alerts}
            unreadCount={unreadCount}
            onMarkAsRead={handleMarkAsRead}
            onViewAll={() => {
              setIsNotificationsOpen(false);
              setIsAllNotificationsModalOpen(true);
            }}
            notificationRef={notificationRef}
          />
        </div>

        <div className="h-6 w-px bg-slate-200 dark:bg-slate-700 mx-0.5 sm:mx-1 flex-shrink-0" aria-hidden />

        <button
          type="button"
          onClick={onProfileClick}
          className="flex items-center gap-2 rounded-lg pl-1 pr-2 py-1 hover:bg-slate-100 dark:hover:bg-slate-700/80 transition-colors text-left max-w-[200px] sm:max-w-[240px]"
          title="Thông tin cá nhân (Ctrl+P)"
          aria-label="Mở hồ sơ người dùng"
        >
          <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-blue-500 to-blue-600 flex items-center justify-center text-xs font-bold text-white shadow-md ring-2 ring-white dark:ring-slate-800 flex-shrink-0">
            {user?.name?.charAt(0) ?? '?'}
          </div>
          <div className="hidden sm:block min-w-0 leading-tight">
            <p className="text-sm font-medium text-slate-900 dark:text-white truncate">{user?.name ?? 'Đang tải...'}</p>
            <p className="text-xs text-slate-500 dark:text-slate-400 truncate">{user?.role ?? ''}</p>
          </div>
        </button>
      </div>

      {/* Modal xem tất cả thông báo */}
      <Modal
        isOpen={isAllNotificationsModalOpen}
        onClose={() => setIsAllNotificationsModalOpen(false)}
        title="Tất cả thông báo"
        maxWidth="2xl"
        footer={
          <div className="flex justify-between items-center w-full">
            <button
              type="button"
              onClick={handleMarkAllAsRead}
              disabled={unreadCount === 0}
              className="px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
            >
              <Check size={16} />
              Đọc tất cả ({unreadCount})
            </button>
            <button
              type="button"
              onClick={() => setIsAllNotificationsModalOpen(false)}
              className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-md hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
            >
              Đóng
            </button>
          </div>
        }
      >
        <div className="max-h-[600px] overflow-y-auto">
          {alerts.length > 0 ? (
            <div className="space-y-1">
              {alerts.map((alert: IAlert) => (
                <div
                  key={alert._id}
                  className={`p-4 rounded-lg border transition-colors ${
                    !alert.isRead
                      ? 'bg-blue-50/50 dark:bg-blue-900/10 border-blue-200 dark:border-blue-800'
                      : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50'
                  }`}
                >
                  <div className="flex gap-3">
                    <div
                      className={`mt-1 flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${
                        alert.severity === 'Critical'
                          ? 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400'
                          : alert.severity === 'Warning'
                            ? 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400'
                            : 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
                      }`}
                    >
                      {alert.severity === 'Critical' ? (
                        <XCircle size={20} />
                      ) : alert.severity === 'Warning' ? (
                        <AlertTriangle size={20} />
                      ) : (
                        <Info size={20} />
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between gap-2">
                        <div className="flex-1">
                          <p
                            className={`text-sm ${
                              !alert.isRead ? 'font-semibold text-slate-900 dark:text-white' : 'text-slate-700 dark:text-slate-300'
                            }`}
                          >
                            {alert.message}
                          </p>
                          <div className="flex items-center gap-3 mt-2 flex-wrap">
                            <p className="text-xs text-slate-500 dark:text-slate-400">
                              {new Date(alert.createdAt).toLocaleString('vi-VN', {
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit',
                              })}
                            </p>
                            <span
                              className={`text-xs px-2 py-0.5 rounded-full ${
                                alert.severity === 'Critical'
                                  ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
                                  : alert.severity === 'Warning'
                                    ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
                                    : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
                              }`}
                            >
                              {alertSeverityVi(String(alert.severity))}
                            </span>
                            <span
                              className={`text-xs px-2 py-0.5 rounded-full ${
                                alert.type === 'LowStock'
                                  ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
                                  : alert.type === 'PMSchedule'
                                    ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
                                    : alert.type === 'TicketSLA'
                                      ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
                                      : 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400'
                              }`}
                            >
                              {alertTypeVi(String(alert.type))}
                            </span>
                          </div>
                        </div>
                        <div className="flex items-center gap-2 flex-shrink-0">
                          {!alert.isRead && <div className="w-2.5 h-2.5 rounded-full bg-blue-500 mt-1"></div>}
                          <button
                            type="button"
                            onClick={() => handleDeleteAlert(alert._id)}
                            className="p-1.5 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 text-slate-400 hover:text-red-600 dark:hover:text-red-400 transition-colors"
                            aria-label="Xóa thông báo"
                            title="Xóa thông báo"
                          >
                            <Trash2 size={16} />
                          </button>
                        </div>
                      </div>
                      {alert.link && (
                        <a
                          href={alert.link}
                          className="text-xs text-blue-600 dark:text-blue-400 hover:underline mt-2 inline-block"
                          onClick={() => setIsAllNotificationsModalOpen(false)}
                        >
                          Xem chi tiết →
                        </a>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="p-12 text-center text-slate-500 dark:text-slate-400">
              <Bell size={48} className="mx-auto mb-4 opacity-20" />
              <p className="text-lg font-medium mb-1">Không có thông báo</p>
              <p className="text-sm">Tất cả thông báo của bạn sẽ hiển thị ở đây</p>
            </div>
          )}
        </div>
      </Modal>
    </header>
  );
});

Topbar.displayName = 'Topbar';

export default Topbar;