import "./ApiDirectoryDesktop.css";

import { Pagination, Tag, Empty, Spin, Button } from "antd";
import { Tabs } from "antd";
import type { TabsProps } from "antd";
import React, { useState, useEffect, useMemo } from "react";
import { Radio } from "antd";
import type { RadioChangeEvent } from "antd";
import { Image } from "antd";
import { EyeOutlined, StarOutlined, StarFilled, LoadingOutlined, ApiOutlined, LinkOutlined, ReloadOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { api_request } from "@/utils/request";
import { getApiImageUrl } from "@/utils/apiImageUtils";
import { useSelector } from "react-redux";
import { selectIsLogin } from "@/features/login";
import { useLoginModal } from "@/contexts/LoginModalContext";
import { message } from "@/utils/message";

interface ApiCategory {
  id: number;
  name: string;
  icon: string;
  sort_order: number;
  item_count: number;
}

interface ApiItem {
  id: number;
  name: string;
  description: string;
  icon: string;
  url_path: string;
  method: string;
  category: number | null;
  category_name: string;
  is_enabled: boolean;
  is_new: boolean;
  is_coming_soon: boolean;
  views_count: number;
  color: string;
  image_url: string;
  sort_order: number;
  favorites_count: number;
  is_favorited: boolean;
  [key: string]: any;
}

const methodColors: Record<string, string> = {
  GET: "green",
  POST: "orange",
  PUT: "blue",
  DELETE: "red",
};

const ApiDirectoryDesktop: React.FC = () => {
  const navigate = useNavigate();
  const isLogin = useSelector(selectIsLogin);
  const { openLoginModal } = useLoginModal();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [categories, setCategories] = useState<ApiCategory[]>([]);
  const [items, setItems] = useState<ApiItem[]>([]);
  const [activeCategory, setActiveCategory] = useState<string>("all");
  const [sortOrder, setSortOrder] = useState<number>(1);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(12);
  const [favoriteLoading, setFavoriteLoading] = useState<Record<number, boolean>>({});

  const handleApiClick = async (api: ApiItem) => {
    if (api.is_coming_soon) return;
    if (isLogin) {
      try {
        await api_request.history.create({
          type: 'api',
          title: api.name,
          description: api.description,
          image: getApiImageUrl(api),
          category: api.category_name || 'API接口',
          link: `/open-api-detail/${api.id}`,
        });
      } catch (err) {
        console.error('记录浏览历史失败:', err);
      }
    }
    navigate(`/open-api-detail/${api.id}`);
  };

  const handleFavoriteToggle = async (apiId: number, e: React.MouseEvent) => {
    e.stopPropagation();
    if (!isLogin) {
      openLoginModal();
      return;
    }
    if (favoriteLoading[apiId]) return;
    setFavoriteLoading(prev => ({ ...prev, [apiId]: true }));
    try {
      const res: any = await api_request.apidirectory.toggleFavorite(apiId);
      if (res?.data) {
        setItems(prev => prev.map(item =>
          item.id === apiId
            ? {
                ...item,
                is_favorited: res.data.favorited,
                favorites_count: res.data.favorites_count ?? (item.is_favorited ? item.favorites_count - 1 : item.favorites_count + 1),
              }
            : item
        ));
      }
    } catch {
      message.error("收藏操作失败");
    } finally {
      setFavoriteLoading(prev => ({ ...prev, [apiId]: false }));
    }
  };

  const fetchCategories = async () => {
    try {
      const res: any = await api_request.apidirectory.getCategories();
      if (res && res.data) {
        setCategories(res.data);
      }
    } catch (err: any) {
      console.error('获取分类失败:', err);
    }
  };

  const getOrderingValue = (order: number): string => {
    const orderingMap: Record<number, string> = {
      1: 'sort_order',
      2: '-views_count',
      3: '-created_at',
      4: '-favorites_count',
    };
    return orderingMap[order] || 'sort_order';
  };

  const fetchItems = async (categoryId?: number, order?: number) => {
    setLoading(true);
    setError(null);
    setCurrentPage(1);
    try {
      const params: any = {};
      if (categoryId) {
        params.category_id = categoryId;
      }
      const ordering = getOrderingValue(order ?? sortOrder);
      if (ordering) {
        params.ordering = ordering;
      }
      const res: any = await api_request.apidirectory.getItems(params);
      if (res && res.data) {
        const sorted = [...res.data].sort((a: ApiItem, b: ApiItem) => {
          if (a.is_coming_soon && !b.is_coming_soon) return 1;
          if (!a.is_coming_soon && b.is_coming_soon) return -1;
          return 0;
        });
        setItems(sorted);
      }
    } catch (err: any) {
      setError('获取API列表失败，请稍后重试');
      console.error('获取API列表失败:', err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchCategories();
    fetchItems();
  }, []);

  const handleCategoryChange = (key: string) => {
    setActiveCategory(key);
    setCurrentPage(1);
    if (key === 'all') {
      fetchItems(undefined, sortOrder);
    } else {
      const category = categories.find(c => c.name === key);
      if (category) {
        fetchItems(category.id, sortOrder);
      }
    }
  };

  const handleSortChange = (e: RadioChangeEvent) => {
    const newSortOrder = e.target.value;
    setSortOrder(newSortOrder);
    setCurrentPage(1);
    if (activeCategory === 'all') {
      fetchItems(undefined, newSortOrder);
    } else {
      const category = categories.find(c => c.name === activeCategory);
      if (category) {
        fetchItems(category.id, newSortOrder);
      }
    }
  };

  const handlePageChange = (page: number, size: number) => {
    setCurrentPage(page);
    setPageSize(size);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const paginatedItems = useMemo(() => {
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    return items.slice(startIndex, endIndex);
  }, [items, currentPage, pageSize]);

const getCategoryColor = (categoryName: string): string => {
    const colorMap: Record<string, string> = {
      '天气API': 'blue',
      '数据API': 'cyan',
      'AI接口': 'purple',
      '实用API': 'green',
    };
    return colorMap[categoryName] || 'default';
  };

  const tabItems: TabsProps["items"] = [
    { key: 'all', label: '全部分类' },
    ...categories.map(cat => ({
      key: cat.name,
      label: cat.name,
    })),
  ].map(cat => ({
    key: cat.key,
    label: cat.label,
    children: (
      <div className="option-radio-group">
        <Radio.Group
          onChange={handleSortChange}
          value={sortOrder}
          optionType="button"
          buttonStyle="solid"
          options={[
          { value: 1, label: '推荐排序' },
          { value: 2, label: '最多使用' },
          { value: 3, label: '最新上线' },
          { value: 4, label: '最多收藏' },
        ]}
        />
      </div>
    ),
  }));

  if (loading && items.length === 0) {
    return (
      <div className="tools-hero">
        <div className="tools-hero-content">
          <Spin size="large" />
          <p>加载中...</p>
        </div>
      </div>
    );
  }

  return (
    <>
      <div className="tools-hero">
        <div className="tools-hero-content">
          <h1 className="tools-hero-title">
            <ApiOutlined /> API接口大全
          </h1>
          <p className="tools-hero-subtitle">海量免费API接口，助力快速开发</p>
          <p className="tools-hero-desc">提供天气查询、数据服务、AI接口等多种API，即调即用，轻松集成到您的项目中</p>
        </div>
      </div>

      {error && (
        <div className="tools-error-wrapper">
          <Empty description={error}>
            <Button type="primary" onClick={() => fetchItems()}>
              <ReloadOutlined /> 重试
            </Button>
          </Empty>
        </div>
      )}

      {!error && (
        <>
          <div className="tools-tabs-wrapper">
            <Tabs
              defaultActiveKey="all"
              activeKey={activeCategory}
              items={tabItems}
              centered
              className="tools-tabs"
              onChange={handleCategoryChange}
            />
          </div>

          <div className="tools-card-grid">
            {paginatedItems.length === 0 ? (
              <div className="tools-empty-wrapper">
                <Empty description="暂无API数据" />
              </div>
            ) : (
              paginatedItems.map((api, index) => (
            <div
              key={api.id}
              className={`tools-feature-card fade-in${api.is_coming_soon ? " tools-feature-card--coming-soon" : ""}`}
              style={{ animationDelay: `${index * 0.05}s`, cursor: api.is_coming_soon ? "default" : "pointer" }}
              onClick={() => handleApiClick(api)}
            >
              <div className="tools-feature-card-cover">
                <Image
                  height={160}
                  width="100%"
                  draggable={false}
                  alt={api.name}
                  src={getApiImageUrl(api)}
                  preview={false}
                  fallback="https://cdn.free-api.com/sjtxsc.webp"
                  className={api.name === '百度翻译' ? 'tools-feature-card-img--contain' : ''}
                />
                <div className="tools-category-tag">
                  <Tag color={getCategoryColor(api.category_name)}>
                    {api.category_name || '其他'}
                  </Tag>
                </div>
                <div className="api-method-tag">
                  <Tag color={methodColors[api.method] || "default"}>{api.method}</Tag>
                </div>
                {api.is_coming_soon && (
                  <div className="api-coming-soon-badge">
                    <Tag color="warning">敬请期待</Tag>
                  </div>
                )}
                {api.is_new && (
                  <div className="api-new-badge">
                    <Tag color="error">NEW</Tag>
                  </div>
                )}
              </div>
              <div className="tools-feature-card-body">
                <div className="tools-feature-card-title">
                  <span>{api.name}</span>
                  <span className="tools-feature-card-views">
                    <EyeOutlined /> {api.views_count.toLocaleString()}
                  </span>
                </div>
                <div className="tools-feature-card-desc">{api.description}</div>
                <div className="api-url">
                  <code>{api.url_path}</code>
                </div>
                <div className="tools-feature-card-footer">
                  <span
                    className={`tools-feature-card-stars api-favorite-btn ${api.is_favorited ? "is-favorited" : ""}`}
                    onClick={(e) => handleFavoriteToggle(api.id, e)}
                  >
                    {favoriteLoading[api.id] ? (
                      <LoadingOutlined />
                    ) : api.is_favorited ? (
                      <StarFilled />
                    ) : (
                      <StarOutlined />
                    )}
                    {" "}{api.favorites_count}
                  </span>
                  <div className="tools-feature-card-actions">
                    {api.is_coming_soon ? (
                      <Button type="default" size="small" disabled>
                        敬请期待
                      </Button>
                    ) : (
                      <Button type="primary" size="small" icon={<LinkOutlined />} onClick={(e) => { e.stopPropagation(); handleApiClick(api); }}>
                        调用
                      </Button>
                    )}
                  </div>
                </div>
              </div>
            </div>
          ))
        )}
      </div>

      <div className="tools-pagination">
        <Pagination
          align="center"
          total={items.length}
          current={currentPage}
          pageSize={pageSize}
          showSizeChanger
          showQuickJumper
          showTotal={(total) => `共 ${total} 个接口`}
          onChange={handlePageChange}
          pageSizeOptions={['6', '12', '24']}
        />
      </div>
        </>
      )}
    </>
  );
};

export default ApiDirectoryDesktop;