"use client";

import { AuthorizedAction } from "@/components/auth/authorized-action";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Progress } from "@/components/ui/progress";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import type { ActionSpec } from "@/lib/rbac/action-access";
import { cn } from "@/lib/utils";
import { Check, ChevronDown, MoreHorizontal, Plus } from "lucide-react";
import { TaskRow } from "./task-row";

interface Assignee {
  id: string;
  name: string;
  avatar?: string;
}

interface TaskData {
  id: string;
  title: string;
  status: "completed" | "inProgress" | "notStarted";
  statusLabel?: string;
  dueDate: string;
  assignees?: Assignee[];
  commentsCount?: number;
  attachmentsCount?: number;
}

interface PhaseAccordionProps {
  phaseNumber: number;
  title: string;
  description?: string;
  status: "completed" | "inProgress" | "delayed" | "notStarted";
  statusLabel: string;
  startDate: string;
  endDate: string;
  taskCount: number;
  completedTasks: number;
  tasks: TaskData[];
  isExpanded?: boolean;
  onToggle?: () => void;
  onAddTask: () => void;
  onEditPhase: () => void;
  onDeletePhase: () => void;
  onRequestApproval?: () => void;
  onPhaseStatusToggle?: () => void;
  onTaskToggle: (taskId: string) => void;
  togglingTaskIds?: string[];
  onTaskView: (taskId: string) => void;
  onTaskEdit: (taskId: string) => void;
  onTaskDelete: (taskId: string) => void;
  onTaskRequestApproval?: (taskId: string) => void;
  onTaskDuplicate?: (taskId: string) => void;
  addTaskAction?: ActionSpec;
  editPhaseAction?: ActionSpec;
  deletePhaseAction?: ActionSpec;
  requestApprovalAction?: ActionSpec;
  phaseStatusAction?: ActionSpec;
  taskToggleAction?: ActionSpec;
  taskViewAction?: ActionSpec;
  taskEditAction?: ActionSpec;
  taskDeleteAction?: ActionSpec;
  taskRequestApprovalAction?: ActionSpec;
  taskDuplicateAction?: ActionSpec;
  translations: {
    addTask: string;
    view: string;
    edit: string;
    delete: string;
    requestApproval?: string;
    duplicate?: string;
    tasksOf: string;
    tasksLabel?: string;
    completePhase?: string;
    phaseCompleted?: string;
    startPhase?: string;
    moreOptions?: string;
    completedTasksTooltip?: string;
    inProgressTasksTooltip?: string;
    notStartedTasksTooltip?: string;
  };
  statusTranslations: {
    completed: string;
    inProgress: string;
    notStarted: string;
  };
  className?: string;
}

