"use client";

import { useState, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import { ArrowLeft, Trash2, Copy, Check, Image as ImageIcon } from "lucide-react";

const HUGO_SITE = "https://usj.cc";

interface ImageFile {
  name: string;
  path: string;
  folder: string;
  size: number;
  url: string;
  localUrl: string;
}

export default function ImagesPage() {
  const router = useRouter();
  const [images, setImages] = useState<ImageFile[]>([]);
  const [loading, setLoading] = useState(true);
  const [copied, setCopied] = useState<string | null>(null);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

  const fetchImages = useCallback(async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/images");
      setImages((await res.json()).images || []);
    } catch {} finally { setLoading(false); }
  }, []);

  useEffect(() => { fetchImages(); }, [fetchImages]);

  const copyMarkdown = (img: ImageFile) => {
    const md = `![](./${img.name})`;
    navigator.clipboard.writeText(md).then(() => {
      setCopied(img.name);
      setTimeout(() => setCopied(null), 2000);
    }).catch(() => {});
  };

  const handleDelete = async (img: ImageFile) => {
    if (!confirm(`确定删除「${img.name}」？此操作不可撤销。`)) return;
    try {
      const res = await fetch(`/api/images?path=${encodeURIComponent(img.path)}`, { method: "DELETE" });
      if (!res.ok) throw new Error("删除失败");
      setImages((prev) => prev.filter((x) => x.path !== img.path));
    } catch (err: unknown) {
      setMessage({ type: "error", text: err instanceof Error ? err.message : "删除失败" });
    }
  };

  const formatSize = (bytes: number) => {
    if (bytes < 1024) return `${bytes}B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
  };

  return (
    <div className="px-4 py-6 md:px-8 md:py-8">
      <div className="flex items-center justify-between mb-8">
        <div className="flex items-center gap-3">
          <button type="button" onClick={() => router.back()} className="p-1 -ml-1 rounded hover:bg-surface text-muted hover:text-text transition-colors">
            <ArrowLeft size={16} />
          </button>
          <h2 className="text-lg font-bold text-text">图片管理</h2>
          <span className="text-[13px] text-muted">{images.length} 张</span>
        </div>
      </div>

      {message && (
        <div className={`mb-4 px-4 py-2.5 rounded-md text-[13px] ${message.type === "success" ? "bg-[#d1fae5] text-[#065f46] border border-[#a7f3d0]" : "bg-[#fee2e2] text-[#991b1b] border border-[#fecaca]"}`}>
          {message.text}
          <button type="button" onClick={() => setMessage(null)} className="ml-2 underline">关闭</button>
        </div>
      )}

      {loading ? (
        <div className="text-center py-20 text-muted text-sm">加载中...</div>
      ) : images.length === 0 ? (
        <div className="text-center py-20">
          <ImageIcon size={28} className="mx-auto text-muted/25 mb-3" />
          <p className="text-sm text-muted">暂无图片</p>
        </div>
      ) : (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
          {images.map((img) => (
            <div key={img.path} className="bg-card border border-line rounded-lg overflow-hidden group hover:border-accent/20 transition-all">
              <div className="aspect-square bg-surface flex items-center justify-center overflow-hidden">
                <img
                  src={img.localUrl}
                  alt={img.name}
                  className="max-w-full max-h-full object-contain"
                  loading="lazy"
                  onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
                />
              </div>
              <div className="p-2.5 space-y-1.5">
                <div className="text-[11px] text-text truncate" title={img.name}>{img.name}</div>
                <div className="flex items-center justify-between text-[10px] text-muted">
                  <span>{formatSize(img.size)}</span>
                  <span className="truncate ml-2">{img.folder || "根目录"}</span>
                </div>
                <div className="flex items-center gap-1 pt-1 border-t border-line/50">
                  <button type="button" onClick={() => copyMarkdown(img)}
                    className="flex-1 flex items-center justify-center gap-1 px-1.5 py-1 text-[10px] rounded hover:bg-surface text-muted hover:text-accent transition-colors">
                    {copied === img.name ? <Check size={11} className="text-success" /> : <Copy size={11} />}
                    {copied === img.name ? "已复制" : "MD"}
                  </button>
                  <button type="button" onClick={() => handleDelete(img)}
                    className="px-1.5 py-1 text-[10px] rounded hover:bg-danger/8 text-muted hover:text-danger transition-colors">
                    <Trash2 size={11} />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}