import { Link, useNavigate } from 'react-router-dom';
import {
  Wand2,
  Sparkles,
  History,
  ImageIcon,
  Video,
  Music,
  FolderOpen,
} from 'lucide-react';
import { useAppStore } from '../store';
import Layout from '../components/Layout';
import CheckInBanner from '../components/CheckInBanner';
import NewbieGuide from '../components/NewbieGuide';
import TemplateGallery from '../components/TemplateGallery';
import IndustryCases from '../components/IndustryCases';
import StatsShowcase from '../components/StatsShowcase';
import PlatformTemplates from '../components/PlatformTemplates';
import { useMemo } from 'react';

// 提取到组件外部，避免每次渲染重新创建
const workIcons: Record<string, React.ReactNode> = {
  image: <ImageIcon className='w-4 h-4' />,
  video: <Video className='w-4 h-4' />,
  music: <Music className='w-4 h-4' />,
};

const workColors: Record<string, string> = {
  image: 'from-blue-500 to-purple-600',
  video: 'from-orange-500 to-pink-600',
  music: 'from-green-500 to-teal-600',
};

const Home = () => {
  const navigate = useNavigate();
  const { getRecentWorks } = useAppStore();
  const recentWorks = getRecentWorks(6);

  // 使用 useMemo 缓存 workIcon 查找
  const getWorkIcon = useMemo(() => {
    return (type: string) => {
      return workIcons[type] || workIcons.image;
    };
  }, []);

  // 使用 useMemo 缓存 workColor 查找
  const getWorkColor = useMemo(() => {
    return (type: string) => {
      return workColors[type] || workColors.image;
    };
  }, []);

  return (
    <Layout>
      <div className='min-h-screen bg-gray-50'>
        <div className='w-full px-4 py-4'>
          <CheckInBanner />

          <div className='bg-gradient-to-r from-indigo-600 to-purple-700 rounded-3xl p-8 mb-6 relative overflow-hidden'>
            <div className='absolute right-0 top-0 w-72 h-72 bg-white/10 rounded-full -translate-y-1/3 translate-x-1/3'></div>
            <div className='absolute left-1/2 bottom-0 w-40 h-40 bg-white/5 rounded-full -translate-x-1/2 translate-y-1/3'></div>

            <div className='relative z-10 flex flex-col md:flex-row items-center justify-between gap-8'>
              <div className='flex-1'>
                <div className='flex items-center gap-2 text-white/80 mb-4 text-sm'>
                  <Sparkles className='w-4 h-4' />
                  <span>电商卖家专属AI创作平台</span>
                </div>
                <h1 className='text-4xl font-bold text-white mb-4'>雄图，让电商创作更简单</h1>
                <div className='flex items-center gap-4 text-white/90 mb-6 text-sm'>
                  <span className='flex items-center gap-1'>
                    <Sparkles className='w-4 h-4 text-yellow-300' />
                    10秒生成商品主图
                  </span>
                  <span className='flex items-center gap-1'>
                    <Wand2 className='w-4 h-4 text-yellow-300' />
                    一键适配淘宝抖音小红书
                  </span>
                  <span className='flex items-center gap-1'>
                    <Sparkles className='w-4 h-4 text-yellow-300' />
                    免费试用10次
                  </span>
                </div>
                <div className='flex gap-4'>
                  <Link
                    to='/image'
                    className='px-8 py-4 bg-white text-indigo-600 rounded-xl font-bold hover:shadow-lg transition-all hover:scale-105 flex items-center gap-2'
                  >
                    <Wand2 className='w-5 h-5' />
                    开始创作
                  </Link>
                </div>
              </div>

              <div className='flex-shrink-0 hidden md:block'>
                <div className='grid grid-cols-2 gap-4'>
                  <div className='bg-white/10 backdrop-blur-sm rounded-xl p-4 text-center'>
                    <div className='text-white/90 text-sm mb-2'>📊</div>
                    <div className='text-2xl font-bold text-white'>20+</div>
                    <div className='text-white/70 text-xs'>行业预置模板</div>
                  </div>
                  <div className='bg-white/10 backdrop-blur-sm rounded-xl p-4 text-center'>
                    <div className='text-white/90 text-sm mb-2'>🎯</div>
                    <div className='text-2xl font-bold text-white'>核心适用场景</div>
                    <div className='text-white/70 text-xs'>主图详情短视频</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <NewbieGuide />

          {recentWorks.length > 0 && (
            <div className='mb-6'>
              <div className='flex items-center justify-between mb-4'>
                <h2 className='text-xl font-bold text-gray-900 flex items-center gap-2'>
                  <History className='w-5 h-5' />
                  最近创作
                </h2>
                <button
                  onClick={() => navigate('/history')}
                  className='text-primary hover:text-primary/80 text-sm font-medium flex items-center gap-1'
                >
                  查看全部
                  <FolderOpen className='w-4 h-4' />
                </button>
              </div>
              <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4'>
                {recentWorks.map((work) => (
                  <div
                    key={work.id}
                    className='group relative bg-white rounded-xl shadow-sm overflow-hidden cursor-pointer hover:shadow-md transition-shadow'
                    onClick={() => navigate(`/${work.type}`)}
                  >
                    {work.thumbnailUrl || work.url ? (
                      <div className='aspect-square overflow-hidden'>
                        <img
                          src={work.thumbnailUrl || work.url}
                          alt={work.title}
                          className='w-full h-full object-cover group-hover:scale-105 transition-transform'
                        />
                      </div>
                    ) : (
                      <div
                        className={`aspect-square bg-gradient-to-br ${getWorkColor(work.type)} flex items-center justify-center`}
                      >
                        <div className='w-12 h-12 bg-white/20 rounded-full flex items-center justify-center text-white'>
                          {getWorkIcon(work.type)}
                        </div>
                      </div>
                    )}
                    <div className='absolute top-2 left-2'>
                      <div
                        className={`w-7 h-7 bg-gradient-to-br ${getWorkColor(work.type)} rounded-full flex items-center justify-center text-white shadow-sm`}
                      >
                        {getWorkIcon(work.type)}
                      </div>
                    </div>
                    <div className='p-2'>
                      <p className='text-xs text-gray-700 truncate font-medium'>{work.title}</p>
                      <p className='text-[10px] text-gray-500'>
                        {new Date(work.createdAt).toLocaleDateString()}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          <TemplateGallery />
          <IndustryCases />
          <StatsShowcase />
          <PlatformTemplates />
        </div>

        <footer className='bg-white border-t border-gray-100 py-8 mt-8'>
          <div className='w-full px-4'>
            <div className='flex flex-col md:flex-row items-center justify-between gap-4'>
              <div className='text-gray-500 text-sm'>
                © 2026 雄图电商AI创作平台
                <span className='mx-3'>|</span>
                用户协议
                <span className='mx-3'>|</span>
                隐私政策
              </div>
              <div className='flex items-center gap-4 text-sm text-gray-500'>
                <span>联系客服</span>
                <span>京ICP备2345678-1</span>
                <span>公安机关备案: 11010502012345</span>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </Layout>
  );
};

export default Home;