import {
  BookOpen,
  Clock,
  DraftingCompass,
  Loader2,
  Target,
  Trophy,
  Zap,
} from "lucide-react";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import { Button } from "../../components/ui/button";
import { useNavigate } from "react-router-dom";
import { useExamConfigStore } from "../../stores/useExamConfigStore";

export const Practice = () => {
  const navigate = useNavigate();

  const userXp = useExamConfigStore.getState().userXp;
  return (
    <div className="px-8 py-8 space-y-4">
      <header className="flex justify-between items-center ">
        <div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl">
          <BookOpen size={20} color="white" />
        </div>
        <div className="bg-purple-100 rounded-full w-fit py-2 px-4 flex items-center gap-2">
          <div className="h-2 w-2 bg-linear-to-br from-purple-400 to-purple-500 rounded-full"></div>
          <span className="font-satoshi-bold text-md">{userXp}</span>
        </div>
      </header>
      <section>
        <Card
          className="relative bg-linear-to-br from-purple-500 to-purple-600 rounded-4xl
        flex-row"
        >
          <div className="space-y-4">
            <CardHeader className="w-[65%] md:w-full">
              <CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
                See where you stand
              </CardTitle>
            </CardHeader>

            <CardContent className="w-2/3 md:w-full">
              <p className="font-satoshi text-white">
                Test your knowledge with an adaptive practice test.
              </p>
            </CardContent>
            <CardFooter>
              <Button className="bg-gray-50 drop-shadow-xl p-6 text-md font-satoshi text-black rounded-full">
                Take a practice test
              </Button>
            </CardFooter>
          </div>
          <div className="overflow-hidden opacity-30 -rotate-45 absolute -top-10 -right-20">
            <DraftingCompass size={300} color="white" />
          </div>
        </Card>
      </section>
      <section className="flex flex-col gap-6">
        <h1 className="font-satoshi-black text-2xl">Practice your way</h1>
        <div className="md:grid md:grid-cols-2 md:gap-6 space-y-6 md:space-y-0">
          <Card
            onClick={() => navigate("/student/practice/targeted-practice")}
            className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1"
          >
            <CardHeader className="space-y-3">
              <div className="w-fit bg-linear-to-br from-red-400 to-red-500 p-3 rounded-2xl">
                <Target size={20} color="white" />
              </div>
              <div className="space-y-2">
                <CardTitle className="font-satoshi">
                  Targeted Practice
                </CardTitle>
                <CardDescription className="font-satoshi">
                  Focus on what matters
                </CardDescription>
              </div>
              <CardAction>
                <div className="w-fit bg-red-100 p-2 rounded-full">
                  <Loader2 size={30} color="#fa6969" />
                </div>
              </CardAction>
            </CardHeader>
          </Card>
          <Card
            onClick={() => navigate("/student/practice/drills")}
            className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1"
          >
            <CardHeader className="space-y-3">
              <div className="w-fit bg-linear-to-br from-cyan-400 to-cyan-500 p-3 rounded-2xl">
                <Zap size={20} color="white" />
              </div>
              <div className="space-y-2">
                <CardTitle className="font-satoshi">Drills</CardTitle>
                <CardDescription className="font-satoshi">
                  Train speed and accuracy
                </CardDescription>
              </div>
              <CardAction>
                <div className="w-fit bg-cyan-100 p-3 rounded-full">
                  <Clock size={26} color="oklch(71.5% 0.143 215.221)" />
                </div>
              </CardAction>
            </CardHeader>
          </Card>
          <Card
            onClick={() => navigate("/student/practice/hard-test-modules")}
            className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1"
          >
            <CardHeader className="space-y-3">
              <div className="w-fit bg-linear-to-br from-lime-400 to-lime-500 p-3 rounded-2xl">
                <Trophy size={20} color="white" />
              </div>
              <div className="space-y-2">
                <CardTitle className="font-satoshi">
                  Hard Test Modules
                </CardTitle>
                <CardDescription className="font-satoshi">
                  Focus on what matters
                </CardDescription>
              </div>
              <CardAction>
                <div className="w-fit bg-lime-100 p-3 rounded-full">
                  <BookOpen size={26} color="oklch(76.8% 0.233 130.85)" />
                </div>
              </CardAction>
            </CardHeader>
          </Card>
        </div>
      </section>
    </div>
  );
};