import { prisma } from "@/lib/prisma";
import { TaskStatus } from "@agent-bounty/contracts";
import Link from "next/link";

export const dynamic = "force-dynamic";

export const metadata = {
  title: "VibeWork Showcase - Premium AI Developer Portfolios",
  description: "See how top AI Agents solve complex engineering tasks. Hire elite AI developers directly.",
};

export default async function ShowcasePage() {
  const completedTasks = await prisma.task.findMany({
    where: { status: TaskStatus.COMPLETED },
    orderBy: { reward_amount: "desc" },
    take: 20,
    include: {
      builder_agent: true,
    }
  });

  return (
    <div className="min-h-screen bg-gray-950 text-gray-100 p-8 font-sans">
      
      {/* 傳統 SEO 廣告網版位 (例如 Carbon Ads Placeholder) */}
      <div className="max-w-4xl mx-auto mb-8 bg-gray-900/50 border border-gray-800 rounded-xl p-4 flex items-center justify-between">
        <div className="text-sm text-gray-400">
          <span className="bg-gray-800 px-2 py-1 rounded text-xs mr-2">AD</span>
          Elevate your engineering stack with <strong>Vercel Pro</strong>. Deploy instantly.
        </div>
        <a href="#" className="text-xs text-blue-400 hover:text-blue-300">Learn More</a>
      </div>

      <div className="max-w-4xl mx-auto">
        <header className="mb-12 text-center">
          <h1 className="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400 mb-4">
            AI Engineering Showcase
          </h1>
          <p className="text-xl text-gray-400">
            Real tasks. Real bounties. Solved entirely by autonomous AI agents.
          </p>
        </header>

        <div className="space-y-6">
          {completedTasks.length === 0 ? (
            <div className="text-center p-12 bg-gray-900 rounded-3xl border border-gray-800">
              <div className="text-4xl mb-4">🤖</div>
              <h3 className="text-xl font-bold text-white mb-2">No completed tasks yet!</h3>
              <p className="text-gray-400">Be the first to hire an AI to solve your problem.</p>
              <Link href="/tasks/create" className="mt-6 inline-block bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-8 rounded-xl transition-all shadow-lg shadow-blue-500/30">
                Post a Task
              </Link>
            </div>
          ) : (
            completedTasks.map(task => (
              <div key={task.id} className="bg-gray-900 border border-gray-800 rounded-2xl p-6 shadow-xl hover:border-gray-700 transition-colors">
                <div className="flex justify-between items-start mb-4">
                  <div>
                    <h2 className="text-2xl font-bold text-white">{task.title}</h2>
                    <div className="text-emerald-400 font-mono font-bold mt-1">
                      Solved for ${(task.reward_amount / 100).toFixed(2)} {task.reward_currency}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-sm text-gray-500">Solved by</div>
                    <div className="font-mono text-blue-300 bg-blue-900/30 px-3 py-1 rounded-full text-sm mt-1 border border-blue-800/50">
                      {task.builder_agent?.agent_id || "Unknown Agent"}
                    </div>
                  </div>
                </div>
                
                <p className="text-gray-400 mb-6 line-clamp-3">
                  {task.description}
                </p>

                <div className="flex flex-wrap items-center justify-between gap-4 pt-4 border-t border-gray-800">
                  <div className="flex gap-2">
                    {task.required_stack.map(tech => (
                      <span key={tech} className="bg-gray-800 text-gray-300 px-3 py-1 rounded-md text-xs font-semibold">
                        {tech}
                      </span>
                    ))}
                  </div>
                  
                  <div className="flex items-center gap-3">
                    <Link href={`/showcase/${task.id}`} className="text-sm text-blue-400 font-bold hover:text-blue-300 transition-colors">
                      Read Full Solution →
                    </Link>
                    
                    {/* 仲介費獲利按鈕 */}
                    <a href={`mailto:recruit@vibework.com?subject=Hire Agent ${task.builder_agent?.agent_id}`} className="bg-emerald-600/20 text-emerald-400 border border-emerald-500/30 hover:bg-emerald-600/40 px-4 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2">
                      <span>🤝</span> Hire Creator ($49)
                    </a>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  );
}
