import { useCallback, useEffect, useRef, useState } from "react";
import { Link, useParams, useNavigate } from "react-router-dom";
import {
  ArrowLeft,
  Plus,
  MessageCircle,
  PlayCircle,
  ClipboardCheck,
  Pencil,
  Trash2,
  ArrowRight,
  X,
} from "lucide-react";
import { Button } from "../../components/ui/button";
import { Card } from "../../components/ui/card";
import { Textarea } from "../../components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from "../../components/ui/dialog";
import { Input } from "../../components/ui/input";
import uploadIcon from "../../assets/icons/upload.png";
import { toast } from "sonner";
import { ResolvedImage } from "../../components/media/ResolvedImage";
import {
  createExamPrepUnitModule,
  getExamPrepUnitModules,
  updateExamPrepUnitModule,
  deleteExamPrepUnitModule,
} from "../../api/courses.api";
import { uploadImageFile } from "../../api/files.api";

export function UnitManagementPage() {
  const navigate = useNavigate();
  const { programType, courseId, unitId } = useParams<{
    programType: string;
    courseId: string;
    unitId: string;
  }>();

  // Mock titles
  const unitTitles: Record<string, string> = {
    unit1: "Greetings & Introductions",
    unit2: "Speaking",
    unit3: "Reading",
  };

  const unitDisplayName =
    unitTitles[unitId || ""] || "Greetings & Introductions";

  const parsedUnitId = Number(unitId);
  const [addModuleOpen, setAddModuleOpen] = useState(false);
  const [createName, setCreateName] = useState("");
  const [createDescription, setCreateDescription] = useState("");
  const [createThumbnail, setCreateThumbnail] = useState("");
  const [createIcon, setCreateIcon] = useState("");
  const [creating, setCreating] = useState(false);
  const [uploadingThumbnail, setUploadingThumbnail] = useState(false);
  const [uploadingIcon, setUploadingIcon] = useState(false);
  const createThumbnailFileInputRef = useRef<HTMLInputElement>(null);
  const createIconFileInputRef = useRef<HTMLInputElement>(null);
  const [modulesLoading, setModulesLoading] = useState(false);
  const [modules, setModules] = useState<
    Array<{
      id: number;
      name: string;
      description: string;
      thumbnail: string;
      icon: string;
      sortOrder: number;
      lessons: number;
      practices: number;
      gradient: string;
    }>
  >([]);
  const [editingModuleId, setEditingModuleId] = useState<number | null>(null);
  const [editName, setEditName] = useState("");
  const [editDescription, setEditDescription] = useState("");
  const [editThumbnail, setEditThumbnail] = useState("");
  const [editIcon, setEditIcon] = useState("");
  const [editSortOrder, setEditSortOrder] = useState("1");
  const [savingEdit, setSavingEdit] = useState(false);
  const [uploadingEditThumbnail, setUploadingEditThumbnail] = useState(false);
  const [uploadingEditIcon, setUploadingEditIcon] = useState(false);
  const editThumbnailFileInputRef = useRef<HTMLInputElement>(null);
  const editIconFileInputRef = useRef<HTMLInputElement>(null);
  const [deletingModuleId, setDeletingModuleId] = useState<number | null>(null);
  const [deletingModule, setDeletingModule] = useState(false);

  const isHttpUrl = (value: string) =>
    value.startsWith("http://") || value.startsWith("https://");

  const isMinioUrl = (value: string) => {
    try {
      const url = new URL(value);
      return url.host === "s3.yimaruacademy.com";
    } catch {
      return false;
    }
  };

  const resolveToMinioUrl = async (rawValue: string) => {
    const trimmed = rawValue.trim();
    if (!trimmed) return "";
    if (!isHttpUrl(trimmed) || isMinioUrl(trimmed)) return trimmed;
    const uploaded = await uploadImageFile(trimmed);
    const uploadedUrl = uploaded.data?.data?.url?.trim();
    if (!uploadedUrl) throw new Error("Failed to upload URL to MinIO");
    return uploadedUrl;
  };

  const loadModules = useCallback(async () => {
    if (!Number.isFinite(parsedUnitId) || parsedUnitId < 1) {
      setModules([]);
      return;
    }
    setModulesLoading(true);
    try {
      const response = await getExamPrepUnitModules(parsedUnitId, {
        limit: 20,
        offset: 0,
      });
      const rows = response.data?.data?.modules;
      const list = Array.isArray(rows) ? rows : [];
      setModules(
        list.map((row, index) => ({
          id: Number(row.id),
          name: row.name?.trim() || `Module ${row.id}`,
          description: row.description?.trim() || "—",
          thumbnail: row.thumbnail?.trim() || "",
          icon: row.icon?.trim() || "",
          sortOrder: Number(row.sort_order ?? 0),
          lessons: Number(row.lessons_count ?? row.videos_count ?? 0),
          practices: Number(row.practices_count ?? 0),
          gradient:
            index % 3 === 1
              ? "linear-gradient(135deg, rgba(79, 70, 229, 0.4) 0%, rgba(79, 70, 229, 0.7) 100%)"
              : index % 3 === 2
                ? "linear-gradient(135deg, rgba(124, 58, 237, 0.4) 0%, rgba(124, 58, 237, 0.7) 100%)"
                : "linear-gradient(135deg, rgba(158, 40, 145, 0.4) 0%, rgba(158, 40, 145, 0.7) 100%)",
        })),
      );
    } catch (error) {
      console.error(error);
      toast.error("Failed to load modules");
      setModules([]);
    } finally {
      setModulesLoading(false);
    }
  }, [parsedUnitId]);

  useEffect(() => {
    void loadModules();
  }, [loadModules]);

  const clearCreateModuleForm = () => {
    setCreateName("");
    setCreateDescription("");
    setCreateThumbnail("");
    setCreateIcon("");
    if (createThumbnailFileInputRef.current) {
      createThumbnailFileInputRef.current.value = "";
    }
    if (createIconFileInputRef.current) {
      createIconFileInputRef.current.value = "";
    }
  };

  const handleCreateImageFile = async (
    event: React.ChangeEvent<HTMLInputElement>,
    target: "thumbnail" | "icon",
  ) => {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file) return;
    if (!file.type.startsWith("image/")) {
      toast.error("Please choose an image file");
      return;
    }

    if (target === "thumbnail") {
      setUploadingThumbnail(true);
    } else {
      setUploadingIcon(true);
    }
    try {
      const res = await uploadImageFile(file);
      const url = res.data?.data?.url?.trim();
      if (!url) throw new Error("Upload did not return a file URL");
      if (target === "thumbnail") {
        setCreateThumbnail(url);
      } else {
        setCreateIcon(url);
      }
      toast.success(`${target === "thumbnail" ? "Thumbnail" : "Icon"} uploaded`);
    } catch (error: unknown) {
      console.error(error);
      const message =
        (error as { response?: { data?: { message?: string } } })?.response?.data
          ?.message ?? "Failed to upload image";
      toast.error(message);
    } finally {
      if (target === "thumbnail") {
        setUploadingThumbnail(false);
      } else {
        setUploadingIcon(false);
      }
    }
  };

  const autoUploadCreateUrl = async (
    value: string,
    target: "thumbnail" | "icon",
  ) => {
    const trimmed = value.trim();
    if (!trimmed || !isHttpUrl(trimmed) || isMinioUrl(trimmed)) return;
    if (target === "thumbnail") {
      setUploadingThumbnail(true);
    } else {
      setUploadingIcon(true);
    }
    try {
      const minioUrl = await resolveToMinioUrl(trimmed);
      if (target === "thumbnail") {
        setCreateThumbnail(minioUrl);
      } else {
        setCreateIcon(minioUrl);
      }
      if (minioUrl !== trimmed) {
        toast.success(`${target === "thumbnail" ? "Thumbnail" : "Icon"} uploaded to MinIO`);
      }
    } catch (error: unknown) {
      console.error(error);
      const message =
        (error as { response?: { data?: { message?: string } } })?.response?.data
          ?.message ?? "Failed to upload URL to MinIO";
      toast.error(message);
    } finally {
      if (target === "thumbnail") {
        setUploadingThumbnail(false);
      } else {
        setUploadingIcon(false);
      }
    }
  };

  const handleCreateModule = async () => {
    if (!Number.isFinite(parsedUnitId) || parsedUnitId < 1) {
      toast.error("Invalid unit");
      return;
    }
    const name = createName.trim();
    if (!name) {
      toast.error("Module name is required");
      return;
    }
    setCreating(true);
    try {
      const minioThumbnail = await resolveToMinioUrl(createThumbnail);
      const minioIcon = await resolveToMinioUrl(createIcon);
      await createExamPrepUnitModule(parsedUnitId, {
        name,
        description: createDescription.trim() || null,
        thumbnail: minioThumbnail || null,
        icon: minioIcon || null,
      });
      await loadModules();
      toast.success("Module created");
      clearCreateModuleForm();
      setAddModuleOpen(false);
    } catch (error: unknown) {
      console.error(error);
      const message =
        (error as { response?: { data?: { message?: string } } })?.response?.data
          ?.message ?? "Failed to create module";
      toast.error(message);
    } finally {
      setCreating(false);
    }
  };

  const openEditModule = (module: (typeof modules)[number]) => {
    setEditingModuleId(module.id);
    setEditName(module.name ?? "");
    setEditDescription(module.description ?? "");
    setEditThumbnail(module.thumbnail ?? "");
    setEditIcon(module.icon ?? "");
    setEditSortOrder(String(module.sortOrder ?? 1));
  };

  const closeEditModule = () => {
    if (savingEdit || uploadingEditThumbnail || uploadingEditIcon) return;
    setEditingModuleId(null);
    setEditName("");
    setEditDescription("");
    setEditThumbnail("");
    setEditIcon("");
    setEditSortOrder("1");
  };

  const handleEditImageFile = async (
    event: React.ChangeEvent<HTMLInputElement>,
    target: "thumbnail" | "icon",
  ) => {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file) return;
    if (!file.type.startsWith("image/")) {
      toast.error("Please choose an image file");
      return;
    }
    if (target === "thumbnail") {
      setUploadingEditThumbnail(true);
    } else {
      setUploadingEditIcon(true);
    }
    try {
      const res = await uploadImageFile(file);
      const url = res.data?.data?.url?.trim();
      if (!url) throw new Error("Upload did not return a file URL");
      if (target === "thumbnail") {
        setEditThumbnail(url);
      } else {
        setEditIcon(url);
      }
      toast.success(`${target === "thumbnail" ? "Thumbnail" : "Icon"} uploaded`);
    } catch (error: unknown) {
      console.error(error);
      const message =
        (error as { response?: { data?: { message?: string } } })?.response?.data
          ?.message ?? "Failed to upload image";
      toast.error(message);
    } finally {
      if (target === "thumbnail") {
        setUploadingEditThumbnail(false);
      } else {
        setUploadingEditIcon(false);
      }
    }
  };

  const autoUploadEditUrl = async (value: string, target: "thumbnail" | "icon") => {
    const trimmed = value.trim();
    if (!trimmed || !isHttpUrl(trimmed) || isMinioUrl(trimmed)) return;
    if (target === "thumbnail") {
      setUploadingEditThumbnail(true);
    } else {
      setUploadingEditIcon(true);
    }
    try {
      const minioUrl = await resolveToMinioUrl(trimmed);
      if (target === "thumbnail") {
        setEditThumbnail(minioUrl);
      } else {
        setEditIcon(minioUrl);
      }
      if (minioUrl !== trimmed) {
        toast.success(`${target === "thumbnail" ? "Thumbnail" : "Icon"} uploaded to MinIO`);
      }
    } catch (error: unknown) {
      console.error(error);
      const message =
        (error as { response?: { data?: { message?: string } } })?.response?.data
          ?.message ?? "Failed to upload URL to MinIO";
      toast.error(message);
    } finally {
      if (target === "thumbnail") {
        setUploadingEditThumbnail(false);
      } else {
        setUploadingEditIcon(false);
      }
    }
  };

  const handleSaveEditModule = async () => {
    if (!editingModuleId) return;
    const name = editName.trim();
    if (!name) {
      toast.error("Module name is required");
      return;
    }
    const sortOrderNum = Number(editSortOrder);
    if (!Number.isFinite(sortOrderNum) || sortOrderNum < 0) {
      toast.error("Sort order must be a valid number");
      return;
    }

    setSavingEdit(true);
    try {
      const minioThumbnail = await resolveToMinioUrl(editThumbnail);
      const minioIcon = await resolveToMinioUrl(editIcon);
      await updateExamPrepUnitModule(editingModuleId, {
        name,
        description: editDescription.trim() || null,
        thumbnail: minioThumbnail || null,
        icon: minioIcon || null,
        sort_order: sortOrderNum,
      });
      await loadModules();
      toast.success("Module updated");
      closeEditModule();
    } catch (error: unknown) {
      console.error(error);
      const message =
        (error as { response?: { data?: { message?: string } } })?.response?.data
          ?.message ?? "Failed to update module";
      toast.error(message);
    } finally {
      setSavingEdit(false);
    }
  };

  const handleDeleteModule = async () => {
    if (!deletingModuleId) return;
    setDeletingModule(true);
    try {
      await deleteExamPrepUnitModule(deletingModuleId);
      await loadModules();
      toast.success("Module deleted");
      setDeletingModuleId(null);
    } catch (error: unknown) {
      console.error(error);
      const message =
        (error as { response?: { data?: { message?: string } } })?.response?.data
          ?.message ?? "Failed to delete module";
      toast.error(message);
    } finally {
      setDeletingModule(false);
    }
  };

  return (
    <div className="space-y-8 animate-in fade-in duration-500 pb-10">
      {/* Navigation */}
      <Link
        to={`/new-content/courses/${programType}/${courseId}`}
        className="flex items-center gap-2.5 text-[15px] font-semibold text-grayScale-600 hover:text-brand-500 transition-colors pt-4 group"
      >
        <ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
        Back to Courses
      </Link>

      {/* Header section */}
      <div className="flex items-start justify-between">
        <h1 className="text-[28px] font-medium tracking-tight text-grayScale-900">
          {unitDisplayName}
        </h1>

        <Dialog
          open={addModuleOpen}
          onOpenChange={(open) => {
            if (!open && (creating || uploadingThumbnail || uploadingIcon)) return;
            setAddModuleOpen(open);
          }}
        >
          <DialogTrigger asChild>
            <Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white shadow-sm hover:bg-brand-600 transition-all flex items-center gap-2">
              <Plus className="h-5 w-5" />
              Add Modules
            </Button>
          </DialogTrigger>
          <DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-[600px] flex-col gap-0 overflow-hidden rounded-[16px] border-none p-0">
            <div className="flex min-h-0 flex-1 flex-col bg-white">
              <DialogHeader className="px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
                <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
                  Create Modules
                </DialogTitle>
                <DialogClose className="rounded-full p-1.5 hover:bg-grayScale-50 transition-colors">
                  <X className="h-5 w-5 text-grayScale-400" />
                  <span className="sr-only">Close</span>
                </DialogClose>
              </DialogHeader>

              <div className="min-h-0 flex-1 overflow-y-auto p-8 space-y-8">
                <div className="space-y-3">
                  <label className="text-[15px] text-grayScale-800">
                    Module Title
                  </label>
                  <Input
                    value={createName}
                    onChange={(e) => setCreateName(e.target.value)}
                    placeholder="e.g. Present tense"
                    className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
                    disabled={creating || uploadingThumbnail || uploadingIcon}
                  />
                </div>

                <div className="space-y-3">
                  <label className="text-[15px] text-grayScale-800">
                    Description
                  </label>
                  <Textarea
                    value={createDescription}
                    onChange={(e) => setCreateDescription(e.target.value)}
                    placeholder="Optional module description"
                    rows={4}
                    className="min-h-[96px] rounded-[8px] border-grayScale-400"
                    disabled={creating || uploadingThumbnail || uploadingIcon}
                  />
                </div>

                <div className="space-y-3">
                  <label className="text-[15px] text-grayScale-800">Thumbnail</label>
                  <input
                    ref={createThumbnailFileInputRef}
                    type="file"
                    accept="image/*"
                    className="sr-only"
                    onChange={(e) => void handleCreateImageFile(e, "thumbnail")}
                    disabled={creating || uploadingThumbnail || uploadingIcon}
                  />
                  <button
                    type="button"
                    className="relative group w-full cursor-pointer"
                    onClick={() => createThumbnailFileInputRef.current?.click()}
                    disabled={creating || uploadingThumbnail || uploadingIcon}
                  >
                    <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
                      <div className="mb-4">
                        <img
                          src={uploadIcon}
                          alt="Upload icon"
                          className="h-10 w-10"
                        />
                      </div>
                      <p className="text-[15px]">
                        <span className="text-brand-500 font-bold hover:underline">
                          {uploadingThumbnail ? "Uploading…" : "Click to upload"}
                        </span>{" "}
                        <span className="text-grayScale-500">
                          or paste a URL below
                        </span>
                      </p>
                      <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
                        JPG, PNG (MAX 5 MB)
                      </p>
                    </div>
                  </button>
                  {createThumbnail.trim() ? (
                    <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
                      <ResolvedImage
                        src={createThumbnail.trim()}
                        alt=""
                        className="h-28 w-full object-cover"
                      />
                    </div>
                  ) : null}
                  <Input
                    value={createThumbnail}
                    onChange={(e) => setCreateThumbnail(e.target.value)}
                    onPaste={(event) => {
                      const pasted = event.clipboardData?.getData("text")?.trim();
                      if (!pasted) return;
                      setTimeout(() => {
                        void autoUploadCreateUrl(pasted, "thumbnail");
                      }, 0);
                    }}
                    placeholder="Optional thumbnail URL (or leave empty for null)"
                    className="h-12 border-grayScale-400 rounded-[8px] px-4"
                    disabled={creating || uploadingThumbnail || uploadingIcon}
                  />
                </div>

                <div className="space-y-3">
                  <label className="text-[15px] text-grayScale-800">Icon</label>
                  <input
                    ref={createIconFileInputRef}
                    type="file"
                    accept="image/*"
                    className="sr-only"
                    onChange={(e) => void handleCreateImageFile(e, "icon")}
                    disabled={creating || uploadingThumbnail || uploadingIcon}
                  />
                  <button
                    type="button"
                    className="relative group w-full cursor-pointer"
                    onClick={() => createIconFileInputRef.current?.click()}
                    disabled={creating || uploadingThumbnail || uploadingIcon}
                  >
                    <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
                      <div className="mb-4">
                        <img
                          src={uploadIcon}
                          alt="Upload icon"
                          className="h-10 w-10"
                        />
                      </div>
                      <p className="text-[15px]">
                        <span className="text-brand-500 font-bold hover:underline">
                          {uploadingIcon ? "Uploading…" : "Click to upload"}
                        </span>{" "}
                        <span className="text-grayScale-500">
                          or paste a URL below
                        </span>
                      </p>
                      <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
                        JPG, PNG (MAX 5 MB)
                      </p>
                    </div>
                  </button>
                  {createIcon.trim() ? (
                    <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
                      <ResolvedImage
                        src={createIcon.trim()}
                        alt=""
                        className="h-24 w-full object-contain bg-white p-2"
                      />
                    </div>
                  ) : null}
                  <Input
                    value={createIcon}
                    onChange={(e) => setCreateIcon(e.target.value)}
                    onPaste={(event) => {
                      const pasted = event.clipboardData?.getData("text")?.trim();
                      if (!pasted) return;
                      setTimeout(() => {
                        void autoUploadCreateUrl(pasted, "icon");
                      }, 0);
                    }}
                    placeholder="Optional icon URL (or leave empty for null)"
                    className="h-12 border-grayScale-400 rounded-[8px] px-4"
                    disabled={creating || uploadingThumbnail || uploadingIcon}
                  />
                </div>
              </div>

              <div className="px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-200 flex justify-end gap-3">
                <DialogClose asChild>
                  <Button
                    type="button"
                    variant="outline"
                    className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
                    disabled={creating || uploadingThumbnail || uploadingIcon}
                    onClick={clearCreateModuleForm}
                  >
                    Cancel
                  </Button>
                </DialogClose>
                <Button
                  type="button"
                  className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600"
                  onClick={() => void handleCreateModule()}
                  disabled={creating || uploadingThumbnail || uploadingIcon}
                >
                  {creating ? "Creating..." : "Create Module"}
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      {/* Gradient Divider */}
      <div className="relative">
        <div className="absolute inset-0 flex items-center" aria-hidden="true">
          <div className="w-full border-t border-grayScale-200" />
        </div>
        <div className="relative flex justify-center">
          <div
            className="h-[0.5px] w-full opacity-20 rounded-full"
            style={{
              background: "gray",
            }}
          />
        </div>
      </div>

      {/* Grid of Modules */}
      <div className="flex flex-wrap gap-4 pt-4">
        {modulesLoading ? (
          <p className="text-sm text-grayScale-500">Loading modules...</p>
        ) : modules.length === 0 ? (
          <div className="w-full rounded-xl border border-dashed border-grayScale-200 bg-grayScale-50/50 px-6 py-14 text-center">
            <p className="text-sm font-medium text-grayScale-600">
              No modules for this unit yet
            </p>
            <p className="mt-1 text-sm text-grayScale-400">
              Create your first module to start organizing lessons and practices.
            </p>
          </div>
        ) : (
          modules.map((module, index) => (
            <Card
              key={`${module.id}-${index}`}
              className="group relative flex w-[400px] flex-col bg-white rounded-[12px] border border-grayScale-100 overflow-hidden shadow-sm hover:shadow-md transition-all"
            >
              <div className="absolute right-2 top-2 z-10 flex translate-y-1 gap-1 opacity-0 pointer-events-none transition-all duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-hover:pointer-events-auto">
                <Button
                  type="button"
                  variant="secondary"
                  size="icon"
                  className="h-8 w-8 rounded-md bg-white/95 text-grayScale-600 shadow-sm transition-colors hover:bg-white"
                  onClick={() => openEditModule(module)}
                  aria-label={`Edit ${module.name}`}
                >
                  <Pencil className="h-3.5 w-3.5" />
                </Button>
                <Button
                  type="button"
                  variant="secondary"
                  size="icon"
                  className="h-8 w-8 rounded-md bg-white/95 text-red-600 shadow-sm transition-colors hover:bg-red-50"
                  onClick={() => setDeletingModuleId(module.id)}
                  aria-label={`Delete ${module.name}`}
                >
                  <Trash2 className="h-3.5 w-3.5" />
                </Button>
              </div>
              {/* Header */}
              <div
                className="h-36 w-full overflow-hidden"
                style={{ background: module.gradient }}
              >
                {module.thumbnail ? (
                  <ResolvedImage
                    src={module.thumbnail}
                    alt={`${module.name} thumbnail`}
                    className="h-full w-full object-cover"
                    onError={(event) => {
                      event.currentTarget.style.display = "none";
                    }}
                  />
                ) : null}
              </div>

              <div className="p-5 flex flex-col space-y-4">
                <div className="flex items-start gap-3">
                  <div className="mt-1 h-10 w-10 shrink-0 rounded-full bg-[#9E28911A] border border-[#9E289133] flex items-center justify-center overflow-hidden">
                    {module.icon ? (
                      <ResolvedImage
                        src={module.icon}
                        alt={`${module.name} icon`}
                        className="h-full w-full object-cover"
                        onError={(event) => {
                          event.currentTarget.style.display = "none";
                        }}
                      />
                    ) : (
                      <MessageCircle className="h-5 w-5 text-brand-500" />
                    )}
                  </div>

                  <div className="space-y-1">
                    <h3 className="text-[16px] font-medium text-grayScale-900 leading-tight">
                      {module.name}
                    </h3>
                    <p className="text-[12px] text-grayScale-500 font-medium line-clamp-2">
                      {module.description}
                    </p>
                  </div>
                </div>

                {/* Stats Pills */}
                <div className="flex items-center gap-3">
                  <div className="h-8 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
                    <PlayCircle className="h-3.5 w-3.5 text-grayScale-400" />
                    <span className="text-[12px] font-bold">
                      {module.lessons} Lessons
                    </span>
                  </div>
                  <div className="h-8 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
                    <ClipboardCheck className="h-3.5 w-3.5 text-grayScale-400" />
                    <span className="text-[12px] font-bold">
                      {module.practices} Practices
                    </span>
                  </div>
                </div>

                {/* Action Button */}
                <Button
                  className="w-full h-10 bg-brand-500 text-white rounded-[6px] font-bold flex items-center justify-center gap-2 group/btn"
                  onClick={() =>
                    navigate(
                      `/new-content/courses/${programType}/${courseId}/${unitId}/${module.id}`,
                    )
                  }
                >
                  View Detail
                  <ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover/btn:translate-x-1" />
                </Button>
              </div>
            </Card>
          ))
        )}
      </div>

      <Dialog
        open={editingModuleId !== null}
        onOpenChange={(open) => {
          if (!open && (savingEdit || uploadingEditThumbnail || uploadingEditIcon)) return;
          if (!open) closeEditModule();
        }}
      >
        <DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-[600px] flex-col gap-0 overflow-hidden rounded-[16px] border-none p-0">
          <div className="flex min-h-0 flex-1 flex-col bg-white">
            <DialogHeader className="px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
              <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
                Edit Module
              </DialogTitle>
            </DialogHeader>
            <div className="min-h-0 flex-1 overflow-y-auto p-8 space-y-8">
              <div className="space-y-3">
                <label className="text-[15px] text-grayScale-800">Module Title</label>
                <Input
                  value={editName}
                  onChange={(e) => setEditName(e.target.value)}
                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
                />
              </div>
              <div className="space-y-3">
                <label className="text-[15px] text-grayScale-800">Description</label>
                <Textarea
                  value={editDescription}
                  onChange={(e) => setEditDescription(e.target.value)}
                  rows={4}
                  className="min-h-[96px] rounded-[8px] border-grayScale-400"
                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
                />
              </div>
              <div className="space-y-3">
                <label className="text-[15px] text-grayScale-800">Sort Order</label>
                <Input
                  type="number"
                  min={0}
                  value={editSortOrder}
                  onChange={(e) => setEditSortOrder(e.target.value)}
                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
                />
              </div>
              <div className="space-y-3">
                <label className="text-[15px] text-grayScale-800">Thumbnail</label>
                <input
                  ref={editThumbnailFileInputRef}
                  type="file"
                  accept="image/*"
                  className="sr-only"
                  onChange={(e) => void handleEditImageFile(e, "thumbnail")}
                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
                />
                <button
                  type="button"
                  className="relative group w-full cursor-pointer"
                  onClick={() => editThumbnailFileInputRef.current?.click()}
                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
                >
                  <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
                    <div className="mb-4">
                      <img src={uploadIcon} alt="Upload icon" className="h-10 w-10" />
                    </div>
                    <p className="text-[15px]">
                      <span className="text-brand-500 font-bold hover:underline">
                        {uploadingEditThumbnail ? "Uploading…" : "Click to upload"}
                      </span>{" "}
                      <span className="text-grayScale-500">or paste a URL below</span>
                    </p>
                    <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
                      JPG, PNG (MAX 5 MB)
                    </p>
                  </div>
                </button>
                {editThumbnail.trim() ? (
                  <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
                    <ResolvedImage
                      src={editThumbnail.trim()}
                      alt=""
                      className="h-28 w-full object-cover"
                    />
                  </div>
                ) : null}
                <Input
                  value={editThumbnail}
                  onChange={(e) => setEditThumbnail(e.target.value)}
                  onPaste={(event) => {
                    const pasted = event.clipboardData?.getData("text")?.trim();
                    if (!pasted) return;
                    setTimeout(() => {
                      void autoUploadEditUrl(pasted, "thumbnail");
                    }, 0);
                  }}
                  placeholder="Optional thumbnail URL (or leave empty for null)"
                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
                />
              </div>
              <div className="space-y-3">
                <label className="text-[15px] text-grayScale-800">Icon</label>
                <input
                  ref={editIconFileInputRef}
                  type="file"
                  accept="image/*"
                  className="sr-only"
                  onChange={(e) => void handleEditImageFile(e, "icon")}
                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
                />
                <button
                  type="button"
                  className="relative group w-full cursor-pointer"
                  onClick={() => editIconFileInputRef.current?.click()}
                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
                >
                  <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
                    <div className="mb-4">
                      <img src={uploadIcon} alt="Upload icon" className="h-10 w-10" />
                    </div>
                    <p className="text-[15px]">
                      <span className="text-brand-500 font-bold hover:underline">
                        {uploadingEditIcon ? "Uploading…" : "Click to upload"}
                      </span>{" "}
                      <span className="text-grayScale-500">or paste a URL below</span>
                    </p>
                    <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
                      JPG, PNG (MAX 5 MB)
                    </p>
                  </div>
                </button>
                {editIcon.trim() ? (
                  <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
                    <ResolvedImage
                      src={editIcon.trim()}
                      alt=""
                      className="h-24 w-full object-contain bg-white p-2"
                    />
                  </div>
                ) : null}
                <Input
                  value={editIcon}
                  onChange={(e) => setEditIcon(e.target.value)}
                  onPaste={(event) => {
                    const pasted = event.clipboardData?.getData("text")?.trim();
                    if (!pasted) return;
                    setTimeout(() => {
                      void autoUploadEditUrl(pasted, "icon");
                    }, 0);
                  }}
                  placeholder="Optional icon URL (or leave empty for null)"
                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
                />
              </div>
            </div>
            <div className="px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-200 flex justify-end gap-3">
              <Button
                type="button"
                variant="outline"
                className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
                disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
                onClick={closeEditModule}
              >
                Cancel
              </Button>
              <Button
                type="button"
                className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600"
                onClick={() => void handleSaveEditModule()}
                disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
              >
                {savingEdit ? "Saving..." : "Save Changes"}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog
        open={deletingModuleId !== null}
        onOpenChange={(open) => {
          if (!open && !deletingModule) setDeletingModuleId(null);
        }}
      >
        <DialogContent className="max-w-md rounded-[16px] border-none p-0 overflow-hidden">
          <div className="bg-white">
            <DialogHeader className="border-b border-grayScale-100 px-6 py-5">
              <DialogTitle className="text-lg font-bold text-grayScale-900">
                Delete Module
              </DialogTitle>
            </DialogHeader>
            <div className="px-6 py-6 text-sm text-grayScale-600">
              Are you sure you want to delete this module? This action cannot be undone.
            </div>
            <div className="flex justify-end gap-3 border-t border-grayScale-100 px-6 py-4">
              <Button
                variant="outline"
                onClick={() => setDeletingModuleId(null)}
                disabled={deletingModule}
              >
                Cancel
              </Button>
              <Button
                className="bg-red-500 hover:bg-red-600"
                onClick={() => void handleDeleteModule()}
                disabled={deletingModule}
              >
                {deletingModule ? "Deleting..." : "Delete"}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}