"use client";

import { useQuery } from "@tanstack/react-query";
import { PageHeader } from "@/components/shared/page-header";
import { StatCard } from "@/components/shared/stat-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Avatar } from "@/components/ui/avatar";
import { LoadingPage } from "@/components/ui/loading";
import {
  Users,
  FileText,
  GraduationCap,
  Trophy,
  UserPlus,
  TrendingUp,
  ArrowRight,
  Clock,
} from "lucide-react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  BarChart,
  Bar,
} from "recharts";
import Link from "next/link";
import { formatDate } from "@/lib/utils";
import { analyticsApi, usersApi, postsApi, adminApi } from "@/lib/api-client";
import { CheckSquare, AlertTriangle } from "lucide-react";

export default function DashboardPage() {
  // Fetch real analytics data from API
  const { data: analytics, isLoading: analyticsLoading } = useQuery({
    queryKey: ["dashboard-analytics"],
    queryFn: async () => {
      const response = await analyticsApi.getDashboard();
      return response.data;
    },
  });

  // Fetch pending users
  const { data: pendingUsersData } = useQuery({
    queryKey: ["pending-users-preview"],
    queryFn: async () => {
      const response = await usersApi.getPending({ limit: 3 });
      return response.data;
    },
  });

  // Fetch recent posts
  const { data: recentPostsData } = useQuery({
    queryKey: ["recent-posts-preview"],
    queryFn: async () => {
      const response = await postsApi.getFeed({ limit: 3 });
      return response.data;
    },
  });

  // Fetch task stats
  const { data: taskStatsData } = useQuery({
    queryKey: ["task-stats-dashboard"],
    queryFn: async () => {
      const response = await adminApi.getTaskStats();
      return response.data;
    },
  });

  const pendingUsers = pendingUsersData?.data || [];
  const recentPosts = recentPostsData?.data || [];
  const taskStats = taskStatsData;
  const isLoading = analyticsLoading;

  if (isLoading) {
    return <LoadingPage />;
  }

  return (
    <div className="space-y-8 animate-fade-in">
      <PageHeader
        title="Dashboard"
        description="Overview of your EngageHub platform"
      />

      {/* Stats Grid */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
        <StatCard
          title="Total Users"
          value={analytics?.totalUsers.toLocaleString() || "0"}
          icon={Users}
          trend={{ value: 12, isPositive: true }}
          className="stagger-1 animate-fade-in-up"
        />
        <StatCard
          title="Active Users"
          value={analytics?.activeUsers.toLocaleString() || "0"}
          description="Last 7 days"
          icon={TrendingUp}
          trend={{ value: 8, isPositive: true }}
          className="stagger-2 animate-fade-in-up"
        />
        <StatCard
          title="Total Posts"
          value={analytics?.totalPosts.toLocaleString() || "0"}
          icon={FileText}
          trend={{ value: 15, isPositive: true }}
          className="stagger-3 animate-fade-in-up"
        />
        <StatCard
          title="Course Completions"
          value={analytics?.courseCompletions.toLocaleString() || "0"}
          icon={GraduationCap}
          trend={{ value: 23, isPositive: true }}
          className="stagger-4 animate-fade-in-up"
        />
        <StatCard
          title="Tasks Overview"
          value={taskStats ? `${taskStats.completed} / ${taskStats.pending + taskStats.inProgress + taskStats.completed}` : "0 / 0"}
          description={taskStats?.overdue ? `${taskStats.overdue} overdue` : "No overdue tasks"}
          icon={CheckSquare}
          className="stagger-5 animate-fade-in-up"
        />
      </div>

      {/* Charts Row */}
      <div className="grid gap-4 lg:grid-cols-2">
        {/* Engagement Trend Chart */}
        <Card className="col-span-1">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5 text-primary" />
              Engagement Trend
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={analytics?.engagementTrend || []}>
                  <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                  <XAxis
                    dataKey="date"
                    className="text-xs"
                    tick={{ fill: "hsl(var(--muted-foreground))" }}
                  />
                  <YAxis
                    className="text-xs"
                    tick={{ fill: "hsl(var(--muted-foreground))" }}
                  />
                  <Tooltip
                    contentStyle={{
                      backgroundColor: "hsl(var(--card))",
                      border: "1px solid hsl(var(--border))",
                      borderRadius: "8px",
                    }}
                  />
                  <Line
                    type="monotone"
                    dataKey="posts"
                    stroke="hsl(var(--primary))"
                    strokeWidth={2}
                    dot={false}
                    name="Posts"
                  />
                  <Line
                    type="monotone"
                    dataKey="comments"
                    stroke="hsl(var(--success))"
                    strokeWidth={2}
                    dot={false}
                    name="Comments"
                  />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

        {/* Activity by Day Chart */}
        <Card className="col-span-1">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Trophy className="h-5 w-5 text-primary" />
              Weekly Activity
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={analytics?.engagementTrend || []}>
                  <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                  <XAxis
                    dataKey="date"
                    className="text-xs"
                    tick={{ fill: "hsl(var(--muted-foreground))" }}
                  />
                  <YAxis
                    className="text-xs"
                    tick={{ fill: "hsl(var(--muted-foreground))" }}
                  />
                  <Tooltip
                    contentStyle={{
                      backgroundColor: "hsl(var(--card))",
                      border: "1px solid hsl(var(--border))",
                      borderRadius: "8px",
                    }}
                  />
                  <Bar
                    dataKey="posts"
                    fill="hsl(var(--primary))"
                    radius={[4, 4, 0, 0]}
                    name="Posts"
                  />
                  <Bar
                    dataKey="comments"
                    fill="hsl(var(--primary) / 0.5)"
                    radius={[4, 4, 0, 0]}
                    name="Comments"
                  />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Row - Pending Approvals & Recent Posts */}
      <div className="grid gap-4 lg:grid-cols-2">
        {/* Pending Approvals */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="flex items-center gap-2">
              <UserPlus className="h-5 w-5 text-warning" />
              Pending Approvals
              <Badge variant="warning" className="ml-2">
                {analytics?.pendingApprovals || 0}
              </Badge>
            </CardTitle>
            <Link href="/users/pending">
              <Button variant="ghost" size="sm">
                View all
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {pendingUsers.map((user) => (
                <div
                  key={user.id}
                  className="flex items-center justify-between rounded-lg border p-3"
                >
                  <div className="flex items-center gap-3">
                    <Avatar
                      fallback={`${user.firstName} ${user.lastName}`}
                      size="sm"
                    />
                    <div>
                      <p className="font-medium text-sm">
                        {user.firstName} {user.lastName}
                      </p>
                      <p className="text-xs text-muted-foreground">{user.email || user.phone}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button size="sm" variant="outline">
                      Deny
                    </Button>
                    <Button size="sm" variant="success">
                      Approve
                    </Button>
                  </div>
                </div>
              ))}
              {pendingUsers.length === 0 && (
                <p className="text-center text-muted-foreground py-4">
                  No pending approvals
                </p>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Recent Posts */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5 text-primary" />
              Recent Posts
            </CardTitle>
            <Link href="/content/posts">
              <Button variant="ghost" size="sm">
                View all
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentPosts.map((post) => (
                <div key={post.id} className="rounded-lg border p-3 space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Avatar
                        fallback={`${post.author?.firstName || 'U'} ${post.author?.lastName || ''}`}
                        size="sm"
                      />
                      <span className="font-medium text-sm">
                        {post.author?.firstName} {post.author?.lastName}
                      </span>
                    </div>
                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
                      <Clock className="h-3 w-3" />
                      {formatDate(post.createdAt)}
                    </div>
                  </div>
                  <p className="text-sm text-muted-foreground line-clamp-2">
                    {post.content}
                  </p>
                  <div className="flex items-center gap-4 text-xs text-muted-foreground">
                    <span>{post.likeCount} likes</span>
                  </div>
                </div>
              ))}
              {recentPosts.length === 0 && (
                <p className="text-center text-muted-foreground py-4">
                  No recent posts
                </p>
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}