'use client';

import React, { useState, useEffect } from 'react';
import { apiRequest } from '@/lib/api';
import { getMediaUrl } from '@/lib/media';
import {
  BookOpen,
  Plus,
  ChevronRight,
  ChevronDown,
  Edit3,
  Trash2,
  Video,
  FileText,
  Layers,
  Sparkles,
  Clock,
  Euro,
  FolderPlus
} from 'lucide-react';
import CreateCourseModal, { CourseItem } from '@/components/admin/CreateCourseModal';
import CreateLessonModal, { LessonItem } from '@/components/admin/CreateLessonModal';
import ConfirmDeleteModal from '@/components/admin/ConfirmDeleteModal';
import { toast } from '@/context/ToastContext';

export default function AdminCoursesPage() {
  const [courses, setCourses] = useState<CourseItem[]>([]);
  const [lessons, setLessons] = useState<LessonItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [expandedCourseIds, setExpandedCourseIds] = useState<string[]>([]);

  // Modal states
  const [showCourseModal, setShowCourseModal] = useState(false);
  const [editingCourse, setEditingCourse] = useState<CourseItem | null>(null);

  const [showLessonModal, setShowLessonModal] = useState(false);
  const [editingLesson, setEditingLesson] = useState<LessonItem | null>(null);
  const [preselectedCourseId, setPreselectedCourseId] = useState<string>('');

  const fetchData = async () => {
    setLoading(true);
    const [coursesRes, lessonsRes] = await Promise.all([
      apiRequest('/courses'),
      apiRequest('/lessons'),
    ]);

    if (coursesRes.success && coursesRes.courses) {
      setCourses(coursesRes.courses);
    }
    if (lessonsRes.success && lessonsRes.lessons) {
      setLessons(lessonsRes.lessons);
    }
    setLoading(false);
  };

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

  const toggleExpand = (id: string) => {
    setExpandedCourseIds((prev) =>
      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
    );
  };

  const openCreateCourseModal = () => {
    setEditingCourse(null);
    setShowCourseModal(true);
  };

  const openEditCourseModal = (course: CourseItem) => {
    setEditingCourse(course);
    setShowCourseModal(true);
  };

  const openCreateLessonModal = (courseId?: string) => {
    setEditingLesson(null);
    setPreselectedCourseId(courseId || '');
    setShowLessonModal(true);
  };

  const openEditLessonModal = (lesson: LessonItem) => {
    setEditingLesson(lesson);
    setShowLessonModal(true);
  };

  // Delete Confirmation Modal state
  const [deleteTarget, setDeleteTarget] = useState<{
    type: 'course' | 'lesson';
    id: string;
    name?: string;
  } | null>(null);
  const [deleting, setDeleting] = useState(false);

  const requestDeleteCourse = (id: string) => {
    const found = courses.find((c) => c._id === id);
    setDeleteTarget({
      type: 'course',
      id,
      name: found ? `"${found.title}"` : 'this course',
    });
  };

  const requestDeleteLesson = (id: string) => {
    const found = lessons.find((l) => l._id === id);
    setDeleteTarget({
      type: 'lesson',
      id,
      name: found ? `"${found.title}"` : 'this lesson',
    });
  };

  const handleConfirmDelete = async () => {
    if (!deleteTarget) return;
    setDeleting(true);

    if (deleteTarget.type === 'course') {
      const res = await apiRequest(`/courses/${deleteTarget.id}`, { method: 'DELETE' });
      setDeleting(false);
      if (res.success) {
        toast.success('Course deleted successfully');
        setDeleteTarget(null);
        fetchData();
      } else {
        toast.error(res.error || 'Failed to delete course');
      }
    } else {
      const res = await apiRequest(`/lessons/${deleteTarget.id}`, { method: 'DELETE' });
      setDeleting(false);
      if (res.success) {
        toast.success('Lesson deleted successfully');
        setDeleteTarget(null);
        fetchData();
      } else {
        toast.error(res.error || 'Failed to delete lesson');
      }
    }
  };

  const majorCourses = courses.filter((c) => !c.parentCourse || c.courseType === 'full_level');
  const [selectedMajorId, setSelectedMajorId] = useState<string>('');

  const activeMajorCourse = majorCourses.find((m) => m._id === selectedMajorId);
  const getSubCourses = (majorId: string) => courses.filter((c) => {
    const parentId = typeof c.parentCourse === 'object' ? (c.parentCourse as any)?._id : c.parentCourse;
    return String(parentId) === String(majorId);
  });

  const getCourseLessons = (courseId: string) => {
    return lessons.filter((l) => {
      const cId = typeof l.course === 'object' ? (l.course as any)?._id : l.course;
      return String(cId) === String(courseId);
    });
  };

  return (
    <div className="space-y-8 max-w-7xl mx-auto">
      {/* Header & Main Create Course Action */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight flex items-center gap-3">
            <span>Course Management</span>
          </h1>
        </div>

        <button
          onClick={openCreateCourseModal}
          className="px-4 py-2 bg-[#FECE00] hover:bg-[#e5b800] text-black text-sm font-medium rounded-lg shadow-sm transition-colors flex items-center gap-2 cursor-pointer self-start md:self-auto"
        >
          <FolderPlus className="w-4 h-4 text-black" />
          <span>Create Course</span>
        </button>
      </div>

      {/* Catalog Dropdown Explorer */}
      <div className="bg-white rounded-2xl border border-gray-200 shadow-xs overflow-hidden">
        <div className="p-6 border-b border-gray-200 bg-gray-50/50 flex items-center justify-between">
          <div className="flex items-center gap-2 text-sm font-bold text-gray-800">
            <Layers className="w-4 h-4 text-amber-600" />
            <span>Courses</span>
          </div>
          <span className="text-xs text-gray-500 font-medium">
            {courses.length} Courses Total ({majorCourses.length} Main Courses)
          </span>
        </div>

        {loading ? (
          <div className="p-12 text-center text-gray-500 text-sm font-semibold">
            Loading course directory...
          </div>
        ) : majorCourses.length === 0 ? (
          <div className="p-12 text-center text-gray-500 text-sm">
            No courses configured. Click "Create Course" above to begin.
          </div>
        ) : (
          <div className="p-6">
            <CourseHierarchyExplorerCard
              majorCourses={majorCourses}
              selectedMajorId={selectedMajorId}
              onSelectMajorId={setSelectedMajorId}
              major={activeMajorCourse}
              subCourses={activeMajorCourse ? getSubCourses(activeMajorCourse._id) : []}
              directLessons={activeMajorCourse ? getCourseLessons(activeMajorCourse._id) : []}
              getCourseLessons={getCourseLessons}
              openCreateLessonModal={openCreateLessonModal}
              openEditCourseModal={openEditCourseModal}
              handleDeleteCourse={requestDeleteCourse}
              openEditLessonModal={openEditLessonModal}
              handleDeleteLesson={requestDeleteLesson}
            />
          </div>
        )}
      </div>

      {/* Standalone Create/Edit Course Modal Component */}
      <CreateCourseModal
        isOpen={showCourseModal}
        onClose={() => setShowCourseModal(false)}
        onSuccess={fetchData}
        editingCourse={editingCourse}
        allCourses={courses}
      />

      {/* Standalone Create/Edit Lesson Modal Component */}
      <CreateLessonModal
        isOpen={showLessonModal}
        onClose={() => setShowLessonModal(false)}
        onSuccess={fetchData}
        editingLesson={editingLesson}
        courses={courses}
        preselectedCourseId={preselectedCourseId}
      />

      {/* Confirm Delete Modal */}
      <ConfirmDeleteModal
        isOpen={Boolean(deleteTarget)}
        onClose={() => setDeleteTarget(null)}
        onConfirm={handleConfirmDelete}
        loading={deleting}
        title={deleteTarget?.type === 'course' ? 'Delete Course' : 'Delete Lesson'}
        description={`Are you sure you want to delete ${deleteTarget?.name}? This action cannot be undone and will permanently remove this ${deleteTarget?.type}.`}
      />
    </div>
  );
}

interface CourseHierarchyExplorerCardProps {
  majorCourses: CourseItem[];
  selectedMajorId: string;
  onSelectMajorId: (id: string) => void;
  major?: CourseItem;
  subCourses: CourseItem[];
  directLessons: LessonItem[];
  getCourseLessons: (courseId: string) => LessonItem[];
  openCreateLessonModal: (courseId?: string) => void;
  openEditCourseModal: (course: CourseItem) => void;
  handleDeleteCourse: (id: string) => void;
  openEditLessonModal: (lesson: LessonItem) => void;
  handleDeleteLesson: (id: string) => void;
}

function CourseHierarchyExplorerCard({
  majorCourses,
  selectedMajorId,
  onSelectMajorId,
  major,
  subCourses,
  directLessons,
  getCourseLessons,
  openCreateLessonModal,
  openEditCourseModal,
  handleDeleteCourse,
  openEditLessonModal,
  handleDeleteLesson,
}: CourseHierarchyExplorerCardProps) {
  const [activeCourseId, setActiveCourseId] = useState<string>('');
  const [activeSubCourseId, setActiveSubCourseId] = useState<string>('');

  const toggleCourseView = (id: string) => {
    if (activeCourseId === id) {
      setActiveCourseId('');
      setActiveSubCourseId('');
    } else {
      setActiveCourseId(id);
      setActiveSubCourseId('');
    }
  };

  return (
    <div className="space-y-6">
      {/* Header Info Banner */}
      {/* <div className="p-4 rounded-xl bg-amber-50 border border-amber-200 text-amber-950 text-xs font-bold flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Sparkles className="w-4 h-4 text-amber-600 shrink-0" />
          <span>All Main Courses (parentCourse is null). Click "View Sub-courses & Lessons" on any course to explore modules and video lessons.</span>
        </div>
        <span className="px-2.5 py-0.5 rounded-full bg-amber-200/80 text-amber-900 font-extrabold text-[11px]">
          {majorCourses.length} Main Courses
        </span>
      </div> */}

      {/* Main Courses Card Grid / List */}
      <div className="space-y-4">
        {majorCourses.map((mCourse) => {
          const courseSubs = subCourses.length > 0 && selectedMajorId === mCourse._id
            ? subCourses
            : majorCourses.filter(() => false); // calculate dynamically per course

          // Get sub-courses for this specific main course
          const thisSubCourses = subCourses.length > 0 && selectedMajorId === mCourse._id
            ? subCourses
            : []; // Will be fetched via prop or getter

          const isSelected = activeCourseId === mCourse._id;

          return (
            <MainCourseCardItem
              key={mCourse._id}
              mCourse={mCourse}
              isSelected={isSelected}
              onToggleView={() => {
                onSelectMajorId(mCourse._id);
                toggleCourseView(mCourse._id);
              }}
              subCourses={isSelected ? subCourses : []}
              directLessons={isSelected ? directLessons : []}
              getCourseLessons={getCourseLessons}
              openCreateLessonModal={openCreateLessonModal}
              openEditCourseModal={openEditCourseModal}
              handleDeleteCourse={handleDeleteCourse}
              openEditLessonModal={openEditLessonModal}
              handleDeleteLesson={handleDeleteLesson}
              activeSubCourseId={activeSubCourseId}
              setActiveSubCourseId={setActiveSubCourseId}
            />
          );
        })}
      </div>
    </div>
  );
}

interface MainCourseCardItemProps {
  mCourse: CourseItem;
  isSelected: boolean;
  onToggleView: () => void;
  subCourses: CourseItem[];
  directLessons: LessonItem[];
  getCourseLessons: (courseId: string) => LessonItem[];
  openCreateLessonModal: (courseId?: string) => void;
  openEditCourseModal: (course: CourseItem) => void;
  handleDeleteCourse: (id: string) => void;
  openEditLessonModal: (lesson: LessonItem) => void;
  handleDeleteLesson: (id: string) => void;
  activeSubCourseId: string;
  setActiveSubCourseId: (id: string) => void;
}

function MainCourseCardItem({
  mCourse,
  isSelected,
  onToggleView,
  subCourses,
  directLessons,
  getCourseLessons,
  openCreateLessonModal,
  openEditCourseModal,
  handleDeleteCourse,
  openEditLessonModal,
  handleDeleteLesson,
  activeSubCourseId,
  setActiveSubCourseId,
}: MainCourseCardItemProps) {
  const activeSubCourse = subCourses.find((s) => s._id === activeSubCourseId);
  const activeLessons = activeSubCourseId
    ? getCourseLessons(activeSubCourseId)
    : directLessons;

  return (
    <div className="bg-white rounded-xl border border-gray-200/90 shadow-xs overflow-hidden transition-all duration-200 hover:border-amber-300">
      {/* Main Course Header Row - Compact Height */}
      <div className="py-3 px-4 sm:px-5 flex flex-wrap items-center justify-between gap-3 bg-white">
        <div className="flex items-center gap-3 flex-1 min-w-[240px]">
          <div className="w-8 h-8 rounded-xl bg-[#FECE00] text-black font-black flex items-center justify-center shrink-0 shadow-2xs">
            <BookOpen className="w-4 h-4" />
          </div>

          <div className="flex flex-wrap items-center gap-2">
            {/* {mCourse.level ? (
              <span className="px-2.5 py-0.5 rounded-md bg-black text-[#FECE00] text-[10px] font-black uppercase tracking-wider">
                Level {mCourse.level}
              </span>
            ) : (
              <span className="px-2.5 py-0.5 rounded-md bg-amber-100 text-amber-900 text-[10px] font-extrabold uppercase tracking-wider">
                Full Course Program
              </span>
            )} */}
            <h3 className="text-base font-extrabold text-gray-900">
              {mCourse.title}
            </h3>
          </div>
        </div>

        {/* Right Actions Bar */}
        <div className="flex items-center gap-2 shrink-0">
          <button
            type="button"
            onClick={onToggleView}
            className={`px-3.5 py-1.5 rounded-lg font-extrabold text-xs transition flex items-center gap-1.5 cursor-pointer ${isSelected
              ? 'bg-black text-[#FECE00]'
              : 'bg-[#FECE00] hover:bg-black text-black hover:text-[#FECE00]'
              }`}
          >
            <Layers className="w-3.5 h-3.5" />
            <span>{isSelected ? 'Hide Curriculum & Lessons' : 'View Modules & Lessons'}</span>
            <ChevronDown className={`w-3.5 h-3.5 transition-transform ${isSelected ? 'rotate-180' : ''}`} />
          </button>

          <button
            type="button"
            onClick={() => openEditCourseModal(mCourse)}
            className="p-1.5 rounded-lg border border-gray-200 text-gray-600 hover:text-black hover:bg-gray-100 transition cursor-pointer"
            title="Edit Course Program"
          >
            <Edit3 className="w-3.5 h-3.5" />
          </button>

          <button
            type="button"
            onClick={() => handleDeleteCourse(mCourse._id)}
            className="p-1.5 rounded-lg border border-red-200 text-red-600 hover:bg-red-50 transition cursor-pointer"
            title="Delete Course Program"
          >
            <Trash2 className="w-3.5 h-3.5" />
          </button>
        </div>
      </div>

      {/* Expandable Drawer: Modules & Lessons */}
      {isSelected && (
        <div className="border-t border-amber-100 bg-amber-50/20 p-5 sm:p-6 space-y-6 animate-fadeIn">

          {/* Modules Bar */}
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <h4 className="text-xs font-black uppercase tracking-wider text-amber-900 flex items-center gap-2">
                <Layers className="w-4 h-4 text-amber-600" />
                <span>Learning Modules & Chapters ({subCourses.length})</span>
              </h4>

              <button
                type="button"
                onClick={() => openCreateLessonModal(activeSubCourseId || mCourse._id)}
                className="px-3 py-1.5 rounded-xl bg-black hover:bg-[#FECE00] text-[#FECE00] hover:text-black text-xs font-bold transition flex items-center gap-1 shadow-2xs cursor-pointer"
              >
                <Plus className="w-3.5 h-3.5" />
                <span>Add Lesson</span>
              </button>
            </div>

            {subCourses.length === 0 ? (
              <div className="p-4 rounded-xl bg-white border border-dashed border-gray-300 text-xs text-gray-500 italic">
                No sub-course modules attached directly to this main course. Direct video lessons are listed below.
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                {subCourses.map((sub) => {
                  const isSubActive = activeSubCourseId === sub._id;
                  const subLessonCount = getCourseLessons(sub._id).length;

                  return (
                    <div
                      key={sub._id}
                      onClick={() => setActiveSubCourseId(isSubActive ? '' : sub._id)}
                      className={`p-4 rounded-xl border cursor-pointer transition flex flex-col justify-between space-y-3 ${isSubActive
                        ? 'bg-amber-100/80 border-amber-400 shadow-xs'
                        : 'bg-white border-amber-200/80 hover:border-amber-400'
                        }`}
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div>
                          <span className="text-[10px] font-black uppercase text-amber-700 block">
                            Module Unit
                          </span>
                          <h5 className="font-extrabold text-sm text-gray-900 mt-0.5">
                            {sub.title}
                          </h5>
                          <span className="text-xs font-semibold text-gray-500 block mt-1">
                            {subLessonCount} Video Lesson{subLessonCount !== 1 ? 's' : ''}
                          </span>
                        </div>

                        <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
                          <button
                            type="button"
                            onClick={() => openEditCourseModal(sub)}
                            className="p-1.5 text-gray-500 hover:text-black rounded-lg hover:bg-white transition"
                            title="Edit Sub-Course"
                          >
                            <Edit3 className="w-3.5 h-3.5" />
                          </button>
                          <button
                            type="button"
                            onClick={() => handleDeleteCourse(sub._id)}
                            className="p-1.5 text-red-500 hover:text-red-700 rounded-lg hover:bg-red-50 transition"
                            title="Delete Sub-Course"
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </div>

                      <div className="flex items-center justify-between text-xs font-bold pt-2 border-t border-amber-200/60">
                        <span className="text-gray-700">
                          {sub.offerPrice || sub.regularPrice ? `€${sub.offerPrice || sub.regularPrice}` : 'Free Module'}
                        </span>
                        <span className="text-amber-800 text-[11px] font-extrabold flex items-center gap-1">
                          <span>{isSubActive ? 'Selected' : 'View Lessons'}</span>
                          <ChevronRight className={`w-3.5 h-3.5 transition-transform ${isSubActive ? 'rotate-90' : ''}`} />
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>

          {/* Lessons Section */}
          <div className="space-y-3 pt-2">
            <div className="flex items-center justify-between">
              <h4 className="text-xs font-black uppercase tracking-wider text-gray-700 flex items-center gap-2">
                <Video className="w-4 h-4 text-amber-600" />
                <span>
                  {activeSubCourse
                    ? `Lessons in Sub-Course: "${activeSubCourse.title}"`
                    : `Direct Lessons in "${mCourse.title}"`}
                </span>
              </h4>

              <span className="text-xs font-bold text-gray-600 bg-white border border-gray-200 px-2.5 py-0.5 rounded-full">
                {activeLessons.length} Lessons
              </span>
            </div>

            {activeLessons.length === 0 ? (
              <div className="p-6 text-center bg-white rounded-xl border border-dashed border-gray-300 text-gray-500 text-xs space-y-2">
                <Video className="w-5 h-5 text-gray-400 mx-auto" />
                <p className="font-semibold">No video lessons uploaded yet for this selection.</p>
                <button
                  type="button"
                  onClick={() => openCreateLessonModal(activeSubCourseId || mCourse._id)}
                  className="px-3 py-1.5 rounded-lg bg-[#FECE00] text-black text-xs font-extrabold hover:bg-black hover:text-[#FECE00] transition inline-flex items-center gap-1 cursor-pointer"
                >
                  <Plus className="w-3.5 h-3.5" />
                  <span>Add First Lesson</span>
                </button>
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                {activeLessons.map((l) => (
                  <div
                    key={l._id}
                    className="p-4 rounded-xl bg-white border border-amber-200/80 shadow-2xs space-y-3"
                  >
                    <div className="flex items-start justify-between gap-2">
                      <h5 className="font-extrabold text-sm text-gray-900 line-clamp-2">
                        {l.title}
                      </h5>
                      <div className="flex items-center gap-1 shrink-0">
                        <button
                          type="button"
                          onClick={() => openEditLessonModal(l)}
                          className="p-1 text-gray-500 hover:text-black rounded-md hover:bg-gray-100 transition"
                          title="Edit Lesson"
                        >
                          <Edit3 className="w-3.5 h-3.5" />
                        </button>
                        <button
                          type="button"
                          onClick={() => handleDeleteLesson(l._id)}
                          className="p-1 text-red-500 hover:text-red-700 rounded-md hover:bg-red-50 transition"
                          title="Delete Lesson"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>

                    {l.videoReference && (
                      <video
                        controls
                        src={getMediaUrl(l.videoReference, 'videos')}
                        className="w-full h-24 rounded-lg bg-black object-contain border border-gray-100"
                      />
                    )}

                    <div className="flex items-center justify-between text-xs text-gray-600 pt-1 border-t border-gray-100">
                      <span className="flex items-center gap-1 text-gray-500 font-medium">
                        <Clock className="w-3.5 h-3.5 text-amber-600" />
                        {l.durationMinutes || 0} mins
                      </span>
                      {l.price ? (
                        <span className="font-extrabold text-emerald-800 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-200 text-[11px]">
                          €{l.price}
                        </span>
                      ) : (
                        <span className="font-bold text-gray-500 bg-gray-100 px-2 py-0.5 rounded-md text-[11px]">
                          Included
                        </span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

        </div>
      )}
    </div>
  );
}