export function PhaseAccordion({
  title,
  description,
  status,
  startDate,
  endDate,
  taskCount,
  completedTasks,
  tasks,
  isExpanded = false,
  onToggle,
  onAddTask,
  onEditPhase,
  onDeletePhase,
  onRequestApproval,
  onPhaseStatusToggle,
  onTaskToggle,
  togglingTaskIds = [],
  onTaskView,
  onTaskEdit,
  onTaskDelete,
  onTaskRequestApproval,
  onTaskDuplicate,
  addTaskAction,
  editPhaseAction,
  deletePhaseAction,
  requestApprovalAction,
  phaseStatusAction,
  taskToggleAction,
  taskViewAction,
  taskEditAction,
  taskDeleteAction,
  taskRequestApprovalAction,
  taskDuplicateAction,
  translations,
  statusTranslations,
  className,
}: PhaseAccordionProps) {
  const inProgressTasks = tasks.filter((t) => t.status === "inProgress").length;
  const notStartedTasks = tasks.filter((t) => t.status === "notStarted").length;

  const mapTaskStatusToRowStatus = (
    status: TaskData["status"],
  ): "completed" | "inProgress" | "not_started" => {
    switch (status) {
      case "completed":
        return "completed";
      case "inProgress":
        return "inProgress";
      case "notStarted":
      default:
        return "not_started";
    }
  };

  const getTaskStatusLabel = (status: TaskData["status"]) => {
    switch (status) {
      case "completed":
        return statusTranslations.completed;
      case "inProgress":
        return statusTranslations.inProgress;
      case "notStarted":
      default:
        return statusTranslations.notStarted;
    }
  };

  // Calculate progress percentage
  const progress =
    taskCount > 0 ? Math.round((completedTasks / taskCount) * 100) : 0;

  // Get status button config based on phase status
  const getStatusButtonConfig = () => {
    switch (status) {
      case "completed":
        return {
          label: translations.phaseCompleted,
          showIcon: true,
          disabled: true,
        };
      case "inProgress":
        return {
          label: translations.completePhase,
          showIcon: true,
          disabled: false,
        };
      default:
        return {
          label: translations.startPhase,
          showIcon: false,
          disabled: false,
        };
    }
  };

  const statusButton = getStatusButtonConfig();

  const renderTaskCountBadges = () => (
    <div className="flex items-center gap-2">
      {/* Not Started (Gray) */}
      <Tooltip>
        <TooltipTrigger asChild>
          <Badge
            variant="outline"
            className="h-6 px-2 text-xs font-medium bg-tag-background-neutral-light border-tag-border-neutral-light text-tag-text-neutral hover:bg-tag-background-neutral-light"
          >
            {notStartedTasks}
          </Badge>
        </TooltipTrigger>
        <TooltipContent>
          {translations.notStartedTasksTooltip ||
            `${notStartedTasks} ${statusTranslations.notStarted}`}
        </TooltipContent>
      </Tooltip>

      {/* In Progress (Blue) */}
      <Tooltip>
        <TooltipTrigger asChild>
          <Badge
            variant="outline"
            className="h-6 px-2 text-xs font-medium bg-tag-background-info-light border-tag-border-info-light text-tag-text-info hover:bg-tag-background-info-light"
          >
            {inProgressTasks}
          </Badge>
        </TooltipTrigger>
        <TooltipContent>
          {translations.inProgressTasksTooltip ||
            `${inProgressTasks} ${statusTranslations.inProgress}`}
        </TooltipContent>
      </Tooltip>

      {/* Completed (Green) */}
      <Tooltip>
        <TooltipTrigger asChild>
          <Badge
            variant="outline"
            className="h-6 px-2 text-xs font-medium bg-tag-background-success-light border-tag-border-success-light text-tag-text-success hover:bg-tag-background-success-light"
          >
            {completedTasks}
          </Badge>
        </TooltipTrigger>
        <TooltipContent>
          {translations.completedTasksTooltip ||
            `${completedTasks} ${statusTranslations.completed}`}
        </TooltipContent>
      </Tooltip>
    </div>
  );

  const renderMoreOptionsMenu = (isMobile = false) => {
    if (isMobile) {
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="h-8 w-8 shrink-0"
              onClick={(e) => e.stopPropagation()}
            >
              <MoreHorizontal className="h-5 w-5" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <AuthorizedAction
              action={editPhaseAction || { actionKey: "phases.update" }}
              surface="dropdown"
            >
              <DropdownMenuItem onClick={onEditPhase}>
                {translations.edit}
              </DropdownMenuItem>
            </AuthorizedAction>

            {onRequestApproval ? (
              <AuthorizedAction
                action={requestApprovalAction || { actionKey: "approvals.create" }}
                surface="dropdown"
              >
                <DropdownMenuItem onClick={onRequestApproval}>
                  {translations.requestApproval}
                </DropdownMenuItem>
              </AuthorizedAction>
            ) : null}

            <AuthorizedAction
              action={deletePhaseAction || { actionKey: "phases.delete" }}
              surface="dropdown"
            >
              <DropdownMenuItem
                onClick={onDeletePhase}
                className="text-destructive focus:text-destructive"
              >
                {translations.delete}
              </DropdownMenuItem>
            </AuthorizedAction>
          </DropdownMenuContent>
        </DropdownMenu>
      );
    }

    return (
      <DropdownMenu>
        <Tooltip>
          <TooltipTrigger asChild>
            <DropdownMenuTrigger asChild>
              <Button
                variant="outline"
                size="icon"
                className="size-8 bg-background dark:bg-background border-border"
                onClick={(e) => e.stopPropagation()}
              >
                <MoreHorizontal className="h-5 w-5" />
              </Button>
            </DropdownMenuTrigger>
          </TooltipTrigger>
          <TooltipContent>
            {translations.moreOptions || translations.edit}
          </TooltipContent>
        </Tooltip>
        <DropdownMenuContent>
          <AuthorizedAction
            action={editPhaseAction || { actionKey: "phases.update" }}
            surface="dropdown"
          >
            <DropdownMenuItem onClick={onEditPhase}>{translations.edit}</DropdownMenuItem>
          </AuthorizedAction>
          {onRequestApproval ? (
            <AuthorizedAction
              action={requestApprovalAction || { actionKey: "approvals.create" }}
              surface="dropdown"
            >
              <DropdownMenuItem onClick={onRequestApproval}>
                {translations.requestApproval}
              </DropdownMenuItem>
            </AuthorizedAction>
          ) : null}
          <AuthorizedAction
            action={deletePhaseAction || { actionKey: "phases.delete" }}
            surface="dropdown"
          >
            <DropdownMenuItem
              onClick={onDeletePhase}
              className="text-destructive focus:text-destructive"
            >
              {translations.delete}
            </DropdownMenuItem>
          </AuthorizedAction>
        </DropdownMenuContent>
      </DropdownMenu>
    );
  };

  return (
    <Collapsible
      open={isExpanded}
      onOpenChange={onToggle}
      className={cn(
        "bg-card border border-border rounded-2xl overflow-hidden",
        className,
      )}
    >
      {/* Header */}
      <div className="flex flex-col gap-3 p-4">
        {/* Mobile Header */}
        <div className="sm:hidden space-y-3">
          <div className="flex items-start justify-between gap-3">
            <div className="min-w-0 flex-1 space-y-1">
              <h3 className="text-lg font-semibold text-card-foreground leading-tight line-clamp-2">
                {title}
              </h3>
              <div className="flex flex-col gap-1 text-sm text-muted-foreground">
                <span className="whitespace-nowrap">
                  {startDate} - {endDate}
                </span>
                <span className="whitespace-nowrap">
                  ({taskCount} {translations.tasksLabel})
                </span>
              </div>
            </div>

            <div className="flex items-center gap-1.5 shrink-0">
              <CollapsibleTrigger asChild>
                <Button
                  variant="outline"
                  size="icon"
                  className="size-8 bg-background dark:bg-background border-border"
                >
                  <ChevronDown
                    className={cn(
                      "h-5 w-5 transition-transform duration-200",
                      isExpanded && "rotate-180",
                    )}
                  />
                </Button>
              </CollapsibleTrigger>
              {renderMoreOptionsMenu(true)}
            </div>
          </div>

          <div className="flex items-center justify-between gap-2">
            {renderTaskCountBadges()}
            <AuthorizedAction
              action={
                phaseStatusAction || {
                  actionKey: "phases.update_status",
                }
              }
              surface="card"
            >
              <Button
                variant="ghost"
                className={cn(
                  "h-8 gap-1 px-3 text-sm font-medium rounded text-foreground hover:text-foreground bg-muted hover:bg-muted/80 cursor-pointer",
                  statusButton.disabled && "cursor-default",
                )}
                onClick={(e) => {
                  e.stopPropagation();
                  if (onPhaseStatusToggle && !statusButton.disabled) {
                    onPhaseStatusToggle();
                  }
                }}
                disabled={statusButton.disabled}
              >
                {statusButton.label}
                {statusButton.showIcon && <Check className="h-5 w-5" />}
              </Button>
            </AuthorizedAction>
          </div>

          <div className="flex items-center gap-2">
            <span className="text-sm font-semibold text-primary whitespace-nowrap">
              {progress}%
            </span>
            <Progress
              value={progress}
              className="h-2 flex-1 bg-muted"
              indicatorClassName="bg-primary"
            />
          </div>
        </div>

        {/* Desktop Header (unchanged layout) */}
        <div className="hidden sm:flex items-center justify-between gap-6">
          {/* Right Section: Title, Date, Task Count, Chevron */}
          <div>
            <div className="flex flex-1 items-center gap-2 min-w-0">
              <CollapsibleTrigger asChild>
                <Button
                  variant="outline"
                  size="icon"
                  className="size-8 bg-background dark:bg-background border-border"
                >
                  <ChevronDown
                    className={cn(
                      "h-5 w-5  transition-transform duration-200",
                      isExpanded && "rotate-180",
                    )}
                  />
                </Button>
              </CollapsibleTrigger>
              <div className="flex items-center gap-2 flex-wrap">
                <h3 className="text-base sm:text-lg font-semibold text-card-foreground truncate max-w-50 sm:max-w-none">
                  {title}
                </h3>
                <span className="text-sm sm:text-base text-muted-foreground whitespace-nowrap">
                  {startDate} - {endDate}
                </span>
                <span className="text-sm sm:text-base text-muted-foreground whitespace-nowrap">
                  ({taskCount} {translations.tasksLabel})
                </span>
              </div>
              <div />
            </div>

            <div className="flex items-center gap-2">
              <div className="w-full max-w-[320px]">
                <Progress
                  value={progress}
                  className="h-2 bg-muted"
                  indicatorClassName="bg-primary"
                />
              </div>
              <span className="text-xs font-semibold text-primary whitespace-nowrap">
                {progress}%
              </span>
            </div>
          </div>

          <div className="flex">
            <div className="flex flex-wrap items-center gap-6">
              <div className="flex items-center gap-2 pl-2">
                {renderTaskCountBadges()}
              </div>

              <AuthorizedAction
                action={
                  phaseStatusAction || {
                    actionKey: "phases.update_status",
                  }
                }
                surface="card"
              >
                <Button
                  variant="ghost"
                  className={cn(
                    "h-8 gap-1 px-3 text-sm font-medium rounded text-foreground hover:text-foreground bg-muted hover:bg-muted/80 cursor-pointer ml-3",
                    statusButton.disabled && "cursor-default",
                  )}
                  onClick={(e) => {
                    e.stopPropagation();
                    if (onPhaseStatusToggle && !statusButton.disabled) {
                      onPhaseStatusToggle();
                    }
                  }}
                  disabled={statusButton.disabled}
                >
                  {statusButton.label}
                  {statusButton.showIcon && <Check className="h-5 w-5" />}
                </Button>
              </AuthorizedAction>
            </div>

            <div className="hidden sm:block">{renderMoreOptionsMenu(false)}</div>
          </div>
        </div>

        {/* Collapsible Content - Tasks */}
        <CollapsibleContent className="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
          <div className=" pb-4 space-y-1">
            {/* Description (if expanded and exists) */}
            {description && (
              <p className="text-sm text-muted-foreground mb-3">
                {description}
              </p>
            )}

            {/* Task List */}
            {tasks.map((task) => (
              <TaskRow
                key={task.id}
                title={task.title}
                status={mapTaskStatusToRowStatus(task.status)}
                statusLabel={task.statusLabel || getTaskStatusLabel(task.status)}
                dueDate={task.dueDate}
                assignees={task.assignees}
                commentsCount={task.commentsCount}
                attachmentsCount={task.attachmentsCount}
                onToggle={() => onTaskToggle(task.id)}
                isToggling={togglingTaskIds.includes(task.id)}
                onView={() => onTaskView(task.id)}
                onEdit={() => onTaskEdit(task.id)}
                onDelete={() => onTaskDelete(task.id)}
                onRequestApproval={
                  onTaskRequestApproval
                    ? () => onTaskRequestApproval(task.id)
                    : undefined
                }
                onDuplicate={onTaskDuplicate ? () => onTaskDuplicate(task.id) : undefined}
                toggleAction={taskToggleAction}
                viewAction={taskViewAction}
                editAction={taskEditAction}
                deleteAction={taskDeleteAction}
                requestApprovalAction={taskRequestApprovalAction}
                duplicateAction={taskDuplicateAction}
                translations={{
                  view: translations.view,
                  edit: translations.edit,
                  delete: translations.delete,
                  requestApproval: translations.requestApproval,
                  duplicate: translations.duplicate,
                  moreOptions: translations.moreOptions,
                  commentsTooltip: translations.view,
                  attachmentsTooltip: translations.view,
                  subtasksTooltip: translations.view,
                  changeStatusTooltip: task.statusLabel || statusTranslations[task.status],
                }}
              />
            ))}

            {/* Add Task Button */}
            <div className="flex justify-center pt-2">
              <AuthorizedAction
                action={
                  addTaskAction || {
                    actionKey: "tasks.create",
                    mode: "disable",
                  }
                }
                surface="form"
              >
                <Button
                  variant="ghost"
                  onClick={(e) => {
                    e.stopPropagation();
                    onAddTask();
                  }}
                  className="gap-1 text-sm font-medium text-foreground hover:bg-transparent hover:text-foreground"
                >
                  {translations.addTask}
                  <Plus className="h-5 w-5" />
                </Button>
              </AuthorizedAction>
            </div>
          </div>
        </CollapsibleContent>
      </div>
    </Collapsible>
  );
}