import { useAuth } from "@/hooks/useAuth";
import { DashboardLayout } from "@/components/layout/DashboardLayout";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { useQuery } from "@tanstack/react-query";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Link } from "wouter";
import {
  FileText,
  BookText,
  Users,
  MessageCircle,
  ArrowUpRight,
  BookMarked,
  Layers,
  PenSquare
} from "lucide-react";

export default function Dashboard() {
  const { canManageContent, canReviewContent } = useAuth();
  
  // Fetch statistics
  const { data: workStats, isLoading: workStatsLoading } = useQuery({
    queryKey: ['/api/stats/works'],
    enabled: canReviewContent || canManageContent,
  });
  
  const { data: userStats, isLoading: userStatsLoading } = useQuery({
    queryKey: ['/api/stats/users'],
    enabled: canManageContent,
  });
  
  const { data: blogStats, isLoading: blogStatsLoading } = useQuery({
    queryKey: ['/api/stats/blog'],
    enabled: canReviewContent || canManageContent,
  });
  
  const { data: commentStats, isLoading: commentStatsLoading } = useQuery({
    queryKey: ['/api/stats/comments'],
    enabled: canReviewContent || canManageContent,
  });

  const { data: recentWorks, isLoading: recentWorksLoading } = useQuery({
    queryKey: ['/api/works', { limit: 5 }],
  });

  const { data: recentBlogPosts, isLoading: recentBlogPostsLoading } = useQuery({
    queryKey: ['/api/blog', { limit: 5 }],
  });

  // Get dummy data if API doesn't return real statistics yet
  const getStatValue = (loading: boolean, data: any, defaultValue: number) => {
    if (loading) return <Skeleton className="h-8 w-24" />;
    return data?.count || defaultValue;
  };

  // For the demo, provide sensible defaults
  const totalWorks = getStatValue(workStatsLoading, workStats, 6);
  const totalUsers = getStatValue(userStatsLoading, userStats, 5);
  const totalPosts = getStatValue(blogStatsLoading, blogStats, 3);
  const totalComments = getStatValue(commentStatsLoading, commentStats, 12);
  
  return (
    <DashboardLayout title="Dashboard Overview">
      {/* Stats cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Works</CardTitle>
            <BookText className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalWorks}</div>
            <p className="text-xs text-muted-foreground">
              Literary works in library
            </p>
          </CardContent>
        </Card>
        
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Blog Posts</CardTitle>
            <FileText className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalPosts}</div>
            <p className="text-xs text-muted-foreground">
              Published articles
            </p>
          </CardContent>
        </Card>
        
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Users</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalUsers}</div>
            <p className="text-xs text-muted-foreground">
              Registered accounts
            </p>
          </CardContent>
        </Card>
        
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Comments</CardTitle>
            <MessageCircle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalComments}</div>
            <p className="text-xs text-muted-foreground">
              User discussions
            </p>
          </CardContent>
        </Card>
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Quick Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
            <CardDescription>Common tasks and content management</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-4">
              <Link href="/dashboard/blog/create">
                <Button variant="outline" className="w-full justify-start h-auto py-4">
                  <FileText className="h-5 w-5 mr-2" />
                  <div className="flex flex-col items-start">
                    <span>Create Post</span>
                    <span className="text-xs text-muted-foreground">Add a new blog post</span>
                  </div>
                </Button>
              </Link>
              
              <Link href="/dashboard/works/add">
                <Button variant="outline" className="w-full justify-start h-auto py-4">
                  <BookText className="h-5 w-5 mr-2" />
                  <div className="flex flex-col items-start">
                    <span>Add Work</span>
                    <span className="text-xs text-muted-foreground">New literary work</span>
                  </div>
                </Button>
              </Link>
              
              <Link href="/dashboard/collections/create">
                <Button variant="outline" className="w-full justify-start h-auto py-4">
                  <BookMarked className="h-5 w-5 mr-2" />
                  <div className="flex flex-col items-start">
                    <span>Create Collection</span>
                    <span className="text-xs text-muted-foreground">Curate works</span>
                  </div>
                </Button>
              </Link>
              
              <Link href="/dashboard/annotations">
                <Button variant="outline" className="w-full justify-start h-auto py-4">
                  <PenSquare className="h-5 w-5 mr-2" />
                  <div className="flex flex-col items-start">
                    <span>Manage Annotations</span>
                    <span className="text-xs text-muted-foreground">Review & edit</span>
                  </div>
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
        
        {/* Recent Activity */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>Recent Content</CardTitle>
              <CardDescription>Latest additions to the platform</CardDescription>
            </div>
            <Link href="/dashboard/works">
              <Button variant="ghost" size="sm" className="gap-1">
                <span>View all</span>
                <ArrowUpRight className="h-4 w-4" />
              </Button>
            </Link>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentWorksLoading ? (
                Array.from({length: 3}).map((_, i) => (
                  <div key={i} className="flex items-center gap-4">
                    <Skeleton className="h-12 w-12 rounded-md" />
                    <div className="space-y-2">
                      <Skeleton className="h-4 w-48" />
                      <Skeleton className="h-3 w-32" />
                    </div>
                  </div>
                ))
              ) : (
                recentWorks?.slice(0, 3).map((work: any) => (
                  <Link key={work.id} href={`/works/${work.slug}`}>
                    <div className="flex items-center gap-4 group cursor-pointer">
                      <div className="h-12 w-12 rounded-md bg-muted flex items-center justify-center">
                        <BookText className="h-6 w-6 text-muted-foreground" />
                      </div>
                      <div>
                        <h4 className="font-medium group-hover:text-primary">{work.title}</h4>
                        <p className="text-sm text-muted-foreground">{work.type} - Added recently</p>
                      </div>
                    </div>
                  </Link>
                ))
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}
