"use client";

import { useState } from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { useTheme } from "next-themes";
import {
  Archive,
  ChevronRight,
  ClipboardList,
  GripVertical,
  MoreVertical,
  Pencil,
  Plus,
  Sparkles,
  StickyNote,
  Trash2,
} from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { TodoCheckbox } from "@/components/board/todo-checkbox";
import { MouseFollowTooltip } from "@/components/board/mouse-follow-tooltip";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { getBrighterColor, getComplementaryColor, getGroupColor } from "@/lib/colors";
import { useBoard } from "@/components/board/board-context";
import { useBoardView } from "@/components/board/board-view-provider";
import { NotesDialog } from "@/components/board/notes-dialog";
import { TodoAiDialog } from "@/components/board/todo-ai-dialog";
import { TodoCreateDialog } from "@/components/board/todo-create-dialog";
import { TodoCreatePopover } from "@/components/board/todo-create-popover";
import { TodoEditDialog } from "@/components/board/todo-edit-dialog";
import { TodoProgressPie } from "@/components/board/todo-progress-pie";
import { EditGroupDialog } from "@/components/board/edit-group-dialog";
import { StatusUpdateDialog } from "@/components/board/status-update-dialog";
import { ConfirmDeleteDialog } from "@/components/confirm-delete-dialog";
import type { GroupDTO, TodoDTO } from "@/types/board";

