import { Card, Tag, Badge } from 'antd';
import { FolderOpenOutlined, GlobalOutlined, PictureOutlined } from '@ant-design/icons';
import { useSignedMediaUrl } from '@/lib/media-url';
import type { PhotoAlbum } from '@/types/media';

interface AlbumCardProps {
  album: PhotoAlbum;
  onClick?: (album: PhotoAlbum) => void;
}

export default function AlbumCard({ album, onClick }: AlbumCardProps) {
  const coverUrl = album.coverThumbnailUrl;
  const signedCoverUrl = useSignedMediaUrl(coverUrl);

  return (
    <Card
      hoverable
      size="small"
      styles={{ body: { padding: 8 } }}
      onClick={() => onClick?.(album)}
      cover={
        <div
          style={{
            position: 'relative',
            paddingTop: '75%',
            backgroundColor: '#1a1a1a',
            overflow: 'hidden',
          }}
        >
          {coverUrl && signedCoverUrl ? (
            <img
              src={signedCoverUrl}
              alt={album.title}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                objectFit: 'cover',
              }}
              loading="lazy"
            />
          ) : (
            <div
              style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
              }}
            >
              <FolderOpenOutlined style={{ fontSize: 32, color: '#555' }} />
            </div>
          )}

          {/* Photo count badge */}
          <Badge
            count={
              <Tag color="blue" style={{ margin: 0, fontSize: 11 }}>
                <PictureOutlined /> {album.photoCount || album._count?.photos || 0}
              </Tag>
            }
            style={{ position: 'absolute', bottom: 6, right: 6 }}
          />

          {/* Publish badge */}
          {album.isPublished && (
            <Tag
              color="green"
              style={{ position: 'absolute', top: 6, right: 6, margin: 0 }}
            >
              <GlobalOutlined />
            </Tag>
          )}
        </div>
      }
    >
      <Card.Meta
        title={
          <div style={{ fontSize: 12, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {album.title}
          </div>
        }
        description={
          <div style={{ fontSize: 11, color: '#999' }}>
            {album.photoCount || album._count?.photos || 0} photos
            {album.viewCount > 0 ? ` · ${album.viewCount} views` : ''}
          </div>
        }
      />
    </Card>
  );
}
