"use client";

import { useState, useEffect, useCallback } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { ImportModal } from "@/components/import/ImportModal";
import { ShareMenu } from "@/components/ui/ShareMenu";
import {
  DndContext,
  pointerWithin,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
  DragOverEvent,
  DragStartEvent,
  DragOverlay,
  useDroppable,
  useDndContext,
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
  useSortable,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import type { ReorderItem } from "@/types/study";

interface DeckItem {
  id: string;
  name: string;
  description: string | null;
  groupId: string | null;
  sortOrder: number;
  _count: { cards: number };
  progress: Array<{
    mode: string;
    currentIndex: number;
    orderJson: string;
    cardResultsJson: string | null;
  }>;
}

interface MaterialGroup {
  id: string;
  name: string;
  sortOrder: number;
}

const cache: Record<string, { decks: DeckItem[]; groups: MaterialGroup[] }> = {};

function getProgressLabel(deck: DeckItem) {
  if (!deck.progress?.length) return null;
  const prog = deck.progress[0];
  const order = JSON.parse(prog.orderJson) as string[];
  const results = prog.cardResultsJson
    ? (JSON.parse(prog.cardResultsJson) as Record<string, string>)
    : {};
  const correctCount = Object.values(results).filter((r) => r === "correct").length;
  const total = order.length;
  const current = Math.min(prog.currentIndex + 1, total);
  const modeLabel = prog.mode === "SHUFFLED" ? "shuffled" : "sequential";
  return `${current}/${total}, ${modeLabel} · ${correctCount} ✓`;
}

interface SortableDeckCardProps {
  deck: DeckItem;
  onEdit: (deck: DeckItem) => void;
  onDelete: (deck: DeckItem) => void;
  classSlug: string;
}

function SortableDeckCard({ deck, onEdit, onDelete, classSlug }: SortableDeckCardProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: deck.id });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.4 : 1,
  };

  const progressLabel = getProgressLabel(deck);

  return (
    <div ref={setNodeRef} style={style} className="group flex h-full flex-col rounded-2xl border border-border-light bg-bg-surface shadow-[var(--shadow-card)] transition-all duration-300 hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-[var(--shadow-card-hover)]">
      <div className="flex h-full flex-1 flex-col p-5">
        <div className="flex items-start gap-2">
          <div {...attributes} {...listeners} className="mt-1 cursor-grab active:cursor-grabbing text-text-muted hover:text-text-heading">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
            </svg>
          </div>
          <div className="flex-1">
            <h3 className="mb-1 text-lg font-extrabold text-text-heading">{deck.name}</h3>
            {deck.description && <p className="text-sm text-text-secondary mb-3 line-clamp-2">{deck.description}</p>}
          </div>
        </div>

        <div className="flex items-center gap-3 mt-auto mb-4 pl-7">
          <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-badge-bg text-badge-text text-xs font-medium">
            {deck._count.cards} {deck._count.cards === 1 ? "card" : "cards"}
          </span>
          {progressLabel && (
            <span className="text-xs text-text-muted">{progressLabel}</span>
          )}
        </div>

        <div className="flex flex-col gap-2 border-t border-border-light pt-4 pl-7 sm:flex-row sm:items-center">
          <div className="flex w-full min-w-0 gap-2 sm:flex-1">
            {deck.progress?.length ? (
              <>
              <Link href={`/${classSlug}/flashcards/${deck.id}`} className="flex-1 text-center py-2 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200">
                Continue
              </Link>
              <button
                onClick={async () => {
                  if (!confirm("Start over from the beginning? This will clear your current progress for this deck.")) return;
                  await Promise.all([
                    fetch("/api/progress", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ contentType: "DECK", contentId: deck.id, mode: "SEQUENTIAL" }) }).catch(() => {}),
                    fetch("/api/progress", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ contentType: "DECK", contentId: deck.id, mode: "SHUFFLED" }) }).catch(() => {})
                  ]);
                  window.location.href = `/${classSlug}/flashcards/${deck.id}`;
                }}
                className="flex-1 text-center py-2 px-4 rounded-lg bg-bg-surface-alt border border-border text-text-heading text-sm font-medium hover:bg-border transition-all duration-200 cursor-pointer shadow-sm"
                title="Restart"
              >
                Restart
              </button>
              </>
            ) : (
              <Link href={`/${classSlug}/flashcards/${deck.id}`} className="flex-1 text-center py-2 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200">
                Study
              </Link>
            )}
          </div>
          <div className="flex items-center justify-end gap-2">
            <button onClick={() => onEdit(deck)} className="p-2 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer" title="Edit">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
              </svg>
            </button>
            <button onClick={() => onDelete(deck)} className="p-2 rounded-lg text-text-muted hover:text-error hover:bg-error-bg transition-all duration-200 cursor-pointer" title="Delete">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
            </button>
            <ShareMenu targetType="DECK" contentId={deck.id} classSlug={classSlug} compact />
          </div>
        </div>
      </div>
    </div>
  );
}

