"use client";
import React, { useState, useEffect, useRef, useCallback } from "react";
import { useI18n } from "@/lib/i18n";
import { ContextMenu, MenuItem } from "@/components/ui/ContextMenu";

export interface Tag { id: string; name: string; color: string }

export interface Task {
  id: string;
  listId: string;
  parentId: string | null;
  title: string;
  note: string | null;
  completed: boolean;
  completedAt: string | null;
  dueDate: string | null;
  priority: number;
  sortOrder: number;
  createdAt: string;
  updatedAt: string;
  deletedAt?: string | null;
  isDeleted?: boolean;
  children: Task[];
  tags?: { tag: Tag }[];
}

export interface List { id: string; name: string; color: string; icon: string }
export interface User { id: string; name?: string | null; email?: string | null }

const PRIORITY_COLORS = ["transparent", "var(--priority-low)", "var(--priority-medium)", "var(--priority-high)"];

function isOverdue(d: string | null) {
  if (!d) return false;
  return new Date(d) < new Date() && new Date(d).toDateString() !== new Date().toDateString();
}

interface TaskItemProps {
  task: Task;
  depth?: number;
  isSelected: boolean;
  onSelect: (t: Task) => void;
  onToggle: (id: string, completed: boolean) => void;
  onUpdateTitle: (id: string, title: string) => void;
  onAddSubtask: (title: string, parentId: string) => void;
  onContextMenu: (x: number, y: number, task: Task) => void;
  isTrashMode?: boolean;
  onRestore?: (id: string) => void;
  onPermanentDelete?: (id: string) => void;
}

