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";
import { useNavigate } from "react-router-dom";
import { SearchOverlay } from "../../components/SearchOverlay";

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

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

  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");

  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);
        sortPracticeSheets(sheets.data);
      } catch (error) {
        console.error("Error fetching practice sheets:", error);
      }
    };

    fetchPracticeSheets();
  }, [user]);

  const handleStartPracticeSheet = (sheetId: string) => {
    navigate(`/student/practice/${sheetId}`);
  };

  return (
    <main className="min-h-screen bg-gray-50 space-y-6  mx-auto px-8 sm:px-6 lg:px-90 py-12">
      <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
        Welcome, {user?.name || "Student"}
      </h1>
      <h1 className="font-satoshi-bold text-2xl tracking-tight">
        What are you looking for?
      </h1>
      <section className="relative w-full">
        <input
          onFocus={() => setIsSearchOpen(true)}
          placeholder="Search practice sheets..."
          readOnly
          className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-2xl shadow-sm cursor-pointer"
        />
        <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>
        {inProgressSheets.length > 0 ? (
          inProgressSheets.map((sheet) => (
            <Card
              key={sheet?.id}
              className="rounded-4xl border bg-purple-50/70 border-purple-500"
            >
              <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-sm  border px-2 rounded-full bg-purple-500 text-white py-1">
                  {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
                  onClick={() => handleStartPracticeSheet(sheet?.id)}
                  variant="outline"
                  className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 text-white"
                >
                  Resume
                </Button>
              </CardFooter>
            </Card>
          ))
        ) : (
          <Card className="flex items-center justify-center py-4 rounded-4xl">
            <h2 className="text-center font-satoshi text-lg text-gray-800">
              You don't have any practice sheets in progress. Why not start one?
            </h2>
          </Card>
        )}
      </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-3 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
            >
              All
            </TabsTrigger>
            <TabsTrigger
              value="NOT_STARTED"
              className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
            >
              Not Started
            </TabsTrigger>
            <TabsTrigger
              value="COMPLETED"
              className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
            >
              Completed
            </TabsTrigger>
          </TabsList>
          <TabsContent value="all" className="pt-6">
            <div className="gap-6 flex flex-col md:grid md:grid-cols-2">
              {practiceSheets.length > 0 ? (
                practiceSheets.map((sheet) => (
                  <Card key={sheet?.id} className="rounded-4xl">
                    <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
                        onClick={() => handleStartPracticeSheet(sheet?.id)}
                        variant="outline"
                        className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-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" className="pt-6">
            <div className="gap-6 flex flex-col md:grid md:grid-cols-2">
              {notStartedSheets.map((sheet) => (
                <Card key={sheet?.id} className="rounded-4xl">
                  <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-linear-to-br from-purple-500 to-purple-600 rounded-3xl text-white"
                    >
                      Start
                    </Button>
                  </CardFooter>
                </Card>
              ))}
            </div>
          </TabsContent>
          <TabsContent value="COMPLETED" className="pt-6">
            <div className="gap-6 flex flex-col md:grid md:grid-cols-2">
              {completedSheets.length > 0 ? (
                completedSheets.map((sheet) => (
                  <Card key={sheet?.id} className="rounded-4xl">
                    <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-linear-to-br from-purple-500 to-purple-600 rounded-3xl 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>
              )}
            </div>
          </TabsContent>
        </Tabs>
      </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 gap-2">
            <CheckCircle size={24} color="#AD45FF" />
            <p className="font-satoshi text-md">
              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-md">
              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-md">Focus on your weak areas</p>
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle size={24} color="#AD45FF" />
            <p className="font-satoshi text-md">
              Take full-length practice tests
            </p>
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle size={24} color="#AD45FF" />
            <p className="font-satoshi text-md">
              Get plenty of rest before the test day
            </p>
          </div>
        </section>
      </section>
      {isSearchOpen && (
        <SearchOverlay
          sheets={practiceSheets}
          onClose={() => {
            setIsSearchOpen(false);
            setSearchQuery("");
          }}
          searchQuery={searchQuery}
          setSearchQuery={setSearchQuery}
        />
      )}
    </main>
  );
};