"use client";

import React, { useState, useEffect } from "react";
import IconStar from "../../components/Icon/IconStar";
import IconCalendar from "../../components/Icon/IconCalendar";
import IconUsers from "../../components/Icon/IconUsers";
import IconSearch from "../../components/Icon/IconSearch";
import IconUser from "../../components/Icon/IconUser"; // Add default user icon
import api from "../../api/axios";
import config from '../../config';
import {
  SkeletonCard,
  SkeletonList,
  SkeletonTable,
} from "../../components/Skeleton/Skeleton";

interface AcademicProps {
  selectedMonth: Date;
}

export default function Academic({ selectedMonth }: AcademicProps) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);
  const [searchTerm, setSearchTerm] = useState("");

  useEffect(() => {
    fetchDashboardData();
  }, [selectedMonth, searchTerm]);

  const fetchDashboardData = async () => {
    setLoading(true);
    setError(null);
    try {
      const year = selectedMonth.getFullYear();
      const month = selectedMonth.getMonth() + 1;

      const response = await api.get("/dashboard/academic", {
        params: {
          year,
          month,
          search: searchTerm
        },
      });

      if (response.data.success) {
        setData(response.data.data);
      } else {
        setError("Failed to fetch dashboard data");
      }
    } catch (err: any) {
      setError(err.response?.data?.message || "Error loading dashboard");
      console.error("Dashboard fetch error:", err);
    } finally {
      setLoading(false);
    }
  };

  const getStatusStyle = (status: string) => {
    switch (status?.toLowerCase()) {
      case "scheduled":
        return "bg-yellow-100 text-yellow-700";
      case "ongoing":
        return "bg-blue-100 text-blue-700";
      case "completed":
        return "bg-emerald-100 text-emerald-700";
      default:
        return "bg-gray-100 text-gray-600";
    }
  };

  // Helper function to get the full image URL
  const getImageUrl = (imagePath: string | null | undefined): string | null => {
    if (!imagePath) return null;

    // If it's already a full URL (http/https), return as is
    if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
      return imagePath;
    }

    // Get base storage URL from config
    const storageBaseUrl = config.storageUrl || '';

    // If it's a relative path, prepend storage URL
    return `${storageBaseUrl}/${imagePath.replace(/^\//, '')}`;
  };

  const renderStars = (rating: number) => {
    return [1, 2, 3, 4, 5].map((star) => (
      <IconStar
        key={star}
        className={`text-sm ${
          star <= rating
            ? "text-yellow-400 fill-yellow-400"
            : "text-gray-300 fill-gray-300"
        }`}
      />
    ));
  };

  if (error) {
    return (
      <div className="flex items-center justify-center p-8">
        <div className="text-center">
          <p className="text-red-500 mb-2">⚠️ {error}</p>
          <button
            onClick={fetchDashboardData}
            className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {/* Batch Capacity & Reviews */}
      <div className="grid grid-cols-12 gap-3">
        {/* Classroom Capacity */}
        <div className="col-span-6 bg-white rounded-lg p-6 shadow-sm border border-gray-100">
          {loading ? (
            <div className="space-y-4 animate-pulse">
              <div className="h-6 bg-gray-200 rounded w-1/2"></div>
              <div className="h-4 bg-gray-200 rounded w-3/4"></div>
              <div className="h-32 bg-gray-200 rounded"></div>
            </div>
          ) : (
            <>
              <div className="flex flex-col mb-4">
                <h3 className="text-lg font-semibold">Classroom Capacity Logs</h3>
                <span className="text-xs text-gray-400 font-medium">
                  Batch availability sizes & active enrollment averages
                </span>
              </div>
              <div className="space-y-5">
                <div>
                  <div className="flex justify-between text-sm mb-2">
                    <span className="font-medium">ACTIVE BATCH CAPACITY</span>
                    <div className="flex items-center gap-2">
                      <span className="font-bold">
                        {data?.batch_capacity?.total_students || 0} / {data?.batch_capacity?.total_capacity || 0} SEATS
                      </span>
                      {/* {data?.batch_capacity?.growth !== undefined && (
                        <span className={`text-xs px-2 py-0.5 rounded-full ${
                          data.batch_capacity.growth >= 0
                            ? 'bg-green-100 text-green-600'
                            : 'bg-red-100 text-red-600'
                        }`}>
                          {data.batch_capacity.growth >= 0 ? '+' : ''}{data.batch_capacity.growth}%
                        </span>
                      )} */}
                    </div>
                  </div>
                  <div className="w-full h-2 rounded-full bg-pink-100 overflow-hidden">
                    <div
                      className="h-full bg-pink-500 rounded-full transition-all duration-500"
                      style={{ width: `${data?.batch_capacity?.percentage || 0}%` }}
                    />
                  </div>
                </div>
                <div className="bg-white border rounded-lg p-4 h-[220px] overflow-y-auto">
                  <div className="flex justify-between items-center mb-3">
                    <h3 className="text-sm font-semibold text-gray-700">
                      BATCH STUDENT COUNT
                    </h3>
                  </div>
                  <div className="space-y-2">
                    {data?.batch_capacity?.batch_student_counts?.length > 0 ? (
                      data.batch_capacity.batch_student_counts.map((item: any, i: number) => (
                        <div
                          key={i}
                          className="flex justify-between items-center border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 hover:bg-gray-100 transition"
                        >
                          <div className="flex-1">
                            <span className="text-sm font-medium text-gray-700">
                              {item.batch_name}
                            </span>
                            <div className="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                              <div
                                className="bg-blue-500 h-1.5 rounded-full"
                                style={{ width: `${item.percentage}%` }}
                              />
                            </div>
                          </div>
                          <span className="text-sm font-bold text-primary ml-3">
                            {item.students}/{item.capacity}
                          </span>
                        </div>
                      ))
                    ) : (
                      <p className="text-center text-gray-500 py-4">No active batches</p>
                    )}
                  </div>
                </div>
              </div>
            </>
          )}
        </div>

        {/* Cohort Satisfaction & Reviews */}
        <div className="col-span-6 bg-white rounded-lg p-6 shadow-sm border border-gray-100">
          {loading ? (
            <SkeletonList count={5} />
          ) : (
            <>
              <div className="flex justify-between mb-6">
                <div>
                  <h3 className="text-lg font-semibold">
                    Cohort Satisfaction & Reviews
                  </h3>
                  <span className="text-xs text-gray-400 font-medium">
                    Scrollable ledger representing fresh customer-student reviews
                  </span>
                </div>
                <div>
                  <span className="text-xs text-yellow-500 bg-amber-100 px-2 py-1 font-bold rounded-full">
                    Verified Ratings Index
                  </span>
                </div>
              </div>
              <div className="space-y-4 overflow-y-auto max-h-[260px]">
                {data?.batch_reviews?.length > 0 ? (
                  data.batch_reviews.map((item: any, i: number) => (
                    <div
                      key={i}
                      className="rounded-lg bg-gray-50 p-4 border hover:shadow-sm transition"
                    >
                      <div className="flex justify-between items-start">
                        <div>
                          <h4 className="font-semibold">{item.batch_name}</h4>
                          <p className="text-xs text-gray-400 uppercase tracking-wide">
                            {item.course} • {item.total_reviews} reviews
                          </p>
                        </div>
                        <div className="flex gap-1">
                          {renderStars(Math.floor(item.rating))}
                        </div>
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="text-center text-gray-500 py-4">No reviews available</p>
                )}
              </div>
            </>
          )}
        </div>
      </div>

      {/* Trainer & Instructor Registry */}
      <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-100">
        <div className="flex justify-between mb-2">
          <div>
            <h3 className="text-lg font-semibold">
              Trainer & Instructor Registry
            </h3>
            <span className="text-xs text-gray-400 font-medium">
              Monitors employee score, active student guidance load
            </span>
          </div>
          <div className="flex gap-2">
            <div className="relative">
              <input
                type="text"
                placeholder="Search staff..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="text-xs border border-gray-300 rounded-full px-3 py-1.5 pl-8 focus:outline-none focus:border-primary"
              />
              <IconSearch className="absolute left-2.5 top-1/3 -translate-y-1/2 text-gray-400 w-3.5 h-3.5" />
            </div>
            <span className="text-xs bg-pink-100 text-pink-600 px-4 py-2 rounded-full font-semibold">
              {data?.total_staff || 0} ACTIVE INSTRUCTORS
            </span>
          </div>
        </div>

        {loading ? (
          <div className="grid grid-cols-3 gap-4">
            {[...Array(6)].map((_, i) => (
              <SkeletonCard key={i} />
            ))}
          </div>
        ) : (
          <div className="max-h-[500px] overflow-y-auto p-2">
            <div className="grid grid-cols-3 gap-4">
              {data?.staff_list?.length > 0 ? (
                data.staff_list.map((staff: any, i: number) => {
                  const initials = staff.name
                    .split(" ")
                    .map((n: string) => n[0])
                    .join("")
                    .toUpperCase();

                  const imageUrl = getImageUrl(staff.image);

                  return (
                    <div
                      key={i}
                      className="border border-gray-100 rounded-xl p-2 bg-white shadow-sm hover:shadow-md transition"
                    >
                      <div className="flex justify-between items-start mb-2">
                        <div className="flex gap-4">
                          {/* Staff Image or Initials */}
                          {imageUrl ? (
                            <img
                              src={imageUrl}
                              alt={staff.name}
                              className="w-12 h-12 rounded-lg object-cover"
                              onError={(e) => {
                                // If image fails to load, show initials instead
                                const target = e.target as HTMLImageElement;
                                target.style.display = 'none';
                                target.parentElement?.querySelector('.fallback-initials')?.classList.remove('hidden');
                              }}
                            />
                          ) : null}
                          <div className={`w-12 h-12 rounded-lg bg-gradient-to-br from-pink-500 to-rose-500 text-white flex items-center justify-center font-bold ${imageUrl ? 'hidden fallback-initials' : ''}`}>
                            {initials}
                          </div>
                          <div>
                            <h4 className="font-bold text-lg">{staff.name}</h4>
                            <span className="text-xs text-gray-400 uppercase">
                              {staff.role}
                            </span>
                          </div>
                        </div>
                        <div className="bg-gray-100 rounded-full px-3 py-1 text-sm font-medium flex justify-center gap-1">
                          <IconStar className="text-xs text-yellow-400 fill-yellow-400" />
                          {staff.rating}
                        </div>
                      </div>
                      <span className="mt-2 text-lg font-semibold">Batches & Students</span>
                      <div className="mt-3 px-2 py-1 grid grid-cols-2 gap-2">
                        <div className="flex flex-col items-center bg-gray-100 p-2 rounded-lg">
                          <span className="text-red-500 font-bold text-xl">
                            {staff.active_batches}
                          </span>
                          <span className="text-gray-400 font-semibold text-xs">
                            Active Batch
                          </span>
                        </div>
                        <div className="flex flex-col items-center bg-gray-100 p-2 rounded-lg">
                          <span className="text-emerald-500 font-bold text-xl">
                            {staff.completed_batches}
                          </span>
                          <span className="text-gray-400 font-semibold text-xs">
                            Completed Batch
                          </span>
                        </div>
                        <div className="flex flex-col items-center bg-gray-100 p-2 rounded-lg">
                          <span className="text-indigo-500 font-bold text-xl">
                            {staff.active_students}
                          </span>
                          <span className="text-gray-400 font-semibold text-xs">
                            Active Students
                          </span>
                        </div>
                        <div className="flex flex-col items-center bg-gray-100 p-2 rounded-lg">
                          <span className="text-emerald-500 font-bold text-xl">
                            {staff.completed_students}
                          </span>
                          <span className="text-gray-400 font-semibold text-xs">
                            Completed Students
                          </span>
                        </div>
                      </div>
                    </div>
                  );
                })
              ) : (
                <div className="col-span-3 text-center py-8 text-gray-500">
                  No staff members found
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* Academic Batches Index */}
      <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-100">
        <div className="flex justify-between mb-4">
          <div>
            <h3 className="text-lg font-semibold">Academic Batches Index</h3>
            <span className="text-xs text-gray-400 font-medium">
              Directory of courses currently active and scheduled
            </span>
          </div>
          <span className="text-xs text-gray-400 font-semibold">
            SHOWING {data?.total_batches || 0} TOTAL BATCHES
          </span>
        </div>

        {loading ? (
          <div className="grid grid-cols-3 gap-5">
            {[...Array(6)].map((_, i) => (
              <SkeletonCard key={i} />
            ))}
          </div>
        ) : (
          <div className="max-h-[250px] overflow-y-auto pr-2">
            <div className="grid grid-cols-3 gap-5">
              {data?.batches?.length > 0 ? (
                data.batches.map((batch: any, index: number) => (
                  <div
                    key={index}
                    className="rounded-lg border border-gray-200 bg-gray-100 p-5 shadow-sm hover:shadow-md transition"
                  >
                    <div className="flex justify-between mb-4">
                      <span className="text-xs font-bold bg-gray-100 px-3 py-1 rounded-full">
                        {batch.batch_code}
                      </span>
                      <span
                        className={`text-[10px] font-bold px-3 py-1 rounded-full uppercase ${getStatusStyle(
                          batch.status
                        )}`}
                      >
                        {batch.status}
                      </span>
                    </div>
                    <h4 className="font-bold text-lg mb-1">{batch.name}</h4>
                    <span className="text-sm text-gray-400 mb-4">
                      {batch.course} • {batch.room}
                    </span>
                    <hr className="my-2" />
                    <div className="flex flex-col gap-2 text-xs text-gray-500">
                      <span className="flex items-center justify-start gap-2">
                        <IconCalendar /> {batch.start_date} - {batch.end_date}
                      </span>
                      <span className="flex items-center justify-start gap-2">
                        <IconUsers /> Capacity: {batch.students_count}/{batch.capacity} students
                        <span className="text-xs text-gray-400">
                          ({batch.occupancy_rate}%)
                        </span>
                      </span>
                    </div>
                  </div>
                ))
              ) : (
                <div className="col-span-3 text-center py-8 text-gray-500">
                  No batches found
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}