"use client";

import { useState } from "react";
import type { Task } from "@/features/tasks/types";
import { DescriptionInfoButton } from "@/components/description-info-button";
import { ItemDescriptionSheet } from "@/components/item-description-sheet";
import { habitsDict } from "@/features/habits/dict";
import { TaskCardMenu } from "@/features/tasks/components/task-card-menu";
import {
  getEisenhowerBadgeClass,
  getEisenhowerLabel,
  getTaskCategoryLabel,
  isTaskCompleted,
} from "@/features/tasks/utils/task-helpers";
import { formatTaskTime } from "@/features/tasks/utils/jalali";
import { tasksDict } from "@/features/tasks/dict";
import { Lock, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { toast } from "@/lib/toast";

type TaskCardProps = {
  task: Task;
  onToggleComplete: (task: Task) => void;
  onEdit: (task: Task) => void;
  onDelete: (task: Task) => void;
  isFutureDay?: boolean;
  isTogglePending?: boolean;
};

export function TaskCard({
  task,
  onToggleComplete,
  onEdit,
  onDelete,
  isFutureDay = false,
  isTogglePending = false,
}: TaskCardProps) {
  const [descriptionOpen, setDescriptionOpen] = useState(false);
  const taskDescription = task.description?.trim() ?? "";
  const completed = isTaskCompleted(task.status);
  const cancelled = task.status === "CANCELLED";
  const showFutureLock = isFutureDay && !completed && !cancelled;
  const time = formatTaskTime(task.dueDate ?? task.scheduledDate);
  const category = getTaskCategoryLabel(task.category);
  const subtitle = [time, category].filter(Boolean).join(" · ");
  const eisenhowerLabel = getEisenhowerLabel(task.isImportant, task.isUrgent);
  const eisenhowerBadgeClass = getEisenhowerBadgeClass(
    task.isImportant,
    task.isUrgent,
  );

  const handleToggleClick = () => {
    if (isFutureDay) {
      toast.warning(habitsDict.logFutureDateNotAllowed);
      return;
    }

    onToggleComplete(task);
  };

  return (
    <article className="flex items-center gap-3 rounded-[1.75rem] bg-card px-4 py-4 shadow-soft-sm last:mb-12 sm:gap-4 sm:px-5">
      <button
        type="button"
        aria-label={tasksDict.toggleComplete}
        disabled={isTogglePending}
        onClick={handleToggleClick}
        className={cn(
          "inline-flex size-10 shrink-0 items-center justify-center rounded-full border-2 transition-all",
          completed && "border-transparent bg-gradient-to-br from-[#2EC4B6] to-[#56CCF2] text-white shadow-soft-sm",
          !completed && !cancelled && !showFutureLock && "border-[#1D2D50] bg-transparent text-transparent dark:border-foreground",
          cancelled && "bg-destructive/10",
          showFutureLock && "border-muted-foreground/30 bg-muted/40 text-muted-foreground",
        )}
      >
        {completed ? (
          <svg
            aria-hidden="true"
            className="size-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2.5}
          >
            <path d="M6 12l4 4 8-8" />
          </svg>
        ) : cancelled ? (
          <X aria-hidden className="size-5" strokeWidth={2.5} color="red" />
        ) : showFutureLock ? (
          <Lock aria-hidden className="size-5" strokeWidth={2} />
        ) : null
        }
      </button>

      <div className="min-w-0 flex-1">
        <span
          className={`mb-1 inline-block max-w-full truncate rounded-full px-2.5 py-1 text-[11px] font-semibold sm:text-xs ${eisenhowerBadgeClass}`}
        >
          {eisenhowerLabel}
        </span>
        <h3
          className={`truncate text-base font-bold text-[#1D2D50] dark:text-card-foreground sm:text-lg ${completed ? "line-through opacity-60" : ""
            }`}
        >
          {task.title}
        </h3>
        <p className="mt-1 truncate text-sm text-muted-foreground">{subtitle}</p>
      </div>

      {taskDescription ? (
        <DescriptionInfoButton onClick={() => setDescriptionOpen(true)} />
      ) : null}

      <TaskCardMenu
        onEdit={() => onEdit(task)}
        onDelete={() => onDelete(task)}
      />

      {taskDescription ? (
        <ItemDescriptionSheet
          open={descriptionOpen}
          title={task.title}
          description={taskDescription}
          onClose={() => setDescriptionOpen(false)}
        />
      ) : null}
    </article>
  );
}