"use client";

import { useState, useEffect, useCallback } from "react";
import { Trash2, RotateCcw, AlertTriangle } from "lucide-react";

interface RecycleItem {
  slug: string; title: string; deletedAt: string; daysRemaining: number;
}

export default function RecyclePage() {
  const [items, setItems] = useState<RecycleItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

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

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

  const handleRestore = async (slug: string, title: string) => {
    if (!confirm(`确定恢复「${title}」？`)) return;
    setMessage(null);
    try {
      const res = await fetch("/api/recycle", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ slug }) });
      if (!res.ok) throw new Error("恢复失败");
      setMessage({ type: "success", text: `已恢复「${title}」` });
      fetchItems();
    } catch (err: unknown) {
      setMessage({ type: "error", text: err instanceof Error ? err.message : "恢复失败" });
    }
  };

  const handlePermanentDelete = async (slug: string, title: string) => {
    if (!confirm(`永久删除「${title}」？此操作不可撤销！`)) return;
    setMessage(null);
    try {
      const res = await fetch(`/api/recycle?slug=${encodeURIComponent(slug)}`, { method: "DELETE" });
      if (!res.ok) throw new Error("删除失败");
      setMessage({ type: "success", text: `已永久删除「${title}」` });
      fetchItems();
    } catch (err: unknown) {
      setMessage({ type: "error", text: err instanceof Error ? err.message : "删除失败" });
    }
  };

  return (
    <div className="px-4 py-6 md:px-8 md:py-8">
      <div className="mb-8">
        <h2 className="text-lg font-bold text-text">回收站</h2>
        <p className="text-[13px] text-muted mt-0.5">删除的文章保留 30 天，到期自动清理</p>
      </div>

      {message && (
        <div className={`mb-4 px-4 py-2.5 rounded-md text-[13px] font-medium ${
          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>
      ) : items.length === 0 ? (
        <div className="text-center py-20">
          <Trash2 size={28} className="mx-auto text-muted/20 mb-3" />
          <p className="text-sm text-muted">回收站为空</p>
        </div>
      ) : (
        <div className="space-y-2">
          {items.map((item) => (
            <div key={item.slug}
              className="flex items-center gap-4 px-5 py-3.5 bg-card border border-line rounded-md hover:border-line/70 transition-all">
              <div className="flex-1 min-w-0">
                <span className="font-medium text-[14px] text-text">{item.title}</span>
                <div className="flex items-center gap-3 mt-0.5 text-[12px] text-muted">
                  <span>删除于 {new Date(item.deletedAt).toLocaleString("zh-CN")}</span>
                  {item.daysRemaining <= 3 ? (
                    <span className="inline-flex items-center gap-1 text-danger font-medium">
                      <AlertTriangle size={11} /> 剩余 {item.daysRemaining} 天
                    </span>
                  ) : (
                    <span>剩余 {item.daysRemaining} 天</span>
                  )}
                </div>
              </div>
              <div className="flex items-center gap-1">
                <button type="button" onClick={() => handleRestore(item.slug, item.title)}
                  className="p-1.5 rounded hover:bg-success/8 text-muted hover:text-success transition-colors" title="恢复">
                  <RotateCcw size={14} />
                </button>
                <button type="button" onClick={() => handlePermanentDelete(item.slug, item.title)}
                  className="p-1.5 rounded hover:bg-danger/8 text-muted hover:text-danger transition-colors" title="永久删除">
                  <Trash2 size={14} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}