import React, { useState, useCallback } from 'react';
import {
  Sparkles,
  ArrowLeft,
  Wand2,
  Shirt,
  Download,
  Copy,
  RefreshCw,
  Settings,
  Info
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import OutfitRecommendationService from '../../services/outfitRecommendationService';
import { OutfitRecommendation, STYLE_OPTIONS, OCCASION_OPTIONS, SEASON_OPTIONS } from '../../types/outfitRecommendation';
import OutfitRecommendationList from '../../components/outfit/OutfitRecommendationList';
import { CustomSelect } from '../../components/CustomSelect';

/**
 * AI穿搭方案推荐小工具
 * 遵循 Tauri 开发规范和 UI/UX 设计标准
 */
const OutfitRecommendationTool: React.FC = () => {
  const navigate = useNavigate();

  // 状态管理
  const [query, setQuery] = useState('');
  const [targetStyle, setTargetStyle] = useState<string>('');
  const [occasions, setOccasions] = useState<string[]>([]);
  const [season, setSeason] = useState<string>('');
  const [colorPreferences, setColorPreferences] = useState<string[]>([]);
  const [count, setCount] = useState(3);
  
  const [recommendations, setRecommendations] = useState<OutfitRecommendation[]>([]);
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showAdvanced, setShowAdvanced] = useState(false);

  // 返回工具列表
  const handleBackToTools = useCallback(() => {
    navigate('/tools');
  }, [navigate]);

  // 生成穿搭方案
  const handleGenerate = useCallback(async () => {
    if (!query.trim()) {
      setError('请输入穿搭关键词或描述');
      return;
    }

    setIsGenerating(true);
    setError(null);

    try {
      const response = await OutfitRecommendationService.generateRecommendations({
        query: query.trim(),
        target_style: targetStyle || undefined,
        occasions: occasions.length > 0 ? occasions : undefined,
        season: season || undefined,
        color_preferences: colorPreferences.length > 0 ? colorPreferences : undefined,
        count,
      });

      setRecommendations(response.recommendations);
    } catch (err) {
      console.error('穿搭方案生成失败:', err);
      setError(err instanceof Error ? err.message : '穿搭方案生成失败');
    } finally {
      setIsGenerating(false);
    }
  }, [query, targetStyle, occasions, season, colorPreferences, count]);

  // 重新生成
  const handleRegenerate = useCallback(() => {
    handleGenerate();
  }, [handleGenerate]);

  // 清空表单
  const handleClear = useCallback(() => {
    setQuery('');
    setTargetStyle('');
    setOccasions([]);
    setSeason('');
    setColorPreferences([]);
    setCount(3);
    setRecommendations([]);
    setError(null);
  }, []);

  // 导出结果
  const handleExport = useCallback(() => {
    if (recommendations.length === 0) {
      return;
    }

    const exportData = {
      query,
      generated_at: new Date().toISOString(),
      recommendations: recommendations.map(rec => ({
        title: rec.title,
        description: rec.description,
        overall_style: rec.overall_style,
        style_tags: rec.style_tags,
        occasions: rec.occasions,
        seasons: rec.seasons,
        color_theme: rec.color_theme,
        items: rec.items,
        tiktok_tips: rec.tiktok_tips,
        styling_tips: rec.styling_tips,
      }))
    };

    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `outfit-recommendations-${Date.now()}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, [recommendations, query]);

  // 复制结果
  const handleCopy = useCallback(() => {
    if (recommendations.length === 0) {
      return;
    }

    const text = recommendations.map(rec => 
      `${rec.title}\n${rec.description}\n风格: ${rec.style_tags.join(', ')}\n\n`
    ).join('');

    navigator.clipboard.writeText(text);
  }, [recommendations]);

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
      {/* 顶部导航 */}
      <div className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b border-gray-200">
        <div className="mx-auto px-6 py-4">
          <div className="page-header flex items-center justify-between">
            <div className="flex items-center gap-4">
              <button
                onClick={handleBackToTools}
                className="flex items-center gap-2 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200"
              >
                <ArrowLeft className="w-4 h-4" />
                <span className="text-sm font-medium">返回工具</span>
              </button>
              
              <div className="h-6 w-px bg-gray-300"></div>
              
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center shadow-lg">
                  <Sparkles className="w-5 h-5 text-white" />
                </div>
                <div>
                  <h1 className="text-xl font-bold text-gray-900">AI穿搭方案推荐</h1>
                  <p className="text-sm text-gray-600">基于TikTok视觉趋势的智能穿搭建议</p>
                </div>
              </div>
            </div>

            <div className="flex items-center gap-2">
              {recommendations.length > 0 && (
                <>
                  <button
                    onClick={handleCopy}
                    className="flex items-center gap-2 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200"
                    title="复制结果"
                  >
                    <Copy className="w-4 h-4" />
                  </button>
                  <button
                    onClick={handleExport}
                    className="flex items-center gap-2 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200"
                    title="导出结果"
                  >
                    <Download className="w-4 h-4" />
                  </button>
                </>
              )}
              <button
                onClick={() => setShowAdvanced(!showAdvanced)}
                className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors duration-200 ${
                  showAdvanced 
                    ? 'text-primary-600 bg-primary-50' 
                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
                }`}
                title="高级设置"
              >
                <Settings className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* 主要内容 */}
      <div className="mx-auto px-6 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* 左侧输入区域 */}
          <div className="lg:col-span-1">
            <div className="card p-6 sticky top-24">
              <div className="space-y-6">
                {/* 基础输入 */}
                <div>
                  <label className="block text-sm font-semibold text-gray-900 mb-3">
                    <Shirt className="w-4 h-4 inline mr-2" />
                    穿搭描述
                  </label>
                  <textarea
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder="描述您想要的穿搭风格，如：休闲约会装、正式商务装、街头潮流风等..."
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
                    rows={4}
                  />
                </div>

                {/* 高级设置 */}
                {showAdvanced && (
                  <div className="space-y-4 animate-fade-in">
                    <div className="border-t border-gray-200 pt-4">
                      <h3 className="text-sm font-semibold text-gray-900 mb-3">高级设置</h3>
                    </div>

                    {/* 目标风格 */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">目标风格</label>
                      <CustomSelect
                        value={targetStyle}
                        onChange={setTargetStyle}
                        options={[
                          { value: '', label: '不限制' },
                          ...STYLE_OPTIONS.map(style => ({ value: style, label: style }))
                        ]}
                        placeholder="选择风格"
                      />
                    </div>

                    {/* 适合场合 */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">适合场合</label>
                      <div className="grid grid-cols-2 gap-2">
                        {OCCASION_OPTIONS.map(occasion => (
                          <label key={occasion} className="flex items-center gap-2 text-sm">
                            <input
                              type="checkbox"
                              checked={occasions.includes(occasion)}
                              onChange={(e) => {
                                if (e.target.checked) {
                                  setOccasions([...occasions, occasion]);
                                } else {
                                  setOccasions(occasions.filter(o => o !== occasion));
                                }
                              }}
                              className="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                            />
                            {occasion}
                          </label>
                        ))}
                      </div>
                    </div>

                    {/* 季节 */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">季节</label>
                      <CustomSelect
                        value={season}
                        onChange={setSeason}
                        options={[
                          { value: '', label: '不限制' },
                          ...SEASON_OPTIONS.map(s => ({ value: s, label: s }))
                        ]}
                        placeholder="选择季节"
                      />
                    </div>

                    {/* 生成数量 */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">生成数量</label>
                      <select
                        value={count}
                        onChange={(e) => setCount(Number(e.target.value))}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                      >
                        <option value={1}>1个方案</option>
                        <option value={2}>2个方案</option>
                        <option value={3}>3个方案</option>
                        <option value={5}>5个方案</option>
                      </select>
                    </div>
                  </div>
                )}

                {/* 操作按钮 */}
                <div className="space-y-3">
                  <button
                    onClick={handleGenerate}
                    disabled={!query.trim() || isGenerating}
                    className="w-full btn btn-primary flex items-center justify-center gap-2"
                  >
                    {isGenerating ? (
                      <>
                        <RefreshCw className="w-4 h-4 animate-spin" />
                        生成中...
                      </>
                    ) : (
                      <>
                        <Wand2 className="w-4 h-4" />
                        生成穿搭方案
                      </>
                    )}
                  </button>

                  <button
                    onClick={handleClear}
                    className="w-full btn btn-outline"
                  >
                    清空重置
                  </button>
                </div>

                {/* 使用提示 */}
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <div className="flex items-start gap-3">
                    <Info className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                    <div className="text-sm text-blue-800">
                      <p className="font-medium mb-1">使用提示</p>
                      <ul className="space-y-1 text-xs">
                        <li>• 描述越详细，生成的方案越精准</li>
                        <li>• 可以指定场合、风格、颜色偏好</li>
                        <li>• 每个方案都包含TikTok优化建议</li>
                        <li>• 支持导出和复制结果</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* 右侧结果区域 */}
          <div className="lg:col-span-3">
            <OutfitRecommendationList
              recommendations={recommendations}
              isLoading={isGenerating}
              error={error || undefined}
              onRegenerate={handleRegenerate}
              className="min-h-[600px]"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default OutfitRecommendationTool;