import React, { useState, useEffect } from 'react';
import { Model, ModelStatus, Gender, ModelViewMode, ModelSortBy, SortOrder } from '../types/model';
import { modelService } from '../services/modelService';
import ModelCard from './ModelCard';
import ModelForm from './ModelForm';
import ModelSearch from './ModelSearch';
import {
  PlusIcon,
  Squares2X2Icon,
  ListBulletIcon,
  FunnelIcon,
  MagnifyingGlassIcon,
  SparklesIcon,
  HeartIcon
} from '@heroicons/react/24/outline';
import '../styles/design-system.css';

interface ModelListProps {
  onModelSelect?: (model: Model) => void;
}

const ModelList: React.FC<ModelListProps> = ({ onModelSelect }) => {
  const [models, setModels] = useState<Model[]>([]);
  const [filteredModels, setFilteredModels] = useState<Model[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [editingModel, setEditingModel] = useState<Model | null>(null);
  const [viewMode, setViewMode] = useState<ModelViewMode>(ModelViewMode.Grid);
  const [sortBy, setSortBy] = useState<ModelSortBy>(ModelSortBy.CreatedAt);
  const [sortOrder, setSortOrder] = useState<SortOrder>(SortOrder.Desc);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<ModelStatus | 'all'>('all');
  const [genderFilter, setGenderFilter] = useState<Gender | 'all'>('all');
  const [favorites, setFavorites] = useState<Set<string>>(new Set());
  const [showFilters, setShowFilters] = useState(true);

  useEffect(() => {
    loadModels();
  }, []);

  useEffect(() => {
    filterAndSortModels();
  }, [models, searchQuery, statusFilter, genderFilter, sortBy, sortOrder]);

  const loadModels = async () => {
    try {
      setLoading(true);
      setError(null);
      console.log('开始加载模特列表...');
      const modelList = await modelService.getAllModels();
      console.log('模特列表加载成功:', modelList);
      setModels(modelList);
    } catch (err) {
      console.error('加载模特列表失败:', err);
      setError(err instanceof Error ? err.message : '加载模特列表失败');
    } finally {
      setLoading(false);
    }
  };

  const filterAndSortModels = () => {
    let filtered = [...models];

    // 搜索过滤
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(model =>
        model.name.toLowerCase().includes(query) ||
        (model.stage_name && model.stage_name.toLowerCase().includes(query)) ||
        model.tags.some(tag => tag.toLowerCase().includes(query))
      );
    }

    // 状态过滤
    if (statusFilter !== 'all') {
      filtered = filtered.filter(model => model.status === statusFilter);
    }

    // 性别过滤
    if (genderFilter !== 'all') {
      filtered = filtered.filter(model => model.gender === genderFilter);
    }

    // 排序
    filtered.sort((a, b) => {
      let aValue: any, bValue: any;

      switch (sortBy) {
        case ModelSortBy.Name:
          aValue = a.name.toLowerCase();
          bValue = b.name.toLowerCase();
          break;
        case ModelSortBy.CreatedAt:
          aValue = new Date(a.created_at);
          bValue = new Date(b.created_at);
          break;
        case ModelSortBy.UpdatedAt:
          aValue = new Date(a.updated_at);
          bValue = new Date(b.updated_at);
          break;
        case ModelSortBy.Rating:
          aValue = a.rating || 0;
          bValue = b.rating || 0;
          break;
        case ModelSortBy.Age:
          aValue = a.age || 0;
          bValue = b.age || 0;
          break;
        case ModelSortBy.Height:
          aValue = a.height || 0;
          bValue = b.height || 0;
          break;
        default:
          return 0;
      }

      if (aValue < bValue) return sortOrder === SortOrder.Asc ? -1 : 1;
      if (aValue > bValue) return sortOrder === SortOrder.Asc ? 1 : -1;
      return 0;
    });

    setFilteredModels(filtered);
  };

  const handleCreateModel = async (modelData: any) => {
    try {
      await modelService.createModel(modelData);
      setShowCreateModal(false);
      await loadModels();
    } catch (err) {
      console.error('创建模特失败:', err);
    }
  };

  const handleUpdateModel = async (modelData: any) => {
    if (!editingModel) return;

    try {
      await modelService.updateModel(editingModel.id, modelData);
      setEditingModel(null);
      await loadModels();
    } catch (err) {
      console.error('更新模特失败:', err);
    }
  };

  const handleDeleteModel = async (modelId: string) => {
    if (!confirm('确定要删除这个模特吗？')) return;

    try {
      await modelService.deleteModel(modelId);
      await loadModels();
    } catch (err) {
      console.error('删除模特失败:', err);
    }
  };

  const handleFavorite = (modelId: string) => {
    setFavorites(prev => {
      const newFavorites = new Set(prev);
      if (newFavorites.has(modelId)) {
        newFavorites.delete(modelId);
      } else {
        newFavorites.add(modelId);
      }
      // 保存到本地存储
      localStorage.setItem('model-favorites', JSON.stringify([...newFavorites]));
      return newFavorites;
    });
  };

  // 从本地存储加载收藏
  useEffect(() => {
    const savedFavorites = localStorage.getItem('model-favorites');
    if (savedFavorites) {
      try {
        const favoriteIds = JSON.parse(savedFavorites);
        setFavorites(new Set(favoriteIds));
      } catch (error) {
        console.error('加载收藏列表失败:', error);
      }
    }
  }, []);



  // 骨架屏组件
  const ModelCardSkeleton = () => (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden animate-pulse">
      <div className="aspect-[3/4] bg-gray-200 loading-shimmer" />
      <div className="p-5 space-y-3">
        <div className="h-6 bg-gray-200 rounded loading-shimmer" />
        <div className="h-4 bg-gray-200 rounded w-3/4 loading-shimmer" />
        <div className="h-4 bg-gray-200 rounded w-1/2 loading-shimmer" />
        <div className="flex gap-2 pt-2">
          <div className="flex-1 h-10 bg-gray-200 rounded-xl loading-shimmer" />
          <div className="w-10 h-10 bg-gray-200 rounded-xl loading-shimmer" />
        </div>
      </div>
    </div>
  );

  if (loading) {
    return (
      <div className="space-y-6 animate-fade-in">
        {/* 头部骨架 */}
        <div className="flex justify-between items-center">
          <div className="space-y-2">
            <div className="h-8 w-32 bg-gray-200 rounded loading-shimmer" />
            <div className="h-4 w-24 bg-gray-200 rounded loading-shimmer" />
          </div>
          <div className="flex gap-3">
            <div className="h-10 w-20 bg-gray-200 rounded-lg loading-shimmer" />
            <div className="h-10 w-32 bg-gray-200 rounded-lg loading-shimmer" />
          </div>
        </div>

        {/* 搜索栏骨架 */}
        <div className="h-12 bg-gray-200 rounded-xl loading-shimmer" />

        {/* 模特卡片骨架 */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {[...Array(8)].map((_, i) => (
            <ModelCardSkeleton key={i} />
          ))}
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="text-center py-16 animate-fade-in">
        <div className="max-w-md mx-auto">
          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <SparklesIcon className="h-8 w-8 text-red-500" />
          </div>
          <h3 className="text-lg font-semibold text-gray-900 mb-2">加载失败</h3>
          <p className="text-gray-600 mb-6">{error}</p>
          <button
            onClick={loadModels}
            className="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all duration-200 shadow-sm hover:shadow-md font-medium"
          >
            重新加载
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-8 animate-fade-in">
      {/* 头部工具栏 */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
              <SparklesIcon className="h-5 w-5 text-white" />
            </div>
            <div>
              <h1 className="text-xl font-bold text-gray-900 mb-0.5">模特管理</h1>
              <p className="text-sm text-gray-500 flex items-center gap-2">
                <span>共 {filteredModels.length} 个模特</span>
                {favorites.size > 0 && (
                  <>
                    <span>•</span>
                    <span className="flex items-center gap-1">
                      <HeartIcon className="h-3.5 w-3.5 text-red-500" />
                      {favorites.size} 个收藏
                    </span>
                  </>
                )}
              </p>
            </div>
          </div>

          <div className="flex items-center gap-3">
            {/* 过滤器切换 */}
            <button
              onClick={() => setShowFilters(!showFilters)}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-all duration-200 text-sm font-medium ${
                showFilters
                  ? 'bg-primary-100 text-primary-700 border border-primary-200'
                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
              }`}
              title={showFilters ? '隐藏筛选器' : '显示筛选器'}
            >
              <FunnelIcon className={`h-3.5 w-3.5 transition-transform duration-200 ${
                showFilters ? 'rotate-0' : 'rotate-180'
              }`} />
              {showFilters ? '隐藏筛选' : '显示筛选'}
            </button>

            {/* 视图模式切换 */}
            <div className="flex rounded-lg border border-gray-200 bg-gray-50 p-0.5">
              <button
                onClick={() => setViewMode(ModelViewMode.Grid)}
                className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md transition-all duration-200 text-sm font-medium ${
                  viewMode === ModelViewMode.Grid
                    ? 'bg-white text-primary-600 shadow-sm'
                    : 'text-gray-600 hover:text-gray-900'
                }`}
              >
                <Squares2X2Icon className="h-3.5 w-3.5" />
                网格
              </button>
              <button
                onClick={() => setViewMode(ModelViewMode.List)}
                className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md transition-all duration-200 text-sm font-medium ${
                  viewMode === ModelViewMode.List
                    ? 'bg-white text-primary-600 shadow-sm'
                    : 'text-gray-600 hover:text-gray-900'
                }`}
              >
                <ListBulletIcon className="h-3.5 w-3.5" />
                列表
              </button>
            </div>

            {/* 创建模特按钮 */}
            <button
              onClick={() => setShowCreateModal(true)}
              className="flex items-center gap-1.5 px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg hover:from-primary-600 hover:to-primary-700 transition-all duration-200 shadow-sm hover:shadow-md text-sm font-medium"
            >
              <PlusIcon className="h-4 w-4" />
              添加模特
            </button>
          </div>
        </div>
      </div>

      {/* 搜索和过滤 */}
      <div className={`transition-all duration-300 ease-in-out overflow-hidden ${
        showFilters
          ? 'max-h-96 opacity-100'
          : 'max-h-0 opacity-0'
      }`}>
        <ModelSearch
          searchQuery={searchQuery}
          onSearchChange={setSearchQuery}
          statusFilter={statusFilter}
          onStatusFilterChange={setStatusFilter}
          genderFilter={genderFilter}
          onGenderFilterChange={setGenderFilter}
          sortBy={sortBy}
          onSortByChange={setSortBy}
          sortOrder={sortOrder}
          onSortOrderChange={setSortOrder}
        />
      </div>

      {/* 模特列表 */}
      {filteredModels.length === 0 ? (
        <div className="text-center py-16 animate-fade-in">
          <div className="max-w-md mx-auto">
            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <MagnifyingGlassIcon className="h-8 w-8 text-gray-400" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900 mb-2">
              {models.length === 0 ? '还没有模特' : '没有找到匹配的模特'}
            </h3>
            <p className="text-gray-600 mb-6">
              {models.length === 0
                ? '开始添加您的第一个模特，建立您的模特库'
                : '尝试调整搜索条件或筛选器'
              }
            </p>
            {models.length === 0 && (
              <button
                onClick={() => setShowCreateModal(true)}
                className="px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg hover:from-primary-600 hover:to-primary-700 transition-all duration-200 shadow-sm hover:shadow-md text-sm font-medium"
              >
                添加第一个模特
              </button>
            )}
          </div>
        </div>
      ) : (
        <div className={`animate-fade-in ${
          viewMode === ModelViewMode.Grid
            ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'
            : 'space-y-3'
        }`}>
          {filteredModels.map((model, index) => (
            <div
              key={model.id}
              className="animate-scale-in"
              style={{ animationDelay: `${index * 50}ms` }}
            >
              <ModelCard
                model={model}
                viewMode={viewMode}
                onEdit={() => setEditingModel(model)}
                onDelete={() => handleDeleteModel(model.id)}
                onSelect={() => onModelSelect?.(model)}
                onFavorite={handleFavorite}
                isFavorite={favorites.has(model.id)}
              />
            </div>
          ))}
        </div>
      )}

      {/* 创建模特模态框 */}
      {showCreateModal && (
        <ModelForm
          onSubmit={handleCreateModel}
          onCancel={() => setShowCreateModal(false)}
        />
      )}

      {/* 编辑模特模态框 */}
      {editingModel && (
        <ModelForm
          initialData={editingModel}
          onSubmit={handleUpdateModel}
          onCancel={() => setEditingModel(null)}
          isEdit={true}
        />
      )}
    </div>
  );
};

export default ModelList;
