"use client"

import React, { useState } from 'react'
import { FileUpload } from './file-upload'
import { Button } from './button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
import type { UploadResponse } from '@/lib/api/upload'

// 使用示例组件
export function UploadExample() {
  const [uploadedImages, setUploadedImages] = useState<UploadResponse[]>([])
  const [uploadedFiles, setUploadedFiles] = useState<UploadResponse[]>([])

  return (
    <div className="space-y-6 p-6">
      {/* 图片上传示例 */}
      <Card>
        <CardHeader>
          <CardTitle>图片上传</CardTitle>
          <CardDescription>上传图片文件，支持拖拽</CardDescription>
        </CardHeader>
        <CardContent>
          <FileUpload
            imageOnly={true}
            multiple={true}
            maxFiles={5}
            maxSize={5 * 1024 * 1024} // 5MB
            placeholder="拖拽图片到这里或点击上传"
            onUploadSuccess={(files) => {
              setUploadedImages(prev => [...prev, ...files])
              console.log('上传成功:', files)
            }}
            onUploadError={(error) => {
              console.error('上传失败:', error)
            }}
            onRemove={(file) => {
              console.log('移除文件:', file)
            }}
          />
        </CardContent>
      </Card>

      {/* 通用文件上传示例 */}
      <Card>
        <CardHeader>
          <CardTitle>文件上传</CardTitle>
          <CardDescription>上传任意类型文件</CardDescription>
        </CardHeader>
        <CardContent>
          <FileUpload
            imageOnly={false}
            multiple={true}
            maxFiles={3}
            maxSize={10 * 1024 * 1024} // 10MB
            accept={{
              'application/pdf': ['.pdf'],
              'application/msword': ['.doc', '.docx'],
              'text/plain': ['.txt'],
              'image/*': ['.jpeg', '.jpg', '.png', '.gif']
            }}
            placeholder="上传PDF、Word文档、图片等文件"
            onUploadSuccess={(files) => {
              setUploadedFiles(prev => [...prev, ...files])
              console.log('文件上传成功:', files)
            }}
            onUploadError={(error) => {
              console.error('文件上传失败:', error)
            }}
          />
        </CardContent>
      </Card>

      {/* 单文件头像上传示例 */}
      <Card>
        <CardHeader>
          <CardTitle>头像上传</CardTitle>
          <CardDescription>单文件头像上传，限制2MB</CardDescription>
        </CardHeader>
        <CardContent>
          <FileUpload
            imageOnly={true}
            multiple={false}
            maxFiles={1}
            maxSize={2 * 1024 * 1024} // 2MB
            placeholder="选择头像图片"
            onUploadSuccess={(files) => {
              console.log('头像上传成功:', files[0])
            }}
          />
        </CardContent>
      </Card>

      {/* 上传结果展示 */}
      {uploadedImages.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>已上传的图片</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              {uploadedImages.map((image, index) => (
                <div key={index} className="relative">
                  <img
                    src={image.url}
                    alt={image.filename}
                    className="w-full h-32 object-cover rounded border"
                  />
                  <p className="text-xs text-gray-500 mt-1 truncate">
                    {image.filename}
                  </p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}

// 在AddFoodDialog中使用的示例
export function FoodImageUpload({ 
  onImageUpload, 
  defaultImage 
}: { 
  onImageUpload: (url: string) => void
  defaultImage?: string 
}) {
  return (
    <div className="space-y-2">
      <label className="text-sm font-medium">食物图片</label>
      <FileUpload
        imageOnly={true}
        multiple={false}
        maxFiles={1}
        maxSize={5 * 1024 * 1024} // 5MB
        placeholder="上传食物图片"
        defaultFiles={defaultImage ? [{
          url: defaultImage,
          filename: '当前图片',
          size: 0,
          mimeType: 'image/jpeg'
        }] : []}
        onUploadSuccess={(files) => {
          if (files.length > 0) {
            onImageUpload(files[0].url)
          }
        }}
        onUploadError={(error) => {
          console.error('图片上传失败:', error)
        }}
      />
    </div>
  )
}