import React from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { LogOut, HelpCircle, Factory, Droplets, Building2 } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';
import { useResponsive } from '../../hooks/useResponsive';
import { NotificationCenter } from '../NotificationCenter';
import { HelpCenter, HelpButton } from '../HelpCenter';

export type DashboardRole = 'purchaser' | 'textile' | 'washing';

interface DashboardLayoutProps {
  role: DashboardRole;
  children: React.ReactNode;
  showHelp?: boolean;
  onHelpClick?: () => void;
}

// 角色主题配置
const roleThemeConfig = {
  purchaser: {
    gradient: 'from-amber-400 to-orange-500',
    bgGradient: 'from-slate-50 via-amber-50/30 to-orange-50/30',
    icon: Building2,
    label: '采购商',
    notificationTheme: 'amber' as const
  },
  textile: {
    gradient: 'from-emerald-400 to-teal-400',
    bgGradient: 'from-slate-50 via-emerald-50/30 to-green-50/30',
    icon: Factory,
    label: '纺织厂',
    notificationTheme: 'emerald' as const
  },
  washing: {
    gradient: 'from-violet-400 to-fuchsia-400',
    bgGradient: 'from-slate-50 via-violet-50/40 to-fuchsia-50/30',
    icon: Droplets,
    label: '水洗厂',
    notificationTheme: 'violet' as const
  }
};

/**
 * 统一的 Dashboard 布局组件
 * 提供一致的 Header、通知中心、帮助按钮等通用功能
 */
export function DashboardLayout({
  role,
  children,
  showHelp = true,
  onHelpClick
}: DashboardLayoutProps) {
  const navigate = useNavigate();
  const { auth, logout } = useAuth();
  const { isMobile } = useResponsive();

  const theme = roleThemeConfig[role];
  const RoleIcon = theme.icon;

  const handleLogout = async () => {
    await logout();
    navigate('/login');
  };

  return (
    <div className={`min-h-screen bg-gradient-to-br ${theme.bgGradient}`}>
      {/* Header */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-8 py-3 sm:py-4 flex justify-between items-center">
          <div className="flex items-center gap-2 sm:gap-3">
            <button
              className={`w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br ${theme.gradient} rounded-xl flex items-center justify-center shadow-lg cursor-pointer overflow-hidden active:scale-95 transition-transform`}
            >
              {(auth.user as any)?.image_url ? (
                <img
                  src={(auth.user as any).image_url}
                  alt="头像"
                  className="w-full h-full object-cover"
                  onError={(e) => {
                    (e.target as HTMLImageElement).style.display = 'none';
                  }}
                />
              ) : (
                <RoleIcon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
              )}
            </button>
            <div>
              <h1 className="text-sm sm:text-lg font-bold text-slate-900 flex items-center gap-2 whitespace-nowrap">
                <span className="sm:hidden truncate max-w-[80px]">
                  {(auth.user as any)?.display_name || auth.user?.username || '用户'}
                </span>
                <span className="hidden sm:inline">
                  {auth.company?.name || theme.label}工作台
                </span>
                <span className={`text-[10px] sm:text-xs bg-gradient-to-r ${theme.gradient} text-white px-1.5 sm:px-2 py-0.5 rounded-full font-medium whitespace-nowrap`}>
                  限时免费
                </span>
              </h1>
              <p className="text-xs text-slate-500 hidden sm:block truncate max-w-[150px]">
                {(auth.user as any)?.display_name || auth.user?.username || '用户'}，欢迎回来
              </p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            {showHelp && (
              <HelpButton onClick={onHelpClick || (() => {})} />
            )}
            <NotificationCenter theme={theme.notificationTheme} />
            <button
              onClick={handleLogout}
              className="p-2 sm:px-3 sm:py-1.5 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
              title="退出登录"
            >
              <LogOut className="w-5 h-5 sm:hidden" />
              <span className="hidden sm:inline text-xs sm:text-sm">退出</span>
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <div className="p-3 sm:p-4 md:p-8 max-w-7xl mx-auto">
        {children}
      </div>
    </div>
  );
}
