import React from 'react';
import { Card, CardContent } from '@d8d/shared-ui-components/components/ui/card';
import { Image as ImageIcon, Download, Eye } from 'lucide-react';
import { Button } from '@d8d/shared-ui-components/components/ui/button';
import { Badge } from '@d8d/shared-ui-components/components/ui/badge';

export interface PhotoPreviewItem {
  id?: number;
  photoType: string;
  fileId: number;
  fileUrl?: string;
  fileName?: string;
  canDownload: number;
  uploadTime?: string;
}

export interface PhotoPreviewProps {
  photos: PhotoPreviewItem[];
  title?: string;
  showDownloadButton?: boolean;
  onDownload?: (photo: PhotoPreviewItem) => void;
  onView?: (photo: PhotoPreviewItem) => void;
}

export const PhotoPreview: React.FC<PhotoPreviewProps> = ({
  photos,
  title = '照片预览',
  showDownloadButton = true,
  onDownload,
  onView,
}) => {
  if (photos.length === 0) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-8">
          <ImageIcon className="h-12 w-12 text-gray-400 mb-4" />
          <p className="text-gray-600">暂无照片</p>
        </CardContent>
      </Card>
    );
  }

  const getPhotoTypeColor = (photoType: string) => {
    switch (photoType) {
      case '身份证照片':
        return 'bg-blue-100 text-blue-800';
      case '残疾证照片':
        return 'bg-green-100 text-green-800';
      case '个人照片':
        return 'bg-purple-100 text-purple-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  const handleDownload = (photo: PhotoPreviewItem) => {
    if (onDownload) {
      onDownload(photo);
    } else if (photo.fileUrl) {
      window.open(photo.fileUrl, '_blank');
    }
  };

  const handleView = (photo: PhotoPreviewItem) => {
    if (onView) {
      onView(photo);
    } else if (photo.fileUrl) {
      window.open(photo.fileUrl, '_blank');
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-medium">{title}</h3>
        <Badge variant="outline" className="text-sm">
          共 {photos.length} 张照片
        </Badge>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {photos.map((photo, index) => (
          <Card key={photo.id || index} className="overflow-hidden hover:shadow-md transition-shadow">
            <CardContent className="p-0">
              {/* 照片预览区域 */}
              <div className="relative aspect-square bg-gray-100">
                {photo.fileUrl ? (
                  <div className="relative w-full h-full group">
                    <img
                      src={photo.fileUrl}
                      alt={photo.photoType}
                      className="w-full h-full object-cover"
                      loading="lazy"
                    />
                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-200 flex items-center justify-center opacity-0 group-hover:opacity-100">
                      <div className="flex space-x-2">
                        <Button
                          type="button"
                          size="sm"
                          variant="secondary"
                          className="bg-white/90 hover:bg-white"
                          onClick={() => handleView(photo)}
                        >
                          <Eye className="h-4 w-4 mr-1" />
                          查看
                        </Button>
                        {showDownloadButton && photo.canDownload === 1 && (
                          <Button
                            type="button"
                            size="sm"
                            variant="secondary"
                            className="bg-white/90 hover:bg-white"
                            onClick={() => handleDownload(photo)}
                          >
                            <Download className="h-4 w-4 mr-1" />
                            下载
                          </Button>
                        )}
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="w-full h-full flex flex-col items-center justify-center text-gray-400">
                    <ImageIcon className="h-12 w-12 mb-2" />
                    <p className="text-sm">无预览</p>
                  </div>
                )}
              </div>

              {/* 照片信息区域 */}
              <div className="p-3 space-y-2">
                <div className="flex items-center justify-between">
                  <Badge className={getPhotoTypeColor(photo.photoType)}>
                    {photo.photoType}
                  </Badge>
                  {photo.canDownload === 1 && (
                    <Badge variant="outline" className="text-xs">
                      可下载
                    </Badge>
                  )}
                </div>

                <div className="space-y-1">
                  <p className="text-sm font-medium truncate">
                    {photo.fileName || `照片 ${index + 1}`}
                  </p>
                  {photo.uploadTime && (
                    <p className="text-xs text-muted-foreground">
                      上传时间: {new Date(photo.uploadTime).toLocaleDateString()}
                    </p>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="text-sm text-muted-foreground">
        <p>• 点击"查看"按钮可以放大预览照片</p>
        <p>• 标记为"可下载"的照片支持下载功能</p>
        <p>• 照片类型通过不同颜色的标签区分</p>
      </div>
    </div>
  );
};

export default PhotoPreview;