import { useEffect, useState } from "react";
import {
  Tabs,
  TabsTrigger,
  TabsList,
  TabsContent,
} from "../../components/ui/tabs";
import { useAuthStore } from "../../stores/authStore";
import { CheckCircle, Search } from "lucide-react";
import { api } from "../../utils/api";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import type { PracticeSheet } from "../../types/sheet";
import { formatStatus } from "../../lib/utils";

export const Home = () => {
  const user = useAuthStore((state) => state.user);

  // const logout = useAuthStore((state) => state.logout);
  // const navigate = useNavigate();

  const [practiceSheets, setPracticeSheets] = useState<PracticeSheet[]>([]);
  const [notStartedSheets, setNotStartedSheets] = useState<PracticeSheet[]>([]);
  const [inProgressSheets, setInProgressSheets] = useState<PracticeSheet[]>([]);
  const [completedSheets, setCompletedSheets] = useState<PracticeSheet[]>([]);

  useEffect(() => {
    const sortPracticeSheets = (sheets: PracticeSheet[]) => {
      const notStarted = sheets.filter(
        (sheet) => sheet.user_status === "NOT_STARTED",
      );
      const inProgress = sheets.filter(
        (sheet) => sheet.user_status === "in-progress",
      );
      const completed = sheets.filter(
        (sheet) => sheet.user_status === "completed",
      );

      setNotStartedSheets(notStarted);
      setInProgressSheets(inProgress);
      setCompletedSheets(completed);
    };

    const fetchPracticeSheets = async () => {
      if (!user) return;

      try {
        const authStorage = localStorage.getItem("auth-storage");
        if (!authStorage) {
          console.error("authStorage not found in local storage");
          return;
        }
        const {
          state: { token },
        } = JSON.parse(authStorage);
        if (!token) {
          console.error("Token not found in authStorage");
          return;
        }
        const sheets = await api.getPracticeSheets(token, 1, 10);
        setPracticeSheets(sheets.data);
        console.log("All Practice Sheets: ", sheets.data);
        sortPracticeSheets(sheets.data);
      } catch (error) {
        console.error("Error fetching practice sheets:", error);
      }
    };

    fetchPracticeSheets();
  }, [user]);

  return (
    <div className="min-h-screen bg-gray-50">
      <main className="flex flex-col gap-12 max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
          Welcome, {user?.name || "Student"}
        </h1>
        <section className="relative w-full">
          <input
            type="text"
            placeholder="Search..."
            className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <Search size={22} color="gray" />
          </div>
        </section>
        <section className="space-y-4">
          <h1 className="font-satoshi-bold text-2xl tracking-tight">
            Pick up where you left off
          </h1>
        </section>
        <section className="w-full">
          <Tabs defaultValue="all" className="w-full ">
            <TabsList className="bg-transparent p-0 w-full">
              <TabsTrigger
                value="all"
                className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
              >
                All
              </TabsTrigger>
              <TabsTrigger
                value="NOT_STARTED"
                className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
              >
                Not Started
              </TabsTrigger>
              <TabsTrigger
                value="COMPLETED"
                className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
              >
                Completed
              </TabsTrigger>
            </TabsList>
            <TabsContent value="all">
              <div className="space-y-6">
                {practiceSheets.length > 0 ? (
                  practiceSheets.map((sheet) => (
                    <Card key={sheet?.id}>
                      <CardHeader>
                        <CardTitle className="font-satoshi-medium text-xl">
                          {sheet?.title}
                        </CardTitle>
                        <CardDescription className="font-satoshi">
                          {sheet?.description}
                        </CardDescription>
                      </CardHeader>
                      <CardContent className="flex justify-between">
                        <p className="font-satoshi text-gray-500">
                          {formatStatus(sheet?.user_status)}
                        </p>
                        <Badge
                          variant="secondary"
                          className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
                        >
                          {sheet?.modules_count} modules
                        </Badge>
                      </CardContent>
                      <CardContent>
                        <p className="font-satoshi text-gray-700">
                          {sheet?.time_limit} minutes
                        </p>
                      </CardContent>
                      <CardFooter>
                        <Button
                          variant="outline"
                          className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
                        >
                          Start
                        </Button>
                      </CardFooter>
                    </Card>
                  ))
                ) : (
                  <div className="flex items-center justify-center py-4 rounded-full">
                    <h2 className="text-center font-satoshi text-lg text-gray-500">
                      No Practice Sheets available.
                    </h2>
                  </div>
                )}
              </div>
            </TabsContent>
            <TabsContent value="NOT_STARTED">
              <div className="space-y-6">
                {notStartedSheets.map((sheet) => (
                  <Card key={sheet?.id}>
                    <CardHeader>
                      <CardTitle className="font-satoshi-medium text-xl">
                        {sheet?.title}
                      </CardTitle>
                      <CardDescription className="font-satoshi">
                        {sheet?.description}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="flex justify-between">
                      <p className="font-satoshi text-gray-700">Not Started</p>
                      <Badge
                        variant="secondary"
                        className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide  "
                      >
                        {sheet?.modules_count} modules
                      </Badge>
                    </CardContent>
                    <CardContent>
                      <p className="font-satoshi text-gray-700">
                        {sheet?.time_limit} minutes
                      </p>
                    </CardContent>
                    <CardFooter>
                      <Button
                        variant="outline"
                        className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
                      >
                        Start
                      </Button>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            </TabsContent>
            <TabsContent value="COMPLETED">
              {completedSheets.length > 0 ? (
                completedSheets.map((sheet) => (
                  <Card key={sheet?.id}>
                    <CardHeader>
                      <CardTitle className="font-satoshi-medium text-xl">
                        {sheet?.title}
                      </CardTitle>
                      <CardDescription className="font-satoshi">
                        {sheet?.description}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="flex justify-between">
                      <p className="font-satoshi text-gray-500">
                        {formatStatus(sheet?.user_status)}
                      </p>
                      <Badge
                        variant="secondary"
                        className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
                      >
                        {sheet?.modules_count} modules
                      </Badge>
                    </CardContent>
                    <CardContent>
                      <p className="font-satoshi text-gray-700">
                        {sheet?.time_limit} minutes
                      </p>
                    </CardContent>
                    <CardFooter>
                      <Button
                        variant="outline"
                        className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
                      >
                        Start
                      </Button>
                    </CardFooter>
                  </Card>
                ))
              ) : (
                <div className="flex items-center justify-center py-4 rounded-full">
                  <h2 className="text-center font-satoshi text-lg text-gray-500">
                    You have not completed any practice sheets.
                  </h2>
                </div>
              )}
            </TabsContent>
          </Tabs>
        </section>
        <section className="w-full space-y-4"></section>
        <section className="space-y-4">
          <h1 className="font-satoshi-bold text-2xl tracking-tight">
            SAT Preparation Tips
          </h1>
          <section className="space-y-4">
            <div className="flex items-center gap-2">
              <CheckCircle size={24} color="#AD45FF" />
              <p className="font-satoshi text-lg">
                Practice regularly with official SAT materials
              </p>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle size={24} color="#AD45FF" />
              <p className="font-satoshi text-lg">
                Review your mistakes and learn from them
              </p>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle size={24} color="#AD45FF" />
              <p className="font-satoshi text-lg">Focus on your weak areas</p>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle size={24} color="#AD45FF" />
              <p className="font-satoshi text-lg">
                Take full-length practice tests
              </p>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle size={24} color="#AD45FF" />
              <p className="font-satoshi text-lg">
                Get plenty of rest before the test day
              </p>
            </div>
          </section>
        </section>
      </main>
    </div>
  );
};