import { PageLayout } from "@/components/layout/PageLayout";
import { useQuery } from "@tanstack/react-query";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { WorkCard } from "@/components/common/WorkCard";
import { Skeleton } from "@/components/ui/skeleton";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { User, BookOpen, Heart, Clock, Settings, PenSquare } from "lucide-react";
import { BookmarkWithWork } from "@/lib/types";
import { useState } from "react";
import { Link } from "wouter";

// Mock user ID for demo - in a real app, this would come from authentication
const DEMO_USER_ID = 1;

export default function Profile() {
  const [activeTab, setActiveTab] = useState("bookmarks");

  // Fetch user data
  const { data: user, isLoading: userLoading } = useQuery({
    queryKey: [`/api/users/${DEMO_USER_ID}`],
  });

  // Fetch user's bookmarks with work details
  const { data: bookmarks, isLoading: bookmarksLoading } = useQuery<BookmarkWithWork[]>({
    queryKey: [`/api/users/${DEMO_USER_ID}/bookmarks`],
  });

  // Fetch user's contributions (works/translations they've added)
  const { data: contributions, isLoading: contributionsLoading } = useQuery({
    queryKey: [`/api/users/${DEMO_USER_ID}/contributions`],
  });

  // Fetch reading progress
  const { data: readingProgress, isLoading: progressLoading } = useQuery({
    queryKey: [`/api/users/${DEMO_USER_ID}/reading-progress`],
  });

  return (
    <PageLayout>
      <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 py-8">
        {/* Profile header */}
        <div className="mb-8">
          {userLoading ? (
            <div className="flex flex-col md:flex-row gap-6 items-center md:items-start">
              <Skeleton className="w-24 h-24 rounded-full" />
              <div className="flex-1 text-center md:text-left">
                <Skeleton className="h-8 w-48 mb-2 mx-auto md:mx-0" />
                <Skeleton className="h-4 w-32 mb-4 mx-auto md:mx-0" />
                <Skeleton className="h-16 w-full" />
              </div>
            </div>
          ) : user ? (
            <div className="flex flex-col md:flex-row gap-6 items-center md:items-start">
              <Avatar className="w-24 h-24 border-2 border-sage/20">
                <AvatarImage src={user.avatar} alt={user.displayName || user.username} />
                <AvatarFallback className="text-2xl bg-navy/10 dark:bg-navy/20 text-navy dark:text-cream">
                  {(user.displayName || user.username).slice(0, 2).toUpperCase()}
                </AvatarFallback>
              </Avatar>
              <div className="flex-1 text-center md:text-left">
                <h1 className="text-2xl md:text-3xl font-bold font-serif text-navy dark:text-cream mb-1">
                  {user.displayName || user.username}
                </h1>
                <p className="text-navy/70 dark:text-cream/70 mb-4">@{user.username}</p>
                <p className="text-navy/80 dark:text-cream/80 max-w-2xl mb-6">
                  {user.bio || "No bio provided. Tell us about yourself and your literary interests."}
                </p>
                <div className="flex flex-wrap gap-3 justify-center md:justify-start">
                  <Button variant="outline" size="sm" className="gap-2">
                    <Settings className="h-4 w-4" />
                    Edit Profile
                  </Button>
                  <Link href="/submit">
                    <Button size="sm" className="gap-2 bg-russet hover:bg-russet/90 text-white">
                      <PenSquare className="h-4 w-4" />
                      Submit New Translation
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          ) : (
            <div className="text-center py-8">
              <h1 className="text-2xl font-bold mb-4">User not found</h1>
              <p className="mb-4">Please sign in to view your profile</p>
              <Button>Sign In</Button>
            </div>
          )}
        </div>

        {/* User content tabs */}
        <Tabs defaultValue="bookmarks" value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-6">
            <TabsTrigger value="bookmarks" className="gap-2">
              <BookOpen className="h-4 w-4" />
              <span>Bookmarks</span>
            </TabsTrigger>
            <TabsTrigger value="contributions" className="gap-2">
              <PenSquare className="h-4 w-4" />
              <span>Contributions</span>
            </TabsTrigger>
            <TabsTrigger value="reading" className="gap-2">
              <Clock className="h-4 w-4" />
              <span>Reading History</span>
            </TabsTrigger>
            <TabsTrigger value="likes" className="gap-2">
              <Heart className="h-4 w-4" />
              <span>Likes</span>
            </TabsTrigger>
          </TabsList>

          {/* Bookmarks tab */}
          <TabsContent value="bookmarks">
            <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-4">
              Your Bookmarked Works
            </h2>
            
            {bookmarksLoading ? (
              <div className="space-y-4">
                {Array.from({ length: 3 }).map((_, i) => (
                  <Skeleton key={i} className="h-40" />
                ))}
              </div>
            ) : bookmarks?.length ? (
              <div className="space-y-3">
                {bookmarks.map(bookmark => (
                  <WorkCard key={bookmark.id} work={bookmark.work} />
                ))}
              </div>
            ) : (
              <Card className="bg-cream dark:bg-dark-surface">
                <CardContent className="text-center py-12">
                  <BookOpen className="h-12 w-12 mx-auto mb-4 text-navy/40 dark:text-cream/40" />
                  <h3 className="text-lg font-medium mb-2">No bookmarks yet</h3>
                  <p className="text-navy/70 dark:text-cream/70 mb-6">
                    Save your favorite works for easy access later
                  </p>
                  <Link href="/explore">
                    <Button>Explore Works</Button>
                  </Link>
                </CardContent>
              </Card>
            )}
          </TabsContent>

          {/* Contributions tab */}
          <TabsContent value="contributions">
            <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-4">
              Your Contributions
            </h2>
            
            {contributionsLoading ? (
              <div className="space-y-4">
                {Array.from({ length: 2 }).map((_, i) => (
                  <Skeleton key={i} className="h-40" />
                ))}
              </div>
            ) : contributions?.length ? (
              <div className="space-y-3">
                {/* This would display the user's contributions */}
                <p>Contributions would appear here</p>
              </div>
            ) : (
              <Card className="bg-cream dark:bg-dark-surface">
                <CardContent className="text-center py-12">
                  <PenSquare className="h-12 w-12 mx-auto mb-4 text-navy/40 dark:text-cream/40" />
                  <h3 className="text-lg font-medium mb-2">No contributions yet</h3>
                  <p className="text-navy/70 dark:text-cream/70 mb-6">
                    Share your translations with the Tercul community
                  </p>
                  <Link href="/submit">
                    <Button className="bg-russet hover:bg-russet/90 text-white">Submit Translation</Button>
                  </Link>
                </CardContent>
              </Card>
            )}
          </TabsContent>

          {/* Reading History tab */}
          <TabsContent value="reading">
            <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-4">
              Reading History
            </h2>
            
            {progressLoading ? (
              <div className="space-y-4">
                {Array.from({ length: 3 }).map((_, i) => (
                  <Skeleton key={i} className="h-20" />
                ))}
              </div>
            ) : readingProgress?.length ? (
              <div className="space-y-3">
                {/* This would display the user's reading progress */}
                <p>Reading progress would appear here</p>
              </div>
            ) : (
              <Card className="bg-cream dark:bg-dark-surface">
                <CardContent className="text-center py-12">
                  <Clock className="h-12 w-12 mx-auto mb-4 text-navy/40 dark:text-cream/40" />
                  <h3 className="text-lg font-medium mb-2">No reading history</h3>
                  <p className="text-navy/70 dark:text-cream/70 mb-6">
                    Your reading progress will be saved here
                  </p>
                  <Link href="/explore">
                    <Button>Start Reading</Button>
                  </Link>
                </CardContent>
              </Card>
            )}
          </TabsContent>

          {/* Likes tab */}
          <TabsContent value="likes">
            <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-4">
              Your Liked Works
            </h2>
            
            <Card className="bg-cream dark:bg-dark-surface">
              <CardContent className="text-center py-12">
                <Heart className="h-12 w-12 mx-auto mb-4 text-navy/40 dark:text-cream/40" />
                <h3 className="text-lg font-medium mb-2">No liked works yet</h3>
                <p className="text-navy/70 dark:text-cream/70 mb-6">
                  Show your appreciation for authors and translators
                </p>
                <Link href="/explore">
                  <Button>Explore Works</Button>
                </Link>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </PageLayout>
  );
}