// Compact's "+" -- sits inline on the last visible to-do row (its sibling
// text button is flex-1, so this shrink-0 trigger naturally lands at the
// row's right edge) instead of on a row of its own.
function AddTodoMenu({
  group,
  aiConfigured,
  onAddClick,
  onAiClick,
}: {
  group: GroupDTO;
  aiConfigured: boolean;
  onAddClick: () => void;
  onAiClick: () => void;
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <button
            className="flex size-6 shrink-0 items-center justify-center self-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
            aria-label={`Add a to-do to ${group.title}`}
          >
            <Plus className="size-3.5" />
          </button>
        }
      />
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={onAddClick}>
          <Plus className="size-4" />
          Add to-do
        </DropdownMenuItem>
        {aiConfigured && (
          <DropdownMenuItem onClick={onAiClick}>
            <Sparkles className="size-4" />
            Add using AI
          </DropdownMenuItem>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export function GroupCard({ group }: { group: GroupDTO }) {
  const { toggleTodoDone, removeGroup, archiveGroup, aiConfigured } = useBoard();
  const { view } = useBoardView();
  const compact = view === "compact";
  const { resolvedTheme } = useTheme();
  const [editingTodo, setEditingTodo] = useState<TodoDTO | null>(null);
  const [editOpen, setEditOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [todoAiOpen, setTodoAiOpen] = useState(false);
  const [todoCreateOpen, setTodoCreateOpen] = useState(false);
  const [statusUpdateOpen, setStatusUpdateOpen] = useState(false);
  const [expandedWhileComplete, setExpandedWhileComplete] = useState(false);

  const {
    attributes,
    listeners,
    setNodeRef,
    setActivatorNodeRef,
    transform,
    transition,
    isDragging,
    isOver,
  } = useSortable({
    id: group.id,
    data: { type: "group", categoryId: group.categoryId },
  });
  // Another card is being dragged and is currently hovering over this one
  // -- signal "it'll land near here" with a ring, distinct from this
  // card's own accent-colored border. (isDragging guards against this
  // card ever ringing itself while it's the one being moved.)
  const isDropTarget = isOver && !isDragging;

  const color = getGroupColor(group.color);
  const isDark = resolvedTheme === "dark";
  const borderColor = isDark ? color.dark : color.light;
  // A subdued tint of the same stroke color, blended into the theme's own
  // card surface -- not a fixed pastel, so it automatically stays correct
  // if the neutral card token ever changes, and needs no separate
  // light/dark background palette to hand-tune.
  const backgroundColor = isDark
    ? `color-mix(in srgb, ${color.dark} 18%, var(--card))`
    : `color-mix(in srgb, ${color.light} 12%, var(--card))`;
  // Opposing hue from the group's own color, for the progress pie below --
  // so it reads as a distinct accent rather than blending into the border.
  const pieAccentColor = getComplementaryColor(
    isDark ? color.dark : color.light,
    isDark ? "dark" : "light"
  );
  // Un-checked to-do text: a brighter tint of the group's own color rather
  // than the default (near-white in dark mode) foreground, so the group
  // title reads as the most prominent thing on the card.
  const todoTextColor = getBrighterColor(borderColor, isDark ? "dark" : "light");

  // Only offer archiving once there's actually something done -- a group
  // with no to-dos yet, or with any still open, isn't "finished" yet.
  const canArchive = group.todos.length > 0 && group.todos.every((t) => t.completed);
  const completedCount = group.todos.filter((t) => t.completed).length;
  // Compact only ever surfaces open work -- checked-off todos are dropped
  // from the list entirely rather than shown crossed-out.
  const visibleTodos = compact ? group.todos.filter((t) => !t.completed) : group.todos;

  // In the default view, a fully-checked-off group collapses down to just
  // its header (title, notes icon, kebab menu) with a disclosure triangle
  // in place of the drag-grip dots, so a board full of "done" groups
  // doesn't stay as visually loud as one still full of open work. The
  // triangle re-expands it back to the normal full card. Compact already
  // hides finished groups outright (see CategoryLane), so this only
  // applies to the default view.
  const showDisclosure = !compact && canArchive;
  // Reset back to collapsed each time the group freshly becomes fully
  // done, rather than remembering a stale expanded choice from its last
  // completion cycle. Adjusting state during render (comparing against
  // last render's value) instead of in a useEffect avoids an extra render
  // pass -- see https://react.dev/learn/you-might-not-need-an-effect.
  const [wasComplete, setWasComplete] = useState(canArchive);
  if (canArchive !== wasComplete) {
    setWasComplete(canArchive);
    if (canArchive) setExpandedWhileComplete(false);
  }
  const isCollapsed = showDisclosure && !expandedWhileComplete;

  return (
    <>
      <div
        ref={setNodeRef}
        style={{
          transform: CSS.Transform.toString(transform),
          transition,
          borderColor,
          backgroundColor,
        }}
        className={cn(
          "relative rounded-xl border-[3px] p-3 shadow-sm transition-shadow",
          "hover:-translate-y-0.5 hover:shadow-md",
          isDragging && "opacity-50 shadow-lg",
          isDropTarget && "ring-2 ring-primary ring-offset-2 ring-offset-background"
        )}
      >
        <div className="flex items-start justify-between gap-1">
          <div
            ref={setActivatorNodeRef}
            {...attributes}
            {...listeners}
            className="group flex min-w-0 flex-1 cursor-grab touch-none items-start gap-1 rounded-md outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
            aria-label={`Drag to move ${group.title}`}
          >
            {showDisclosure ? (
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  setExpandedWhileComplete((v) => !v);
                }}
                className="mt-1 flex shrink-0 items-center justify-center text-muted-foreground/60 hover:text-foreground"
                aria-label={expandedWhileComplete ? `Collapse ${group.title}` : `Expand ${group.title}`}
                aria-expanded={expandedWhileComplete}
              >
                <ChevronRight
                  className={cn("size-4 transition-transform", expandedWhileComplete && "rotate-90")}
                />
              </button>
            ) : (
              <span className="mt-1 flex shrink-0 items-center justify-center text-muted-foreground/60 group-hover:text-muted-foreground">
                <GripVertical className="size-4" />
              </span>
            )}
            <h3 className="min-w-0 flex-1 truncate pt-1 text-sm font-semibold">{group.title}</h3>
          </div>
          <div className="flex shrink-0 items-center">
            <NotesDialog group={group} />
            <DropdownMenu>
              <DropdownMenuTrigger
                render={
                  <button
                    className="flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                    aria-label={`More options for ${group.title}`}
                  >
                    <MoreVertical className="size-4" />
                  </button>
                }
              />
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => setEditOpen(true)}>
                  <Pencil className="size-4" />
                  Edit
                </DropdownMenuItem>
                {aiConfigured && (
                  <DropdownMenuItem onClick={() => setStatusUpdateOpen(true)}>
                    <ClipboardList className="size-4" />
                    Status Update
                  </DropdownMenuItem>
                )}
                <DropdownMenuSeparator />
                <DropdownMenuItem variant="destructive" onClick={() => setConfirmOpen(true)}>
                  <Trash2 className="size-4" />
                  Delete group
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>

        {!isCollapsed && (
          <>
            <ul className="mt-1 space-y-1">
              {visibleTodos.map((todo, index) => {
                const todoButton = (
                  <button
                    type="button"
                    onClick={() => setEditingTodo(todo)}
                    style={todo.completed ? undefined : { color: todoTextColor }}
                    className={cn(
                      "flex min-w-0 flex-1 items-center gap-1 text-left text-sm hover:underline",
                      todo.completed && "text-muted-foreground line-through"
                    )}
                  >
                    <span className="min-w-0 truncate">{todo.title}</span>
                    {todo.details && (
                      <StickyNote className="size-3 shrink-0 text-muted-foreground/70" />
                    )}
                  </button>
                );

                // In compact, the "+" rides along on the last visible row
                // instead of taking a row of its own -- one less line per
                // group. (A compact group always has at least one unchecked
                // to-do -- CategoryLane hides it otherwise -- so there's
                // always a last row to put it on.)
                const isLastRow = compact && index === visibleTodos.length - 1;

                return (
                  <li key={todo.id} className="flex items-start gap-2 py-0.5">
                    <TodoCheckbox
                      checked={todo.completed}
                      onCheckedChange={(checked) =>
                        toggleTodoDone(todo.id, group.id, group.categoryId, checked)
                      }
                      accentColor={borderColor}
                      isDark={isDark}
                      className="mt-0.5"
                      aria-label={`Mark "${todo.title}" ${todo.completed ? "incomplete" : "complete"}`}
                    />
                    {todo.details ? (
                      <MouseFollowTooltip content={todo.details}>{todoButton}</MouseFollowTooltip>
                    ) : (
                      todoButton
                    )}
                    {isLastRow && (
                      <AddTodoMenu
                        group={group}
                        aiConfigured={aiConfigured}
                        onAddClick={() => setTodoCreateOpen(true)}
                        onAiClick={() => setTodoAiOpen(true)}
                      />
                    )}
                  </li>
                );
              })}
            </ul>

            {compact ? (
              // Defensive fallback -- shouldn't normally happen, since
              // CategoryLane already hides a compact group with zero
              // visible to-dos, but keeps the "+" reachable if that ever
              // changes.
              visibleTodos.length === 0 && (
                <div className="mt-1 flex justify-end">
                  <AddTodoMenu
                    group={group}
                    onAddClick={() => setTodoCreateOpen(true)}
                    onAiClick={() => setTodoAiOpen(true)}
                    aiConfigured={aiConfigured}
                  />
                </div>
              )
            ) : (
              <>
                <div className="mt-1">
                  <TodoCreatePopover groupId={group.id} categoryId={group.categoryId} />
                </div>

                {aiConfigured && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="w-full justify-start gap-2 text-muted-foreground"
                    onClick={() => setTodoAiOpen(true)}
                  >
                    <Sparkles className="size-3.5" />
                    Add using AI
                  </Button>
                )}

                {canArchive && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="w-full justify-start gap-2 text-muted-foreground"
                    onClick={() => archiveGroup(group.id, group.categoryId)}
                  >
                    <Archive className="size-3.5" />
                    Archive
                  </Button>
                )}

                <TodoProgressPie
                  completed={completedCount}
                  total={group.todos.length}
                  accentColor={pieAccentColor}
                />
              </>
            )}
          </>
        )}
      </div>

      {editingTodo && (
        <TodoEditDialog
          todo={editingTodo}
          groupId={group.id}
          categoryId={group.categoryId}
          open={!!editingTodo}
          onOpenChange={(open) => !open && setEditingTodo(null)}
        />
      )}

      <EditGroupDialog group={group} open={editOpen} onOpenChange={setEditOpen} />

      <TodoAiDialog group={group} open={todoAiOpen} onOpenChange={setTodoAiOpen} />

      <TodoCreateDialog
        groupId={group.id}
        categoryId={group.categoryId}
        open={todoCreateOpen}
        onOpenChange={setTodoCreateOpen}
      />

      <StatusUpdateDialog group={group} open={statusUpdateOpen} onOpenChange={setStatusUpdateOpen} />

      <ConfirmDeleteDialog
        open={confirmOpen}
        onOpenChange={setConfirmOpen}
        title="Delete group?"
        description={`Delete "${group.title}" and all of its to-dos? This can't be undone.`}
        onConfirm={() => removeGroup(group.id, group.categoryId)}
      />
    </>
  );
}