import { Card, Typography, Space, theme } from 'antd';
import {
  PlayCircleOutlined,
  EyeOutlined,
  UnorderedListOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import type { PlaylistSummary } from '@/types/media';

interface PlaylistCardProps {
  playlist: PlaylistSummary;
}

function formatDuration(totalSeconds: number): string {
  if (!totalSeconds) return '0:00';
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  if (hours > 0) return `${hours}h ${minutes}m`;
  return `${minutes}m`;
}

function formatCount(count: number): string {
  if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
  if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
  return count.toString();
}

export default function PlaylistCard({ playlist }: PlaylistCardProps) {
  const { token } = theme.useToken();
  const navigate = useNavigate();

  return (
    <Card
      hoverable
      style={{
        borderRadius: 12,
        overflow: 'hidden',
        border: `1px solid ${token.colorBorderSecondary}`,
        transition: 'all 0.2s ease',
        cursor: 'pointer',
        width: '100%',
      }}
      styles={{ body: { padding: 12 } }}
      onClick={() => navigate(`/gallery/curated/${playlist.id}`)}
      onMouseEnter={(e) => {
        e.currentTarget.style.boxShadow = `0 0 0 2px ${token.colorPrimary}`;
        e.currentTarget.style.transform = 'translateY(-2px)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.boxShadow = 'none';
        e.currentTarget.style.transform = 'translateY(0)';
      }}
      cover={
        <div
          style={{
            position: 'relative',
            paddingTop: '56.25%',
            background: '#000',
            overflow: 'hidden',
          }}
        >
          {playlist.thumbnailUrl ? (
            <img
              src={`/media${playlist.thumbnailUrl}`}
              alt={playlist.name}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                objectFit: 'cover',
              }}
              onError={(e) => {
                (e.target as HTMLImageElement).style.display = 'none';
              }}
            />
          ) : (
            <div
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                background: `linear-gradient(135deg, ${token.colorPrimary}22, ${token.colorPrimary}44)`,
              }}
            >
              <UnorderedListOutlined style={{ fontSize: 48, color: token.colorPrimary }} />
            </div>
          )}

          {/* Playlist overlay badge */}
          <div
            style={{
              position: 'absolute',
              bottom: 0,
              right: 0,
              background: 'rgba(0,0,0,0.85)',
              color: '#fff',
              padding: '4px 10px',
              fontSize: 12,
              fontWeight: 500,
              display: 'flex',
              alignItems: 'center',
              gap: 4,
              borderTopLeftRadius: 8,
            }}
          >
            <PlayCircleOutlined />
            {playlist.videoCount} videos
          </div>
        </div>
      }
    >
      <Space direction="vertical" size={6} style={{ width: '100%' }}>
        <Typography.Text
          strong
          style={{
            fontSize: 14,
            display: 'block',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            color: token.colorText,
          }}
          title={playlist.name}
        >
          {playlist.name}
        </Typography.Text>

        <Typography.Text
          style={{
            fontSize: 12,
            color: token.colorTextSecondary,
            display: 'block',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}
        >
          {playlist.creator.name || playlist.creator.email}
        </Typography.Text>

        {playlist.description && (
          <Typography.Text
            style={{
              fontSize: 12,
              color: token.colorTextTertiary,
              display: '-webkit-box',
              WebkitLineClamp: 2,
              WebkitBoxOrient: 'vertical' as const,
              overflow: 'hidden',
              lineHeight: '1.4',
            }}
          >
            {playlist.description}
          </Typography.Text>
        )}

        <Space size={12} style={{ fontSize: 12, color: token.colorTextSecondary }}>
          <Space size={4}>
            <ClockCircleOutlined />
            <span>{formatDuration(playlist.totalDurationSeconds)}</span>
          </Space>
          <Space size={4}>
            <EyeOutlined />
            <span>{formatCount(playlist.viewCount)}</span>
          </Space>
        </Space>
      </Space>
    </Card>
  );
}
