import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import { supabase } from '../../supabase/client';
import { motion } from 'framer-motion';
import { Import, Warehouse, CreditCard, ArrowLeft, Users, Droplets, Package, CheckCircle, Clock, LogOut, HelpCircle, X, BookOpen, MessageSquare, Info, Camera, FileText, Plus, TrendingUp, Building2 } from 'lucide-react';
import { useResponsive } from '../../hooks/useResponsive';
import { OnboardingGuide, shouldShowOnboarding } from '../../components/OnboardingGuide';
import { NotificationCenter } from '../../components/NotificationCenter';
import { HelpCenter, HelpButton } from '../../components/HelpCenter';
import { VersionUpdate, useVersionCheck, AboutModal } from '../../components/VersionUpdate';
import { FeedbackModal } from '../../components/FeedbackModal';
import { UserManual } from '../../components/UserManual';
import { CrashReporter } from '../../components/CrashReporter';
import type { WashingPlan } from '../../types';

const statusMap: Record<string, { label: string; color: string; bgColor: string; icon: any }> = {
  pending: { label: '待处理', color: 'text-amber-600', bgColor: 'bg-amber-50', icon: Clock },
  processing: { label: '处理中', color: 'text-violet-500', bgColor: 'bg-violet-50', icon: TrendingUp },
  completed: { label: '已完成', color: 'text-emerald-600', bgColor: 'bg-emerald-50', icon: Package }
};

const getQuickActions = (isMaster: boolean) => {
  const actions = [
    { id: 'plans', icon: FileText, label: '计划总览', path: '/washing/plans', gradient: 'from-violet-400 to-fuchsia-400', description: '查看所有计划' },
    { id: 'pending', icon: Package, label: '待处理坯布', path: '/washing/pending', gradient: 'from-amber-500 to-orange-500', description: '处理待水洗坯布' },
    { id: 'completed', icon: CheckCircle, label: '已完成坯布', path: '/washing/completed', gradient: 'from-emerald-500 to-green-500', description: '查看已完成水洗' },
    { id: 'finished', icon: Warehouse, label: '成品仓库', path: '/washing/finished-warehouse', gradient: 'from-violet-400 to-fuchsia-400', description: '管理成品库存' },
    { id: 'payment', icon: CreditCard, label: '待结款', path: '/washing/payments', gradient: 'from-rose-500 to-pink-500', description: '查看待结款项' }
  ];
  if (isMaster) {
    actions.push({ id: 'members', icon: Users, label: '账号管理', path: '/members', gradient: 'from-fuchsia-400 to-purple-400', description: '管理团队账号' });
  }
  return actions;
};

const containerVariants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.4 } }
};

