import type { KanbanTask } from "@xtablo/shared-types";
import { TypographyH4, TypographyMuted } from "@xtablo/ui/components/typography";
import { CalendarIcon, User } from "lucide-react";

interface KanbanTaskCardProps {
  task: KanbanTask;
  etapeTitle?: string;
  onClick: () => void;
}

function formatDueDate(dateStr: string): string {
  const date = new Date(dateStr);
  return date.toLocaleDateString("fr-FR", {
    day: "2-digit",
    month: "short",
  });
}

function isOverdue(dateStr: string): boolean {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const due = new Date(dateStr);
  return due < today;
}

export const KanbanTaskCard = ({ task, etapeTitle, onClick }: KanbanTaskCardProps) => {
  const overdue = task.due_date && task.status !== "done" && isOverdue(task.due_date);

  return (
    <div
      onClick={onClick}
      className="bg-card border border-border rounded-lg p-3 hover:shadow-md transition-shadow cursor-pointer group"
    >
      <TypographyH4 className="font-medium text-foregroud mb-1 line-clamp-2">
        {task.title}
      </TypographyH4>

      {task.description && (
        <TypographyMuted className=" line-clamp-2 mt-1 mb-2 text-ellipsis overflow-hidden">
          {task.description}
        </TypographyMuted>
      )}

      {/* Due date */}
      {task.due_date && (
        <div
          className={`flex items-center gap-1 text-xs mb-2 ${overdue ? "text-red-500" : "text-muted-foreground"}`}
        >
          <CalendarIcon className="w-3.5 h-3.5" />
          <span>{formatDueDate(task.due_date)}</span>
        </div>
      )}

      {/* Status Pill */}
      <div className="mb-2">
        <span
          className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
            etapeTitle ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
          }`}
        >
          {etapeTitle ?? "Sans Étape"}
        </span>
      </div>

      <div className="flex items-center justify-end mt-2">
        <div className="flex items-center gap-2">
          {task.assignee_id ? (
            <div className="flex items-center gap-1">
              {task.assignee_avatar ? (
                <img
                  src={task.assignee_avatar}
                  alt={task.assignee_name || "Assignee"}
                  className="w-6 h-6 rounded-full border border-border"
                />
              ) : (
                <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs font-medium border border-border">
                  {task.assignee_name?.charAt(0).toUpperCase() || <User className="w-3 h-3" />}
                </div>
              )}
            </div>
          ) : (
            <div className="w-6 h-6 rounded-full bg-muted flex items-center justify-center text-muted-foreground border border-border">
              <User className="w-3 h-3" />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
