import {
  DecimalsArrowRight,
  Languages,
  Percent,
  Pilcrow,
  Superscript,
  WholeWord,
} from "lucide-react";
import { Card, CardContent } from "../../../components/ui/card";
import { useState } from "react";
import { useAuthStore } from "../../../stores/authStore";
import { useNavigate } from "react-router-dom";
import { useExamConfigStore } from "../../../stores/useExamConfigStore";

type Module = "EBRW" | "MATH" | null;

export const HardTestModules = () => {
  const user = useAuthStore((state) => state.user);
  const navigate = useNavigate();
  const [selected, setSelected] = useState<Module>(null);

  const { setMode, storeDuration, setSection } = useExamConfigStore();

  function handleStartModule() {
    if (!user) return;

    (setMode("MODULE"), storeDuration(7), setSection(selected));

    navigate(`/student/practice/${selected}/test`, { replace: true });
  }
  return (
    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
      <header className="space-y-2">
        <h1 className="font-satoshi-bold text-3xl">Hard Test Modules</h1>
        <p className="font-satoshi text-md text-gray-500">
          Tackle hard practice test modules by selecting a section.
        </p>
      </header>
      <section className="space-y-6">
        <Card
          onClick={() =>
            setSelected((prev) => (prev === "EBRW" ? null : "EBRW"))
          }
          className={`relative cursor-pointer overflow-hidden transition
    ${
      selected === "EBRW"
        ? "ring-2 ring-blue-500 scale-[1.02]"
        : "hover:scale-[1.01]"
    }
    bg-linear-to-br from-blue-400 to-blue-600
  `}
        >
          <CardContent className="z-10 flex items-center justify-center py-16 ">
            <h1 className="font-satoshi-bold text-2xl text-blue-50">
              Reading & Writing
            </h1>
          </CardContent>
          <Languages
            size={250}
            className="absolute -top-5 -right-10 -rotate-23 text-white opacity-30"
          />
          <WholeWord
            size={150}
            className="absolute -top-10 -left-3 rotate-23 text-white opacity-30"
          />
          <Pilcrow
            size={150}
            className="absolute -bottom-12 left-8 -rotate-23 text-white opacity-30"
          />
        </Card>
        <Card
          onClick={() =>
            setSelected((prev) => (prev === "MATH" ? null : "MATH"))
          }
          className={`relative cursor-pointer overflow-hidden transition
    ${
      selected === "MATH"
        ? "ring-2 ring-rose-500 scale-[1.02]"
        : "hover:scale-[1.01]"
    }
    bg-linear-to-br from-rose-400 to-rose-600
  `}
        >
          <CardContent className="z-10 flex items-center justify-center py-16 ">
            <h1 className="font-satoshi-bold text-2xl text-blue-50">
              Mathematics
            </h1>
          </CardContent>
          <DecimalsArrowRight
            size={250}
            className="absolute -top-5 -right-10 -rotate-23 text-white opacity-30"
          />
          <Superscript
            size={150}
            className="absolute -top-10 -left-3 rotate-23 text-white opacity-30"
          />
          <Percent
            size={120}
            className="absolute -bottom-5 left-8 -rotate-10 text-white opacity-30"
          />
        </Card>
      </section>
      {selected && (
        <div className=" bottom-6 left-0 right-0 flex justify-center z-50">
          <button
            onClick={() => {
              handleStartModule();
            }}
            className="rounded-2xl px-10 py-4 font-satoshi-bold text-lg
        bg-linear-to-br from-purple-500 to-purple-600 text-white
        shadow-xl animate-in slide-in-from-bottom-4"
          >
            Start Test
          </button>
        </div>
      )}
    </main>
  );
};