"use client";
// src/app/tasks/page.tsx
import { useState, useEffect, useCallback, useMemo } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { ColumnDef } from "@tanstack/react-table";
import { AppShell } from "@/components/layout/AppShell";
import { DataTable } from "@/components/datatable/DataTable";
import { Button, PageHeader, ConfirmDialog, Select } from "@/components/ui/index";
import {
  formatDate,
  TASK_STATUS_LABELS,
  TASK_STATUS_LABELS_AR,
  TASK_PRIORITY_LABELS,
  TASK_PRIORITY_LABELS_AR,
  getLabel,
} from "@/lib/utils";
import { toast } from "sonner";
import { Plus, Eye, Pencil, Trash2, MoreHorizontal, CheckCircle2, Circle } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";
import { useLanguage } from "@/i18n/LanguageContext";

interface Task {
  id: string;
  title: string;
  description: string | null;
  status: string;
  priority: string;
  dueDate: string | null;
  completedAt: string | null;
  createdAt: string;
  assignedTo: { id: string; name: string } | null;
  lead: { id: string; firstName: string; lastName: string } | null;
  customer: { id: string; firstName: string; lastName: string } | null;
  deal: { id: string; title: string } | null;
}

const STATUS_STYLES: Record<string, string> = {
  TODO: "text-muted-foreground",
  IN_PROGRESS: "text-blue-600",
  DONE: "text-green-600",
  CANCELLED: "text-gray-400 line-through",
};

const STATUS_BADGE_COLORS: Record<string, string> = {
  TODO: "bg-gray-100 text-gray-600",
  IN_PROGRESS: "bg-blue-100 text-blue-700",
  DONE: "bg-green-100 text-green-700",
  CANCELLED: "bg-gray-100 text-gray-400",
};

const PRIORITY_BADGE_COLORS: Record<string, string> = {
  LOW: "bg-gray-100 text-gray-600",
  MEDIUM: "bg-blue-100 text-blue-700",
  HIGH: "bg-orange-100 text-orange-700",
  URGENT: "bg-red-100 text-red-700",
  CRITICAL: "bg-red-100 text-red-700",
};

