"use client";

import {
  Circle,
  CheckCircle2,
  ChevronRight,
  Calendar,
  User2,
  Repeat,
  Flag,
} from "lucide-react";
import { cn, formatRelativeDate, isTaskDeadlineOverdue } from "@/lib/utils";
import type { TaskWithRelations } from "@/hooks/use-tasks";
import { recurrenceLabel } from "@/lib/task-recurrence";

const PRIORITY_DOT: Record<string, string> = {
  urgent: "#ef4444",
  high: "#f97316",
  medium: "#eab308",
  low: "#3b82f6",
};

const MAX_VISIBLE_TAGS = 2;

const REVIEW_LABELS: Record<
  TaskWithRelations["review_status"],
  { label: string; className: string }
> = {
  not_required: { label: "No review", className: "" },
  pending_review: {
    label: "Needs review",
    className: "bg-amber-500/10 text-amber-700",
  },
  changes_requested: {
    label: "Changes requested",
    className: "bg-red-500/10 text-red-700",
  },
  approved: {
    label: "Approved",
    className: "bg-emerald-500/10 text-emerald-700",
  },
};

interface TaskCardProps {
  task: TaskWithRelations;
  onToggle: () => void;
  onClick: () => void;
  currentUserId?: string | null;
}

export function TaskCard({ task, onToggle, onClick, currentUserId }: TaskCardProps) {
  const isDone = task.status === "done";
  const isOverdue =
    task.deadline && !isDone && isTaskDeadlineOverdue(task.deadline);
  const subtasksDone = task.subtasks.filter((s) => s.status === "done").length;
  const isMyReviewTurn =
    !!currentUserId &&
    task.reviewer_id === currentUserId &&
    task.review_status === "pending_review";
  const isMyChangesTurn =
    !!currentUserId &&
    task.assignee_id === currentUserId &&
    task.review_status === "changes_requested";
  const needsMyLead = isMyReviewTurn || isMyChangesTurn;

  return (
    <div
      className={cn(
        "group flex items-start gap-3 rounded-lg border bg-card px-4 py-3 transition-colors cursor-pointer",
        needsMyLead
          ? "border-amber-500/40 bg-amber-500/[0.04] hover:border-amber-500/60"
          : "border-border hover:border-foreground/10"
      )}
      onClick={onClick}
    >
      {/* Checkbox */}
      <button
        onClick={(e) => {
          e.stopPropagation();
          onToggle();
        }}
        className="mt-0.5 shrink-0 cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
      >
        {isDone ? (
          <CheckCircle2 className="h-[18px] w-[18px] text-primary" />
        ) : (
          <Circle className="h-[18px] w-[18px]" />
        )}
      </button>

      {/* Content */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          {/* Priority indicator */}
          {task.priority !== "none" && (
            <span
              className="h-1.5 w-1.5 rounded-full shrink-0"
              style={{ backgroundColor: PRIORITY_DOT[task.priority] }}
            />
          )}

          <span
            className={cn(
              "text-sm font-medium truncate",
              isDone && "line-through text-muted-foreground"
            )}
          >
            {task.title}
          </span>
        </div>

        {/* Meta row */}
        <div className="flex items-center gap-3 mt-1 flex-wrap">
          {/* Deadline */}
          {task.deadline && (
            <span
              className={cn(
                "inline-flex items-center gap-1 text-xs",
                isOverdue
                  ? "text-destructive"
                  : isDone
                  ? "text-muted-foreground"
                  : "text-muted-foreground"
              )}
            >
              <Calendar className="h-3 w-3" />
              {formatRelativeDate(task.deadline)}
            </span>
          )}

          {/* Subtasks count */}
          {task.subtasks.length > 0 && (
            <span className="text-xs text-muted-foreground">
              {subtasksDone}/{task.subtasks.length} subtasks
            </span>
          )}

          {task.assignee && (
            <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
              <User2 className="h-3 w-3" />
              {task.assignee.full_name || task.assignee.email}
            </span>
          )}

          {task.recurrence_pattern !== "none" && (
            <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
              <Repeat className="h-3 w-3" />
              {recurrenceLabel(task.recurrence_pattern, task.recurrence_interval)}
            </span>
          )}

          {needsMyLead ? (
            <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/15 px-1.5 py-0 text-[10px] font-semibold text-amber-700 dark:text-amber-400">
              <Flag className="h-2.5 w-2.5" />
              Take the lead
            </span>
          ) : (
            task.review_status !== "not_required" && (
              <span
                className={cn(
                  "inline-flex items-center rounded-full px-1.5 py-0 text-[10px] font-medium",
                  REVIEW_LABELS[task.review_status].className
                )}
              >
                {REVIEW_LABELS[task.review_status].label}
              </span>
            )
          )}

          {/* Tags */}
          {task.tags.slice(0, MAX_VISIBLE_TAGS).map((tag) => (
            <span
              key={tag.id}
              className="inline-flex items-center gap-1 rounded-full px-1.5 py-0 text-[10px] font-medium"
              style={{
                backgroundColor: tag.color + "18",
                color: tag.color,
              }}
            >
              {tag.name}
            </span>
          ))}
          {task.tags.length > MAX_VISIBLE_TAGS && (
            <span className="text-[10px] text-muted-foreground">
              +{task.tags.length - MAX_VISIBLE_TAGS}
            </span>
          )}
        </div>
      </div>

      {/* Arrow */}
      <ChevronRight className="h-4 w-4 mt-0.5 shrink-0 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
    </div>
  );
}