"use client";

import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import { useEffect } from "react";
import { MessageCircle, Heart } from "lucide-react";
import AuthenticatedLayout from "@/components/AuthenticatedLayout";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ChatSelectHeader } from "@/components/chatbot/ChatSelectHeader";

export default function ChatSelectPage() {
  const router = useRouter();
  const { data: session, status } = useSession();

  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/auth/login");
    }
  }, [status, router]);

  useEffect(() => {
    if (session && session.user.role !== "PATIENT") {
      router.push("/dashboard");
    }
  }, [session, router]);

  if (status === "loading") {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
      </div>
    );
  }

  if (!session || session.user.role !== "PATIENT") {
    return null;
  }

  const handleMedicalChat = () => {
    router.push("/chat?type=medical");
  };

  const handlePsychologicalChat = () => {
    router.push("/chat?type=psychological");
  };

  return (
    <AuthenticatedLayout>
      <div className="flex items-center justify-center min-h-[calc(100vh-4rem)] p-6">
        <div className="w-full max-w-5xl space-y-8">
          {/* Header */}
          <ChatSelectHeader />

          {/* Chat Options */}
          <div className="grid gap-6 md:grid-cols-2">
            {/* Chat Médico */}
            <Card 
              className="cursor-pointer transition-all hover:shadow-lg hover:border-blue-400 hover:scale-105"
              onClick={handleMedicalChat}
            >
              <CardHeader>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-blue-100 dark:bg-blue-500 rounded-lg flex items-center justify-center">
                    <MessageCircle className="w-6 h-6 text-blue-600 dark:text-blue-100" />
                  </div>
                  <div>
                    <CardTitle className="text-xl">Consulta Médica</CardTitle>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-base text-gray-700 dark:text-gray-700">
                  Obtén información sobre síntomas, condiciones médicas y recomendaciones de salud
                </CardDescription>
                <ul className="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                  <li className="flex items-center gap-2">
                    <span className="text-blue-500">•</span>
                    <span>Límite de 10 mensajes</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <span className="text-blue-500">•</span>
                    <span>Reporte médico al finalizar</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <span className="text-blue-500">•</span>
                    <span>Sistema de alertas</span>
                  </li>
                </ul>
              </CardContent>
            </Card>

            {/* Chat Psicológico */}
            <Card 
              className="cursor-pointer transition-all hover:shadow-lg hover:border-purple-400 hover:scale-105"
              onClick={handlePsychologicalChat}
            >
              <CardHeader>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-purple-100 dark:bg-purple-500 rounded-lg flex items-center justify-center">
                    <Heart className="w-6 h-6 text-purple-600 dark:text-purple-100" />
                  </div>
                  <div>
                    <CardTitle className="text-xl">Apoyo Psicológico</CardTitle>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-base text-gray-700 dark:text-gray-700">
                  Un espacio seguro para hablar sobre tus emociones, pensamientos y bienestar mental
                </CardDescription>
                <ul className="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                  <li className="flex items-center gap-2">
                    <span className="text-purple-500">•</span>
                    <span>Sin límite de mensajes</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <span className="text-purple-500">•</span>
                    <span>Conversación confidencial</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <span className="text-purple-500">•</span>
                    <span>Termina cuando quieras</span>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </AuthenticatedLayout>
  );
}