export default function TasksPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const statusLabels = language === "ar" ? TASK_STATUS_LABELS_AR : TASK_STATUS_LABELS;
  const priorityLabels = language === "ar" ? TASK_PRIORITY_LABELS_AR : TASK_PRIORITY_LABELS;

  const STATUS_OPTIONS = useMemo(
    () => [
      { value: "", label: t("tasks.allStatuses") },
      ...Object.entries(statusLabels).map(([value, label]) => ({ value, label })),
    ],
    [t, statusLabels]
  );

  const PRIORITY_OPTIONS = useMemo(
    () => [
      { value: "", label: t("tasks.allPriorities") },
      ...Object.entries(priorityLabels).map(([value, label]) => ({ value, label })),
    ],
    [t, priorityLabels]
  );

  const [tasks, setTasks] = useState<Task[]>([]);
  const [meta, setMeta] = useState({ total: 0, page: 1, pageSize: 10, pageCount: 1 });
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [sortBy, setSortBy] = useState("createdAt");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
  const [statusFilter, setStatusFilter] = useState("");
  const [priorityFilter, setPriorityFilter] = useState("");
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);

  const canCreate = user && hasPermission(user.role, "tasks:create");
  const canEdit = user && hasPermission(user.role, "tasks:update");
  const canDelete = user && hasPermission(user.role, "tasks:delete");

  const fetchTasks = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams({
        page: String(page),
        pageSize: String(pageSize),
        sortBy,
        sortOrder,
        ...(search && { search }),
        ...(statusFilter && { status: statusFilter }),
        ...(priorityFilter && { priority: priorityFilter }),
      });
      const res = await fetch(`/api/tasks?${params}`);
      if (!res.ok) throw new Error("Failed");
      const data = await res.json();
      setTasks(data.data.items);
      setMeta(data.data.meta);
    } catch {
      setError(t("tasks.loadError"));
    } finally {
      setIsLoading(false);
    }
  }, [page, pageSize, sortBy, sortOrder, search, statusFilter, priorityFilter, t]);

  useEffect(() => {
    fetchTasks();
  }, [fetchTasks]);
  useEffect(() => {
    setPage(1);
  }, [search, statusFilter, priorityFilter]);

  const toggleStatus = useCallback(
    async (task: Task) => {
      const newStatus = task.status === "DONE" ? "TODO" : "DONE";
      try {
        await fetch(`/api/tasks/${task.id}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ status: newStatus }),
        });
        toast.success(newStatus === "DONE" ? t("toast.taskMarkedComplete") : t("toast.taskReopened"));
        fetchTasks();
      } catch {
        toast.error(t("toast.taskUpdateFailed"));
      }
    },
    [fetchTasks, t]
  );

  const handleDelete = async () => {
    if (!deleteId) return;
    setIsDeleting(true);
    try {
      await fetch(`/api/tasks/${deleteId}`, { method: "DELETE" });
      toast.success(t("toast.taskDeleted"));
      setDeleteId(null);
      fetchTasks();
    } catch {
      toast.error(t("toast.failed"));
    } finally {
      setIsDeleting(false);
    }
  };

  const columns: ColumnDef<Task, unknown>[] = useMemo(
    () => [
      {
        id: "status-toggle",
        header: "",
        size: 40,
        enableSorting: false,
        cell: ({ row }) => {
          const task = row.original;
          return (
            <button
              type="button"
              onClick={() => toggleStatus(task)}
              className="text-muted-foreground hover:text-primary transition-colors"
              title={task.status === "DONE" ? t("tasks.reopen") : t("tasks.complete")}
            >
              {task.status === "DONE" ? (
                <CheckCircle2 className="w-5 h-5 text-green-500" />
              ) : (
                <Circle className="w-5 h-5" />
              )}
            </button>
          );
        },
      },
      {
        accessorKey: "title",
        header: t("tasks.colTask"),
        cell: ({ row }) => {
          const task = row.original;
          return (
            <div>
              <Link
                href={`/tasks/${task.id}`}
                className={`font-medium hover:underline ${STATUS_STYLES[task.status] ?? ""}`}
              >
                {task.title}
              </Link>
              {task.description && (
                <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{task.description}</p>
              )}
            </div>
          );
        },
      },
      {
        accessorKey: "priority",
        header: t("common.priority"),
        cell: ({ getValue }) => {
          const p = getValue() as string;
          const label = getLabel(TASK_PRIORITY_LABELS, TASK_PRIORITY_LABELS_AR, p, language);
          return (
            <span
              className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${PRIORITY_BADGE_COLORS[p] ?? "bg-gray-100 text-gray-600"}`}
            >
              {label}
            </span>
          );
        },
      },
      {
        accessorKey: "status",
        header: t("common.status"),
        cell: ({ getValue }) => {
          const s = getValue() as string;
          const label = getLabel(TASK_STATUS_LABELS, TASK_STATUS_LABELS_AR, s, language);
          return (
            <span
              className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_BADGE_COLORS[s] ?? "bg-gray-100"}`}
            >
              {label}
            </span>
          );
        },
      },
      {
        accessorKey: "dueDate",
        header: t("tasks.dueDate"),
        cell: ({ row }) => {
          const task = row.original;
          const due = task.dueDate ? new Date(task.dueDate) : null;
          const isOverdue = due && due < new Date() && task.status !== "DONE";
          return (
            <span
              className={`text-xs ${isOverdue ? "text-red-500 font-medium" : "text-muted-foreground"}`}
            >
              {due ? formatDate(due.toISOString(), language) : "—"}
            </span>
          );
        },
      },
      {
        id: "related",
        header: t("tasks.relatedTo"),
        enableSorting: false,
        cell: ({ row }) => {
          const task = row.original;
          if (task.lead)
            return (
              <Link href={`/leads/${task.lead.id}`} className="text-xs text-primary hover:underline">
                {task.lead.firstName} {task.lead.lastName}
              </Link>
            );
          if (task.customer)
            return (
              <Link href={`/customers/${task.customer.id}`} className="text-xs text-primary hover:underline">
                {task.customer.firstName} {task.customer.lastName}
              </Link>
            );
          if (task.deal)
            return (
              <Link href={`/deals/${task.deal.id}`} className="text-xs text-primary hover:underline">
                {task.deal.title}
              </Link>
            );
          return <span className="text-xs text-muted-foreground">—</span>;
        },
      },
      {
        id: "assignedTo",
        header: t("common.assignedTo"),
        enableSorting: false,
        cell: ({ row }) => (
          <span className="text-sm text-muted-foreground">{row.original.assignedTo?.name ?? "—"}</span>
        ),
      },
      {
        id: "actions",
        header: "",
        enableSorting: false,
        size: 48,
        cell: ({ row }) => {
          const task = row.original;
          const isOpen = openMenuId === task.id;
          return (
            <div className="relative flex justify-end">
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  setOpenMenuId(isOpen ? null : task.id);
                }}
                className="p-1.5 rounded-lg hover:bg-accent text-muted-foreground"
              >
                <MoreHorizontal className="w-4 h-4" />
              </button>
              {isOpen && (
                <>
                  <div className="fixed inset-0 z-10" onClick={() => setOpenMenuId(null)} />
                  <div className="absolute top-full end-0 mt-1 bg-popover border border-border rounded-lg shadow-lg py-1 z-50 min-w-[140px] animate-fade-in">
                    <Link
                      href={`/tasks/${task.id}`}
                      onClick={() => setOpenMenuId(null)}
                      className="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent"
                    >
                      <Eye className="w-4 h-4" /> {t("common.view")}
                    </Link>
                    {canEdit && (
                      <Link
                        href={`/tasks/${task.id}/edit`}
                        onClick={() => setOpenMenuId(null)}
                        className="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent"
                      >
                        <Pencil className="w-4 h-4" /> {t("common.edit")}
                      </Link>
                    )}
                    {canDelete && (
                      <button
                        type="button"
                        onClick={() => {
                          setOpenMenuId(null);
                          setDeleteId(task.id);
                        }}
                        className="flex items-center gap-2 px-3 py-1.5 text-sm text-destructive hover:bg-accent w-full"
                      >
                        <Trash2 className="w-4 h-4" /> {t("common.delete")}
                      </button>
                    )}
                  </div>
                </>
              )}
            </div>
          );
        },
      },
    ],
    [t, language, canEdit, canDelete, openMenuId, toggleStatus]
  );

  return (
    <AppShell breadcrumbs={[{ label: t("nav.tasks") }]}>
      <PageHeader
        title={`${t("tasks.title")}${!isLoading ? ` (${meta.total})` : ""}`}
        description={t("tasks.pageDescription")}
      >
        {canCreate && (
          <Button onClick={() => router.push("/tasks/new")}>
            <Plus className="w-4 h-4" /> {t("tasks.new")}
          </Button>
        )}
      </PageHeader>
      <div className="flex gap-3 mb-4 flex-wrap">
        <div className="w-full sm:w-44">
          <Select options={STATUS_OPTIONS} value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} />
        </div>
        <div className="w-full sm:w-44">
          <Select options={PRIORITY_OPTIONS} value={priorityFilter} onChange={(e) => setPriorityFilter(e.target.value)} />
        </div>
        {(statusFilter || priorityFilter) && (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              setStatusFilter("");
              setPriorityFilter("");
            }}
          >
            {t("common.clear")}
          </Button>
        )}
      </div>
      <DataTable
        data={tasks}
        columns={columns}
        getRowClassName={(r) => (openMenuId === r.id ? "relative z-50" : undefined)}
        isLoading={isLoading}
        error={error}
        pageCount={meta.pageCount}
        page={meta.page}
        pageSize={meta.pageSize}
        total={meta.total}
        onPageChange={setPage}
        onPageSizeChange={(s) => {
          setPageSize(s);
          setPage(1);
        }}
        searchValue={search}
        onSearchChange={setSearch}
        searchPlaceholder={t("tasks.searchPlaceholder")}
        sortBy={sortBy}
        sortOrder={sortOrder}
        onSortChange={(by, order) => {
          setSortBy(by);
          setSortOrder(order);
        }}
        getRowId={(r) => r.id}
        emptyTitle={t("tasks.empty")}
        emptyDescription={t("tasks.emptyDesc")}
        emptyAction={
          canCreate ? (
            <Button onClick={() => router.push("/tasks/new")} size="sm">
              <Plus className="w-4 h-4" /> {t("tasks.new")}
            </Button>
          ) : undefined
        }
      />
      <ConfirmDialog
        open={!!deleteId}
        onClose={() => setDeleteId(null)}
        onConfirm={handleDelete}
        isLoading={isDeleting}
        title={t("tasks.deleteTitle")}
        description={t("tasks.deleteDesc")}
        confirmLabel={t("common.delete")}
        variant="destructive"
      />
    </AppShell>
  );
}