import React, { memo, useEffect, useState } from "react";
import { FileText, HelpCircle, BookOpen, Award, Search } from "lucide-react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import { API_Instance } from "@/api/axios.instance";
import API_Constants from "@/constants/api.constants";
import { Spin, Empty, Card, List, Tag } from "antd";

const StatCard = memo(({ title, value, icon: Icon, color, subtext }: any) => (
  <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 flex flex-col hover:shadow-md transition-shadow">
    <div className="flex items-start justify-between">
      <div>
        <p className="text-sm text-gray-500 font-medium">{title}</p>
        <h3 className="text-3xl font-bold text-gray-900 mt-1">{value}</h3>
      </div>
      <span className={`p-3 rounded-xl ${color} bg-opacity-10`}>
        <Icon className={`w-6 h-6 ${color.replace("bg-", "text-")}`} />
      </span>
    </div>
    {subtext && <p className="mt-2 text-gray-600 text-sm">{subtext}</p>}
  </div>
));

const ChartCard = memo(({ title, icon: Icon, subtitle, children }: any) => (
  <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 h-full">
    <div className="flex justify-between items-center mb-6">
      <h3 className="text-lg font-bold flex items-center text-gray-900">
        <Icon className="w-5 h-5 mr-2 text-brand-blue" /> {title}
      </h3>
      {subtitle && (
        <span className="text-sm text-gray-400 font-medium">{subtitle}</span>
      )}
    </div>
    <div className="h-72">{children}</div>
  </div>
));

const StaffDashboardPage: React.FC = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [stats, setStats] = useState<any>(null);

  const getData = async () => {
    try {
      setIsLoading(true);
      const res = await API_Instance.get(`${API_Constants.dashboard}/staff`);
      setStats(res.data.data);
    } catch (error) {
      console.log(error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  if (isLoading || !stats) {
    return (
      <div className="h-[80vh] flex flex-col gap-4 items-center justify-center">
        <Spin />
        <p className="text-slate-500 font-medium animate-pulse">
          Loading your dashboard...
        </p>
      </div>
    );
  }

  const { counts, assigned, questionsBySubject } = stats;

  const formattedSubjects =
    questionsBySubject?.map((item: any) => ({
      subject: item.subjectName,
      questions: item.count,
    })) || [];

  return (
    <div className="mx-auto p-6 space-y-8 animate-in fade-in duration-500">
      <header className="flex flex-col gap-1">
        <h2 className="text-2xl font-bold text-gray-900">Staff Dashboard</h2>
        <p className="text-gray-500 font-medium">
          Overview of your assigned tasks and contributions.
        </p>
      </header>

      {/* Stats Cards */}
      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <StatCard
          title="Total Questions"
          value={counts.totalQuestions?.toLocaleString() || 0}
          icon={HelpCircle}
          color="bg-teal-500"
          subtext="Total available in your institution"
        />
        <StatCard
          title="Total Tests"
          value={counts.totalTests?.toLocaleString() || 0}
          icon={FileText}
          color="bg-indigo-500"
          subtext="Total tests in your institution"
        />

        <StatCard
          title="My Questions"
          value={counts.myQuestions.toLocaleString()}
          icon={HelpCircle}
          color="bg-blue-600"
          subtext="Questions created by you"
        />
        <StatCard
          title="My Tests"
          value={counts.myTests.toLocaleString()}
          icon={FileText}
          color="bg-emerald-500"
          subtext="Tests created by you"
        />

        <StatCard
          title="Assigned Subjects"
          value={assigned?.subjects?.length || 0}
          icon={BookOpen}
          color="bg-purple-600"
        />
        {/* <StatCard
          title="Assigned Exams"
          value={assigned?.exams?.length || 0}
          icon={Award}
          color="bg-orange-500"
        /> */}
      </section>

      <section className="grid grid-cols-1 lg:grid-cols-3 gap-8 h-full">
        <div className="lg:col-span-1 flex flex-col gap-6">
          <Card
            title={
              <span className="font-bold flex items-center gap-2">
                <BookOpen className="w-4 h-4" /> Assigned Subjects
              </span>
            }
            className="shadow-sm border-gray-100"
            bordered={false}
          >
            {assigned?.subjects?.length > 0 ? (
              <div className="flex flex-wrap gap-2">
                {assigned.subjects.map((sub: any) => (
                  <Tag
                    key={sub.id}
                    color="blue"
                    className="px-3 py-1 text-sm rounded-full"
                  >
                    {sub.subjectName}
                  </Tag>
                ))}
              </div>
            ) : (
              <Empty
                description="No subjects assigned"
                image={Empty.PRESENTED_IMAGE_SIMPLE}
              />
            )}
          </Card>

          {/* <Card
            title={
              <span className="font-bold flex items-center gap-2">
                <Award className="w-4 h-4" /> Assigned Exams
              </span>
            }
            className="shadow-sm border-gray-100"
            bordered={false}
          >
            {assigned?.exams?.length > 0 ? (
              <div className="flex flex-wrap gap-2">
                {assigned.exams.map((exam: any) => (
                  <Tag
                    key={exam.id}
                    color="purple"
                    className="px-3 py-1 text-sm rounded-full"
                  >
                    {exam.examName}
                  </Tag>
                ))}
              </div>
            ) : (
              <Empty
                description="No exams assigned"
                image={Empty.PRESENTED_IMAGE_SIMPLE}
              />
            )}
          </Card> */}
        </div>

        {/* Chart Column */}
        <div className="lg:col-span-2">
          <ChartCard
            title="Questions by Subject"
            icon={Search}
            subtitle="Your Contributions"
          >
            {formattedSubjects.length > 0 ? (
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={formattedSubjects} layout="vertical">
                  <CartesianGrid
                    strokeDasharray="3 3"
                    horizontal={false}
                    stroke="#f1f5f9"
                  />
                  <XAxis type="number" hide />
                  <YAxis
                    dataKey="subject"
                    type="category"
                    axisLine={false}
                    tickLine={false}
                    width={120}
                    tick={{ fill: "#475569", fontSize: 12, fontWeight: 500 }}
                  />
                  <Tooltip
                    cursor={{ fill: "#f8fafc" }}
                    contentStyle={{
                      borderRadius: "12px",
                      border: "none",
                      boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
                    }}
                  />
                  <Bar
                    dataKey="questions"
                    fill="#3b82f6"
                    radius={[0, 4, 4, 0]}
                    barSize={24}
                  />
                </BarChart>
              </ResponsiveContainer>
            ) : (
              <div className="h-full flex items-center justify-center">
                <Empty description="No question data available" />
              </div>
            )}
          </ChartCard>
        </div>
      </section>
    </div>
  );
};

export default memo(StaffDashboardPage);