"use client";

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { PageHeader } from "@/components/shared/page-header";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { NativeSelect } from "@/components/ui/native-select";
import { LoadingPage, LoadingSpinner } from "@/components/ui/loading";
import { ConfirmDialog } from "@/components/shared/confirm-dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { coursesApi, Course } from "@/lib/api-client";
import { formatDate } from "@/lib/utils";
import {
  Plus,
  MoreHorizontal,
  Edit,
  Trash2,
  Eye,
  Filter,
  GraduationCap,
  BookOpen,
  CheckCircle,
  Clock,
  Archive,
  Send,
} from "lucide-react";
import Link from "next/link";

const statusColors: Record<string, "default" | "success" | "warning" | "secondary"> = {
  draft: "secondary",
  published: "success",
  archived: "warning",
};

const statusIcons: Record<string, React.ReactNode> = {
  draft: <Clock className="h-3 w-3" />,
  published: <CheckCircle className="h-3 w-3" />,
  archived: <Archive className="h-3 w-3" />,
};

export default function CoursesPage() {
  const queryClient = useQueryClient();
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [deleteDialog, setDeleteDialog] = useState<{ open: boolean; course: Course | null }>({
    open: false,
    course: null,
  });

  const { data: courses, isLoading } = useQuery({
    queryKey: ["courses", statusFilter],
    queryFn: async () => {
      const params: Record<string, unknown> = { limit: 50 };
      if (statusFilter !== "all") {
        params.status = statusFilter;
      }
      const response = await coursesApi.getAll(params);
      return response.data.data;
    },
  });

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

  const deleteMutation = useMutation({
    mutationFn: (id: string) => coursesApi.delete(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["courses"] });
      setDeleteDialog({ open: false, course: null });
    },
  });

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

  return (
    <div className="space-y-6">
      <PageHeader
        title="Courses"
        description="Create and manage learning content"
      >
        <Link href="/courses/new">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            Create Course
          </Button>
        </Link>
      </PageHeader>

      {/* Filters */}
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2">
          <Filter className="h-4 w-4 text-muted-foreground" />
          <NativeSelect
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            options={[
              { value: "all", label: "All Status" },
              { value: "draft", label: "Draft" },
              { value: "published", label: "Published" },
              { value: "archived", label: "Archived" },
            ]}
            className="w-40"
          />
        </div>
      </div>

      {/* Course Grid */}
      {courses?.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <GraduationCap className="h-12 w-12 text-muted-foreground mb-4" />
            <h3 className="text-lg font-semibold">No courses yet</h3>
            <p className="text-muted-foreground mt-1">Create your first course to get started</p>
            <Link href="/courses/new">
              <Button className="mt-4">
                <Plus className="mr-2 h-4 w-4" />
                Create Course
              </Button>
            </Link>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {courses?.map((course: Course) => (
            <Card key={course.id} className="overflow-hidden group">
              {/* Thumbnail */}
              <div className="aspect-video bg-muted relative overflow-hidden">
                {course.thumbnailUrl ? (
                  <img
                    src={course.thumbnailUrl}
                    alt={course.title}
                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/20 to-primary/5">
                    <GraduationCap className="h-12 w-12 text-primary/50" />
                  </div>
                )}
                {/* Status Badge */}
                <div className="absolute top-3 left-3">
                  <Badge variant={statusColors[course.status]} className="gap-1">
                    {statusIcons[course.status]}
                    {course.status.charAt(0).toUpperCase() + course.status.slice(1)}
                  </Badge>
                </div>
                {/* Actions */}
                <div className="absolute top-3 right-3">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="secondary" size="icon" className="h-8 w-8">
                        <MoreHorizontal className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <Link href={`/courses/${course.id}`}>
                        <DropdownMenuItem>
                          <Edit className="mr-2 h-4 w-4" />
                          Edit
                        </DropdownMenuItem>
                      </Link>
                      {course.status === "draft" && (
                        <DropdownMenuItem onClick={() => publishMutation.mutate(course.id)}>
                          <Send className="mr-2 h-4 w-4" />
                          Publish
                        </DropdownMenuItem>
                      )}
                      <DropdownMenuSeparator />
                      <DropdownMenuItem
                        destructive
                        onClick={() => setDeleteDialog({ open: true, course })}
                      >
                        <Trash2 className="mr-2 h-4 w-4" />
                        Archive
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </div>

              <CardContent className="pt-4">
                <h3 className="font-semibold text-lg line-clamp-1">{course.title}</h3>
                <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                  {course.description}
                </p>

                <div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
                  <span className="flex items-center gap-1">
                    <BookOpen className="h-4 w-4" />
                    {course.modules?.length || 0} modules
                  </span>
                  <span className="flex items-center gap-1">
                    <Clock className="h-4 w-4" />
                    {formatDate(course.createdAt)}
                  </span>
                </div>

                <div className="flex gap-2 mt-4">
                  <Link href={`/courses/${course.id}`} className="flex-1">
                    <Button variant="outline" className="w-full">
                      <Edit className="mr-2 h-4 w-4" />
                      Edit
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* Delete Dialog */}
      <ConfirmDialog
        open={deleteDialog.open}
        onOpenChange={(open) => setDeleteDialog({ open, course: null })}
        title="Archive Course"
        description={`Are you sure you want to archive "${deleteDialog.course?.title}"? Users will no longer be able to access this course.`}
        confirmText="Archive"
        variant="destructive"
        isLoading={deleteMutation.isPending}
        onConfirm={() => deleteDialog.course && deleteMutation.mutate(deleteDialog.course.id)}
      />
    </div>
  );
}