"use client";

import { useState } from "react";
import { Plus, CheckSquare } from "lucide-react";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { Skeleton } from "@/components/ui/skeleton";
import { TaskCard } from "./task-card";
import { TaskForm, type TaskFormData } from "./task-form";
import { TaskDetail } from "./task-detail";
import { TaskFilters, type TaskFilterValues } from "./task-filters";
import { useGoals } from "@/hooks/use-goals";
import { useTasks, type TaskWithRelations } from "@/hooks/use-tasks";
import { useProjects } from "@/hooks/use-projects";
import { useTeamPermissions } from "@/hooks/use-team-permissions";
import { useTeams } from "@/hooks/use-teams";
import { useTags } from "@/hooks/use-tags";
import { isTaskDeadlineOverdue } from "@/lib/utils";

interface TaskListProps {
  projectId?: string;
  allowEditOverride?: boolean;
  allowCommentOverride?: boolean;
}

export function TaskList({
  projectId,
  allowEditOverride,
  allowCommentOverride,
}: TaskListProps) {
  const { tasks, loading, createTask, updateTask, deleteTask, toggleTaskStatus } =
    useTasks(projectId);
  const { projects } = useProjects();
  const { goals } = useGoals();
  const { tags, createTag } = useTags();
  const { can } = useTeamPermissions();
  const canEditTasks = allowEditOverride ?? can("tasks", "edit");
  const { userId } = useTeams();

  const [formOpen, setFormOpen] = useState(false);
  const [editingTask, setEditingTask] = useState<TaskWithRelations | null>(null);
  const [viewingTask, setViewingTask] = useState<TaskWithRelations | null>(null);
  const [filters, setFilters] = useState<TaskFilterValues>({
    search: "",
    status: "",
    priority: "",
    projectId: "",
    goalId: "",
    tagId: "",
    dueState: "",
  });

  // Apply filters
  const filtered = tasks.filter((t) => {
    const query = filters.search.trim().toLowerCase();
    if (
      query &&
      ![t.title, t.description || ""].some((value) =>
        value.toLowerCase().includes(query)
      )
    ) {
      return false;
    }
    if (filters.status && t.status !== filters.status) return false;
    if (filters.priority && t.priority !== filters.priority) return false;
    if (filters.projectId && t.project_id !== filters.projectId) return false;
    if (filters.goalId && t.goal_id !== filters.goalId) return false;
    if (filters.tagId && !t.tags.some((tag) => tag.id === filters.tagId))
      return false;

    if (filters.dueState === "none" && t.deadline) return false;
    if (filters.dueState === "overdue") {
      if (!t.deadline || !isTaskDeadlineOverdue(t.deadline) || t.status === "done") {
        return false;
      }
    }
    if (filters.dueState === "today") {
      if (!t.deadline) return false;
      const deadline = new Date(t.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 (!t.deadline) return false;
      const deadline = new Date(t.deadline);
      const now = new Date();
      const nextWeek = new Date();
      nextWeek.setDate(nextWeek.getDate() + 7);
      if (isTaskDeadlineOverdue(t.deadline, now) || deadline > nextWeek) return false;
    }
    return true;
  });

  async function handleCreate(data: TaskFormData) {
    await createTask({
      ...data,
      project_id: data.project_id || (projectId ?? null),
    });
  }

  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);
  }

  // Keep viewingTask in sync after refetch
  const currentViewing = viewingTask
    ? tasks.find((t) => t.id === viewingTask.id) || null
    : null;

  if (loading) {
    return (
      <div className="space-y-3">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-16 rounded-lg" />
        ))}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Toolbar */}
      <div className="flex items-center justify-between gap-3 flex-wrap">
        <TaskFilters
          filters={filters}
          onChange={setFilters}
          projects={projectId ? [] : projects}
          goals={goals}
          tags={tags}
        />
        <Button size="sm" onClick={() => setFormOpen(true)} disabled={!canEditTasks}>
          <Plus className="h-4 w-4" />
          New task
        </Button>
      </div>

      {/* List */}
      {filtered.length === 0 ? (
        <EmptyState
          icon={<CheckSquare className="h-10 w-10" />}
          title={tasks.length === 0 ? "No tasks yet" : "No matching tasks"}
          description={
            tasks.length === 0
              ? "Create your first task to get started."
              : "Try adjusting your filters."
          }
          action={
            tasks.length === 0 ? (
              <Button size="sm" onClick={() => setFormOpen(true)} disabled={!canEditTasks}>
                <Plus className="h-4 w-4" />
                Create task
              </Button>
            ) : undefined
          }
        />
      ) : (
        <div className="space-y-2">
          {filtered.map((task) => (
            <TaskCard
              key={task.id}
              task={task}
              currentUserId={userId}
              onToggle={() => {
                if (!canEditTasks) return;
                void toggleTaskStatus(task.id, task.status);
              }}
              onClick={() => setViewingTask(task)}
            />
          ))}
        </div>
      )}

      {/* Create form */}
      {formOpen && (
        <TaskForm
          open={formOpen}
          onClose={() => setFormOpen(false)}
          onSubmit={handleCreate}
          projects={projects}
          goals={goals}
          tags={tags}
          onCreateTag={createTag}
          defaultProjectId={projectId}
        />
      )}

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

      {/* Detail view */}
      {currentViewing && (
        <TaskDetail
          open={!!currentViewing}
          onClose={() => setViewingTask(null)}
          task={currentViewing}
          project={projects.find((p) => p.id === currentViewing.project_id)}
          goalTitle={goals.find((goal) => goal.id === currentViewing.goal_id)?.title || null}
          editableOverride={canEditTasks}
          allowCommentsOverride={allowCommentOverride}
          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>
  );
}