import dayjs from "dayjs";
import { Calendar, MessageSquare } from "lucide-react";
import { useMemo } from "react";
import { agentColor } from "../lib/agentIdentity";
import { AgentIdenticon } from "./AgentIdenticon";
import { LabelChip } from "./LabelChip";
import { Badge } from "./ui/badge";

interface TaskCardProps {
  task: any;
  labels?: { name: string; color: string; description: string }[];
  onClick: () => void;
  onAgentClick?: (task: any) => void;
  isNew?: boolean;
}

function getPriorityBadge(priority?: string) {
  switch (priority) {
    case "urgent":
    case "high":
    case "High":
      return {
        label: "High",
        color: "bg-red-50 text-red-600 border-red-200/60 dark:bg-red-950/40 dark:text-red-400 dark:border-red-900/60",
        dot: "bg-red-500",
      };
    case "medium":
    case "med":
    case "Med":
      return {
        label: "Med",
        color: "bg-amber-50 text-amber-600 border-amber-200/60 dark:bg-amber-950/40 dark:text-amber-400 dark:border-amber-900/60",
        dot: "bg-amber-500",
      };
    case "low":
    case "Low":
      return {
        label: "Low",
        color: "bg-blue-50 text-blue-600 border-blue-200/60 dark:bg-blue-950/40 dark:text-blue-400 dark:border-blue-900/60",
        dot: "bg-blue-500",
      };
    default:
      return {
        label: priority || "Low",
        color: "bg-slate-50 text-slate-600 border-slate-200/60 dark:bg-zinc-800 dark:text-slate-300 dark:border-zinc-700/60",
        dot: "bg-slate-400",
      };
  }
}

