mini-starter/src/client/admin-shadcn/components/AvatarSelector.tsx

import React, { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Button } from '@/client/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
import { Card, CardContent } from '@/client/components/ui/card';
import { toast } from 'sonner';
import { fileClient } from '@/client/api';
import MinioUploader from '@/client/admin-shadcn/components/MinioUploader';
import { Check, Upload, Eye, X } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@/client/components/ui/avatar';
import { cn } from '@/client/lib/utils';
import type { InferResponseType } from 'hono/client';

type FileType = InferResponseType<typeof fileClient.$get, 200>['data'][0]

interface AvatarSelectorProps {
  value?: number | null;
  onChange: (fileId: number | null) => void;
  accept?: string;
  maxSize?: number;
  uploadPath?: string;
  uploadButtonText?: string;
  previewSize?: 'small' | 'medium' | 'large';
  showPreview?: boolean;
  placeholder?: string;
}

const AvatarSelector: React.FC<AvatarSelectorProps> = ({
  value,
  onChange,
  accept = 'image/*',
  maxSize = 2,
  uploadPath = '/avatars',
  uploadButtonText = '上传头像',
  previewSize = 'medium',
  showPreview = true,
  placeholder = '选择头像',
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedFile, setSelectedFile] = useState<FileType | null>(null);

  // 获取当前选中的文件详情
  const { data: currentFile } = useQuery({
    queryKey: ['file-detail', value],
    queryFn: async () => {
      if (!value) return null;
      const response = await fileClient[':id']['$get']({ param: { id: value.toString() } });
      if (response.status !== 200) throw new Error('获取文件详情失败');
      return response.json();
    },
    enabled: !!value,
  });

  // 当对话框打开时，设置当前选中的头像
  useEffect(() => {
    if (isOpen && value && currentFile) {
      setSelectedFile(currentFile);
    }
  }, [isOpen, value, currentFile]);

  // 获取头像列表
  const { data: filesData, isLoading } = useQuery({
    queryKey: ['avatars-for-selection'] as const,
    queryFn: async () => {
      const response = await fileClient.$get({
        query: {
          page: 1,
          pageSize: 50,
          keyword: 'image'
        }
      });
      if (response.status !== 200) throw new Error('获取头像列表失败');
      return response.json();
    },
    enabled: isOpen,
  });

  const avatars = filesData?.data?.filter((f: any) => f?.type?.startsWith('image/')) || [];

  const handleSelectAvatar = (file: FileType) => {
    setSelectedFile(prevSelected => {
      // 如果点击的是已选中的头像，则取消选择
      if (prevSelected?.id === file.id) {
        return null;
      }
      // 否则选择新的头像
      return file;
    });
  };

  const handleConfirm = () => {
    if (!selectedFile) {
      toast.warning('请选择一个头像');
      return;
    }
    onChange(selectedFile.id);
    setIsOpen(false);
    setSelectedFile(null);
  };

  const handleCancel = () => {
    setIsOpen(false);
    setSelectedFile(null);
  };

  const handleUploadSuccess = () => {
    toast.success('头像上传成功！请从列表中选择新上传的头像');
  };

  const getPreviewSize = () => {
    switch (previewSize) {
      case 'small':
        return 'h-16 w-16';
      case 'medium':
        return 'h-24 w-24';
      case 'large':
        return 'h-32 w-32';
      default:
        return 'h-24 w-24';
    }
  };

  const handleRemoveAvatar = (e: React.MouseEvent) => {
    e.stopPropagation();
    onChange(null as any);
  };

  return (
    <>
      <div className="space-y-4">
        {showPreview && (
          <div className="flex items-center space-x-4">
            <div className="relative group">
              <Avatar 
                className={cn(
                  getPreviewSize(),
                  "border-2 border-dashed cursor-pointer hover:border-primary transition-colors"
                )}
                onClick={() => setIsOpen(true)}
              >
                {currentFile ? (
                  <AvatarImage src={currentFile.fullUrl} alt={currentFile.name} />
                ) : (
                  <AvatarFallback className="text-sm">
                    {placeholder.charAt(0).toUpperCase()}
                  </AvatarFallback>
                )}
              </Avatar>
              
              {currentFile && (
                <button
                  type="button"
                  className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                  onClick={handleRemoveAvatar}
                >
                  <X className="h-3 w-3" />
                </button>
              )}
            </div>
            
            <div className="space-y-2">
              <Button 
                type="button" 
                variant="outline" 
                onClick={() => setIsOpen(true)}
                className="text-sm"
              >
                {currentFile ? '更换头像' : placeholder}
              </Button>
              {currentFile && (
                <p className="text-xs text-muted-foreground">
                  当前: {currentFile.name}
                </p>
              )}
            </div>
          </div>
        )}

        {!showPreview && (
          <Button 
            type="button" 
            variant="outline" 
            onClick={() => setIsOpen(true)}
            className="w-full"
          >
            {currentFile ? '更换头像' : placeholder}
          </Button>
        )}
      </div>

      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent className="max-w-3xl max-h-[90vh]">
          <DialogHeader>
            <DialogTitle>选择头像</DialogTitle>
            <DialogDescription>
              上传新头像或从已有头像中选择
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            {/* 头像列表 */}
            <div className="space-y-2 max-h-96 overflow-y-auto p-1">
              {isLoading ? (
                <Card>
                  <CardContent className="text-center py-8">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
                    <p className="text-gray-500 mt-2">加载中...</p>
                  </CardContent>
                </Card>
              ) : (
                <div className="grid grid-cols-4 gap-3">
                  {/* 上传区域 - 作为第一项 */}
                  <div className="relative cursor-pointer transition-all duration-200">
                    <div className="rounded-lg border-2 border-dashed border-gray-300 hover:border-primary transition-colors hover:scale-105">
                      <div className="p-2 h-24 flex items-center justify-center">
                        <MinioUploader
                          uploadPath={uploadPath}
                          accept={accept}
                          maxSize={maxSize}
                          onUploadSuccess={handleUploadSuccess}
                          buttonText="上传"
                          size="minimal"
                          displayMode="card"
                          showUploadList={false}
                        />
                      </div>
                    </div>
                    <p className="text-xs text-center mt-1 text-muted-foreground">
                      上传新头像
                    </p>
                  </div>

                  {/* 现有头像列表 */}
                  {avatars.map((file) => (
                    <div
                      key={file.id}
                      className={cn(
                        "relative cursor-pointer transition-all duration-200",
                        "hover:scale-105"
                      )}
                      onClick={() => handleSelectAvatar(file)}
                    >
                      <div
                        className={cn(
                          "relative rounded-lg overflow-hidden border-2",
                          selectedFile?.id === file.id
                            ? "border-primary ring-2 ring-primary ring-offset-2"
                            : "border-gray-200 hover:border-primary"
                        )}
                      >
                        <img
                          src={file.fullUrl}
                          alt={file.name}
                          className="w-full h-24 object-cover"
                        />
                        
                        {selectedFile?.id === file.id && (
                          <div className="absolute inset-0 bg-primary/20 flex items-center justify-center">
                            <Check className="h-6 w-6 text-white bg-primary rounded-full p-1" />
                          </div>
                        )}
                        
                        <div className="absolute top-1 right-1">
                          <Eye
                            className="h-4 w-4 text-white bg-black/50 rounded-full p-0.5 cursor-pointer hover:bg-black/70"
                            onClick={(e) => {
                              e.stopPropagation();
                              window.open(file.fullUrl, '_blank');
                            }}
                          />
                        </div>
                      </div>
                      
                      <p className="text-xs text-center mt-1 truncate">
                        {file.name}
                      </p>
                    </div>
                  ))}
                  
                  {/* 空状态 - 当没有头像时显示 */}
                  {avatars.length === 0 && (
                    <div className="col-span-3">
                      <Card>
                        <CardContent className="text-center py-8">
                          <div className="flex flex-col items-center">
                            <Upload className="h-12 w-12 text-gray-400 mb-4" />
                            <p className="text-gray-600">暂无头像</p>
                            <p className="text-sm text-gray-500 mt-2">请上传头像文件</p>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>

          <DialogFooter>
            <Button type="button" variant="outline" onClick={handleCancel}>
              取消
            </Button>
            <Button
              type="button"
              onClick={handleConfirm}
              disabled={!selectedFile}
            >
              确认选择
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default AvatarSelector;