import React, { useState, useCallback } from 'react';
import {
  Sparkles,
  MapPin,
  Clock,
  Palette,
  Tag,
  Camera,
  ExternalLink,
  ChevronRight,
  Sun,
  Moon,
  Sunrise,
  Sunset,
  Search,
} from 'lucide-react';
import { OutfitRecommendationCardProps } from '../../types/outfitRecommendation';

/**
 * 穿搭方案推荐卡片组件
 * 遵循设计系统规范，提供统一的方案展示界面
 */
export const OutfitRecommendationCard: React.FC<OutfitRecommendationCardProps> = ({
  recommendation,
  onSelect,
  onSceneSearch,
  onMaterialSearch,
  showDetails = true,
  compact = false,
  className = '',
}) => {
  const [isExpanded, setIsExpanded] = useState(false);

  // 处理卡片点击
  const handleCardClick = useCallback((e: React.MouseEvent) => {
    // 如果点击的是按钮或其子元素，不触发卡片选择
    const target = e.target as HTMLElement;
    if (target.closest('button')) {
      return;
    }

    if (onSelect) {
      onSelect(recommendation);
    }
  }, [recommendation, onSelect]);

  // 处理场景检索
  const handleSceneSearch = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
    if (onSceneSearch) {
      onSceneSearch(recommendation);
    }
  }, [recommendation, onSceneSearch]);

  // 处理素材检索
  const handleMaterialSearch = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
    if (onMaterialSearch) {
      onMaterialSearch(recommendation);
    }
  }, [recommendation, onMaterialSearch]);

  // 处理展开/收起
  const handleToggleExpand = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
    setIsExpanded(!isExpanded);
  }, [isExpanded]);

  // 获取时间段图标
  const getTimeIcon = (timeOfDay: string) => {
    switch (timeOfDay.toLowerCase()) {
      case '早晨':
      case '上午':
        return <Sunrise className="w-3 h-3" />;
      case '中午':
      case '下午':
        return <Sun className="w-3 h-3" />;
      case '傍晚':
      case '黄昏':
        return <Sunset className="w-3 h-3" />;
      case '晚上':
      case '夜晚':
        return <Moon className="w-3 h-3" />;
      default:
        return <Clock className="w-3 h-3" />;
    }
  };

  return (
    <div
      className={`
        card card-interactive group cursor-pointer animate-fade-in-up
        relative overflow-hidden bg-gradient-to-br from-white to-gray-50/50
        hover:from-white hover:to-primary-50/30 transition-all duration-500
        hover:shadow-lg hover:shadow-primary-500/10 hover:-translate-y-1
        border border-gray-200 hover:border-primary-300
        ${compact ? 'p-4' : 'p-6'}
        ${className}
      `}
      onClick={handleCardClick}
    >
      {/* 装饰性背景 */}
      <div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-primary-100 to-primary-200 rounded-full -translate-y-12 translate-x-12 opacity-40 group-hover:opacity-60 transition-all duration-500 group-hover:scale-110"></div>

      <div className="relative">
        {/* 标题和描述 */}
        <div className="mb-4">
          <h3 className="text-lg font-bold text-high-emphasis mb-2 group-hover:text-primary-600 transition-colors duration-200">
            {recommendation.title}
          </h3>
          <p className="text-sm text-medium-emphasis line-clamp-2">
            {recommendation.description}
          </p>
        </div>

        {/* 风格标签 */}
        <div className="flex flex-wrap gap-2 mb-4">
          <div className="flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">
            <Tag className="w-3 h-3" />
            {recommendation.overall_style}
          </div>
          {recommendation.style_tags.slice(0, 2).map((tag, index) => (
            <div
              key={index}
              className="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs"
            >
              {tag}
            </div>
          ))}
          {recommendation.style_tags.length > 2 && (
            <div className="px-2 py-1 bg-gray-100 text-gray-500 rounded-full text-xs">
              +{recommendation.style_tags.length - 2}
            </div>
          )}
        </div>

        {/* 主要色彩 */}
        {recommendation.primary_colors.length > 0 && (
          <div className="flex items-center gap-2 mb-4">
            <Palette className="w-4 h-4 text-gray-500" />
            <div className="flex items-center gap-2">
              {recommendation.primary_colors.slice(0, 4).map((color, index) => (
                <div
                  key={index}
                  className="w-6 h-6 rounded-full border-2 border-white shadow-sm"
                  style={{ backgroundColor: color.hex }}
                  title={color.name}
                />
              ))}
              {recommendation.primary_colors.length > 4 && (
                <span className="text-xs text-gray-500">
                  +{recommendation.primary_colors.length - 4}
                </span>
              )}
            </div>
          </div>
        )}

        {/* 适合场合和季节 */}
        <div className="grid grid-cols-2 gap-4 mb-4 text-xs text-medium-emphasis">
          <div>
            <span className="font-medium">适合场合:</span>
            <div className="mt-1">
              {recommendation.occasions.slice(0, 2).join('、')}
              {recommendation.occasions.length > 2 && '...'}
            </div>
          </div>
          <div>
            <span className="font-medium">适合季节:</span>
            <div className="mt-1">
              {recommendation.seasons.join('、')}
            </div>
          </div>
        </div>

        {/* 详细信息 (可展开) */}
        {showDetails && (
          <>
            {/* 展开/收起按钮 */}
            <button
              onClick={handleToggleExpand}
              className="flex items-center gap-2 w-full text-left text-sm text-primary-600 hover:text-primary-700 mb-3 transition-colors duration-200"
            >
              <span>{isExpanded ? '收起详情' : '查看详情'}</span>
              <ChevronRight
                className={`w-4 h-4 transition-transform duration-200 ${
                  isExpanded ? 'rotate-90' : ''
                }`}
              />
            </button>

            {/* 展开的详细内容 */}
            {isExpanded && (
              <div className="space-y-4 animate-fade-in">
                {/* 穿搭单品 */}
                {recommendation.items.length > 0 && (
                  <div>
                    <h4 className="text-sm font-semibold text-high-emphasis mb-2">穿搭单品</h4>
                    <div className="space-y-2">
                      {recommendation.items.map((item, index) => (
                        <div key={index} className="flex items-center gap-3 p-2 bg-gray-50 rounded-lg">
                          <div
                            className="w-4 h-4 rounded-full border border-gray-300"
                            style={{ backgroundColor: item.primary_color.hex }}
                          />
                          <div className="flex-1">
                            <div className="text-sm font-medium">{item.category}</div>
                            <div className="text-xs text-gray-600">{item.description}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* 场景推荐 */}
                {recommendation.scene_recommendations.length > 0 && (
                  <div>
                    <h4 className="text-sm font-semibold text-high-emphasis mb-2">推荐场景</h4>
                    <div className="space-y-2">
                      {recommendation.scene_recommendations.slice(0, 2).map((scene, index) => (
                        <div key={index} className="p-2 bg-blue-50 rounded-lg">
                          <div className="flex items-center gap-2 mb-1">
                            <MapPin className="w-3 h-3 text-blue-600" />
                            <span className="text-sm font-medium text-blue-900">{scene.name}</span>
                            <span className="text-xs text-blue-600 bg-blue-100 px-2 py-0.5 rounded">
                              {scene.scene_type}
                            </span>
                          </div>
                          <p className="text-xs text-blue-700 mb-2">{scene.description}</p>
                          {scene.time_of_day.length > 0 && (
                            <div className="flex items-center gap-2">
                              {scene.time_of_day.slice(0, 3).map((time, timeIndex) => (
                                <div
                                  key={timeIndex}
                                  className="flex items-center gap-1 text-xs text-blue-600"
                                >
                                  {getTimeIcon(time)}
                                  <span>{time}</span>
                                </div>
                              ))}
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* TikTok优化建议 */}
                {recommendation.tiktok_tips.length > 0 && (
                  <div>
                    <h4 className="text-sm font-semibold text-high-emphasis mb-2 flex items-center gap-2">
                      <Camera className="w-4 h-4" />
                      TikTok优化建议
                    </h4>
                    <div className="space-y-1">
                      {recommendation.tiktok_tips.slice(0, 3).map((tip, index) => (
                        <div key={index} className="text-xs text-gray-600 flex items-start gap-2">
                          <div className="w-1 h-1 bg-primary-500 rounded-full mt-2 flex-shrink-0" />
                          <span>{tip}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            )}
          </>
        )}

        {/* 底部操作按钮 */}
        <div className="flex items-center justify-between pt-4 border-t border-gray-100">
          <div className="text-xs text-gray-500">
            {recommendation.color_theme}
          </div>

          <div className="flex items-center gap-2">
            {onMaterialSearch && (
              <button
                onClick={handleMaterialSearch}
                className="flex items-center gap-2 px-3 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors duration-200 text-sm font-medium"
              >
                <Search className="w-4 h-4" />
                素材检索
              </button>
            )}

            {onSceneSearch && (
              <button
                onClick={handleSceneSearch}
                className="flex items-center gap-2 px-3 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors duration-200 text-sm font-medium"
              >
                <MapPin className="w-4 h-4" />
                场景检索
                <ExternalLink className="w-3 h-3" />
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default OutfitRecommendationCard;