import { Button } from "antd";
import { Card, Tabs } from "antd";
import React, { useEffect, useState } from "react";
import { API_Instance } from "@/api/axios.instance";
import API_Constants from "@/constants/api.constants";
import { useParams, useNavigate } from "react-router-dom";
import OverviewTab from "./performancePageTab/OverviewTab";
import TestResultsTab from "./performancePageTab/ResultsScoresTab";
import { ArrowLeft, Mail, Phone, BookOpen, Activity, Search } from "lucide-react";

interface IStudentInfo {
  name: string;
  email: string;
  phone: string;
  examName: string;
  examId: string;
}



const StudentPerformanceReport: React.FC = () => {
  const { studentId } = useParams<{ studentId: string }>();
  const navigate = useNavigate();

  const [activeTab, setActiveTab] = useState("overview");
  const [studentInfo, setStudentInfo] = useState<IStudentInfo | null>(null);
  const [subjects, setSubjects] = useState<{ id: string; subjectName: string }[]>([]);

  // Fetch student info once
  useEffect(() => {
    if (!studentId) return;
    const fetchStudentInfo = async () => {
      try {
        const res = await API_Instance.get(`${API_Constants.reports}/students/${studentId}/performance`, {
          params: { page: 1, limit: 1 },
        });
        if (res.data.student) {
          setStudentInfo(res.data.student);
        }
      } catch {
        console.error("Failed to fetch student info");
      }
    };
    fetchStudentInfo();
  }, [studentId]);

  useEffect(() => {
    const fetchSubjects = async () => {
      try {
        const res = await API_Instance.get("/subjects");
        setSubjects(res.data?.data || []);
      } catch {
        console.error("Failed to fetch subjects");
      }
    };
    fetchSubjects();
  }, []);

  return (
    <div className="flex flex-col h-full">
      <div className="bg-gray-50 border-b border-slate-200 px-4 pt-6 pb-0">
        <div className="flex items-center gap-4 mb-4">
          <Button
            type="text"
            icon={<ArrowLeft size={22} />}
            onClick={() => navigate(-1)}
            className="!w-12 !h-12 rounded-full bg-white shadow-sm border border-slate-200 text-slate-600 p-0 hover:bg-slate-50 hover:text-blue-600 hover:border-blue-200 transition-all shrink-0"
            title="Back"
            classNames={{ icon: "flex items-center justify-center" }}
          />
          <div>
            <h2 className="text-2xl font-bold text-slate-800">Student Performance</h2>
            <p className="text-slate-500 text-sm mt-0.5">
              Access test results, score history, and visual performance insights.
            </p>
          </div>
        </div>

        {studentInfo && (
          <Card className="shadow-sm border border-slate-200 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/20 mb-4">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
              <div>
                <p className="text-xs text-slate-400 font-semibold uppercase tracking-wider">Student Name</p>
                <p className="text-lg font-bold text-slate-800 mt-1">{studentInfo.name}</p>
              </div>
              <div>
                <p className="text-xs text-slate-400 font-semibold uppercase tracking-wider">Email Address</p>
                <div className="flex items-center gap-1 text-slate-600 mt-1.5 text-sm">
                  <Mail size={14} className="text-slate-400" />
                  <span>{studentInfo.email}</span>
                </div>
              </div>
              <div>
                <p className="text-xs text-slate-400 font-semibold uppercase tracking-wider">Phone Number</p>
                <div className="flex items-center gap-1 text-slate-600 mt-1.5 text-sm">
                  <Phone size={14} className="text-slate-400" />
                  <span>{studentInfo.phone}</span>
                </div>
              </div>
              <div>
                <p className="text-xs text-slate-400 font-semibold uppercase tracking-wider">Enrolled Exam</p>
                <div className="flex items-center gap-1 text-slate-600 mt-1.5 text-sm">
                  <BookOpen size={14} className="text-slate-400" />
                  <span className="font-semibold text-blue-700">{studentInfo.examName}</span>
                </div>
              </div>
            </div>
          </Card>
        )}

        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          size="large"
          className="student-perf-tabs"
          renderTabBar={(props, DefaultTabBar) => (
            <DefaultTabBar {...props} />
          )}
          items={[
            {
              key: "overview",
              label: (
                <span className="flex items-center gap-2 font-semibold">
                  <Activity size={16} />
                  Overview
                </span>
              ),
            },
            {
              key: "result",
              label: (
                <span className="flex items-center gap-2 font-semibold">
                  <Search size={16} />
                  Result & Scores
                </span>
              ),
            },
          ]}
        />
      </div>

      <div className="flex-1 px-4 py-6">
        {studentId && activeTab === "overview" && (
          <OverviewTab
            studentId={studentId}
            enrolledExamId={studentInfo?.examId}
            enrolledExamName={studentInfo?.examName}
          />
        )}
        {studentId && activeTab === "result" && (
          <TestResultsTab
            studentId={studentId}
            subjects={subjects}
            onStudentInfoLoaded={(info) => {
              if (!studentInfo) setStudentInfo(info);
            }}
          />
        )}
      </div>
    </div>
  );
};

export default StudentPerformanceReport;