"use client";

import { ImageIcon } from "lucide-react";
import { useState } from "react";
import { ImageUploader, type UploadedImage } from "@/components/common/image-uploader";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

function UploadedList({ images }: { images: UploadedImage[] }) {
  if (images.length === 0) {
    return (
      <p className="text-sm text-muted-foreground">暂无已上传图片</p>
    );
  }
  return (
    <div className="space-y-2">
      {images.map((img, i) => (
        <div key={img.url} className="flex items-start gap-3 rounded-lg border bg-muted/30 p-3">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={img.url}
            alt={img.filename}
            className="h-12 w-12 shrink-0 rounded object-cover"
          />
          <div className="min-w-0 flex-1 space-y-1">
            <p className="truncate text-sm font-medium">{img.filename}</p>
            <div className="flex flex-wrap gap-1.5">
              <Badge variant="secondary" className="text-xs">{img.contentType}</Badge>
              <Badge variant="outline" className="text-xs">
                {(img.size / 1024).toFixed(1)} KB
              </Badge>
            </div>
            <p className="truncate text-xs text-muted-foreground">
              <a href={img.url} target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 hover:text-foreground">
                {img.url}
              </a>
            </p>
          </div>
          <span className="shrink-0 text-xs text-muted-foreground">#{i + 1}</span>
        </div>
      ))}
    </div>
  );
}

export default function ImageUploaderDemoPage() {
  const [basicImages, setBasicImages] = useState<UploadedImage[]>([]);
  const [singleImage, setSingleImage] = useState<UploadedImage | null>(null);
  const [multiImages, setMultiImages] = useState<UploadedImage[]>([]);

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <div className="rounded-xl bg-gradient-to-br from-sky-500 to-blue-600 p-2.5">
          <ImageIcon className="h-5 w-5 text-white" />
        </div>
        <div>
          <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
            图片上传 ImageUploader
          </h2>
          <p className="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
            拖拽或点击上传图片到 MinIO 对象存储；支持多图、单图、预览与删除
          </p>
        </div>
      </div>

      {/* Info card */}
      <Card className="border-sky-200 bg-sky-50/40 dark:border-sky-900 dark:bg-sky-950/20">
        <CardHeader className="pb-3">
          <CardTitle className="text-base">接口说明</CardTitle>
          <CardDescription>前端通过 multipart/form-data 将图片 POST 到后端</CardDescription>
        </CardHeader>
        <CardContent className="grid gap-2 text-sm sm:grid-cols-3">
          {[
            ["上传接口", "POST /brapi/v2/upload/image"],
            ["最大单文件", "10 MB"],
            ["支持格式", "JPG · PNG · GIF · WebP · BMP"],
          ].map(([label, value]) => (
            <div key={label} className="rounded-md border border-sky-200/60 bg-background/80 px-3 py-2 dark:border-sky-800">
              <span className="font-medium text-slate-800 dark:text-slate-100">{label}</span>
              <span className="ml-2 text-muted-foreground">{value}</span>
            </div>
          ))}
        </CardContent>
      </Card>

      <Tabs defaultValue="basic">
        <TabsList>
          <TabsTrigger value="basic">基础多图上传</TabsTrigger>
          <TabsTrigger value="single">单图上传</TabsTrigger>
          <TabsTrigger value="limit">限制数量</TabsTrigger>
        </TabsList>

        {/* ── Basic ── */}
        <TabsContent value="basic" className="mt-4 space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">多图上传（无限制）</CardTitle>
              <CardDescription>可一次拖入多张图片，每张独立上传到 MinIO</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ImageUploader
                onUploaded={(img) => setBasicImages((prev) => [...prev, img])}
                onRemoved={(url) => setBasicImages((prev) => prev.filter((i) => i.url !== url))}
              />
              <Separator />
              <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">
                  已上传 {basicImages.length} 张
                </p>
                <UploadedList images={basicImages} />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* ── Single ── */}
        <TabsContent value="single" className="mt-4 space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">单图上传</CardTitle>
              <CardDescription>maxFiles=1，适合头像、封面等场景</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ImageUploader
                maxFiles={1}
                onUploaded={(img) => setSingleImage(img)}
                onRemoved={() => setSingleImage(null)}
              />
              <Separator />
              {singleImage ? (
                <div className="flex items-center gap-4">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={singleImage.url}
                    alt={singleImage.filename}
                    className="h-24 w-24 rounded-lg border object-cover shadow-sm"
                  />
                  <div className="space-y-1">
                    <p className="font-medium">{singleImage.filename}</p>
                    <p className="text-xs text-muted-foreground">{singleImage.contentType} · {(singleImage.size / 1024).toFixed(1)} KB</p>
                    <a
                      href={singleImage.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-xs text-sky-600 underline underline-offset-2 hover:text-sky-500 dark:text-sky-400"
                    >
                      在新标签页打开
                    </a>
                  </div>
                </div>
              ) : (
                <p className="text-sm text-muted-foreground">未上传图片</p>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* ── Limit ── */}
        <TabsContent value="limit" className="mt-4 space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">限制最多 4 张</CardTitle>
              <CardDescription>maxFiles=4，达到上限后禁止继续上传</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ImageUploader
                maxFiles={4}
                onUploaded={(img) => setMultiImages((prev) => [...prev, img])}
                onRemoved={(url) => setMultiImages((prev) => prev.filter((i) => i.url !== url))}
              />
              <Separator />
              <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">
                  已上传 {multiImages.length} / 4 张
                </p>
                <UploadedList images={multiImages} />
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      <p className="text-xs text-muted-foreground">
        组件路径：@/components/common/image-uploader · 接口：POST /brapi/v2/upload/image
      </p>
    </div>
  );
}
