'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { apiFetch } from '../../../lib/auth';
import { Skeleton } from '@/components/ui/skeleton';
import { useT } from '@/i18n';
import { toast } from 'sonner';

interface FavoritePrompt { id: number; promptId: number; prompt: { id: number; title: string; description: string; likeCount: number } }

export default function FavoritesPage() {
  const t = useT();
  const [items, setItems] = useState<FavoritePrompt[]>([]);
  const [loading, setLoading] = useState(true);

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

  async function loadData() {
    try { const res = await apiFetch('/prompts/favorites'); const data = await res.json(); setItems(data.items || []); } catch { /* ignore */ }
    setLoading(false);
  }

  async function removeFavorite(promptId: number) {
    try { await apiFetch(`/prompts/${promptId}/favorite`, { method: 'POST' }); setItems(items.filter(i => i.promptId !== promptId)); } catch { toast.error("操作失败") }
  }

  if (loading) return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <Skeleton className="h-8 w-48 mb-6" />
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">{[1,2,3].map(i => <Skeleton key={i} className="h-24 rounded-xl" />)}</div>
      <Skeleton className="h-64 w-full rounded-xl" />
    </div>
  );

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">&larr; {t.favorites.back}</Link>
        <h1 className="text-3xl font-bold text-foreground">{t.favorites.title}</h1>
        <p className="mt-2 text-muted-foreground">{t.favorites.desc}</p>
      </div>

      {items.length === 0 ? (
        <div className="text-center py-20">
          <div className="w-16 h-16 bg-muted rounded-2xl flex items-center justify-center mx-auto mb-4">❤️</div>
          <p className="text-muted-foreground mb-4">{t.favorites.empty}</p>
          <Link href="/prompts" className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700">{t.favorites.browsePrompts}</Link>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {items.map(item => (
            <div key={item.id} className="bg-card rounded-xl border border-border p-5 hover:shadow-md transition-shadow">
              <div className="flex items-start justify-between mb-2">
                <Link href={`/prompts/${item.prompt.id}`} className="font-semibold text-foreground hover:text-brand-600">{item.prompt.title}</Link>
                <button onClick={() => removeFavorite(item.promptId)} className="text-muted-foreground hover:text-red-500 text-sm">❤️</button>
              </div>
              <p className="text-sm text-muted-foreground mb-2 line-clamp-2">{item.prompt.description}</p>
              <div className="text-xs text-muted-foreground">❤️ {item.prompt.likeCount}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
