"use client";

import React from 'react';
import { GetMeetListResponse } from '@/services/home/types';
import { InfiniteScrollList } from '@/components/ui/infinite-scroll-list';

import { cn } from '@/lib/utils';
import Empty from '@/components/ui/empty';
import AIStandardCard from '@/components/features/ai-standard-card';

interface MeetListProps {
  items: GetMeetListResponse[];
  hasNextPage: boolean;
  isLoading: boolean;
  fetchNextPage: () => void;
  onCharacterClick?: (character: GetMeetListResponse) => void;
  className?: string;
}

// 骨架屏组件
const MeetCardSkeleton = () => (
  <div className="basis-0 content-stretch flex flex-col gap-3 grow items-start justify-start max-w-[272px] min-h-px min-w-60 relative shrink-0">
    <div className="aspect-[240/320] bg-surface-nest-normal rounded-[16px] shrink-0 w-full animate-pulse relative">
      <div className="aspect-[240/320] box-border content-stretch flex flex-col items-end justify-end overflow-clip p-[12px] relative size-full">
        {/* 底部信息区域骨架 */}
        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-surface-nest-normal/80 to-transparent p-3 rounded-b-[16px]">
          <div className="space-y-2">
            {/* 名称骨架 */}
            <div className="h-7 bg-surface-nest-normal rounded w-3/4 animate-pulse"></div>
            
            {/* 标签骨架 */}
            <div className="flex gap-1">
              <div className="h-6 bg-surface-nest-normal rounded w-16 animate-pulse"></div>
              <div className="h-6 bg-surface-nest-normal rounded w-20 animate-pulse"></div>
            </div>
            
            {/* 点赞数骨架 */}
            <div className="h-6 bg-surface-nest-normal rounded w-12 animate-pulse"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

// 空状态组件
const EmptyState = () => (
  <div className="flex flex-col items-center justify-center py-16 text-center">
    <Empty title="Oops, there’s nothing here…" />
  </div>
);

// 错误状态组件
const ErrorState: React.FC<{ onRetry: () => void }> = ({ onRetry }) => (
  <div className="flex flex-col items-center justify-center py-16 text-center">
    <div className="w-16 h-16 mb-4 opacity-40">
      <svg 
        viewBox="0 0 64 64" 
        fill="none" 
        className="w-full h-full text-red-400"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path 
          d="M32 4C16.536 4 4 16.536 4 32s12.536 28 28 28 28-12.536 28-28S47.464 4 32 4zm0 52c-13.255 0-24-10.745-24-24S18.745 8 32 8s24 10.745 24 24-10.745 24-24 24z" 
          fill="currentColor"
        />
        <path 
          d="M26 22l12 12m0-12L26 34" 
          stroke="currentColor" 
          strokeWidth="3" 
          strokeLinecap="round"
        />
      </svg>
    </div>
    <h3 className="text-lg font-semibold text-white mb-2">Load failed</h3>
    <p className="text-white/60 text-sm mb-4">The network connection is abnormal. Please try again later</p>
  </div>
);

const MeetList: React.FC<MeetListProps> = ({
  items,
  hasNextPage,
  isLoading,
  fetchNextPage,
  onCharacterClick,
  className
}) => {
  return (
    <div className={cn("w-full", className)}>
      <InfiniteScrollList<GetMeetListResponse>
        items={items}
        renderItem={(character) => (
          <AIStandardCard
            character={character} 
          />
        )}
        getItemKey={(character) => character.aiId?.toString() || 'unknown'}
        hasNextPage={hasNextPage}
        isLoading={isLoading}
        fetchNextPage={fetchNextPage}
        columns={{
          default: 1,
          sm: 2,
          md: 3,
          lg: 4,
          xl: 4
        }}
        gap={4}
        LoadingSkeleton={MeetCardSkeleton}
        EmptyComponent={EmptyState}
        ErrorComponent={ErrorState}
        threshold={200}
        enabled={true}
      />
    </div>
  );
};

export default MeetList;