// Recursive Task Tree Item (Supports 1st, 2nd, 3rd, N-level sub-tasks seamlessly)
function RecursiveTaskItem({
  task,
  depth = 0,
  isSelected,
  onSelect,
  onToggle,
  onUpdateTitle,
  onAddSubtask,
  onContextMenu,
  isTrashMode = false,
  onRestore,
  onPermanentDelete,
}: TaskItemProps) {
  const { t, lang } = useI18n();
  const [expanded, setExpanded] = useState(true);
  const [editingTitle, setEditingTitle] = useState(false);
  const [tempTitle, setTempTitle] = useState(task.title);

  const [addingSubtask, setAddingSubtask] = useState(false);
  const [subtaskInput, setSubtaskInput] = useState("");

  // Touch swipe support
  const touchStartX = useRef<number | null>(null);
  const [swipeOffset, setSwipeOffset] = useState(0);

  const editInputRef = useRef<HTMLInputElement>(null);
  const subInputRef = useRef<HTMLInputElement>(null);

  const completedChildren = task.children?.filter((c) => c.completed).length || 0;
  const totalChildren = task.children?.length || 0;

  useEffect(() => {
    setTempTitle(task.title);
  }, [task.title]);

  useEffect(() => {
    if (editingTitle) {
      editInputRef.current?.focus();
      editInputRef.current?.select();
    }
  }, [editingTitle]);

  useEffect(() => {
    if (addingSubtask) {
      subInputRef.current?.focus();
    }
  }, [addingSubtask]);

  const formatDate = (d: string | null) => {
    if (!d) return null;
    const date = new Date(d);
    const now = new Date();
    const isToday = date.toDateString() === now.toDateString();
    const isTomorrow = date.toDateString() === new Date(now.getTime() + 86400000).toDateString();
    if (isToday) return t("today");
    if (isTomorrow) return t("tomorrow");
    return date.toLocaleDateString(lang === "ko" ? "ko-KR" : lang === "ja" ? "ja-JP" : "en-US", { month: "short", day: "numeric" });
  };

  const priorityLabels = [t("priorityNone"), t("priorityLow"), t("priorityMedium"), t("priorityHigh")];

  const handleSaveTitle = () => {
    const trimmed = tempTitle.trim();
    if (trimmed && trimmed !== task.title) {
      onUpdateTitle(task.id, trimmed);
    } else {
      setTempTitle(task.title);
    }
    setEditingTitle(false);
  };

  const handleCreateSubtask = (e: React.FormEvent) => {
    e.preventDefault();
    const trimmed = subtaskInput.trim();
    if (trimmed) {
      onAddSubtask(trimmed, task.id);
      setSubtaskInput("");
      setAddingSubtask(false);
      setExpanded(true);
    }
  };

  // Touch Swipe handlers
  const handleTouchStart = (e: React.TouchEvent) => {
    if (isTrashMode) return;
    touchStartX.current = e.touches[0].clientX;
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    if (touchStartX.current === null) return;
    const deltaX = e.touches[0].clientX - touchStartX.current;
    if (Math.abs(deltaX) < 120) {
      setSwipeOffset(deltaX);
    }
  };

  const handleTouchEnd = () => {
    if (swipeOffset > 70) {
      // Swiped Right -> Toggle Complete
      onToggle(task.id, !task.completed);
    }
    setSwipeOffset(0);
    touchStartX.current = null;
  };

  return (
    <div style={{ paddingLeft: depth > 0 ? 24 : 0, position: "relative" }}>
      <div
        className={`task-item${task.completed ? " completed" : ""}${isSelected ? " selected" : ""}`}
        onClick={() => onSelect(task)}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
        onContextMenu={(e) => {
          e.preventDefault();
          e.stopPropagation();
          onContextMenu(e.clientX, e.clientY, task);
        }}
        id={`task-${task.id}`}
        style={{
          borderLeft: depth > 0 ? "2px solid var(--border)" : "none",
          marginLeft: depth > 0 ? 8 : 0,
          transform: `translateX(${swipeOffset}px)`,
          transition: swipeOffset === 0 ? "transform 0.2s cubic-bezier(0.16, 1, 0.3, 1)" : "none",
        }}
      >
        {/* Toggle Expand Arrow if has children */}
        {totalChildren > 0 ? (
          <button
            type="button"
            className="icon-btn"
            style={{ width: 18, height: 18, flexShrink: 0, padding: 0, opacity: 0.6 }}
            onClick={(e) => {
              e.stopPropagation();
              setExpanded((p) => !p);
            }}
            title="Expand/Collapse"
          >
            <svg
              width="10"
              height="10"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.5"
              style={{ transform: expanded ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 0.15s" }}
            >
              <polyline points="9 18 15 12 9 6" />
            </svg>
          </button>
        ) : depth > 0 ? (
          <span style={{ width: 12, flexShrink: 0 }} />
        ) : null}

        {/* Check button (hidden in trash mode) */}
        {!isTrashMode ? (
          <button
            className={`task-check-btn${task.completed ? " checked" : ""}`}
            onClick={(e) => {
              e.stopPropagation();
              onToggle(task.id, !task.completed);
            }}
            aria-label={task.completed ? "Mark incomplete" : "Mark complete"}
            type="button"
            style={{ width: depth > 0 ? 17 : 19, height: depth > 0 ? 17 : 19, flexShrink: 0 }}
          />
        ) : (
          <span style={{ fontSize: 13, opacity: 0.5, flexShrink: 0 }}>🗑️</span>
        )}

        {/* Title, Meta and Tags */}
        <div className="task-body">
          {editingTitle && !isTrashMode ? (
            <input
              ref={editInputRef}
              className="form-input"
              value={tempTitle}
              onChange={(e) => setTempTitle(e.target.value)}
              onBlur={handleSaveTitle}
              onKeyDown={(e) => {
                if (e.key === "Enter") handleSaveTitle();
                if (e.key === "Escape") {
                  setTempTitle(task.title);
                  setEditingTitle(false);
                }
              }}
              onClick={(e) => e.stopPropagation()}
              style={{ padding: "2px 6px", fontSize: depth > 0 ? 13 : 14, fontWeight: 500, height: 26, width: "100%" }}
            />
          ) : (
            <div
              className="task-title"
              onDoubleClick={(e) => {
                if (isTrashMode) return;
                e.stopPropagation();
                setEditingTitle(true);
              }}
              title="Double click to edit"
              style={{ fontSize: depth > 0 ? 13 : 14, fontWeight: depth === 0 ? 600 : 500 }}
            >
              {task.title}
            </div>
          )}

          <div className="task-meta" style={{ flexWrap: "wrap", gap: 6 }}>
            {task.priority > 0 && !isTrashMode && (
              <div
                className="task-priority-dot"
                style={{ background: PRIORITY_COLORS[task.priority] }}
                title={priorityLabels[task.priority]}
              />
            )}
            {task.dueDate && !isTrashMode && (
              <span className={`task-due${isOverdue(task.dueDate) && !task.completed ? " overdue" : ""}`}>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
                </svg>
                {formatDate(task.dueDate)}
              </span>
            )}
            {totalChildren > 0 && !isTrashMode && (
              <span
                className="task-sub-count"
                onClick={(e) => {
                  e.stopPropagation();
                  setExpanded((p) => !p);
                }}
                style={{ cursor: "pointer" }}
              >
                {completedChildren}/{totalChildren}
              </span>
            )}

            {/* Tags Badges */}
            {task.tags && task.tags.length > 0 && (
              <div style={{ display: "flex", gap: 4 }}>
                {task.tags.map((tg) => (
                  <span
                    key={tg.tag.id}
                    className="badge"
                    style={{
                      background: tg.tag.color + "22",
                      color: tg.tag.color,
                      fontSize: 10,
                      padding: "1px 6px",
                      borderRadius: 4,
                      fontWeight: 600,
                    }}
                  >
                    #{tg.tag.name}
                  </span>
                ))}
              </div>
            )}

            {/* Quick Inline Add Subtask button */}
            {!isTrashMode && (
              <button
                className="badge badge-neutral"
                style={{ cursor: "pointer", fontSize: 10, padding: "1px 6px", border: "1px solid var(--border)", background: "transparent" }}
                onClick={(e) => {
                  e.stopPropagation();
                  setAddingSubtask(true);
                  setExpanded(true);
                }}
                title="Add subtask"
                type="button"
              >
                + {t("subtasks")}
              </button>
            )}
          </div>

          {task.note && !task.completed && depth === 0 && (
            <div className="task-note-preview">{task.note.replace(/[#*`]/g, "").slice(0, 80)}</div>
          )}
        </div>

        {/* Trash Mode Actions or Edit Icon */}
        {isTrashMode ? (
          <div style={{ display: "flex", gap: 6 }}>
            <button
              className="btn btn-ghost btn-sm"
              style={{ fontSize: 11, padding: "2px 8px" }}
              onClick={(e) => {
                e.stopPropagation();
                if (onRestore) onRestore(task.id);
              }}
              title="Restore task"
              type="button"
            >
              ↩️ Restore
            </button>
            <button
              className="btn btn-ghost btn-sm"
              style={{ fontSize: 11, padding: "2px 8px", color: "var(--danger)" }}
              onClick={(e) => {
                e.stopPropagation();
                if (onPermanentDelete) onPermanentDelete(task.id);
              }}
              title="Delete permanently"
              type="button"
            >
              ❌
            </button>
          </div>
        ) : (
          <button
            className="icon-btn"
            style={{ width: 22, height: 22, opacity: 0.35, flexShrink: 0 }}
            onClick={(e) => {
              e.stopPropagation();
              setEditingTitle(true);
            }}
            title="Edit title"
            type="button"
          >
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
            </svg>
          </button>
        )}
      </div>

      {/* Recursive Children (N-Depth Sub-tasks) */}
      {totalChildren > 0 && expanded && (
        <div className="subtask-recursive-tree">
          {task.children.map((child) => (
            <RecursiveTaskItem
              key={child.id}
              task={child}
              depth={depth + 1}
              isSelected={isSelected}
              onSelect={onSelect}
              onToggle={onToggle}
              onUpdateTitle={onUpdateTitle}
              onAddSubtask={onAddSubtask}
              onContextMenu={onContextMenu}
              isTrashMode={isTrashMode}
              onRestore={onRestore}
              onPermanentDelete={onPermanentDelete}
            />
          ))}
        </div>
      )}

      {/* Inline Add Subtask form for this node */}
      {addingSubtask && !isTrashMode && (
        <form
          onSubmit={handleCreateSubtask}
          style={{ display: "flex", gap: 6, padding: "4px 0 4px 32px" }}
          onClick={(e) => e.stopPropagation()}
        >
          <span style={{ color: "var(--accent)", fontSize: 13, lineHeight: "26px" }}>↳</span>
          <input
            ref={subInputRef}
            className="form-input"
            placeholder={t("addSubtaskPlaceholder")}
            value={subtaskInput}
            onChange={(e) => setSubtaskInput(e.target.value)}
            onBlur={() => {
              if (!subtaskInput.trim()) setAddingSubtask(false);
            }}
            onKeyDown={(e) => {
              if (e.key === "Escape") setAddingSubtask(false);
            }}
            style={{ height: 26, fontSize: 12.5, padding: "2px 8px", flex: 1 }}
          />
          <button className="btn btn-primary btn-sm" type="submit" style={{ padding: "2px 8px", fontSize: 11 }}>
            {t("add")}
          </button>
        </form>
      )}
    </div>
  );
}

interface Props {
  user: User;
  listId: string | null;
  lists: List[];
  tasks: Task[];
  setTasks: React.Dispatch<React.SetStateAction<Task[]>>;
  selectedTaskId: string | null;
  onTaskSelect: (t: Task | null) => void;
  showCompleted: boolean;
  onToggleCompleted: () => void;
  onMenuOpen: () => void;
  onRefresh: () => void;
  isDemo?: boolean;
  isTrashActive?: boolean;
  selectedTag?: string | null;
  onEmptyTrash?: () => void;
  onRestoreTask?: (id: string) => void;
  onPermanentDeleteTask?: (id: string) => void;
  onDemoAddTask?: (title: string, listId: string, parentId?: string | null) => void;
  onDemoToggleTask?: (id: string, completed: boolean) => void;
  onUpdateTaskTitle?: (id: string, title: string) => void;
  onUpdateListName?: (id: string, name: string) => void;
  onDeleteTask?: (id: string) => void;
}

export function TaskList({
  user,
  listId,
  lists,
  tasks,
  setTasks,
  selectedTaskId,
  onTaskSelect,
  showCompleted,
  onToggleCompleted,
  onMenuOpen,
  onRefresh,
  isDemo = false,
  isTrashActive = false,
  selectedTag = null,
  onEmptyTrash,
  onRestoreTask,
  onPermanentDeleteTask,
  onDemoAddTask,
  onDemoToggleTask,
  onUpdateTaskTitle,
  onUpdateListName,
  onDeleteTask,
}: Props) {
  const { t } = useI18n();
  const [newTaskTitle, setNewTaskTitle] = useState("");
  const [loading, setLoading] = useState(false);
  const [editingHeader, setEditingHeader] = useState(false);
  const [headerTitle, setHeaderTitle] = useState("");
  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; task: Task } | null>(null);

  const inputRef = useRef<HTMLInputElement>(null);
  const headerInputRef = useRef<HTMLInputElement>(null);
  const currentList = lists.find((l) => l.id === listId);

  useEffect(() => {
    if (currentList) setHeaderTitle(currentList.name);
  }, [currentList]);

  useEffect(() => {
    if (editingHeader) {
      headerInputRef.current?.focus();
      headerInputRef.current?.select();
    }
  }, [editingHeader]);

  const fetchTasks = useCallback(async () => {
    if (!listId || isDemo || isTrashActive || selectedTag) return;
    setLoading(true);
    try {
      const res = await fetch(`/api/tasks?listId=${listId}&showCompleted=${showCompleted}`);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();
      setTasks(Array.isArray(data) ? data : []);
    } catch (err) {
      console.error("[TaskList] fetchTasks failed", err);
    } finally {
      setLoading(false);
    }
  }, [listId, showCompleted, isDemo, isTrashActive, selectedTag, setTasks]);

  useEffect(() => {
    fetchTasks();
  }, [fetchTasks]);

  useEffect(() => {
    const handler = () => inputRef.current?.focus();
    document.addEventListener("checkflow:addTask", handler);
    return () => document.removeEventListener("checkflow:addTask", handler);
  }, []);

  const handleToggle = useCallback(
    async (id: string, completed: boolean) => {
      if (isDemo) {
        if (onDemoToggleTask) onDemoToggleTask(id, completed);
        return;
      }

      try {
        const res = await fetch(`/api/tasks/${id}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ completed }),
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        onRefresh();
      } catch (err) {
        console.error("[TaskList] handleToggle failed", err);
      }
    },
    [isDemo, onDemoToggleTask, onRefresh]
  );

  const handleAddTask = async (e: React.FormEvent) => {
    e.preventDefault();
    const title = newTaskTitle.trim();
    if (!title || !listId) return;

    if (isDemo) {
      if (onDemoAddTask) onDemoAddTask(title, listId, null);
      setNewTaskTitle("");
      return;
    }

    try {
      const res = await fetch("/api/tasks", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title, listId }),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const task = await res.json();
      setTasks((prev) => [...prev, task]);
      setNewTaskTitle("");
      onRefresh();
    } catch (err) {
      console.error("[TaskList] handleAddTask failed", err);
    }
  };

  const handleAddSubtaskInline = async (title: string, parentId: string) => {
    if (!listId) return;
    if (isDemo) {
      if (onDemoAddTask) onDemoAddTask(title, listId, parentId);
      return;
    }

    try {
      const res = await fetch("/api/tasks", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title, listId, parentId }),
      });
      if (res.ok) {
        onRefresh();
      }
    } catch (err) {
      console.error("Failed to add subtask inline", err);
    }
  };

  const handleSaveHeaderTitle = () => {
    const trimmed = headerTitle.trim();
    if (trimmed && listId && onUpdateListName && trimmed !== currentList?.name) {
      onUpdateListName(listId, trimmed);
    } else if (currentList) {
      setHeaderTitle(currentList.name);
    }
    setEditingHeader(false);
  };

  if (!listId && !isTrashActive && !selectedTag) {
    return (
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", color: "var(--text-tertiary)" }}>
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ opacity: 0.3, marginBottom: 12 }}>
          <path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
        </svg>
        <p>{t("selectListToStart")}</p>
      </div>
    );
  }

  // Filter top-level vs completed
  const incompleteTasks = tasks.filter((t) => !t.completed);
  const completedTasks = tasks.filter((t) => t.completed);

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      {/* Header */}
      <div className="main-header">
        <button className="icon-btn mobile-only" id="menu-btn" onClick={onMenuOpen} aria-label="Menu" type="button">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
          </svg>
        </button>

        {/* Header Title / Trash Header / Tag Header */}
        {isTrashActive ? (
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ fontSize: 18, fontWeight: 700, color: "var(--danger)" }}>🗑️ {t("trash") || "Trash"}</span>
            <span style={{ fontSize: 12, color: "var(--text-tertiary)" }}>({tasks.length})</span>
          </div>
        ) : selectedTag ? (
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ fontSize: 18, fontWeight: 700, color: "var(--accent)" }}>🏷️ #{selectedTag}</span>
            <span style={{ fontSize: 12, color: "var(--text-tertiary)" }}>({tasks.length})</span>
          </div>
        ) : editingHeader ? (
          <input
            ref={headerInputRef}
            id="header-rename-input"
            className="form-input"
            value={headerTitle}
            onChange={(e) => setHeaderTitle(e.target.value)}
            onBlur={handleSaveHeaderTitle}
            onKeyDown={(e) => {
              if (e.key === "Enter") handleSaveHeaderTitle();
              if (e.key === "Escape") {
                if (currentList) setHeaderTitle(currentList.name);
                setEditingHeader(false);
              }
            }}
            onClick={(e) => e.stopPropagation()}
            autoFocus
            style={{ fontSize: 18, fontWeight: 700, height: 36, padding: "2px 10px", maxWidth: 360 }}
          />
        ) : (
          <div
            className="main-header-title"
            id="main-header-title"
            style={{
              color: currentList?.color,
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: 8,
              padding: "4px 8px",
              borderRadius: "var(--radius-sm)",
              transition: "background var(--dur-fast)",
            }}
            onClick={(e) => {
              e.stopPropagation();
              setEditingHeader(true);
            }}
            title="Click to rename list"
          >
            <span>{currentList?.name || t("tasks")}</span>
            <span style={{ fontSize: 13, opacity: 0.5 }}>✏️</span>
          </div>
        )}

        {/* Header Actions */}
        <div className="main-header-actions">
          {isTrashActive ? (
            <button
              id="empty-trash-btn"
              className="btn btn-ghost btn-sm"
              style={{ color: "var(--danger)" }}
              onClick={onEmptyTrash}
              type="button"
            >
              🧹 {t("emptyTrash") || "Empty Trash"}
            </button>
          ) : (
            <button
              id="toggle-completed-btn"
              className="btn btn-ghost btn-sm"
              onClick={onToggleCompleted}
              title={showCompleted ? t("hideDone") : t("showDone")}
              type="button"
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <polyline points="20 6 9 17 4 12" />
              </svg>
              {showCompleted ? t("hideDone") : t("showDone")}
            </button>
          )}
        </div>
      </div>

      {/* Task list container */}
      <div
        className="task-list-container"
        onContextMenu={(e) => {
          if (e.target === e.currentTarget) {
            e.preventDefault();
          }
        }}
      >
        {loading && (
          <div style={{ padding: "20px", textAlign: "center", color: "var(--text-tertiary)" }}>{t("loading")}</div>
        )}
        {!loading && tasks.length === 0 && (
          <div className="task-list-empty">
            <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
            </svg>
            <p>{isTrashActive ? "Trash is empty" : selectedTag ? "No tasks with this tag" : t("noTasksYet")}</p>
          </div>
        )}

        {/* Tasks Tree */}
        {incompleteTasks.map((task) => (
          <RecursiveTaskItem
            key={task.id}
            task={task}
            depth={0}
            isSelected={selectedTaskId === task.id}
            onSelect={onTaskSelect}
            onToggle={handleToggle}
            onUpdateTitle={(id, title) => onUpdateTaskTitle && onUpdateTaskTitle(id, title)}
            onAddSubtask={handleAddSubtaskInline}
            onContextMenu={(x, y, tItem) => setContextMenu({ x, y, task: tItem })}
            isTrashMode={isTrashActive}
            onRestore={onRestoreTask}
            onPermanentDelete={onPermanentDeleteTask}
          />
        ))}

        {/* Completed Tasks */}
        {!isTrashActive && showCompleted && completedTasks.length > 0 && (
          <div>
            <div
              style={{
                padding: "16px 20px 6px",
                fontSize: 11,
                fontWeight: 600,
                color: "var(--text-tertiary)",
                textTransform: "uppercase",
                letterSpacing: "0.5px",
              }}
            >
              {t("completedSection")} ({completedTasks.length})
            </div>
            {completedTasks.map((task) => (
              <RecursiveTaskItem
                key={task.id}
                task={task}
                depth={0}
                isSelected={selectedTaskId === task.id}
                onSelect={onTaskSelect}
                onToggle={handleToggle}
                onUpdateTitle={(id, title) => onUpdateTaskTitle && onUpdateTaskTitle(id, title)}
                onAddSubtask={handleAddSubtaskInline}
                onContextMenu={(x, y, tItem) => setContextMenu({ x, y, task: tItem })}
                isTrashMode={isTrashActive}
                onRestore={onRestoreTask}
                onPermanentDelete={onPermanentDeleteTask}
              />
            ))}
          </div>
        )}
      </div>

      {/* Full-featured Context Menu */}
      {contextMenu && !isTrashActive && (
        <ContextMenu
          x={contextMenu.x}
          y={contextMenu.y}
          items={[
            {
              label: contextMenu.task.completed ? t("showDone") : t("completedSection"),
              icon: contextMenu.task.completed ? "↩️" : "✅",
              onClick: () => handleToggle(contextMenu.task.id, !contextMenu.task.completed),
            },
            {
              label: t("taskTitlePlaceholder"),
              icon: "✏️",
              onClick: () => onTaskSelect(contextMenu.task),
            },
            {
              label: t("subtasks"),
              icon: "↳",
              onClick: () => {
                onTaskSelect(contextMenu.task);
              },
            },
            { divider: true, label: "" },
            {
              label: t("deleteTaskConfirm").split("?")[0],
              icon: "🗑️",
              danger: true,
              onClick: async () => {
                if (onDeleteTask) {
                  onDeleteTask(contextMenu.task.id);
                } else if (!isDemo) {
                  await fetch(`/api/tasks/${contextMenu.task.id}`, { method: "DELETE" });
                  onRefresh();
                }
              },
            },
          ]}
          onClose={() => setContextMenu(null)}
        />
      )}

      {/* Add task bar (hidden in trash mode) */}
      {!isTrashActive && !selectedTag && (
        <div className="add-task-bar">
          <button className="task-check-btn" style={{ opacity: 0.4, flexShrink: 0 }} aria-hidden="true" type="button" />
          <form onSubmit={handleAddTask} style={{ flex: 1, display: "flex", gap: 8 }}>
            <input
              ref={inputRef}
              id="add-task-input"
              className="add-task-input"
              placeholder={t("addTaskPlaceholder")}
              value={newTaskTitle}
              onChange={(e) => setNewTaskTitle(e.target.value)}
            />
            {newTaskTitle.trim() && (
              <button type="submit" className="btn btn-primary btn-sm" id="add-task-btn">
                {t("add")}
              </button>
            )}
          </form>
        </div>
      )}
    </div>
  );
}