import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { notFound } from "next/navigation";
import { DashboardChatWidget } from "@/components/chat/DashboardChatWidget";
import Link from "next/link";
import { ArrowLeft, Lightbulb, BookOpen, Settings } from "lucide-react";

export default async function TestBotPage({ params }: { params: Promise<{ botId: string }> }) {
  const session = await getServerSession(authOptions);
  const userId = (session?.user as any)?.id as string;
  const { botId } = await params;

  const bot = await prisma.bot.findFirst({
    where: { id: botId, userId },
    include: { config: true, knowledgeBase: true },
  });
  if (!bot) notFound();

  const hasKnowledge = !!bot.knowledgeBase?.content?.trim();
  const primaryColor = bot.config?.primaryColor ?? "#6366f1";

  return (
    <div className="p-8 h-full flex flex-col max-w-6xl mx-auto">
      {/* Header */}
      <div className="flex items-center gap-4 mb-6 animate-fade-up">
        <Link href={`/bots/${botId}`} className="text-slate-600 hover:text-slate-300 transition-colors">
          <ArrowLeft className="w-5 h-5" />
        </Link>
        <div className="flex-1">
          <h1 className="text-2xl font-black text-white">Testeaza chatbotul</h1>
          <p className="text-slate-500 text-sm mt-0.5">{bot.name} — conversatiile de test nu sunt salvate si nu consuma quota</p>
        </div>
      </div>

      <div className="flex gap-5 flex-1 min-h-0">
        {/* Chat widget */}
        <div className="flex-1 min-h-[500px] animate-fade-up" style={{ animationDelay: "60ms" }}>
          <DashboardChatWidget
            botId={botId}
            botName={bot.config?.botDisplayName ?? bot.name}
            welcomeMessage={bot.config?.welcomeMessage ?? "Buna ziua!"}
            primaryColor={primaryColor}
          />
        </div>

        {/* Sidebar */}
        <div className="w-68 shrink-0 space-y-3 animate-fade-up" style={{ animationDelay: "100ms" }}>
          {/* Mod testare */}
          <div className="rounded-2xl border border-amber-500/20 p-4" style={{ background: "rgba(245,158,11,0.06)" }}>
            <div className="flex items-center gap-2 mb-1.5">
              <Lightbulb className="w-4 h-4 text-amber-400" />
              <p className="text-sm font-bold text-amber-300">Mod testare activ</p>
            </div>
            <p className="text-xs text-amber-500/80">
              Testezi exact cum va raspunde botul clientilor tai. Mesajele nu sunt salvate si nu consuma din quota.
            </p>
          </div>

          {/* Config actuala */}
          <div className="rounded-2xl border border-white/[0.07] p-4" style={{ background: "var(--bg-card)" }}>
            <p className="text-xs font-bold text-white uppercase tracking-wider mb-3">Configuratie</p>
            <div className="space-y-2.5 text-xs">
              <div className="flex justify-between items-center">
                <span className="text-slate-500">Culoare primara</span>
                <div className="flex items-center gap-1.5">
                  <div className="w-3.5 h-3.5 rounded-full border border-white/20" style={{ backgroundColor: primaryColor }} />
                  <span className="text-slate-400 font-mono">{primaryColor}</span>
                </div>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-slate-500">Creativitate</span>
                <span className="text-slate-300">{((bot.config?.temperature ?? 0.7) * 100).toFixed(0)}%</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-slate-500">Baza cunostinte</span>
                <span className={hasKnowledge ? "text-emerald-400 font-medium" : "text-slate-600"}>
                  {hasKnowledge ? `${bot.knowledgeBase!.content.length.toLocaleString()} caractere` : "Goala"}
                </span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-slate-500">Status bot</span>
                <div className="flex items-center gap-1.5">
                  <span className={`w-1.5 h-1.5 rounded-full ${bot.status === "ACTIVE" ? "bg-emerald-400" : "bg-amber-400"}`} />
                  <span className={bot.status === "ACTIVE" ? "text-emerald-400" : "text-amber-400"}>{bot.status}</span>
                </div>
              </div>
            </div>
          </div>

          {/* Intrebari sugestii */}
          <div className="rounded-2xl border border-white/[0.07] p-4" style={{ background: "var(--bg-card)" }}>
            <p className="text-xs font-bold text-white uppercase tracking-wider mb-3">Intrebari de testat</p>
            <div className="space-y-1.5">
              {["Care sunt serviciile voastre?", "Cat costa?", "Cum va contactez?", "Care e programul?", "Aveti promotii?"].map((q) => (
                <p key={q} className="text-xs text-indigo-400 hover:text-indigo-300 cursor-pointer transition-colors flex items-start gap-1.5 group">
                  <span className="text-indigo-600 group-hover:text-indigo-400 transition-colors mt-0.5">→</span>
                  {q}
                </p>
              ))}
            </div>
          </div>

          {/* Actiuni */}
          <div className="flex flex-col gap-2">
            <Link href={`/bots/${botId}/configure`}
              className="flex items-center justify-center gap-2 text-sm border border-white/[0.08] hover:border-white/20 text-slate-300 hover:text-white px-4 py-2.5 rounded-xl transition-all font-medium"
              style={{ background: "var(--bg-panel)" }}>
              <Settings className="w-4 h-4" />
              Modifica configuratia
            </Link>
            <Link href={`/bots/${botId}/knowledge`}
              className="flex items-center justify-center gap-2 text-sm 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 transition-all font-medium shadow-lg shadow-indigo-500/20">
              <BookOpen className="w-4 h-4" />
              {hasKnowledge ? "Editeaza cunostintele" : "+ Adauga cunostinte"}
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}