function DroppableContainer({ id, children }: { id: string; children: React.ReactNode }) {
  const { setNodeRef } = useDroppable({ id });
  const { over } = useDndContext();
  
  const isOverContainer = over?.id === id;
  const isOverChild = over?.data?.current?.sortable?.containerId === id;
  const isOver = isOverContainer || isOverChild;

  return (
    <div ref={setNodeRef} className={`grid grid-cols-1 md:grid-cols-2 gap-4 min-h-[60px] p-2 -mx-2 rounded-lg border-2 transition-colors duration-200 ${isOver ? "border-primary/40 bg-primary/5 shadow-inner" : "border-transparent"}`}>
      {children}
    </div>
  );
}

export default function FlashcardsPage() {
  const params = useParams();
  const classSlug = params.classSlug as string;
  const [decks, setDecks] = useState<DeckItem[]>(cache[classSlug]?.decks || []);
  const [groups, setGroups] = useState<MaterialGroup[]>(cache[classSlug]?.groups || []);
  const [loading, setLoading] = useState(!cache[classSlug]);
  const [animate] = useState(!cache[classSlug]);
  const [showImport, setShowImport] = useState(false);
  const [classId, setClassId] = useState<string>("");
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editName, setEditName] = useState("");
  const [editDescription, setEditDescription] = useState("");
  const [isCreatingGroup, setIsCreatingGroup] = useState(false);
  const [newGroupName, setNewGroupName] = useState("");
  const [editingGroupId, setEditingGroupId] = useState<string | null>(null);
  const [editGroupName, setEditGroupName] = useState("");
  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});

  useEffect(() => {
    const saved = localStorage.getItem('flashcards_collapsed_groups');
    if (saved) {
      try { setCollapsedGroups(JSON.parse(saved)); } catch(e) {}
    }
  }, []);

  function toggleGroup(id: string) {
    setCollapsedGroups(prev => {
      const next = { ...prev, [id]: !prev[id] };
      localStorage.setItem('flashcards_collapsed_groups', JSON.stringify(next));
      return next;
    });
  }

  const fetchAll = useCallback(async (cId: string) => {
    try {
      const [deckRes, groupRes] = await Promise.all([
        fetch(`/api/decks/list?classId=${cId}`),
        fetch(`/api/material-groups?classId=${cId}&type=DECK`),
      ]);
      const ds = deckRes.ok ? await deckRes.json() : [];
      const gs = groupRes.ok ? await groupRes.json() : [];
      setDecks(ds);
      setGroups(gs);
      cache[classSlug] = { decks: ds, groups: gs };
    } catch {
      setDecks([]);
      setGroups([]);
    } finally {
      setLoading(false);
    }
  }, [classSlug]);

  useEffect(() => {
    async function init() {
      try {
        const classRes = await fetch("/api/classes");
        const classes = await classRes.json();
        const cls = classes.find((c: { slug: string }) => c.slug === classSlug);
        if (!cls) {
          setLoading(false);
          return;
        }
        setClassId(cls.id);
        fetchAll(cls.id);
      } catch {
        setLoading(false);
      }
    }
    init();
  }, [classSlug, fetchAll]);

  // Group Management
  async function handleCreateGroup() {
    if (!newGroupName.trim()) return;
    const res = await fetch("/api/material-groups", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ classId, name: newGroupName.trim(), type: "DECK" }),
    });
    if (res.ok) {
      const g = await res.json();
      setGroups((prev) => [...prev, g]);
      setIsCreatingGroup(false);
      setNewGroupName("");
    }
  }

  async function handleRenameGroup(id: string) {
    if (!editGroupName.trim()) return;
    await fetch(`/api/material-groups/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: editGroupName.trim() }),
    });
    setGroups((prev) => prev.map((g) => (g.id === id ? { ...g, name: editGroupName.trim() } : g)));
    setEditingGroupId(null);
  }

  async function handleDeleteGroup(id: string, name: string) {
    if (!confirm(`Delete group "${name}"? Decks inside will be moved to Uncategorized.`)) return;
    await fetch(`/api/material-groups/${id}`, { method: "DELETE" });
    setGroups((prev) => prev.filter((g) => g.id !== id));
    setDecks((prev) => prev.map((d) => (d.groupId === id ? { ...d, groupId: null } : d)));
  }

  // Deck Management
  async function handleDeleteDeck(deck: DeckItem) {
    if (!confirm(`Delete "${deck.name}" and all its cards?`)) return;
    await fetch(`/api/decks/${deck.id}`, { method: "DELETE" });
    setDecks((prev) => prev.filter((d) => d.id !== deck.id));
  }

  async function handleRenameDeck(id: string) {
    if (!editName.trim()) return;
    await fetch(`/api/decks/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: editName.trim(), description: editDescription.trim() || null }),
    });
    setDecks((prev) =>
      prev.map((d) => (d.id === id ? { ...d, name: editName.trim(), description: editDescription.trim() || null } : d))
    );
    setEditingId(null);
  }

  // Drag and drop setup
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
  );

  const [activeId, setActiveId] = useState<string | null>(null);

  function handleDragStart(event: DragStartEvent) {
    setActiveId(event.active.id as string);
  }

  function handleDragOver(event: DragOverEvent) {
    // optional layout updates here
  }

  async function handleDragEnd(event: DragEndEvent) {
    setActiveId(null);
    const { active, over } = event;
    if (!over) return;

    const activeId = active.id as string;
    const overId = over.id as string;

    const activeDeck = decks.find((d) => d.id === activeId);
    if (!activeDeck) return;

    let targetGroupId: string | null = null;
    const overContainerId = over.data.current?.sortable?.containerId;
    if (overContainerId) {
       targetGroupId = overContainerId === "uncategorized" ? null : overContainerId;
    } else if (groups.find(g => g.id === overId) || overId === "uncategorized") {
       targetGroupId = overId === "uncategorized" ? null : overId;
    } else {
       const overDeck = decks.find((d) => d.id === overId);
       if (overDeck) {
         targetGroupId = overDeck.groupId;
       }
    }

    if (targetGroupId !== undefined) {
      setDecks((items) => {
        const oldIndex = items.findIndex((d) => d.id === activeId);
        const overIndex = items.findIndex((d) => d.id === overId);
        let newItems = [...items];
        
        newItems[oldIndex].groupId = targetGroupId;

        if (overIndex >= 0 && overIndex !== oldIndex) {
          newItems = arrayMove(newItems, oldIndex, overIndex);
        } else {
          const oldItem = newItems.splice(oldIndex, 1)[0];
          newItems.push(oldItem);
        }

        const affectedGroups = new Set([activeDeck.groupId, targetGroupId]);
        const updates: ReorderItem[] = [];
        
        affectedGroups.forEach(gId => {
           const gItems = newItems.filter(d => d.groupId === gId);
           gItems.forEach((item, index) => {
             item.sortOrder = index;
             updates.push({ id: item.id, sortOrder: index, groupId: item.groupId });
           });
        });

        fetch("/api/decks/reorder", {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ items: updates }),
        });

        return newItems;
      });
    }
  }

  const groupedDecks = groups.map(g => ({
    ...g,
    decks: decks.filter(d => d.groupId === g.id).sort((a,b) => a.sortOrder - b.sortOrder)
  }));
  const uncategorizedDecks = decks.filter(d => d.groupId === null).sort((a,b) => a.sortOrder - b.sortOrder);

  const activeDeck = decks.find(d => d.id === activeId);

  return (
    <div className="pb-20">
      {/* Header */}
      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div><p className="text-xs font-bold uppercase tracking-[0.16em] text-primary">Collection</p><h2 className="editorial-title mt-1 text-3xl text-text-heading">Flashcard decks</h2></div>
        <div className="grid grid-cols-2 gap-3 sm:flex">
          <button onClick={() => setIsCreatingGroup(true)} className="inline-flex min-h-12 items-center justify-center gap-2 rounded-xl border border-border-light bg-bg-surface px-4 font-bold text-text-heading shadow-sm transition-colors hover:bg-bg-surface-alt">
             Add Group
          </button>
          <button onClick={() => setShowImport(true)} className="inline-flex min-h-12 items-center justify-center gap-2 rounded-xl bg-primary px-4 font-bold text-white shadow-sm transition-colors hover:bg-primary-hover">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
            Import Deck
          </button>
        </div>
      </div>

      {isCreatingGroup && (
        <div className="animate-slide-up mb-6 flex flex-col gap-3 rounded-2xl border border-primary/20 bg-bg-surface p-5 shadow-sm sm:flex-row sm:items-center">
          <input
            autoFocus
            type="text"
            value={newGroupName}
            onChange={(e) => setNewGroupName(e.target.value)}
            placeholder="e.g. Exam 1 Flashcards"
            className="flex-1 px-3 py-2 rounded-lg border border-border bg-bg-surface-alt/50 text-text-heading focus:outline-none focus:ring-2 focus:ring-primary/30"
          />
          <button onClick={handleCreateGroup} className="px-4 py-2 bg-primary text-white font-medium rounded-md hover:bg-primary-hover cursor-pointer">
            Save
          </button>
          <button onClick={() => { setIsCreatingGroup(false); setNewGroupName(""); }} className="px-4 py-2 bg-bg-surface-alt text-text-heading font-medium rounded-md hover:bg-border cursor-pointer">
            Cancel
          </button>
        </div>
      )}

      {editingId && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm">
          <div className="w-full max-w-md rounded-3xl border border-border bg-bg-surface p-6 shadow-[var(--shadow-modal)]">
            <h3 className="editorial-title mb-4 text-2xl text-text-heading">Edit deck</h3>
            <input
              type="text"
              value={editName}
              onChange={(e) => setEditName(e.target.value)}
              placeholder="Deck Name"
              autoFocus
              className="w-full px-3 py-2 mb-3 rounded-lg border border-border bg-bg-surface-alt/50 text-text-heading focus:outline-none focus:ring-2 focus:ring-primary/30"
            />
            <textarea
              value={editDescription}
              onChange={(e) => setEditDescription(e.target.value)}
              placeholder="Description (optional)"
              rows={3}
              className="w-full px-3 py-2 mb-4 rounded-lg border border-border bg-bg-surface-alt/50 text-text-heading focus:outline-none focus:ring-2 focus:ring-primary/30 resize-none"
            />
            <div className="flex gap-2 justify-end">
              <button onClick={() => setEditingId(null)} className="px-4 py-2 bg-bg-surface-alt text-text-heading font-medium rounded-md hover:bg-border cursor-pointer">Cancel</button>
              <button onClick={() => handleRenameDeck(editingId)} className="px-4 py-2 bg-primary text-white font-medium rounded-md hover:bg-primary-hover cursor-pointer">Save Changes</button>
            </div>
          </div>
        </div>
      )}

      {!loading && decks.length === 0 && groups.length === 0 && (
         <div className="text-center py-16">
            <h3 className="text-lg font-semibold text-text-heading mb-1">No decks yet</h3>
            <p className="text-text-secondary mb-4">Import your first deck or create a group</p>
         </div>
      )}

      {!loading && (
        <DndContext sensors={sensors} collisionDetection={pointerWithin} onDragStart={handleDragStart} onDragOver={handleDragOver} onDragEnd={handleDragEnd}>
          <div className="space-y-8">
            {groupedDecks.map(group => (
              <div key={group.id} className="rounded-2xl border border-border-light bg-bg-surface/70 p-4 shadow-[var(--shadow-card)] sm:p-5">
                <div className={`flex items-center justify-between ${collapsedGroups[group.id] ? "" : "mb-4"}`}>
                  {editingGroupId === group.id ? (
                     <div className="flex items-center gap-2">
                       <input autoFocus value={editGroupName} onChange={e => setEditGroupName(e.target.value)} className="px-2 py-1 rounded border border-border bg-bg-surface text-text-heading focus:ring-1 focus:ring-primary" />
                       <button onClick={() => handleRenameGroup(group.id)} className="text-xs px-2 py-1 bg-primary text-white rounded">Save</button>
                       <button onClick={() => setEditingGroupId(null)} className="text-xs px-2 py-1 bg-bg-surface text-text-heading rounded border border-border-light">Cancel</button>
                     </div>
                  ) : (
                    <div className="flex items-center gap-2">
                      <button onClick={() => toggleGroup(group.id)} className="p-1 rounded text-text-muted hover:text-text-heading hover:bg-bg-surface transition-colors cursor-pointer" title={collapsedGroups[group.id] ? "Expand" : "Collapse"}>
                        <svg className={`w-5 h-5 transition-transform duration-200 ${collapsedGroups[group.id] ? '-rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
                      </button>
                      <h3 className="text-lg font-extrabold text-text-heading">{group.name}</h3>
                    </div>
                  )}
                  
                  <div className="flex items-center gap-2">
                    <ShareMenu targetType="GROUP" contentId={group.id} classSlug={params.classSlug as string} />
                    <button onClick={() => { setEditingGroupId(group.id); setEditGroupName(group.name); }} className="text-text-muted hover:text-text-heading"><svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg></button>
                    <button onClick={() => handleDeleteGroup(group.id, group.name)} className="text-text-muted hover:text-error"><svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg></button>
                  </div>
                </div>
                
                <div className={collapsedGroups[group.id] ? "hidden" : "block"}>
                  <SortableContext id={group.id} items={group.decks.map(d => d.id)} strategy={verticalListSortingStrategy}>
                    <DroppableContainer id={group.id}>
                       {group.decks.length === 0 ? (
                         <div className="col-span-1 md:col-span-2 text-center py-4 text-text-muted text-sm border-2 border-dashed border-border-light rounded-lg">Drop decks here</div>
                       ) : (
                         group.decks.map(deck => (
                           <SortableDeckCard key={deck.id} deck={deck} onEdit={(d: DeckItem) => { setEditingId(d.id); setEditName(d.name); setEditDescription(d.description || ""); }} onDelete={handleDeleteDeck} classSlug={classSlug} />
                         ))
                       )}
                    </DroppableContainer>
                  </SortableContext>
                </div>
              </div>
            ))}

            {/* Uncategorized */}
            <div className="rounded-2xl border border-border-light bg-bg-surface/70 p-4 shadow-[var(--shadow-card)] sm:p-5">
               <div className={`flex items-center gap-2 ${collapsedGroups["uncategorized"] ? "" : "mb-4"}`}>
                 <button onClick={() => toggleGroup("uncategorized")} className="p-1 rounded text-text-muted hover:text-text-heading hover:bg-bg-surface transition-colors cursor-pointer" title={collapsedGroups["uncategorized"] ? "Expand" : "Collapse"}>
                   <svg className={`w-5 h-5 transition-transform duration-200 ${collapsedGroups["uncategorized"] ? '-rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
                 </button>
                 <h3 className="text-lg font-semibold text-text-heading">Uncategorized</h3>
               </div>
               
               <div className={collapsedGroups["uncategorized"] ? "hidden" : "block"}>
                 <SortableContext id="uncategorized" items={uncategorizedDecks.map(d => d.id)} strategy={verticalListSortingStrategy}>
                    <DroppableContainer id="uncategorized">
                       {uncategorizedDecks.length === 0 ? (
                         <div className="col-span-1 md:col-span-2 text-center py-4 text-text-muted text-sm border-2 border-dashed border-border-light rounded-lg">No uncategorized decks</div>
                       ) : (
                         uncategorizedDecks.map(deck => (
                           <SortableDeckCard key={deck.id} deck={deck} onEdit={(d: DeckItem) => { setEditingId(d.id); setEditName(d.name); setEditDescription(d.description || ""); }} onDelete={handleDeleteDeck} classSlug={classSlug} />
                         ))
                       )}
                    </DroppableContainer>
                  </SortableContext>
               </div>
            </div>
          </div>

          <DragOverlay>
            {activeDeck ? (
              <div className="opacity-80 scale-105 shadow-xl rotate-2">
                 <SortableDeckCard deck={activeDeck} onEdit={()=>{}} onDelete={()=>{}} classSlug={classSlug} />
              </div>
            ) : null}
          </DragOverlay>
        </DndContext>
      )}

      {showImport && (
        <ImportModal classId={classId} importType="flashcards" onClose={() => setShowImport(false)} onImported={() => { setShowImport(false); setLoading(true); window.location.reload(); }} />
      )}
    </div>
  );
}