"use client";

import { useState, useEffect, useCallback, useRef } from 'react';
import CreateLinkModal from '@/app/components/ui/CreateLinkModal';

// 自定义类型定义，替换原来的导入
interface Link {
  link_id: string;
  title?: string;
  original_url: string;
  visits: number;
  unique_visits: number;
  created_by: string;
  created_at: string;
  is_active: boolean;
  tags?: string[];
}

interface StatsOverview {
  totalLinks: number;
  activeLinks: number;
  totalVisits: number;
  conversionRate: number;
}

interface Tag {
  tag: string;
  id: string;
  name: string;
  count: number;
}

// Define type for link data
interface LinkData {
  name: string;
  originalUrl: string;
  customSlug: string;
  expiresAt: string;
  tags: string[];
}

// 映射API数据到UI所需格式
interface UILink {
  id: string;
  name: string;
  shortUrl: string;
  originalUrl: string;
  creator: string;
  createdAt: string;
  visits: number;
  visitChange: number;
  uniqueVisitors: number;
  uniqueVisitorsChange: number;
  avgTime: string;
  avgTimeChange: number;
  conversionRate: number;
  conversionChange: number;
  status: string;
  tags: string[];
}

export default function LinksPage() {
  const [links, setLinks] = useState<UILink[]>([]);
  const [allTags, setAllTags] = useState<Tag[]>([]);
  const [stats, setStats] = useState<StatsOverview>({
    totalLinks: 0,
    activeLinks: 0,
    totalVisits: 0,
    conversionRate: 0
  });
  
  const [searchQuery, setSearchQuery] = useState('');
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  // 无限加载相关状态
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const observer = useRef<IntersectionObserver | null>(null);
  const lastLinkElementRef = useRef<HTMLTableRowElement | null>(null);
  
  // 映射API数据到UI所需格式的函数
  const mapApiLinkToUiLink = (apiLink: Link): UILink => {
    // 生成短URL显示 - 因为数据库中没有short_url字段
    const shortUrlDisplay = generateShortUrlDisplay(apiLink.link_id, apiLink.original_url);
    
    return {
      id: apiLink.link_id,
      name: apiLink.title || 'Untitled Link',
      shortUrl: shortUrlDisplay,
      originalUrl: apiLink.original_url,
      creator: apiLink.created_by,
      createdAt: new Date(apiLink.created_at).toLocaleDateString(),
      visits: apiLink.visits,
      visitChange: 0, // API doesn't provide change data yet
      uniqueVisitors: apiLink.unique_visits,
      uniqueVisitorsChange: 0,
      avgTime: '0m 0s', // API doesn't provide average time yet
      avgTimeChange: 0,
      conversionRate: 0, // API doesn't provide conversion rate yet
      conversionChange: 0,
      status: apiLink.is_active ? 'active' : 'inactive',
      tags: apiLink.tags || []
    };
  };
  
  // 从link_id和原始URL生成短URL显示
  const generateShortUrlDisplay = (linkId: string, originalUrl: string): string => {
    try {
      // 尝试从原始URL提取域名
      const urlObj = new URL(originalUrl);
      const domain = urlObj.hostname.replace('www.', '');
      
      // 使用link_id的前8个字符作为短代码
      const shortCode = linkId.substring(0, 8);
      
      return `${domain}/${shortCode}`;
    } catch {
      // 如果URL解析失败，返回一个基于linkId的默认值
      return `short.link/${linkId.substring(0, 8)}`;
    }
  };
  
  // 获取链接数据
  const fetchLinks = useCallback(async (pageNum: number, isInitialLoad: boolean = false) => {
    try {
      if (isInitialLoad) {
        setIsLoading(true);
      } else {
        setIsLoadingMore(true);
      }
      setError(null);
      
      // 获取链接列表
      const linksResponse = await fetch(`/api/links?page=${pageNum}&limit=20${searchQuery ? `&search=${encodeURIComponent(searchQuery)}` : ''}`);
      if (!linksResponse.ok) {
        throw new Error(`Failed to fetch links: ${linksResponse.statusText}`);
      }
      const linksData = await linksResponse.json();
      
      const uiLinks = linksData.data.map(mapApiLinkToUiLink);
      
      if (isInitialLoad) {
        setLinks(uiLinks);
      } else {
        setLinks(prevLinks => [...prevLinks, ...uiLinks]);
      }
      
      // 检查是否还有更多数据可加载
      const { pagination } = linksData;
      setHasMore(pagination.page < pagination.totalPages);
      
      if (isInitialLoad) {
        // 只在初始加载时获取标签和统计数据
        const tagsResponse = await fetch('/api/tags');
        if (!tagsResponse.ok) {
          throw new Error(`Failed to fetch tags: ${tagsResponse.statusText}`);
        }
        const tagsData = await tagsResponse.json();
        
        const statsResponse = await fetch('/api/stats');
        if (!statsResponse.ok) {
          throw new Error(`Failed to fetch stats: ${statsResponse.statusText}`);
        }
        const statsData = await statsResponse.json();
        
        setAllTags(tagsData);
        setStats(statsData);
      }
      
    } catch (err) {
      console.error('Data loading failed:', err);
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      if (isInitialLoad) {
        setIsLoading(false);
      } else {
        setIsLoadingMore(false);
      }
    }
  }, [searchQuery]);
  
  // 初始加载
  useEffect(() => {
    setPage(1);
    fetchLinks(1, true);
  }, [fetchLinks]);
  
  // 搜索过滤变化时重新加载数据
  useEffect(() => {
    // 当搜索关键词变化时，重置页码和链接列表，然后重新获取数据
    setLinks([]);
    setPage(1);
    fetchLinks(1, true);
  }, [searchQuery, fetchLinks]);
  
  // 设置Intersection Observer来检测滚动并加载更多数据
  useEffect(() => {
    // 如果正在加载或没有更多数据，则不设置observer
    if (isLoading || isLoadingMore || !hasMore) return;
    
    // 断开之前的observer连接
    if (observer.current) {
      observer.current.disconnect();
    }
    
    observer.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting && hasMore) {
        // 当最后一个元素可见且有更多数据时，加载下一页
        setPage(prevPage => prevPage + 1);
      }
    }, {
      root: null,
      rootMargin: '0px',
      threshold: 0.5
    });
    
    if (lastLinkElementRef.current) {
      observer.current.observe(lastLinkElementRef.current);
    }
    
    return () => {
      if (observer.current) {
        observer.current.disconnect();
      }
    };
  }, [isLoading, isLoadingMore, hasMore, links]);
  
  // 当页码变化时加载更多数据
  useEffect(() => {
    if (page > 1) {
      fetchLinks(page, false);
    }
  }, [page, fetchLinks]);
  
  const filteredLinks = links.filter(link => 
    link.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    link.shortUrl.toLowerCase().includes(searchQuery.toLowerCase()) ||
    link.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
  );
  
  const handleOpenLinkDetails = (id: string) => {
    window.location.href = `/links/${id}`;
  };
  
  const handleCreateLink = async (linkData: LinkData) => {
    try {
      setIsLoading(true);
      // 在实际应用中，这里会发送 POST 请求到 API
      console.log('创建链接:', linkData);
      
      // 刷新链接列表
      setPage(1);
      fetchLinks(1, true);
      
      setShowCreateModal(false);
    } catch (err) {
      console.error('创建链接失败:', err);
      setError(err instanceof Error ? err.message : '未知错误');
    } finally {
      setIsLoading(false);
    }
  };
  
  // 加载状态
  if (isLoading && links.length === 0) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="p-4 text-center">
          <div className="w-12 h-12 mx-auto border-4 rounded-full border-accent-blue border-t-transparent animate-spin"></div>
          <p className="mt-4 text-lg text-foreground">Loading data...</p>
        </div>
      </div>
    );
  }
  
  // 错误状态
  if (error && links.length === 0) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="p-6 text-center rounded-lg bg-red-500/10">
          <svg className="w-12 h-12 mx-auto text-accent-red" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <h2 className="mt-4 text-xl font-bold text-foreground">Loading Failed</h2>
          <p className="mt-2 text-text-secondary">{error}</p>
          <button
            onClick={() => window.location.reload()}
            className="px-4 py-2 mt-4 text-white rounded-lg bg-accent-blue hover:bg-blue-600"
          >
            Reload
          </button>
        </div>
      </div>
    );
  }
  
  return (
    <div className="container px-4 py-8 mx-auto">
      <div className="flex flex-col gap-8">
        {/* Header */}
        <div className="flex flex-col gap-4 md:flex-row md:justify-between md:items-center">
          <div>
            <h1 className="text-2xl font-bold text-foreground">Link Management</h1>
            <p className="mt-1 text-sm text-text-secondary">
              View and manage all your shortened links
            </p>
          </div>
          
          <div className="flex gap-2">
            <div className="relative flex-1 min-w-[200px]">
              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <svg className="w-4 h-4 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>
              <input
                type="search"
                className="block w-full p-2.5 pl-10 text-sm border rounded-lg bg-card-bg border-card-border text-foreground placeholder-text-secondary focus:ring-accent-blue focus:border-accent-blue"
                placeholder="Search links..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            
            <button
              onClick={() => setShowCreateModal(true)}
              className="px-4 py-2.5 bg-accent-blue text-white rounded-lg text-sm font-medium hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-300"
            >
              <span className="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                New Link
              </span>
            </button>
          </div>
        </div>
        
        {/* Stats Summary */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <div className="p-4 border rounded-lg shadow bg-card-bg border-card-border">
            <div className="flex items-center">
              <div className="p-3 mr-4 rounded-full text-accent-blue bg-blue-500/10">
                <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.172 13.828a4 4 0 005.656 0l4-4a4 4 0 10-5.656-5.656l-1.102 1.101" />
                </svg>
              </div>
              <div>
                <p className="text-sm font-medium text-text-secondary">Total Links</p>
                <p className="text-2xl font-semibold text-foreground">{stats.totalLinks}</p>
              </div>
            </div>
          </div>
          
          <div className="p-4 border rounded-lg shadow bg-card-bg border-card-border">
            <div className="flex items-center">
              <div className="p-3 mr-4 rounded-full text-accent-green bg-green-500/10">
                <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <div>
                <p className="text-sm font-medium text-text-secondary">Active Links</p>
                <p className="text-2xl font-semibold text-foreground">{stats.activeLinks}</p>
              </div>
            </div>
          </div>
          
          <div className="p-4 border rounded-lg shadow bg-card-bg border-card-border">
            <div className="flex items-center">
              <div className="p-3 mr-4 rounded-full text-accent-purple bg-purple-500/10">
                <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
              </div>
              <div>
                <p className="text-sm font-medium text-text-secondary">Total Visits</p>
                <p className="text-2xl font-semibold text-foreground">{stats.totalVisits.toLocaleString()}</p>
              </div>
            </div>
          </div>
          
          <div className="p-4 border rounded-lg shadow bg-card-bg border-card-border">
            <div className="flex items-center">
              <div className="p-3 mr-4 rounded-full bg-amber-500/10 text-accent-yellow">
                <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
              </div>
              <div>
                <p className="text-sm font-medium text-text-secondary">Conversion Rate</p>
                <p className="text-2xl font-semibold text-foreground">{(stats.conversionRate * 100).toFixed(1)}%</p>
              </div>
            </div>
          </div>
        </div>
        
        {/* Links Table */}
        <div className="overflow-hidden border rounded-lg shadow bg-card-bg border-card-border">
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-card-border">
              <thead className="bg-card-bg-secondary">
                <tr>
                  <th scope="col" className="px-6 py-3">Link Info</th>
                  <th scope="col" className="px-6 py-3">Visits</th>
                  <th scope="col" className="px-6 py-3">Unique Visitors</th>
                  <th scope="col" className="px-6 py-3">Avg Time</th>
                  <th scope="col" className="px-6 py-3">Conversion</th>
                  <th scope="col" className="px-6 py-3">Status</th>
                  <th scope="col" className="px-6 py-3">
                    <span className="sr-only">Actions</span>
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-card-border">
                {filteredLinks.length === 0 ? (
                  <tr>
                    <td colSpan={7} className="px-6 py-12 text-center text-text-secondary">
                      No links found. Create one to get started.
                    </td>
                  </tr>
                ) : (
                  filteredLinks.map((link, index) => (
                    <tr 
                      key={link.id} 
                      onClick={() => handleOpenLinkDetails(link.id)}
                      className="transition-colors cursor-pointer hover:bg-card-bg-secondary"
                      ref={index === filteredLinks.length - 1 ? lastLinkElementRef : null}
                    >
                      <td className="px-6 py-4">
                        <div className="font-medium text-foreground">{link.name}</div>
                        <div className="text-xs text-accent-blue">{link.shortUrl}</div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="font-medium text-foreground">{link.visits.toLocaleString()}</div>
                        <div className={`text-xs flex items-center ${link.visitChange >= 0 ? 'text-accent-green' : 'text-accent-red'}`}>
                          <svg 
                            className={`w-3 h-3 mr-1 ${link.visitChange >= 0 ? '' : 'transform rotate-180'}`}
                            fill="currentColor" 
                            viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd"></path>
                          </svg>
                          {Math.abs(link.visitChange)}%
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="font-medium text-foreground">{link.uniqueVisitors.toLocaleString()}</div>
                        <div className={`text-xs flex items-center ${link.uniqueVisitorsChange >= 0 ? 'text-accent-green' : 'text-accent-red'}`}>
                          <svg 
                            className={`w-3 h-3 mr-1 ${link.uniqueVisitorsChange >= 0 ? '' : 'transform rotate-180'}`}
                            fill="currentColor" 
                            viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd"></path>
                          </svg>
                          {Math.abs(link.uniqueVisitorsChange)}%
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="font-medium text-foreground">{link.avgTime}</div>
                        <div className={`text-xs flex items-center ${link.avgTimeChange >= 0 ? 'text-accent-green' : 'text-accent-red'}`}>
                          <svg 
                            className={`w-3 h-3 mr-1 ${link.avgTimeChange >= 0 ? '' : 'transform rotate-180'}`}
                            fill="currentColor" 
                            viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd"></path>
                          </svg>
                          {Math.abs(link.avgTimeChange)}%
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="font-medium text-foreground">{link.conversionRate}%</div>
                        <div className={`text-xs flex items-center ${link.conversionChange >= 0 ? 'text-accent-green' : 'text-accent-red'}`}>
                          <svg 
                            className={`w-3 h-3 mr-1 ${link.conversionChange >= 0 ? '' : 'transform rotate-180'}`}
                            fill="currentColor" 
                            viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd"></path>
                          </svg>
                          {Math.abs(link.conversionChange)}%
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <span
                          className={`px-2 py-1 text-xs font-medium rounded-full ${
                            link.status === 'active'
                              ? 'bg-green-500/10 text-accent-green'
                              : link.status === 'inactive'
                              ? 'bg-gray-500/10 text-text-secondary'
                              : 'bg-red-500/10 text-accent-red'
                          }`}
                        >
                          {link.status === 'active' ? 'Active' : link.status === 'inactive' ? 'Inactive' : 'Expired'}
                        </span>
                      </td>
                      <td className="px-6 py-4 text-right">
                        <button 
                          onClick={(e) => {
                            e.stopPropagation();
                            handleOpenLinkDetails(link.id);
                          }}
                          className="text-sm font-medium text-accent-blue hover:underline"
                        >
                          Details
                        </button>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
          
          {/* Loading more indicator */}
          {isLoadingMore && (
            <div className="p-4 text-center">
              <div className="inline-block w-6 h-6 border-2 rounded-full border-accent-blue border-t-transparent animate-spin"></div>
              <p className="mt-2 text-sm text-text-secondary">Loading more links...</p>
            </div>
          )}
          
          {/* End of results message */}
          {!hasMore && links.length > 0 && (
            <div className="p-4 text-center text-sm text-text-secondary">
              No more links to load.
            </div>
          )}
        </div>
        
        {/* Tags Section */}
        {allTags.length > 0 && (
          <div className="p-4 border rounded-lg shadow bg-card-bg border-card-border">
            <h2 className="mb-4 text-lg font-medium text-foreground">Tags</h2>
            <div className="flex flex-wrap gap-2">
              {allTags.map(tagItem => (
                <span 
                  key={tagItem.tag} 
                  className="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full text-accent-blue bg-blue-500/10"
                  onClick={() => setSearchQuery(tagItem.tag)}
                  style={{ cursor: 'pointer' }}
                >
                  {tagItem.tag}
                  <span className="ml-1.5 text-xs bg-blue-500/20 px-1.5 py-0.5 rounded-full">
                    {tagItem.count}
                  </span>
                </span>
              ))}
            </div>
          </div>
        )}
      </div>
      
      {/* Create Link Modal */}
      {showCreateModal && (
        <CreateLinkModal
          onClose={() => setShowCreateModal(false)}
          onSubmit={handleCreateLink}
        />
      )}
    </div>
  );
} 