"use client";

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useRouter, useParams } from "next/navigation";
import { PageHeader } from "@/components/shared/page-header";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { NativeSelect } from "@/components/ui/native-select";
import { LoadingPage, LoadingSpinner } from "@/components/ui/loading";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { coursesApi, Course, CourseModule, Lesson, QuizQuestion } from "@/lib/api-client";
import {
  ArrowLeft,
  Save,
  Send,
  Plus,
  GripVertical,
  BookOpen,
  Video,
  FileText,
  HelpCircle,
  Trash2,
  Edit,
  ChevronDown,
  ChevronRight,
} from "lucide-react";
import Link from "next/link";

const lessonTypeIcons: Record<string, React.ReactNode> = {
  video: <Video className="h-4 w-4" />,
  document: <FileText className="h-4 w-4" />,
  quiz: <HelpCircle className="h-4 w-4" />,
  scorm: <BookOpen className="h-4 w-4" />,
};

export default function CourseEditorPage() {
  const params = useParams();
  const id = params.id as string;
  const router = useRouter();
  const queryClient = useQueryClient();
  const [activeTab, setActiveTab] = useState("details");
  const [expandedModules, setExpandedModules] = useState<Set<string>>(new Set());
  const [moduleDialog, setModuleDialog] = useState<{ open: boolean; module?: CourseModule }>({
    open: false,
  });
  const [lessonDialog, setLessonDialog] = useState<{
    open: boolean;
    moduleId?: string;
    lesson?: Lesson;
  }>({ open: false });
  const [quizDialog, setQuizDialog] = useState<{ open: boolean; lessonId?: string }>({
    open: false,
  });

  // Form states
  const [moduleForm, setModuleForm] = useState({ title: "" });
  const [lessonForm, setLessonForm] = useState({
    title: "",
    type: "video" as Lesson["type"],
    content: "",
    videoUrl: "",
  });
  const [quizForm, setQuizForm] = useState<{
    questions: QuizQuestion[];
    passingScore: number;
  }>({
    questions: [],
    passingScore: 70,
  });

  const { data: course, isLoading } = useQuery({
    queryKey: ["course", id],
    queryFn: async () => {
      const response = await coursesApi.getOne(id);
      return response.data;
    },
  });

  const updateMutation = useMutation({
    mutationFn: (data: Partial<Course>) => coursesApi.update(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["course", id] });
    },
  });

  const publishMutation = useMutation({
    mutationFn: () => coursesApi.publish(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["course", id] });
    },
  });

  const toggleModule = (moduleId: string) => {
    setExpandedModules((prev) => {
      const next = new Set(prev);
      if (next.has(moduleId)) {
        next.delete(moduleId);
      } else {
        next.add(moduleId);
      }
      return next;
    });
  };

  if (isLoading) {
    return <LoadingPage />;
  }

  if (!course) {
    return (
      <div className="flex flex-col items-center justify-center py-12">
        <h2 className="text-xl font-semibold">Course not found</h2>
        <Link href="/courses">
          <Button variant="outline" className="mt-4">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Courses
          </Button>
        </Link>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title={course.title}
        description={`${course.status.charAt(0).toUpperCase() + course.status.slice(1)} course`}
      >
        <Link href="/courses">
          <Button variant="outline">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back
          </Button>
        </Link>
        {course.status === "draft" && (
          <Button onClick={() => publishMutation.mutate()} disabled={publishMutation.isPending}>
            {publishMutation.isPending ? (
              <LoadingSpinner size="sm" className="mr-2" />
            ) : (
              <Send className="mr-2 h-4 w-4" />
            )}
            Publish
          </Button>
        )}
      </PageHeader>

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="details">Details</TabsTrigger>
          <TabsTrigger value="content">Content</TabsTrigger>
        </TabsList>

        <TabsContent value="details" className="mt-6">
          <Card>
            <CardHeader>
              <CardTitle>Course Details</CardTitle>
            </CardHeader>
            <CardContent>
              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  const formData = new FormData(e.currentTarget);
                  updateMutation.mutate({
                    title: formData.get("title") as string,
                    description: formData.get("description") as string,
                    thumbnailUrl: formData.get("thumbnailUrl") as string,
                  });
                }}
                className="space-y-4"
              >
                <div>
                  <label className="text-sm font-medium">Title</label>
                  <Input name="title" defaultValue={course.title} required />
                </div>
                <div>
                  <label className="text-sm font-medium">Description</label>
                  <Textarea
                    name="description"
                    defaultValue={course.description}
                    className="min-h-[120px]"
                    required
                  />
                </div>
                <div>
                  <label className="text-sm font-medium">Thumbnail URL</label>
                  <Input name="thumbnailUrl" defaultValue={course.thumbnailUrl || ""} />
                </div>
                <Button type="submit" disabled={updateMutation.isPending}>
                  {updateMutation.isPending ? (
                    <LoadingSpinner size="sm" className="mr-2" />
                  ) : (
                    <Save className="mr-2 h-4 w-4" />
                  )}
                  Save Changes
                </Button>
              </form>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="content" className="mt-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Modules & Lessons</CardTitle>
              <Button onClick={() => setModuleDialog({ open: true })}>
                <Plus className="mr-2 h-4 w-4" />
                Add Module
              </Button>
            </CardHeader>
            <CardContent>
              {course.modules?.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                  <BookOpen className="h-12 w-12 mb-4 opacity-50" />
                  <p>No modules yet. Add your first module to get started.</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {course.modules?.map((module, index) => (
                    <div key={module.id} className="border rounded-lg">
                      {/* Module Header */}
                      <div
                        className="flex items-center gap-3 p-4 cursor-pointer hover:bg-muted/50"
                        onClick={() => toggleModule(module.id)}
                      >
                        <GripVertical className="h-5 w-5 text-muted-foreground cursor-grab" />
                        {expandedModules.has(module.id) ? (
                          <ChevronDown className="h-5 w-5" />
                        ) : (
                          <ChevronRight className="h-5 w-5" />
                        )}
                        <div className="flex-1">
                          <span className="font-medium">
                            Module {index + 1}: {module.title}
                          </span>
                          <span className="text-sm text-muted-foreground ml-2">
                            ({module.lessons?.length || 0} lessons)
                          </span>
                        </div>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            setLessonDialog({ open: true, moduleId: module.id });
                          }}
                        >
                          <Plus className="h-4 w-4 mr-1" />
                          Add Lesson
                        </Button>
                      </div>

                      {/* Lessons */}
                      {expandedModules.has(module.id) && (
                        <div className="border-t">
                          {module.lessons?.length === 0 ? (
                            <p className="text-sm text-muted-foreground p-4 text-center">
                              No lessons in this module
                            </p>
                          ) : (
                            <div className="divide-y">
                              {module.lessons?.map((lesson, lessonIndex) => (
                                <div
                                  key={lesson.id}
                                  className="flex items-center gap-3 p-4 pl-12 hover:bg-muted/50"
                                >
                                  <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
                                  <div className="flex items-center gap-2 text-muted-foreground">
                                    {lessonTypeIcons[lesson.type]}
                                  </div>
                                  <span className="flex-1 text-sm">
                                    {lessonIndex + 1}. {lesson.title}
                                  </span>
                                  <Badge variant="outline" className="text-xs">
                                    {lesson.type}
                                  </Badge>
                                  <Button variant="ghost" size="icon" className="h-8 w-8">
                                    <Edit className="h-4 w-4" />
                                  </Button>
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    className="h-8 w-8 text-destructive"
                                  >
                                    <Trash2 className="h-4 w-4" />
                                  </Button>
                                </div>
                              ))}
                            </div>
                          )}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* Add Module Dialog */}
      <Dialog open={moduleDialog.open} onOpenChange={(open) => setModuleDialog({ open })}>
        <DialogContent onClose={() => setModuleDialog({ open: false })}>
          <DialogHeader>
            <DialogTitle>Add Module</DialogTitle>
          </DialogHeader>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              // In production, this would call an API to add the module
              console.log("Adding module:", moduleForm);
              setModuleDialog({ open: false });
              setModuleForm({ title: "" });
            }}
            className="space-y-4"
          >
            <div>
              <label className="text-sm font-medium">Module Title</label>
              <Input
                value={moduleForm.title}
                onChange={(e) => setModuleForm({ ...moduleForm, title: e.target.value })}
                placeholder="e.g., Introduction to the Course"
                required
              />
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setModuleDialog({ open: false })}>
                Cancel
              </Button>
              <Button type="submit">Add Module</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Add Lesson Dialog */}
      <Dialog open={lessonDialog.open} onOpenChange={(open) => setLessonDialog({ open })}>
        <DialogContent onClose={() => setLessonDialog({ open: false })}>
          <DialogHeader>
            <DialogTitle>Add Lesson</DialogTitle>
          </DialogHeader>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              // In production, this would call an API to add the lesson
              console.log("Adding lesson:", lessonForm, "to module:", lessonDialog.moduleId);
              setLessonDialog({ open: false });
              setLessonForm({ title: "", type: "video", content: "", videoUrl: "" });
            }}
            className="space-y-4"
          >
            <div>
              <label className="text-sm font-medium">Lesson Title</label>
              <Input
                value={lessonForm.title}
                onChange={(e) => setLessonForm({ ...lessonForm, title: e.target.value })}
                placeholder="e.g., Understanding the Basics"
                required
              />
            </div>
            <div>
              <label className="text-sm font-medium">Type</label>
              <NativeSelect
                value={lessonForm.type}
                onChange={(e) =>
                  setLessonForm({ ...lessonForm, type: e.target.value as Lesson["type"] })
                }
                options={[
                  { value: "video", label: "Video" },
                  { value: "document", label: "Document" },
                  { value: "quiz", label: "Quiz" },
                  { value: "scorm", label: "SCORM Package" },
                ]}
              />
            </div>
            {lessonForm.type === "video" && (
              <div>
                <label className="text-sm font-medium">Video URL</label>
                <Input
                  value={lessonForm.videoUrl}
                  onChange={(e) => setLessonForm({ ...lessonForm, videoUrl: e.target.value })}
                  placeholder="https://example.com/video.mp4"
                />
              </div>
            )}
            {(lessonForm.type === "document" || lessonForm.type === "quiz") && (
              <div>
                <label className="text-sm font-medium">Content</label>
                <Textarea
                  value={lessonForm.content}
                  onChange={(e) => setLessonForm({ ...lessonForm, content: e.target.value })}
                  placeholder="Enter the lesson content..."
                  className="min-h-[150px]"
                />
              </div>
            )}
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setLessonDialog({ open: false })}>
                Cancel
              </Button>
              <Button type="submit">Add Lesson</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}