"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import {
  AlertTriangle,
  CheckSquare,
  Columns3,
  LayoutTemplate,
  List,
  Plus,
  Repeat,
  Trash2,
  Wand2,
  X,
} from "lucide-react";
import { TaskFilters, type TaskFilterValues } from "@/components/tasks/task-filters";
import { TaskKanban } from "@/components/tasks/task-kanban";
import { TaskCard } from "@/components/tasks/task-card";
import { TaskDetail } from "@/components/tasks/task-detail";
import { TaskForm, type TaskFormData } from "@/components/tasks/task-form";
import { TaskTemplatesModal } from "@/components/tasks/task-templates-modal";
import { SavedViewsBar } from "@/components/tasks/saved-views-bar";
import { useGoals } from "@/hooks/use-goals";
import { useTasks, type TaskWithRelations } from "@/hooks/use-tasks";
import { useProjects } from "@/hooks/use-projects";
import { useSavedViews } from "@/hooks/use-saved-views";
import { useTeams } from "@/hooks/use-teams";
import { useTeamPermissions } from "@/hooks/use-team-permissions";
import { useTags } from "@/hooks/use-tags";
import { useTaskTemplates } from "@/hooks/use-task-templates";
import { useTaskBuckets } from "@/hooks/use-task-buckets";
import type { TaskTemplate } from "@/types";
import { cn } from "@/lib/utils";
import { isTaskDeadlineOverdue } from "@/lib/utils";
import type { TaskStatus } from "@/types";

type ViewMode = "list" | "kanban";
type BulkUndoEntry = {
  id: string;
  input: Partial<{
    status: TaskStatus;
    completed_at: string | null;
    assignee_id: string | null;
  }>;
};
type BulkUndoState = {
  label: string;
  mode: "update" | "restore_delete";
  entries?: BulkUndoEntry[];
  deletedTasks?: TaskWithRelations[];
};

const EMPTY_FILTERS: TaskFilterValues = {
  search: "",
  status: "",
  priority: "",
  projectId: "",
  goalId: "",
  tagId: "",
  dueState: "",
};

const BUILT_IN_VIEWS = [
  { id: "all", label: "All", filters: {} },
  { id: "overdue", label: "Overdue", filters: { dueState: "overdue" } },
  { id: "today", label: "Due today", filters: { dueState: "today" } },
  { id: "high", label: "High priority", filters: { priority: "high" } },
] satisfies Array<{ id: string; label: string; filters: Partial<TaskFilterValues> }>;

function matchesTaskFilters(task: TaskWithRelations, filters: TaskFilterValues) {
  const query = filters.search.trim().toLowerCase();
  if (
    query &&
    ![task.title, task.description || ""].some((value) =>
      value.toLowerCase().includes(query)
    )
  ) {
    return false;
  }

  if (filters.status && task.status !== filters.status) return false;
  if (filters.priority && task.priority !== filters.priority) return false;
  if (filters.projectId && task.project_id !== filters.projectId) return false;
  if (filters.goalId && task.goal_id !== filters.goalId) return false;
  if (filters.tagId && !task.tags.some((tag) => tag.id === filters.tagId)) return false;

  if (filters.dueState === "none" && task.deadline) return false;
  if (filters.dueState === "overdue") {
    if (!task.deadline || !isTaskDeadlineOverdue(task.deadline) || task.status === "done") {
      return false;
    }
  }
  if (filters.dueState === "today") {
    if (!task.deadline) return false;
    const deadline = new Date(task.deadline);
    const now = new Date();
    if (
      deadline.getFullYear() !== now.getFullYear() ||
      deadline.getMonth() !== now.getMonth() ||
      deadline.getDate() !== now.getDate()
    ) {
      return false;
    }
  }
  if (filters.dueState === "upcoming") {
    if (!task.deadline) return false;
    const deadline = new Date(task.deadline);
    const now = new Date();
    const nextWeek = new Date();
    nextWeek.setDate(nextWeek.getDate() + 7);
    if (isTaskDeadlineOverdue(task.deadline, now) || deadline > nextWeek) return false;
  }

  return true;
}

