'use client';
import Breadcrumb from '@/components/ui/pages/dashboard/Breadcrumb';
import Container from '@/components/ui/pages/dashboard/common/Container';
import React, { useMemo, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { BiHomeSmile } from 'react-icons/bi';
import { useSidebar } from '@/components/contexts/SidebarContext';
import { useGetStudentTimetable, useGetSchoolSettings } from '@/lib/api/student/queryHooks';
import { TimetableSlot } from '@/lib/api/student/functions';
import { useTranslate } from '@/components/hooks/useTranslate';

export default function TimetablePage() {
  const { collapsed } = useSidebar();
  const translate = useTranslate();
  const router = useRouter();

  // Fetch school settings to check for feature access
  const { data: schoolSettings, isLoading: isLoadingSettings } =
    useGetSchoolSettings();

  // Check feature permission and redirect if disabled
  useEffect(() => {
    // Skip check while loading
    if (isLoadingSettings || !schoolSettings?.data) return;

    const enabledFeatures = schoolSettings.data.features || {};

    const isFeatureEnabled = (featureName: string) => {
      if (!enabledFeatures || Object.keys(enabledFeatures).length === 0) {
        return true;
      }
      return Object.values(enabledFeatures).some(
        (feature) =>
          typeof feature === 'string' &&
          feature.toLowerCase() === featureName.toLowerCase()
      );
    };

    if (!isFeatureEnabled('Timetable Management')) {
      router.push('/student/dashboard');
    }
  }, [schoolSettings, isLoadingSettings, router]);

  // Fetch timetable data from API
  const {
    data: timetableResponse,
    isLoading,
    error,
  } = useGetStudentTimetable();

  // Helper function to assign random colors to slots for visual variety
  // Each slot gets a different random color for a vibrant timetable
  const getSlotColor = (dayIndex: number, slotIndex: number): string => {
    // Available colors for all slots (vibrant palette)
    const colors = [
      'bg-orange-100',
      'bg-green-100',
      'bg-blue-100',
      'bg-pink-100',
      'bg-purple-100',
      'bg-yellow-100',
      'bg-indigo-100',
      'bg-rose-100',
      'bg-cyan-100',
      'bg-teal-100',
      'bg-lime-100',
      'bg-amber-100',
    ];

    // Use a combination of day and slot index to create varied colors
    // This ensures different slots get different colors
    const colorIndex = (dayIndex * 3 + slotIndex * 2) % colors.length;
    return colors[colorIndex];
  };

  // Organize timetable data by day
  const organizedDays = useMemo(() => {
    if (!timetableResponse?.data) {
      return [];
    }

    // Define day order for consistent display
    const dayOrder = [
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday',
    ];

    // Group slots by day
    const slotsByDay: Record<string, TimetableSlot[]> = {};

    timetableResponse.data.forEach((slot) => {
      if (!slotsByDay[slot.day]) {
        slotsByDay[slot.day] = [];
      }
      slotsByDay[slot.day].push(slot);
    });

    // Create organized day structure
    return dayOrder.map((dayName, dayIndex) => {
      const daySlots = slotsByDay[dayName] || [];

      // Transform API slots to UI format with colors
      const slots = daySlots.map((slot, slotIndex) => {
        // Build teacher name
        const teacherName =
          slot.teacher_first_name || slot.teacher_last_name
            ? `${slot.teacher_first_name} ${slot.teacher_last_name}`.trim()
            : '';

        // Format subject display
        const subjectDisplay = slot.subject
          ? `(${slot.subject.name_with_type})`
          : slot.note || '';

        // Format time for display
        const timeDisplay = `${slot.start_time} - ${slot.end_time}`;

        return {
          time: timeDisplay,
          subject: subjectDisplay,
          teacher: teacherName,
          // Assign random varied colors based on position
          color: getSlotColor(dayIndex, slotIndex),
        };
      });

      return {
        name: dayName,
        slots:
          slots.length > 0
            ? slots
            : [
                {
                  time: '-',
                  subject: '',
                  teacher: '',
                  color: 'bg-gray-100',
                },
              ],
      };
    });
  }, [timetableResponse]);

  // Use organized days for display (no fallback - API data only)
  const days = organizedDays;

  // Helper function to translate day names
  const getDayTranslation = (dayName: string): string => {
    const dayMap: Record<string, string> = {
      Monday: translate('mondayFull'),
      Tuesday: translate('tuesdayFull'),
      Wednesday: translate('wednesdayFull'),
      Thursday: translate('thursdayFull'),
      Friday: translate('fridayFull'),
      Saturday: translate('saturdayFull'),
      Sunday: translate('sundayFull'),
    };
    return dayMap[dayName] || dayName;
  };

  const breadcrumbItems = [
    {
      label: translate('home'),
      href: '/student/dashboard',
      icon: <BiHomeSmile className="w-5 h-5" />,
    },
    {
      label: translate('timetable'),
    },
  ];

  return (
    <Container collapsed={collapsed}>
      <Breadcrumb title={translate('timetable')} items={breadcrumbItems} />

      <div className="bg-white border border-gray-200 rounded-[16px] p-4 overflow-hidden">
        {/* Loading State */}
        {isLoading && (
          <div className="flex items-center justify-center py-12">
            <div className="text-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--primary-color)] mx-auto mb-4"></div>
              <p className="text-gray-600">{translate('loadingTimetable')}</p>
            </div>
          </div>
        )}

        {/* Error State */}
        {error && (
          <div className="flex items-center justify-center py-12">
            <div className="text-center">
              <p className="text-red-600 mb-2">
                {translate('failedToLoadTimetable')}
              </p>
              <p className="text-gray-500 text-sm">
                {error instanceof Error
                  ? error.message
                  : translate('pleaseTryAgainLater')}
              </p>
            </div>
          </div>
        )}

        {/* Empty State - No timetable data */}
        {!isLoading && !error && days.length === 0 && (
          <div className="flex items-center justify-center py-12">
            <div className="text-center">
              <p className="text-gray-600 mb-2">
                {translate('noTimetableAvailable')}
              </p>
              <p className="text-gray-500 text-sm">
                {translate('timetableWillAppearHere')}
              </p>
            </div>
          </div>
        )}

        {/* Timetable Content */}
        {!isLoading && !error && days.length > 0 && (
          <>
            {/* Desktop Layout - 7 column grid */}
            <div className="hidden xl:grid grid-cols-7 border border-gray-200 rounded-[16px] overflow-hidden">
              {days.map((day, dayIndex) => (
                <div
                  key={dayIndex}
                  className="flex flex-col border-r border-gray-200 last:border-r-0"
                >
                  <div className="bg-[var(--light-primary-color)] p-4 mb-3 border-b border-gray-200">
                    <h2 className="text-gray-500 font-medium text-center">
                      {getDayTranslation(day.name)}
                    </h2>
                  </div>

                  {day.slots.map((slot, slotIndex) => (
                    <div
                      key={slotIndex}
                      className={`${
                        slot.color
                      } rounded-lg p-3 mb-3 border-l-2 mx-3 ${
                        slot.color === 'bg-orange-100'
                          ? 'border-orange-400'
                          : slot.color === 'bg-green-100'
                          ? 'border-green-400'
                          : slot.color === 'bg-cyan-100'
                          ? 'border-cyan-400'
                          : slot.color === 'bg-pink-100'
                          ? 'border-pink-400'
                          : slot.color === 'bg-blue-100'
                          ? 'border-blue-400'
                          : slot.color === 'bg-purple-100'
                          ? 'border-purple-400'
                          : slot.color === 'bg-yellow-100'
                          ? 'border-yellow-400'
                          : slot.color === 'bg-indigo-100'
                          ? 'border-indigo-400'
                          : slot.color === 'bg-rose-100'
                          ? 'border-rose-400'
                          : slot.color === 'bg-teal-100'
                          ? 'border-teal-400'
                          : slot.color === 'bg-lime-100'
                          ? 'border-lime-400'
                          : slot.color === 'bg-amber-100'
                          ? 'border-amber-400'
                          : slot.color === 'bg-gray-100'
                          ? 'border-gray-400'
                          : 'border-gray-200'
                      } ${
                        // Add minimum height for empty slots (when time is '-' and no subject)
                        slot.time === '-' && !slot.subject
                          ? 'min-h-[100px]'
                          : ''
                      }`}
                    >
                      <div className="text-xs font-semibold text-gray-700 mb-1">
                        {slot.time}
                      </div>
                      {slot.subject && (
                        <>
                          <div className="text-xs text-gray-600 mb-1">
                            {slot.subject}
                          </div>
                          {slot.teacher && (
                            <div className="text-xs text-gray-800 font-medium">
                              {slot.teacher}
                            </div>
                          )}
                        </>
                      )}
                    </div>
                  ))}
                </div>
              ))}
            </div>

            {/* Mobile Layout - Horizontal scrollable cards */}
            <div className="xl:hidden">
              <div className="flex gap-4 overflow-x-auto pb-4 snap-x snap-mandatory">
                {days.map((day, dayIndex) => (
                  <div
                    key={dayIndex}
                    className="flex-shrink-0 w-80 snap-start bg-white border border-gray-200 rounded-[16px] overflow-hidden"
                  >
                    {/* Day Header */}
                    <div className="bg-[var(--light-primary-color)] p-4 border-b border-gray-200">
                      <h2 className="text-gray-500 font-medium text-center text-lg">
                        {getDayTranslation(day.name)}
                      </h2>
                    </div>

                    {/* Day Slots */}
                    <div className="p-4 space-y-3">
                      {day.slots.map((slot, slotIndex) => (
                        <div
                          key={slotIndex}
                          className={`${slot.color} rounded-lg p-4 border-l-4 ${
                            slot.color === 'bg-orange-100'
                              ? 'border-orange-400'
                              : slot.color === 'bg-green-100'
                              ? 'border-green-400'
                              : slot.color === 'bg-cyan-100'
                              ? 'border-cyan-400'
                              : slot.color === 'bg-pink-100'
                              ? 'border-pink-400'
                              : slot.color === 'bg-blue-100'
                              ? 'border-blue-400'
                              : slot.color === 'bg-purple-100'
                              ? 'border-purple-400'
                              : slot.color === 'bg-yellow-100'
                              ? 'border-yellow-400'
                              : slot.color === 'bg-indigo-100'
                              ? 'border-indigo-400'
                              : slot.color === 'bg-rose-100'
                              ? 'border-rose-400'
                              : slot.color === 'bg-teal-100'
                              ? 'border-teal-400'
                              : slot.color === 'bg-lime-100'
                              ? 'border-lime-400'
                              : slot.color === 'bg-amber-100'
                              ? 'border-amber-400'
                              : slot.color === 'bg-gray-100'
                              ? 'border-gray-400'
                              : 'border-gray-200'
                          } ${
                            // Add minimum height for empty slots (when time is '-' and no subject)
                            slot.time === '-' && !slot.subject
                              ? 'min-h-[120px]'
                              : ''
                          }`}
                        >
                          <div className="text-sm font-semibold text-gray-700 mb-2">
                            {slot.time}
                          </div>
                          {slot.subject && (
                            <>
                              <div className="text-sm text-gray-600 mb-2 leading-relaxed">
                                {slot.subject}
                              </div>
                              {slot.teacher && (
                                <div className="text-sm text-gray-800 font-medium">
                                  {slot.teacher}
                                </div>
                              )}
                            </>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </div>
    </Container>
  );
}