import React, { useEffect, useState } from "react";
import { Card, Row, Col, Typography, Tag, Spin } from "antd";
import { useParams, useNavigate } from "react-router-dom";
import {
  ArrowLeft,
  Hash,
  Layers,
  Globe,
  Clock,
  CheckCircle,
  User,
  Calendar,
} from "lucide-react";

import { API_Instance } from "../../api/axios.instance";
import API_Constants from "../../constants/api.constants";
import { getAxiosErrorMessage } from "@/utils/index.utils";
import toast from "react-hot-toast";
import QuestionCard from "@/components/shared/QuestionCard";
import dayjs from "dayjs";

const { Text } = Typography;

const InfoItem = ({
  icon: Icon,
  label,
  value,
  children,
}: {
  icon: any;
  label: string;
  value?: string | number | boolean;
  children?: React.ReactNode;
}) => (
  <div className="flex flex-col space-y-1">
    <div className="flex items-center text-xs font-medium text-gray-500 uppercase tracking-wide">
      <Icon className="w-3 h-3 mr-1.5" />
      {label}
    </div>
    <div className="text-sm font-semibold text-gray-900 break-words">
      {children || value || "-"}
    </div>
  </div>
);

export default function PracticeTestView() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [data, setData] = useState<any>();
  const [loading, setLoading] = useState(true);

  const fetchDetails = async () => {
    try {
      const res = await API_Instance.get(
        `${API_Constants.practiceTests}/${id}`
      );
      setData(res.data.data);
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDetails();
  }, [id]);

  if (loading)
    return (
      <div className="flex items-center justify-center h-screen">
        <Spin size="default" />
      </div>
    );

  const test = data;

  return (
    <div className="p-2 flex flex-col gap-2">
      <div className="flex justify-between items-center m-4">
        <h2 className="text-xl font-bold text-[#1677ff]">Test Details</h2>
        <div
          className="flex items-center gap-2 cursor-pointer"
          onClick={() => navigate(-1)}
        >
          <ArrowLeft size={18} /> <Text>Back</Text>
        </div>
      </div>
      <Card className="rounded-2xl shadow-xl border border-slate-200">
        {/* HEADER */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
          <div className="px-6 py-5 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
            <h1 className="text-xl font-bold text-gray-900">{test.title}</h1>
          </div>

          {/* INFO GRID */}
          <div className="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-y-6 gap-x-8">
            <InfoItem icon={Hash} label="Exam" value={test.exam} />

            <InfoItem
              icon={Layers}
              label="Sub-Category"
              value={test.subCategory}
            />

            <InfoItem icon={Globe} label="Language" value={test.language} />

            <InfoItem
              icon={Clock}
              label="Duration"
              value={`${test.duration} Min`}
            />

            <InfoItem icon={CheckCircle} label="Publish Status">
              <Tag color={test.publish ? "green" : "red"}>
                {test.publish ? "Published" : "Unpublished"}
              </Tag>
            </InfoItem>

            <InfoItem icon={User} label="Created By" value={test.createdBy} />

            <InfoItem
              icon={Calendar}
              label="Created At"
              value={dayjs(test.createdAt).format("DD MMM YYYY")}
            />
          </div>
        </div>

        {/* QUESTIONS HEADER */}
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-lg font-bold text-gray-900">
            Questions - {test.totalQuestions}
          </h2>
          <div className="text-md text-gray-500">Total Marks: {test.marks}</div>
        </div>

        {/* QUESTION LIST */}
        {test.questions.map((q: any, index: number) => (
          <QuestionCard key={q.id} index={index + 1} question={q} />
        ))}
      </Card>
    </div>
  );
}