"use client";

import {
  ArrowRight,
  BarChart3,
  MessageSquare,
  Settings,
  Shield,
  TrendingUp,
  Users,
  Zap,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { type FC, useCallback, useEffect, useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { authClient } from "@/lib/auth/client";

const DashboardPage: FC = () => {
  const { data, isPending } = authClient.useSession();
  const router = useRouter();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Once session is loaded, redirect appropriately
    if (!isPending && !data?.session) {
      router.push("/auth/sign-in");
    } else if (!isPending && data?.session) {
      setLoading(false);
    }
  }, [isPending, data, router]);

  // Memoize navigation cards - only recalculates when user role changes
  const navigationCards = useMemo(() => {
    const baseCards = [
      {
        title: "Analytics Overview",
        description:
          "View comprehensive metrics, charts, and insights from your chat sessions",
        icon: <BarChart3 className="h-6 w-6" />,
        href: "/dashboard/overview",
        variant: "primary" as const,
        features: ["Real-time metrics", "Interactive charts", "Trend analysis"],
        adminOnly: false,
      },
      {
        title: "Session Browser",
        description:
          "Browse, search, and analyze individual conversation sessions",
        icon: <MessageSquare className="h-6 w-6" />,
        href: "/dashboard/sessions",
        variant: "success" as const,
        features: ["Session search", "Conversation details", "Export data"],
        adminOnly: false,
      },
    ];

    if (data?.user?.role === "admin") {
      return [
        ...baseCards,
        {
          title: "Company Settings",
          description:
            "Configure company settings, integrations, and API connections",
          icon: <Settings className="h-6 w-6" />,
          href: "/dashboard/company",
          variant: "warning" as const,
          features: [
            "API configuration",
            "Integration settings",
            "Data management",
          ],
          adminOnly: true,
        },
        {
          title: "User Management",
          description:
            "Invite team members and manage user accounts and permissions",
          icon: <Users className="h-6 w-6" />,
          href: "/dashboard/users",
          variant: "default" as const,
          features: ["User invitations", "Role management", "Access control"],
          adminOnly: true,
        },
      ];
    }
    return baseCards;
  }, [data?.user?.role]);

  // Memoize class getter functions
  const getCardClasses = useCallback((variant: string) => {
    switch (variant) {
      case "primary":
        return "border-primary/20 bg-linear-to-br from-primary/5 to-primary/10 hover:from-primary/10 hover:to-primary/15";
      case "success":
        return "border-green-200 bg-linear-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-150 dark:border-green-800 dark:from-green-950 dark:to-green-900";
      case "warning":
        return "border-amber-200 bg-linear-to-br from-amber-50 to-amber-100 hover:from-amber-100 hover:to-amber-150 dark:border-amber-800 dark:from-amber-950 dark:to-amber-900";
      default:
        return "border-border bg-linear-to-br from-card to-muted/20 hover:from-muted/30 hover:to-muted/40";
    }
  }, []);

  const getIconClasses = useCallback((variant: string) => {
    switch (variant) {
      case "primary":
        return "bg-primary/10 text-primary border-primary/20";
      case "success":
        return "bg-green-100 text-green-600 border-green-200 dark:bg-green-900 dark:text-green-400 dark:border-green-800";
      case "warning":
        return "bg-amber-100 text-amber-600 border-amber-200 dark:bg-amber-900 dark:text-amber-400 dark:border-amber-800";
      default:
        return "bg-muted text-muted-foreground border-border";
    }
  }, []);

  // Navigate handler to avoid creating new functions on each render
  const handleNavigate = useCallback(
    (href: string) => {
      router.push(href);
    },
    [router]
  );

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-center space-y-4">
          <div className="relative">
            <div className="animate-spin rounded-full h-12 w-12 border-2 border-muted border-t-primary mx-auto" />
            <div className="absolute inset-0 animate-ping rounded-full h-12 w-12 border border-primary opacity-20 mx-auto" />
          </div>
          <p className="text-lg text-muted-foreground animate-pulse">
            Loading dashboard...
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-8">
      {/* Welcome Header */}
      <div className="relative overflow-hidden rounded-xl bg-linear-to-r from-primary/10 via-primary/5 to-transparent p-8 border border-primary/10">
        <div className="absolute inset-0 bg-linear-to-br from-primary/5 to-transparent" />
        <div className="absolute -top-24 -right-24 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
        <div className="relative">
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <h1 className="text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-linear-to-r from-foreground to-foreground/70">
                  Welcome back, {data?.user?.name || "User"}!
                </h1>
                <Badge
                  variant="secondary"
                  className="text-xs px-3 py-1 bg-primary/10 text-primary border-primary/20"
                >
                  {data?.user?.role}
                </Badge>
              </div>
              <p className="text-muted-foreground text-lg">
                Choose a section below to explore your analytics dashboard
              </p>
            </div>

            <div className="flex items-center gap-3 px-4 py-2 rounded-full bg-muted/50 backdrop-blur-sm">
              <Shield className="h-4 w-4 text-green-600" />
              <span className="text-sm font-medium">Secure Dashboard</span>
            </div>
          </div>
        </div>
      </div>

      {/* Navigation Cards */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {navigationCards.map((card) => (
          <Card
            key={card.href}
            className={`relative overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group ${getCardClasses(
              card.variant
            )}`}
            onClick={() => handleNavigate(card.href)}
          >
            {/* Subtle gradient overlay */}
            <div className="absolute inset-0 bg-linear-to-br from-white/50 to-transparent dark:from-white/5 pointer-events-none" />

            <CardHeader className="relative">
              <div className="flex items-start justify-between">
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <div
                      className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-full border transition-all duration-300 group-hover:scale-110 ${getIconClasses(
                        card.variant
                      )}`}
                    >
                      <span className="transition-transform duration-300 group-hover:scale-110">
                        {card.icon}
                      </span>
                    </div>
                    <div>
                      <CardTitle className="text-xl font-semibold flex items-center gap-2">
                        {card.title}
                        {card.adminOnly && (
                          <Badge variant="outline" className="text-xs">
                            Admin
                          </Badge>
                        )}
                      </CardTitle>
                    </div>
                  </div>
                  <p className="text-muted-foreground leading-relaxed">
                    {card.description}
                  </p>
                </div>
              </div>
            </CardHeader>

            <CardContent className="relative space-y-4">
              {/* Features List */}
              <div className="space-y-2">
                {card.features.map((feature) => (
                  <div
                    key={feature}
                    className="flex items-center gap-2 text-sm"
                  >
                    <Zap className="h-3 w-3 text-primary/60" />
                    <span className="text-muted-foreground">{feature}</span>
                  </div>
                ))}
              </div>

              {/* Action Button */}
              <Button
                className="w-full gap-2 mt-4 group-hover:gap-3 transition-all duration-300"
                variant={card.variant === "primary" ? "default" : "outline"}
                onClick={(e) => {
                  e.stopPropagation();
                  handleNavigate(card.href);
                }}
              >
                <span>
                  {card.title === "Analytics Overview" && "View Analytics"}
                  {card.title === "Session Browser" && "Browse Sessions"}
                  {card.title === "Company Settings" && "Manage Settings"}
                  {card.title === "User Management" && "Manage Users"}
                </span>
                <ArrowRight className="h-4 w-4" />
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Quick Stats */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <TrendingUp className="h-5 w-5" />
            Quick Stats
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
            <div className="text-center space-y-2">
              <div className="flex items-center justify-center gap-2">
                <Zap className="h-5 w-5 text-primary" />
                <span className="text-2xl font-bold">Real-time</span>
              </div>
              <p className="text-sm text-muted-foreground">Data updates</p>
            </div>

            <div className="text-center space-y-2">
              <div className="flex items-center justify-center gap-2">
                <Shield className="h-5 w-5 text-green-600" />
                <span className="text-2xl font-bold">Secure</span>
              </div>
              <p className="text-sm text-muted-foreground">Data protection</p>
            </div>

            <div className="text-center space-y-2">
              <div className="flex items-center justify-center gap-2">
                <BarChart3 className="h-5 w-5 text-blue-600" />
                <span className="text-2xl font-bold">Advanced</span>
              </div>
              <p className="text-sm text-muted-foreground">Analytics</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default DashboardPage;