export default function TasksPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [view, setView] = useState<ViewMode>("kanban");
  const [filters, setFilters] = useState<TaskFilterValues>(EMPTY_FILTERS);
  const [formOpen, setFormOpen] = useState(false);
  const [templatesOpen, setTemplatesOpen] = useState(false);
  const [editingTask, setEditingTask] = useState<TaskWithRelations | null>(null);
  const [viewingTask, setViewingTask] = useState<TaskWithRelations | null>(null);
  const [selectedTaskIdsState, setSelectedTaskIds] = useState<string[]>([]);
  const [bulkAssigneeId, setBulkAssigneeId] = useState("");
  const [bulkUndoState, setBulkUndoState] = useState<BulkUndoState | null>(null);

  const {
    tasks,
    createTask,
    updateTask,
    deleteTask,
    bulkUpdateTasks,
    bulkDeleteTasks,
    restoreTasksSnapshots,
    toggleTaskStatus,
  } = useTasks();
  const { projects } = useProjects();
  const { goals } = useGoals();
  const { tags, createTag } = useTags();
  const { templates, createTemplate, deleteTemplate } = useTaskTemplates();
  const { buckets, loading: bucketsLoading, createBucket, renameBucket, deleteBucket } = useTaskBuckets();
  const { views, createView, updateView, deleteView } = useSavedViews("tasks");
  const { activeMembers, userId } = useTeams();
  const { can } = useTeamPermissions();
  const canEditTasks = can("tasks", "edit");
  const seedingBucketsRef = useRef(false);

  useEffect(() => {
    if (bucketsLoading || buckets.length > 0 || !canEditTasks || seedingBucketsRef.current) return;
    seedingBucketsRef.current = true;

    (async () => {
      await createBucket("To-Do");
      await createBucket("In Bearbeitung");
      await createBucket("Erledigt");
    })().catch(() => {
      seedingBucketsRef.current = false;
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [bucketsLoading, buckets.length, canEditTasks]);

  useEffect(() => {
    const savedViewId = searchParams.get("savedView");
    if (!savedViewId || views.length === 0) return;

    const matchedView = views.find((view) => view.id === savedViewId);
    if (!matchedView) return;

    const timer = window.setTimeout(() => {
      setFilters({
        ...EMPTY_FILTERS,
        ...Object.fromEntries(
          Object.entries(matchedView.filters).filter(([, value]) => typeof value === "string")
        ),
      });
    }, 0);

    return () => window.clearTimeout(timer);
  }, [searchParams, views]);

  useEffect(() => {
    const shouldCreate = searchParams.get("create");
    if (shouldCreate !== "1") return;

    const nextParams = new URLSearchParams(searchParams.toString());
    nextParams.delete("create");
    const nextQuery = nextParams.toString();
    router.replace(nextQuery ? `/tasks?${nextQuery}` : "/tasks", { scroll: false });
    if (canEditTasks) {
      const timer = window.setTimeout(() => {
        setFormOpen(true);
      }, 0);

      return () => window.clearTimeout(timer);
    }
  }, [canEditTasks, router, searchParams]);

  const filteredTasks = useMemo(
    () => tasks.filter((task) => matchesTaskFilters(task, filters)),
    [filters, tasks]
  );

  const selectedTaskIds = useMemo(
    () =>
      selectedTaskIdsState.filter((taskId) =>
        filteredTasks.some((task) => task.id === taskId)
      ),
    [filteredTasks, selectedTaskIdsState]
  );

  const overdueCount = useMemo(
    () =>
      tasks.filter(
        (task) =>
          task.deadline &&
          task.status !== "done" &&
          isTaskDeadlineOverdue(task.deadline)
      ).length,
    [tasks]
  );

  const recurringCount = useMemo(
    () => tasks.filter((task) => task.recurrence_pattern !== "none").length,
    [tasks]
  );

  const assignableMembers = useMemo(
    () =>
      activeMembers.filter((member) => !!member.profile).map((member) => ({
        id: member.user_id,
        label:
          member.profile?.full_name?.trim() ||
          member.profile?.email ||
          member.user_id.slice(0, 8),
      })),
    [activeMembers]
  );

  const deepLinkedTask = useMemo(() => {
    const taskId = searchParams.get("task");
    if (!taskId) return null;
    return tasks.find((task) => task.id === taskId) || null;
  }, [searchParams, tasks]);

  useEffect(() => {
    function handleSelectionShortcuts(event: KeyboardEvent) {
      const target = event.target as HTMLElement | null;
      const isTyping =
        target instanceof HTMLInputElement ||
        target instanceof HTMLTextAreaElement ||
        target instanceof HTMLSelectElement ||
        !!target?.closest("[contenteditable='true']");

      if (isTyping) return;

      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "a" && view === "list") {
        event.preventDefault();
        if (!canEditTasks || filteredTasks.length === 0) return;
        setSelectedTaskIds(filteredTasks.map((task) => task.id));
        return;
      }

      if (event.key === "Escape") {
        setSelectedTaskIds([]);
      }
    }

    document.addEventListener("keydown", handleSelectionShortcuts);
    return () => document.removeEventListener("keydown", handleSelectionShortcuts);
  }, [canEditTasks, filteredTasks, view]);

  useEffect(() => {
    if (!bulkUndoState) return;

    const timer = window.setTimeout(() => {
      setBulkUndoState(null);
    }, 10000);

    return () => window.clearTimeout(timer);
  }, [bulkUndoState]);

  async function handleCreate(data: TaskFormData) {
    await createTask(data);
  }

  async function handleUseTemplate(template: TaskTemplate) {
    await createTask({
      title: template.title,
      description: template.description,
      priority: template.priority,
      status: template.status,
      tag_ids: template.tag_ids,
      recurrence_pattern: template.recurrence_pattern,
      recurrence_interval: template.recurrence_interval,
    });
  }

  async function handleUpdate(data: TaskFormData) {
    if (!editingTask) return;
    await updateTask(editingTask.id, data);
    setEditingTask(null);
  }

  async function handleDelete(id: string) {
    await deleteTask(id);
    setViewingTask(null);
  }

  async function handleMoveTask(id: string, bucketId: string) {
    await updateTask(id, { bucket_id: bucketId });
  }

  // Checking a task off only ever changed its status field — the Kanban
  // board groups cards by bucket_id, not status, so a completed task kept
  // sitting in whatever column it was already in until someone dragged it
  // over by hand. Move it into the "Erledigt" bucket (seeded by default,
  // see the bucket-seeding effect above) the moment it's checked off, and
  // symmetrically back out to "To-Do" the moment the checkmark is removed
  // again — otherwise un-checking left it stranded in "Erledigt" too.
  async function handleToggleTaskStatus(id: string, currentStatus: string) {
    const newStatus = currentStatus === "done" ? "todo" : "done";
    const task = tasks.find((t) => t.id === id);
    const doneBucket = buckets.find((bucket) => /erledigt|done|fertig/i.test(bucket.name));

    if (newStatus === "done") {
      if (doneBucket && task?.bucket_id !== doneBucket.id) {
        await updateTask(id, { status: "done", bucket_id: doneBucket.id });
        return;
      }
    } else {
      const todoBucket = buckets.find((bucket) => /to-?do|offen|open/i.test(bucket.name));
      if (doneBucket && todoBucket && task?.bucket_id === doneBucket.id) {
        await updateTask(id, { status: "todo", bucket_id: todoBucket.id });
        return;
      }
    }

    await toggleTaskStatus(id, currentStatus);
  }

  function buildUndoEntries(taskIds: string[], mode: "status" | "assignee"): BulkUndoEntry[] {
    return tasks
      .filter((task) => taskIds.includes(task.id))
      .map((task) => ({
        id: task.id,
        input:
          mode === "status"
            ? {
                status: task.status,
                completed_at: task.completed_at,
              }
            : {
                assignee_id: task.assignee_id,
              },
      }));
  }

  const currentViewing = viewingTask
    ? tasks.find((task) => task.id === viewingTask.id) || null
    : deepLinkedTask;

  return (
    <div className="space-y-6">

      {/* ── Hero header ─────────────────────────────────────────────────────── */}
      <div
        className="relative overflow-hidden rounded-[28px] border border-white/[0.07] bg-[#0e0c15] p-8"
        style={{
          backgroundImage:
            "radial-gradient(ellipse at 15% -20%, rgba(99,102,241,0.18) 0%, transparent 55%), radial-gradient(ellipse at 85% 110%, rgba(16,185,129,0.07) 0%, transparent 50%)",
        }}
      >
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div>
            <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-indigo-500/20 bg-indigo-500/[0.08] px-3 py-1">
              <CheckSquare className="h-3.5 w-3.5 text-indigo-400" />
              <span className="text-[10px] font-bold uppercase tracking-[0.18em] text-indigo-300">Tasks</span>
            </div>
            <h1 className="text-[28px] font-bold tracking-tight text-white">
              {tasks.length} {tasks.length === 1 ? "Task" : "Tasks"}
            </h1>
            <p className="mt-1 text-[14px] text-white/40">
              Manage active work, track deadlines, and keep execution flowing.
            </p>
          </div>

          <div className="flex flex-wrap items-center gap-3">
            {/* View toggle */}
            <div className="flex items-center rounded-xl border border-white/[0.08] bg-white/[0.03] p-1">
              <button
                onClick={() => setView("list")}
                className={cn(
                  "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] font-semibold transition-all",
                  view === "list"
                    ? "bg-white/[0.08] text-white shadow-sm"
                    : "text-white/35 hover:text-white/60"
                )}
              >
                <List className="h-3.5 w-3.5" />
                List
              </button>
              <button
                onClick={() => setView("kanban")}
                className={cn(
                  "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] font-semibold transition-all",
                  view === "kanban"
                    ? "bg-white/[0.08] text-white shadow-sm"
                    : "text-white/35 hover:text-white/60"
                )}
              >
                <Columns3 className="h-3.5 w-3.5" />
                Board
              </button>
            </div>

            <button
              onClick={() => setTemplatesOpen(true)}
              disabled={!canEditTasks}
              className="inline-flex items-center gap-2 rounded-xl border border-white/[0.08] bg-white/[0.03] px-4 py-2 text-[13px] font-semibold text-white/60 transition-all hover:border-white/[0.14] hover:bg-white/[0.06] hover:text-white/85 disabled:opacity-40"
            >
              <LayoutTemplate className="h-3.5 w-3.5" />
              Templates
            </button>

            <button
              onClick={() => setFormOpen(true)}
              disabled={!canEditTasks}
              className="inline-flex items-center gap-2 rounded-xl border border-indigo-500/30 bg-indigo-500/[0.15] px-4 py-2 text-[13px] font-bold text-indigo-200 transition-all hover:border-indigo-500/50 hover:bg-indigo-500/[0.22] disabled:opacity-40"
            >
              <Plus className="h-3.5 w-3.5" />
              New task
            </button>
          </div>
        </div>

        {/* ── Stat strip ────────────────────────────────────────────────── */}
        <div className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-3">
          <div className="rounded-2xl border border-white/[0.05] bg-white/[0.025] p-4">
            <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-white/25">Filtered</p>
            <p className="mt-2 text-[28px] font-bold text-white">{filteredTasks.length}</p>
          </div>
          <div className={cn(
            "rounded-2xl border p-4 transition-all",
            overdueCount > 0
              ? "border-red-500/20 bg-red-500/[0.05]"
              : "border-white/[0.05] bg-white/[0.025]",
          )}>
            <div className="flex items-center gap-1.5">
              <AlertTriangle className={cn("h-3 w-3", overdueCount > 0 ? "text-red-400/70" : "text-white/25")} />
              <p className={cn("text-[10px] font-bold uppercase tracking-[0.16em]", overdueCount > 0 ? "text-red-400/60" : "text-white/25")}>
                Overdue
              </p>
            </div>
            <p className={cn("mt-2 text-[28px] font-bold", overdueCount > 0 ? "text-red-400" : "text-white")}>
              {overdueCount}
            </p>
          </div>
          <div className="rounded-2xl border border-white/[0.05] bg-white/[0.025] p-4">
            <div className="flex items-center gap-1.5">
              <Repeat className="h-3 w-3 text-white/25" />
              <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-white/25">Recurring</p>
            </div>
            <p className="mt-2 text-[28px] font-bold text-white">{recurringCount}</p>
          </div>
        </div>
      </div>

      {/* ── Saved views ─────────────────────────────────────────────────────── */}
      <SavedViewsBar
        filters={filters}
        emptyFilters={EMPTY_FILTERS}
        views={views}
        builtInViews={BUILT_IN_VIEWS}
        onApply={setFilters}
        onCreate={async (name, nextFilters) => {
          await createView({ name, filters: { ...nextFilters } });
        }}
        onDelete={async (id) => {
          await deleteView(id);
        }}
        onToggleFavorite={async (id, isFavorite) => {
          await updateView(id, { is_favorite: isFavorite });
        }}
      />

      {/* ── Filters ─────────────────────────────────────────────────────────── */}
      <div className="rounded-[22px] border border-white/[0.06] bg-white/[0.025] p-4">
        <TaskFilters
          filters={filters}
          onChange={setFilters}
          projects={projects}
          goals={goals}
          tags={tags}
        />
      </div>

      {/* ── Bulk undo banner ────────────────────────────────────────────────── */}
      {bulkUndoState && (
        <div className="flex flex-wrap items-center justify-between gap-3 rounded-[20px] border border-indigo-500/20 bg-indigo-500/[0.06] p-4">
          <div className="text-[13px]">
            <span className="font-semibold text-white/80">{bulkUndoState.label}</span>
            <span className="ml-2 text-white/35">Undo is available for a few seconds.</span>
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={async () => {
                if (bulkUndoState.mode === "update") {
                  await Promise.all(
                    (bulkUndoState.entries || []).map((entry) =>
                      updateTask(entry.id, entry.input)
                    )
                  );
                } else if (bulkUndoState.mode === "restore_delete") {
                  await restoreTasksSnapshots(bulkUndoState.deletedTasks || []);
                }
                setBulkUndoState(null);
              }}
              className="rounded-xl border border-white/[0.10] bg-white/[0.06] px-3 py-1.5 text-[12px] font-semibold text-white/70 transition-all hover:bg-white/[0.10] hover:text-white"
            >
              Undo
            </button>
            <button
              onClick={() => setBulkUndoState(null)}
              className="rounded-xl border border-transparent px-3 py-1.5 text-[12px] text-white/35 transition-all hover:text-white/60"
            >
              Dismiss
            </button>
          </div>
        </div>
      )}

      {/* ── Bulk selection toolbar ──────────────────────────────────────────── */}
      {canEditTasks && selectedTaskIds.length > 0 && (
        <div className="flex flex-wrap items-center justify-between gap-3 rounded-[20px] border border-white/[0.07] bg-white/[0.025] p-4">
          <div className="flex items-center gap-2 text-[13px]">
            <Wand2 className="h-4 w-4 text-white/40" />
            <span className="font-semibold text-white/80">
              {selectedTaskIds.length} {selectedTaskIds.length === 1 ? "task" : "tasks"} selected
            </span>
            <span className="text-white/30">of {filteredTasks.length} filtered</span>
          </div>
          <div className="flex flex-wrap gap-2">
            {selectedTaskIds.length < filteredTasks.length && (
              <button
                onClick={() => setSelectedTaskIds(filteredTasks.map((task) => task.id))}
                className="rounded-xl border border-white/[0.07] bg-transparent px-3 py-1.5 text-[12px] font-semibold text-white/50 transition-all hover:border-white/[0.12] hover:text-white/70"
              >
                Select all filtered
              </button>
            )}
            {assignableMembers.length > 0 && (
              <>
                <select
                  value={bulkAssigneeId}
                  onChange={(e) => setBulkAssigneeId(e.target.value)}
                  className="h-8 rounded-xl border border-white/[0.07] bg-white/[0.04] px-3 text-[12px] text-white/70 outline-none"
                >
                  <option value="">Assign to…</option>
                  <option value="__unassigned__">Unassigned</option>
                  {assignableMembers.map((m) => (
                    <option key={m.id} value={m.id}>{m.label}</option>
                  ))}
                </select>
                <button
                  disabled={!bulkAssigneeId}
                  onClick={async () => {
                    const undoEntries = buildUndoEntries(selectedTaskIds, "assignee");
                    await bulkUpdateTasks(selectedTaskIds, {
                      assignee_id: bulkAssigneeId === "__unassigned__" ? null : bulkAssigneeId,
                    });
                    setBulkUndoState({ label: "Task assignment updated", mode: "update", entries: undoEntries });
                    setBulkAssigneeId("");
                  }}
                  className="rounded-xl border border-white/[0.07] bg-white/[0.04] px-3 py-1.5 text-[12px] font-semibold text-white/60 transition-all hover:border-white/[0.12] hover:text-white disabled:opacity-40"
                >
                  Assign
                </button>
              </>
            )}
            <button
              onClick={async () => {
                const undoEntries = buildUndoEntries(selectedTaskIds, "status");
                await bulkUpdateTasks(selectedTaskIds, { status: "todo" });
                setBulkUndoState({ label: "Tasks moved to todo", mode: "update", entries: undoEntries });
              }}
              className="rounded-xl border border-white/[0.07] bg-white/[0.04] px-3 py-1.5 text-[12px] font-semibold text-white/60 transition-all hover:border-white/[0.12] hover:text-white"
            >
              → Todo
            </button>
            <button
              onClick={async () => {
                const undoEntries = buildUndoEntries(selectedTaskIds, "status");
                await bulkUpdateTasks(selectedTaskIds, { status: "in_progress" });
                setBulkUndoState({ label: "Tasks moved to in progress", mode: "update", entries: undoEntries });
              }}
              className="rounded-xl border border-white/[0.07] bg-white/[0.04] px-3 py-1.5 text-[12px] font-semibold text-white/60 transition-all hover:border-white/[0.12] hover:text-white"
            >
              → In progress
            </button>
            <button
              onClick={() => { setSelectedTaskIds([]); setBulkAssigneeId(""); }}
              className="rounded-xl border border-transparent px-3 py-1.5 text-[12px] text-white/30 transition-all hover:text-white/55"
            >
              <X className="h-3.5 w-3.5" />
            </button>
            <button
              onClick={async () => {
                const deletedTasks = tasks.filter((task) => selectedTaskIds.includes(task.id));
                await bulkDeleteTasks(selectedTaskIds);
                setBulkUndoState({ label: "Tasks deleted", mode: "restore_delete", deletedTasks });
                setSelectedTaskIds([]);
                setBulkAssigneeId("");
              }}
              className="inline-flex items-center gap-1.5 rounded-xl border border-red-500/20 bg-red-500/[0.06] px-3 py-1.5 text-[12px] font-semibold text-red-400 transition-all hover:border-red-500/35 hover:bg-red-500/[0.12]"
            >
              <Trash2 className="h-3.5 w-3.5" />
              Delete
            </button>
          </div>
        </div>
      )}

      {/* ── Task content ────────────────────────────────────────────────────── */}
      {filteredTasks.length === 0 ? (
        <div className="rounded-[24px] border border-dashed border-white/[0.07] bg-white/[0.01] p-12 text-center">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-3xl border border-white/[0.08] bg-white/[0.04]">
            <CheckSquare className="h-7 w-7 text-white/25" />
          </div>
          <p className="text-[16px] font-bold text-white/40">
            {tasks.length === 0 ? "No tasks yet" : "No matching tasks"}
          </p>
          <p className="mt-2 text-[13px] text-white/25">
            {tasks.length === 0
              ? "Create your first task to get started."
              : "Try another saved view or adjust your filters."}
          </p>
          {tasks.length === 0 && (
            <button
              onClick={() => setFormOpen(true)}
              disabled={!canEditTasks}
              className="mt-5 inline-flex items-center gap-2 rounded-xl border border-indigo-500/30 bg-indigo-500/[0.15] px-4 py-2 text-[13px] font-bold text-indigo-200 transition-all hover:border-indigo-500/50 hover:bg-indigo-500/[0.22] disabled:opacity-40"
            >
              <Plus className="h-3.5 w-3.5" />
              Create task
            </button>
          )}
        </div>
      ) : view === "list" ? (
        <div className="space-y-2">
          {filteredTasks.map((task) => (
            <div key={task.id} className="flex items-start gap-3">
              {canEditTasks && (
                <input
                  type="checkbox"
                  checked={selectedTaskIds.includes(task.id)}
                  onChange={(event) =>
                    setSelectedTaskIds((current) =>
                      event.target.checked
                        ? [...current, task.id]
                        : current.filter((taskId) => taskId !== task.id)
                    )
                  }
                  className="mt-4 h-4 w-4 rounded border-white/20 bg-white/[0.04] accent-indigo-500"
                />
              )}
              <div className="min-w-0 flex-1">
                <TaskCard
                  task={task}
                  currentUserId={userId}
                  onToggle={() => {
                    if (!canEditTasks) return;
                    void handleToggleTaskStatus(task.id, task.status);
                  }}
                  onClick={() => setViewingTask(task)}
                />
              </div>
            </div>
          ))}
        </div>
      ) : (
        <TaskKanban
          tasks={filteredTasks}
          buckets={buckets}
          onToggle={handleToggleTaskStatus}
          onClick={(task) => setViewingTask(task)}
          onMoveTask={handleMoveTask}
          onCreateBucket={createBucket}
          onRenameBucket={renameBucket}
          onDeleteBucket={deleteBucket}
          editable={canEditTasks}
          currentUserId={userId}
        />
      )}

      {formOpen && (
        <TaskForm
          open={formOpen}
          onClose={() => setFormOpen(false)}
          onSubmit={handleCreate}
          projects={projects}
          goals={goals}
          tags={tags}
          buckets={buckets}
          onCreateTag={createTag}
        />
      )}

      {templatesOpen && (
        <TaskTemplatesModal
          open={templatesOpen}
          onClose={() => setTemplatesOpen(false)}
          templates={templates}
          tags={tags}
          onCreateTag={createTag}
          onCreateTemplate={createTemplate}
          onDeleteTemplate={deleteTemplate}
          onUseTemplate={handleUseTemplate}
        />
      )}

      {editingTask && (
        <TaskForm
          open={!!editingTask}
          onClose={() => setEditingTask(null)}
          onSubmit={handleUpdate}
          task={editingTask}
          projects={projects}
          goals={goals}
          tags={tags}
          buckets={buckets}
          onCreateTag={createTag}
        />
      )}

      {currentViewing && (
        <TaskDetail
          open={!!currentViewing}
          onClose={() => {
            setViewingTask(null);
            if (searchParams.get("task")) {
              router.replace("/tasks", { scroll: false });
            }
          }}
          task={currentViewing}
          project={projects.find((project) => project.id === currentViewing.project_id)}
          goalTitle={goals.find((goal) => goal.id === currentViewing.goal_id)?.title || null}
          onEdit={() => {
            setEditingTask(currentViewing);
            setViewingTask(null);
          }}
          onDelete={() => handleDelete(currentViewing.id)}
          onUpdateReview={async (reviewStatus, reviewNotes) => {
            await updateTask(currentViewing.id, {
              review_status: reviewStatus,
              review_notes: reviewNotes ?? currentViewing.review_notes,
            });
          }}
          onAddSubtask={async (title) => {
            await createTask({
              title,
              parent_task_id: currentViewing.id,
              project_id: currentViewing.project_id,
              goal_id: currentViewing.goal_id,
              status: "todo",
              priority: "none",
            });
          }}
          onToggleSubtask={async (id, currentStatus) => {
            await toggleTaskStatus(id, currentStatus);
          }}
          onDeleteSubtask={async (id) => {
            await deleteTask(id);
          }}
        />
      )}
    </div>
  );
}