export function WashingDashboard() {
  const navigate = useNavigate();
  const { auth, logout } = useAuth();
  const { isMobile } = useResponsive();
  const [plans, setPlans] = useState<WashingPlan[]>([]);
  const [loading, setLoading] = useState(true);

  // 帮助中心状态
  const [showHelp, setShowHelp] = useState(false);
  const [showOnboarding, setShowOnboarding] = useState(false);
  const [showUserManual, setShowUserManual] = useState(false);
  const [showFeedback, setShowFeedback] = useState(false);
  const [showAbout, setShowAbout] = useState(false);

  // 版本更新检查
  const { showUpdate, setShowUpdate } = useVersionCheck();

  // 账户卡片弹窗状态
  const [showAccountCard, setShowAccountCard] = useState(false);

  // 最近计划轮播索引
  const [currentPlanIndex, setCurrentPlanIndex] = useState(0);

  // 检查是否显示新手引导
  useEffect(() => {
    if (shouldShowOnboarding('washing')) {
      setShowOnboarding(true);
    }
  }, []);

  useEffect(() => {
    if (!auth.company) return;
    fetchPlans();
  }, [auth.company]);

  const fetchPlans = async () => {
    const { data: washingPlans } = await supabase
      .from('washing_plans')
      .select('*')
      .eq('washing_factory_id', auth.company!.id)
      .order('created_at', { ascending: false });

    setPlans(washingPlans || []);
    setLoading(false);
  };

  const stats = {
    all: plans.length,
    producing: plans.filter(p => p.status === 'processing').length,
    completed: plans.filter(p => p.status === 'completed').length
  };

  // 获取进行中的计划用于轮播
  const processingPlans = plans.filter(p => p.status === 'processing').slice(0, 5);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-violet-50/40 to-fuchsia-50/30">
      {/* Header - 与采购商一致 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-gray-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">
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => setShowAccountCard(true)}
              className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-violet-400 to-fuchsia-400 rounded-xl flex items-center justify-center shadow-lg shadow-violet-400/20 cursor-pointer overflow-hidden"
            >
              {(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';
                  }}
                />
              ) : (
                <Droplets className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
              )}
            </motion.button>
            <div>
              <h1 className="text-sm sm:text-lg font-bold text-gray-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 || '水洗厂'}工作台</span>
                <span className="text-[10px] sm:text-xs bg-gradient-to-r from-violet-400 to-fuchsia-400 text-white px-1.5 sm:px-2 py-0.5 rounded-full font-medium whitespace-nowrap">限时免费</span>
              </h1>
              <p className="text-xs text-gray-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">
            <HelpButton onClick={() => setShowHelp(true)} />
            <NotificationCenter theme="violet" />
            <button
              onClick={async () => { await logout(); navigate('/login'); }}
              className="p-2 sm:px-3 sm:py-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-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>

      <div className="p-3 sm:p-4 md:p-8 max-w-7xl mx-auto">
        {loading ? (
          <div className="flex items-center justify-center py-20">
            <div className="w-8 h-8 border-2 border-violet-400 border-t-transparent rounded-full animate-spin" />
          </div>
        ) : (
          <motion.div variants={containerVariants} initial="hidden" animate="visible" className="space-y-4 sm:space-y-6">
            {/* 统计卡片 - 与采购商一致 */}
            <div className="grid grid-cols-3 gap-2 sm:gap-4">
              <motion.div
                variants={itemVariants}
                whileHover={isMobile ? {} : { scale: 1.02, y: -2 }}
                onClick={() => navigate('/washing/plans')}
                className="bg-white rounded-xl sm:rounded-2xl p-3 sm:p-5 shadow-sm border border-gray-100 cursor-pointer hover:border-violet-300 hover:shadow-md transition-all"
              >
                <div className="flex items-center justify-between mb-2 sm:mb-3">
                  <p className="text-xs sm:text-sm text-gray-500">所有计划</p>
                  <div className="w-6 h-6 sm:w-8 sm:h-8 bg-violet-50 rounded-lg flex items-center justify-center">
                    <FileText className="w-3 h-3 sm:w-4 sm:h-4 text-violet-500" />
                  </div>
                </div>
                <p className="text-xl sm:text-3xl font-bold text-gray-900">{stats.all}</p>
                <p className="text-xs text-gray-400 mt-0.5 sm:mt-1">累计接收</p>
              </motion.div>

              <motion.div
                variants={itemVariants}
                whileHover={isMobile ? {} : { scale: 1.02, y: -2 }}
                onClick={() => navigate('/washing/plans?filter=processing')}
                className="bg-white rounded-xl sm:rounded-2xl p-3 sm:p-5 shadow-sm border border-gray-100 cursor-pointer hover:border-violet-300 hover:shadow-md transition-all"
              >
                <div className="flex items-center justify-between mb-2 sm:mb-3">
                  <p className="text-xs sm:text-sm text-gray-500">进行中</p>
                  <div className="w-6 h-6 sm:w-8 sm:h-8 bg-violet-50 rounded-lg flex items-center justify-center">
                    <TrendingUp className="w-3 h-3 sm:w-4 sm:h-4 text-violet-500" />
                  </div>
                </div>
                <p className="text-xl sm:text-3xl font-bold text-gray-900">{stats.producing}</p>
                <p className="text-xs text-gray-400 mt-0.5 sm:mt-1">正在水洗</p>
              </motion.div>

              <motion.div
                variants={itemVariants}
                whileHover={isMobile ? {} : { scale: 1.02, y: -2 }}
                onClick={() => navigate('/washing/plans?filter=completed')}
                className="bg-white rounded-xl sm:rounded-2xl p-3 sm:p-5 shadow-sm border border-gray-100 cursor-pointer hover:border-violet-300 hover:shadow-md transition-all"
              >
                <div className="flex items-center justify-between mb-2 sm:mb-3">
                  <p className="text-xs sm:text-sm text-gray-500">已完成</p>
                  <div className="w-6 h-6 sm:w-8 sm:h-8 bg-emerald-50 rounded-lg flex items-center justify-center">
                    <Package className="w-3 h-3 sm:w-4 sm:h-4 text-emerald-600" />
                  </div>
                </div>
                <p className="text-xl sm:text-3xl font-bold text-gray-900">{stats.completed}</p>
                <p className="text-xs text-gray-400 mt-0.5 sm:mt-1">已完工</p>
              </motion.div>
            </div>

            {/* 最近计划 - 左右滑动展示 */}
            <motion.div variants={itemVariants} className="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-100 p-3 sm:p-4 md:p-6">
              <div className="flex justify-between items-center mb-3 sm:mb-4">
                <h2 className="text-sm sm:text-base font-semibold text-gray-900 whitespace-nowrap">最近计划</h2>
                <button
                  onClick={() => navigate('/washing/plans')}
                  className="text-xs sm:text-sm text-violet-500 hover:text-violet-600 font-medium flex items-center gap-1 whitespace-nowrap"
                >
                  查看全部
                  <ArrowLeft className="w-3 h-3 sm:w-4 sm:h-4 rotate-180" />
                </button>
              </div>

              {processingPlans.length === 0 ? (
                <div className="text-center py-8 sm:py-12 text-gray-400">
                  <Package className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-3 text-gray-300" />
                  <p className="text-sm">暂无进行中的计划</p>
                  <button
                    onClick={() => navigate('/washing/plans')}
                    className="mt-3 px-4 py-2 bg-violet-400 text-white rounded-lg text-sm hover:bg-violet-500 transition-colors"
                  >
                    查看计划
                  </button>
                </div>
              ) : (
                <div className="relative">
                  {/* 滑动容器 */}
                  <div className="overflow-hidden">
                    <motion.div
                      className="flex"
                      animate={{ x: -currentPlanIndex * 100 + '%' }}
                      transition={{ type: 'spring', stiffness: 300, damping: 30 }}
                    >
                      {processingPlans.map((plan, i) => {
                        const status = statusMap[plan.status] || statusMap.pending;
                        const StatusIcon = status.icon;

                        return (
                          <div
                            key={plan.id}
                            className="w-full flex-shrink-0 px-1"
                            onClick={() => navigate(`/washing/plans?id=${plan.id}`)}
                          >
                            <div className="group p-3 sm:p-4 rounded-xl border border-gray-100 hover:border-purple-200 hover:bg-purple-50/30 cursor-pointer transition-all">
                              {/* 计划标题行 */}
                              <div className="flex items-center gap-2 sm:gap-3">
                                <div className={`w-8 h-8 sm:w-10 sm:h-10 rounded-lg flex items-center justify-center ${status.bgColor}`}>
                                  <StatusIcon className={`w-4 h-4 sm:w-5 sm:h-5 ${status.color}`} />
                                </div>
                                <div className="flex-1 min-w-0">
                                  <div className="flex items-center gap-1.5 sm:gap-2">
                                    <h3 className="font-medium text-gray-900 text-sm sm:text-base truncate">{plan.plan_code}</h3>
                                    <span className={`px-1.5 py-0.5 text-xs rounded-full whitespace-nowrap ${status.bgColor} ${status.color}`}>
                                      {status.label}
                                    </span>
                                  </div>
                                  <p className="text-xs text-gray-500">{plan.planned_meters}米</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </motion.div>
                  </div>

                  {/* 左右滑动按钮 */}
                  {processingPlans.length > 1 && (
                    <>
                      <button
                        onClick={() => setCurrentPlanIndex(prev => Math.max(0, prev - 1))}
                        disabled={currentPlanIndex === 0}
                        className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 w-8 h-8 bg-white shadow-lg rounded-full flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed hover:bg-gray-50 transition-colors z-10"
                      >
                        <ArrowLeft className="w-4 h-4 text-gray-600" />
                      </button>
                      <button
                        onClick={() => setCurrentPlanIndex(prev => Math.min(processingPlans.length - 1, prev + 1))}
                        disabled={currentPlanIndex === processingPlans.length - 1}
                        className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 w-8 h-8 bg-white shadow-lg rounded-full flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed hover:bg-gray-50 transition-colors z-10"
                      >
                        <ArrowLeft className="w-4 h-4 text-gray-600 rotate-180" />
                      </button>
                    </>
                  )}

                  {/* 指示器 */}
                  {processingPlans.length > 1 && (
                    <div className="flex items-center justify-center gap-1.5 mt-4">
                      {processingPlans.map((_, i) => (
                        <button
                          key={i}
                          onClick={() => setCurrentPlanIndex(i)}
                          className={`w-2 h-2 rounded-full transition-all ${
                            i === currentPlanIndex ? 'bg-purple-500 w-4' : 'bg-gray-300 hover:bg-gray-400'
                          }`}
                        />
                      ))}
                    </div>
                  )}
                </div>
              )}
            </motion.div>

            {/* 快捷操作 - 与采购商一致 */}
            <motion.div variants={itemVariants} className="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-100 p-3 sm:p-4 md:p-6">
              <h2 className="text-sm sm:text-base font-semibold text-gray-900 mb-3 sm:mb-4 whitespace-nowrap">快捷操作</h2>
              <div className="grid grid-cols-3 sm:grid-cols-4 gap-2 sm:gap-3">
                {getQuickActions(auth.user?.is_master || false).map((action, index) => (
                  <motion.button
                    key={action.id}
                    whileHover={isMobile ? {} : { scale: 1.03, y: -2 }}
                    whileTap={{ scale: 0.97 }}
                    onClick={() => navigate(action.path)}
                    className="group flex flex-col items-center p-2 sm:p-3 rounded-lg sm:rounded-xl border border-gray-100 hover:border-transparent hover:shadow-md transition-all bg-gray-50/50 hover:bg-white"
                  >
                    <div className={`w-8 h-8 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl flex items-center justify-center mb-1 sm:mb-2 bg-gradient-to-br ${action.gradient} shadow-sm group-hover:shadow-md transition-shadow`}>
                      <action.icon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
                    </div>
                    <span className="text-[10px] sm:text-xs font-medium text-gray-700 group-hover:text-gray-900 text-center whitespace-nowrap">{action.label}</span>
                  </motion.button>
                ))}
              </div>
            </motion.div>
          </motion.div>
        )}
      </div>

      {/* 帮助中心弹窗 */}
      <HelpCenter isOpen={showHelp} onClose={() => setShowHelp(false)} />

      {/* 新手引导 */}
      <OnboardingGuide
        role="washing"
        isOpen={showOnboarding}
        onClose={() => setShowOnboarding(false)}
      />

      {/* 用户手册 */}
      <UserManual isOpen={showUserManual} onClose={() => setShowUserManual(false)} />

      {/* 反馈弹窗 */}
      <FeedbackModal isOpen={showFeedback} onClose={() => setShowFeedback(false)} />

      {/* 关于窗口 */}
      <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />

      {/* 版本更新弹窗 */}
      <VersionUpdate
        isOpen={showUpdate}
        onClose={() => setShowUpdate(false)}
      />

      {/* 崩溃报告 */}
      <CrashReporter />

      {/* 账户卡片弹窗 */}
      {showAccountCard && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4" onClick={() => setShowAccountCard(false)}>
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            className="bg-white rounded-2xl w-full max-w-sm shadow-2xl overflow-hidden"
            onClick={e => e.stopPropagation()}
          >
            {/* 头部 */}
            <div className="bg-gradient-to-r from-violet-400 to-fuchsia-400 p-6 text-white">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-bold">账户信息</h2>
                <button onClick={() => setShowAccountCard(false)} className="p-2 hover:bg-white/20 rounded-lg transition-colors">
                  <X className="w-5 h-5" />
                </button>
              </div>
            </div>

            {/* 账户详情 */}
            <div className="p-6 space-y-4">
              {/* 用户信息 */}
              <div className="flex items-center gap-4">
                <label className="w-16 h-16 bg-gradient-to-br from-violet-400 to-fuchsia-400 rounded-xl flex items-center justify-center shadow-lg cursor-pointer hover:opacity-90 transition-opacity overflow-hidden relative group">
                  {(auth.user as any)?.image_url ? (
                    <img src={(auth.user as any).image_url} alt="头像" className="w-full h-full object-cover relative z-10" />
                  ) : (
                    <Droplets className="w-8 h-8 text-white relative z-10" />
                  )}
                  <div className="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-20">
                    <Camera className="w-5 h-5 text-white" />
                  </div>
                  <input
                    type="file"
                    accept="image/*"
                    className="hidden"
                    onChange={async (e) => {
                      const file = e.target.files?.[0];
                      if (!file) return;
                      const { data: { user } } = await supabase.auth.getUser();
                      if (!user) return;
                      try {
                        const fileExt = file.name.split('.').pop();
                        const fileName = `${user.id}-${Date.now()}.${fileExt}`;
                        const arrayBuffer = await file.arrayBuffer();
                        const { error: uploadError } = await supabase.storage
                          .from('avatars')
                          .upload(fileName, arrayBuffer, {
                            contentType: file.type,
                            upsert: true
                          });
                        if (uploadError) {
                          console.error('头像上传失败:', uploadError);
                          alert('头像上传失败: ' + uploadError.message);
                          return;
                        }
                        const { data: { publicUrl } } = supabase.storage
                          .from('avatars')
                          .getPublicUrl(fileName);
                        const { error: updateError } = await supabase
                          .from('profiles')
                          .update({ image_url: publicUrl } as any)
                          .eq('id', user.id);
                        if (updateError) {
                          console.error('头像更新失败:', updateError);
                          alert('头像更新失败: ' + updateError.message);
                        } else {
                          window.location.reload();
                        }
                      } catch (err) {
                        console.error('头像上传出错:', err);
                        alert('头像上传出错，请重试');
                      }
                    }}
                  />
                </label>
                <div>
                  <p className="font-semibold text-gray-900 text-lg truncate max-w-[200px]">{(auth.user as any)?.display_name || auth.user?.username || '用户'}</p>
                  <p className="text-sm text-gray-500">{auth.company?.name || '水洗厂'}</p>
                  <span className="inline-flex items-center gap-1 text-xs bg-violet-100 text-violet-600 px-2 py-0.5 rounded-full mt-1">
                    {auth.user?.is_master ? '主账号' : '子账号'}
                  </span>
                </div>
              </div>

              {/* 功能菜单 */}
              <div className="space-y-2 pt-4 border-t border-gray-100">
                <button
                  onClick={() => { setShowAccountCard(false); navigate('/members'); }}
                  className="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors text-left"
                >
                  <div className="w-10 h-10 bg-violet-100 rounded-lg flex items-center justify-center">
                    <Users className="w-5 h-5 text-violet-500" />
                  </div>
                  <div>
                    <p className="font-medium text-gray-900">账号管理</p>
                    <p className="text-xs text-gray-500">管理团队成员和账户设置</p>
                  </div>
                </button>

                <button
                  onClick={() => { setShowAccountCard(false); setShowUserManual(true); }}
                  className="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors text-left"
                >
                  <div className="w-10 h-10 bg-violet-100 rounded-lg flex items-center justify-center">
                    <BookOpen className="w-5 h-5 text-violet-500" />
                  </div>
                  <div>
                    <p className="font-medium text-gray-900">用户手册</p>
                    <p className="text-xs text-gray-500">查看详细使用指南</p>
                  </div>
                </button>

                <button
                  onClick={() => { setShowAccountCard(false); setShowFeedback(true); }}
                  className="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors text-left"
                >
                  <div className="w-10 h-10 bg-violet-100 rounded-lg flex items-center justify-center">
                    <MessageSquare className="w-5 h-5 text-violet-500" />
                  </div>
                  <div>
                    <p className="font-medium text-gray-900">用户反馈</p>
                    <p className="text-xs text-gray-500">提交问题或建议</p>
                  </div>
                </button>

                <button
                  onClick={() => { setShowAccountCard(false); setShowAbout(true); }}
                  className="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors text-left"
                >
                  <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                    <Info className="w-5 h-5 text-gray-600" />
                  </div>
                  <div>
                    <p className="font-medium text-gray-900">关于</p>
                    <p className="text-xs text-gray-500">版本信息与版权</p>
                  </div>
                </button>
              </div>

              {/* 退出登录 */}
              <button
                onClick={async () => { await logout(); navigate('/login'); }}
                className="w-full py-3 bg-red-50 hover:bg-red-100 text-red-600 rounded-xl transition-colors flex items-center justify-center gap-2 font-medium"
              >
                <LogOut className="w-5 h-5" />
                退出登录
              </button>
            </div>
          </motion.div>
        </div>
      )}
    </div>
  );
}