export function TaskCard({ task, labels = [], onClick, onAgentClick, isNew }: TaskCardProps) {
  const isAssigned = !!task.assigned_to;
  const isWorking = task.status === "in_progress" && !task.glow_suppressed;
  const labelByName = new Map(labels.map((label) => [label.name, label]));

  const meta = useMemo(() => {
    if (!task.metadata) return {};
    if (typeof task.metadata === "string") {
      try {
        return JSON.parse(task.metadata);
      } catch {
        return {};
      }
    }
    return task.metadata;
  }, [task.metadata]);

  const priorityVal = task.priority || meta.priority || "low";
  const priorityInfo = getPriorityBadge(priorityVal);

  const steps = Array.isArray(meta.steps) ? meta.steps : [];

  // Calculate DoD from description checkboxes
  const calculateDodProgress = (desc?: string | null) => {
    if (!desc) return null;
    const regex = /^\s*-\s*\[([ xX])\]\s+/gm;
    let total = 0;
    let checked = 0;
    let match;
    while ((match = regex.exec(desc)) !== null) {
      total++;
      if (match[1].toLowerCase() === "x") checked++;
    }
    return total > 0 ? Math.round((checked / total) * 100) : null;
  };

  const desc = task.description || meta.businessContext || meta.technicalNotes || "";
  const dodPct = calculateDodProgress(desc);

  let computedPct = 0;
  if (dodPct !== null) {
    computedPct = dodPct;
  } else if (steps.length > 0) {
    const completedSteps = steps.filter((s: any) => s.completed || s.status === "done" || s.verified).length;
    computedPct = Math.round((completedSteps / steps.length) * 100);
  }

  let progressPct = 0;
  if (task.status === "done") {
    progressPct = 100;
  } else if (task.status === "in_review") {
    progressPct = dodPct !== null ? dodPct : 100;
  } else if (task.status === "in_progress") {
    progressPct = dodPct !== null ? dodPct : meta.progress !== undefined ? meta.progress : computedPct;
  }

  return (
    <div
      data-task-id={task.id}
      draggable
      onDragStart={(e) => {
        (window as any).__draggedTaskId = task.id;
        e.dataTransfer.setData("text/plain", task.id);
        e.dataTransfer.setData("application/json", JSON.stringify({ id: task.id }));
        e.dataTransfer.effectAllowed = "move";
      }}
      onDragEnd={() => {
        delete (window as any).__draggedTaskId;
      }}
      onClick={onClick}
      onKeyDown={(event) => {
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault();
          onClick();
        }
      }}
      role="button"
      tabIndex={0}
      className={`
        relative w-full text-left bg-surface-secondary rounded-xl p-3.5 outline-none
        transition-all duration-150 ease-out cursor-pointer
        shadow-xs hover:border-content-tertiary/40 hover:bg-surface-tertiary/50 group
        ${isWorking ? "border-2 border-accent shadow-xs shadow-accent/20" : "border border-border"}
        ${isNew ? "animate-card-highlight" : ""}
      `}
      style={
        isWorking && task.agent_public_key
          ? {
              borderColor: `color-mix(in srgb, ${agentColor(task.agent_public_key)} 40%, transparent)`,
              boxShadow: `0 0 16px color-mix(in srgb, ${agentColor(task.agent_public_key)} 15%, transparent)`,
            }
          : undefined
      }
    >
      {/* Priority Pill & Module & Progress Badge */}
      <div className="flex items-center justify-between gap-2 mb-2 flex-wrap">
        <div className="flex items-center gap-1.5">
          <div
            className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md border text-[11px] font-semibold tracking-tight ${priorityInfo.color}`}
          >
            <span className={`w-1.5 h-1.5 rounded-xs ${priorityInfo.dot}`} />
            <span>{priorityInfo.label}</span>
          </div>

          {meta.module && (
            <span className="px-1.5 py-0.5 rounded-md bg-accent/10 border border-accent/20 text-[10px] font-mono font-semibold text-accent uppercase">
              {meta.module}
            </span>
          )}
        </div>

        {task.status !== "backlog" && task.status !== "todo" && task.status !== "cancelled" && (
          <div className="flex items-center gap-1 text-[11px] font-mono font-medium text-content-tertiary">
            <svg className="w-3.5 h-3.5 text-accent transform -rotate-90" viewBox="0 0 36 36">
              <path
                className="text-surface-tertiary"
                strokeWidth="4"
                stroke="currentColor"
                fill="none"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
              />
              <path
                className="text-accent"
                strokeDasharray={`${progressPct}, 100`}
                strokeWidth="4"
                strokeLinecap="round"
                stroke="currentColor"
                fill="none"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
              />
            </svg>
            <span>{progressPct}%</span>
          </div>
        )}
      </div>

      {/* Task Title */}
      <div className="flex items-start justify-between gap-2">
        <h4
          className="text-[13px] font-semibold leading-snug text-content-primary group-hover:text-accent transition-colors line-clamp-2"
          title={task.title}
        >
          {task.title}
        </h4>
        {task.blocked && (
          <Badge variant="destructive" className="text-[9px] font-mono font-bold uppercase shrink-0 px-1.5 py-0">
            Blocked
          </Badge>
        )}
      </div>

      {/* Task Description with Read more */}
      {desc && (
        <div className="mt-1 text-[12px] text-content-secondary line-clamp-2 leading-relaxed font-normal">
          {desc}
          <span className="font-semibold text-content-primary hover:underline ml-1">Read more</span>
        </div>
      )}

      {/* Rich Metadata Badges */}
      {(meta.steps?.length > 0 || meta.qcChecks?.length > 0 || meta.affectedFiles?.length > 0 || meta.acceptanceTests?.length > 0) && (
        <div className="mt-2 flex items-center gap-1.5 flex-wrap text-[10px] font-mono text-content-tertiary">
          {meta.steps?.length > 0 && (
            <span
              className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded bg-surface-tertiary border border-border"
              title="Thao tác các bước"
            >
              📝 {meta.steps.length} steps
            </span>
          )}
          {meta.qcChecks?.length > 0 && (
            <span
              className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400"
              title="QC Standards"
            >
              ✅ {meta.qcChecks.length} QC
            </span>
          )}
          {meta.affectedFiles?.length > 0 && (
            <span
              className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded bg-surface-tertiary border border-border"
              title="Files bị ảnh hưởng"
            >
              📁 {meta.affectedFiles.length} files
            </span>
          )}
          {meta.acceptanceTests?.length > 0 && (
            <span
              className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded bg-purple-500/10 border border-purple-500/20 text-purple-600 dark:text-purple-400"
              title="Kịch bản nghiệm thu"
            >
              🧪 {meta.acceptanceTests.length} tests
            </span>
          )}
        </div>
      )}

      {/* Labels */}
      {task.labels?.length > 0 && (
        <div className="mt-2 flex gap-1.5 flex-wrap">
          {task.labels.map((name: string) => {
            const label = labelByName.get(name);
            return <LabelChip key={name} name={name} color={label?.color ?? "#71717A"} description={label?.description} />;
          })}
        </div>
      )}

      {/* Dashed Separator */}
      <div className="my-2.5 border-t border-dashed border-border/80" />

      {/* Footer: Stacked Avatars + Working Dot + Stats Icons */}
      <div className="flex items-center justify-between gap-2 text-[11px] text-content-tertiary">
        {/* Left: Stacked Avatars / Assignee + Working Dot */}
        <div className="flex items-center gap-1.5 min-w-0">
          {isWorking && (
            <span className="relative flex h-2 w-2 shrink-0" title="Agent đang xử lý công việc">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
              <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
            </span>
          )}

          {isAssigned ? (
            <button
              type="button"
              data-agent-section
              className="flex items-center -space-x-1.5 overflow-hidden p-0.5"
              onClick={(event) => {
                event.stopPropagation();
                onAgentClick?.(task);
              }}
            >
              <div className="relative shrink-0 rounded-full border border-surface-secondary overflow-hidden bg-surface-primary">
                <AgentIdenticon publicKey={task.agent_public_key || task.assigned_to!} size={18} />
              </div>
              <span
                className="pl-2 truncate font-mono text-[11px] text-content-secondary hover:text-content-primary"
                title={task.agent_name || task.assigned_to}
              >
                {task.agent_name || task.assigned_to}
              </span>
            </button>
          ) : (
            <span className="text-[11px] italic text-content-tertiary">Unassigned</span>
          )}
        </div>

        {/* Right: Info Metadata (Time, Comments, Subtasks) */}
        <div className="flex items-center gap-3 font-mono shrink-0 text-[11px] text-content-tertiary">
          <span className="inline-flex items-center gap-1" title={task.created_at ? dayjs(task.created_at).format("YYYY-MM-DD") : undefined}>
            <Calendar className="w-3 h-3 text-content-tertiary" />
            <span>{task.created_at ? `${dayjs().diff(dayjs(task.created_at), "day")}d` : "6d"}</span>
          </span>

          <span className="inline-flex items-center gap-1" title="Discussions">
            <MessageSquare className="w-3 h-3 text-content-tertiary" />
            <span>{task.notes?.length ?? 0}</span>
          </span>

          <span className="inline-flex items-center gap-1" title="Subtasks / Steps">
            <span className="text-[10px]">📋</span>
            <span>{meta.steps?.length ? `0/${meta.steps.length}` : task.subtask_count ? `0/${task.subtask_count}` : "0/1"}</span>
          </span>
        </div>
      </div>
    </div>
  );
}