import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import Link from "next/link";
import { Plus, ArrowRight, MessageSquare } from "lucide-react";

export default async function BotsPage() {
  const session = await getServerSession(authOptions);
  const userId = (session?.user as any)?.id as string;

  const bots = await prisma.bot.findMany({
    where: { userId },
    include: {
      config: true,
      _count: { select: { conversations: true } },
    },
    orderBy: { updatedAt: "desc" },
  });

  return (
    <div className="p-8">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-white">Chatbotii mei</h1>
          <p className="text-slate-500 mt-1 text-sm">Gestioneaza si configureaza chatbotii tai AI.</p>
        </div>
        <Link href="/bots/new"
          className="flex items-center gap-2 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-500 hover:to-violet-500 text-white px-4 py-2.5 rounded-xl text-sm font-semibold transition-all shadow-lg shadow-indigo-500/20">
          <Plus className="w-4 h-4" />
          Bot nou
        </Link>
      </div>

      {bots.length === 0 ? (
        <div className="bg-white/[0.03] border border-white/[0.07] rounded-2xl p-16 text-center">
          <div className="w-16 h-16 bg-indigo-500/10 border border-indigo-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
            🤖
          </div>
          <h2 className="text-lg font-semibold text-white mb-2">Niciun chatbot inca</h2>
          <p className="text-slate-500 text-sm max-w-sm mx-auto mb-6">
            Creeaza primul tau chatbot AI. Il poti pune pe site-ul tau sau pe WhatsApp in cateva minute.
          </p>
          <Link href="/bots/new"
            className="inline-flex items-center gap-2 bg-gradient-to-r from-indigo-600 to-violet-600 text-white px-5 py-2.5 rounded-xl text-sm font-semibold transition-all shadow-lg shadow-indigo-500/20">
            <Plus className="w-4 h-4" />
            Creeaza primul chatbot
          </Link>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
          {bots.map((bot) => (
            <Link key={bot.id} href={`/bots/${bot.id}`}
              className="group bg-white/[0.03] border border-white/[0.07] hover:border-indigo-500/30 hover:bg-white/[0.05] rounded-2xl p-5 transition-all">
              <div className="flex items-start justify-between mb-4">
                <div className="w-11 h-11 rounded-xl flex items-center justify-center text-xl"
                  style={{ backgroundColor: `${bot.config?.primaryColor ?? "#6366f1"}18`, border: `1px solid ${bot.config?.primaryColor ?? "#6366f1"}30` }}>
                  🤖
                </div>
                <span className={`text-xs px-2.5 py-1 rounded-full font-semibold ${
                  bot.status === "ACTIVE"
                    ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
                    : "bg-white/[0.05] text-slate-400 border border-white/[0.08]"
                }`}>
                  {bot.status === "ACTIVE" ? "● Activ" : "○ Draft"}
                </span>
              </div>

              <h3 className="font-semibold text-white mb-1">{bot.name}</h3>
              <p className="text-sm text-slate-500 mb-4 line-clamp-2">{bot.description ?? "Fara descriere"}</p>

              <div className="flex items-center justify-between">
                <div className="flex items-center gap-1.5 text-xs text-slate-600">
                  <MessageSquare className="w-3.5 h-3.5" />
                  {bot._count.conversations} conversatii
                </div>
                <ArrowRight className="w-4 h-4 text-slate-600 group-hover:text-indigo-400 transition-colors" />
              </div>
            </Link>
          ))}

          {/* Add new card */}
          <Link href="/bots/new"
            className="group bg-white/[0.02] border-2 border-dashed border-white/[0.07] hover:border-indigo-500/40 rounded-2xl p-5 flex flex-col items-center justify-center transition-all min-h-[160px]">
            <div className="w-10 h-10 rounded-full bg-white/[0.05] group-hover:bg-indigo-500/10 border border-white/[0.08] group-hover:border-indigo-500/30 flex items-center justify-center mb-3 transition-all">
              <Plus className="w-5 h-5 text-slate-500 group-hover:text-indigo-400 transition-colors" />
            </div>
            <span className="text-sm font-medium text-slate-500 group-hover:text-indigo-400 transition-colors">
              Adauga chatbot
            </span>
          </Link>
        </div>
      )}
    </div>
  );
}