Task Card

"use client";

import { useState } from "react";
import { CalendarDays, Check, MessageCircle, Paperclip } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TaskCardProps {
  title?: string;
  label?: { text: string; tone: "peach" | "mint" | "lavender" | "butter" };
  due?: string;
  overdue?: boolean;
  assignees?: string[];
  comments?: number;
  attachments?: number;
  subtasks?: { done: number; total: number };
  defaultDone?: boolean;
  onDoneChange?: (done: boolean) => void;
  className?: string;
}

const TONES = {
  peach: "bg-da-accent text-da-accent-fg",
  mint: "bg-da-secondary text-da-secondary-fg",
  lavender: "bg-da-primary/12 text-da-fg",
  butter: "bg-da-warning/30 text-da-fg",
} as const;
const AV = ["bg-da-accent", "bg-da-secondary", "bg-da-primary/35", "bg-da-warning/60"];

/** Kanban task card: round done checkbox (bouncy tick), pastel label, title, subtask progress, due date chip (red when overdue), meta counts and avatar dots. */
export function TaskCard({
  title = "Write launch newsletter",
  label = { text: "Marketing", tone: "peach" },
  due = "Thu, Oct 9",
  overdue = false,
  assignees = ["Ana Souza", "Tom Becker"],
  comments = 4,
  attachments = 2,
  subtasks = { done: 2, total: 5 },
  defaultDone = false,
  onDoneChange,
  className,
}: TaskCardProps) {
  const [done, setDone] = useState(defaultDone);
  return (
    <article className={cn("rounded-da-lg bg-da-surface p-4 shadow-da-sm transition-shadow duration-(--da-duration) hover:shadow-da-md", className)}>
      <div className="flex items-start gap-3">
        <button
          type="button"
          role="checkbox"
          aria-checked={done}
          aria-label={`Mark “${title}” as ${done ? "not done" : "done"}`}
          onClick={() => {
            setDone(!done);
            onDoneChange?.(!done);
          }}
          className={cn(
            "da-focus mt-0.5 grid size-6 shrink-0 place-items-center rounded-full border-2 transition-all duration-(--da-duration) ease-da-emphasized",
            done ? "scale-110 border-da-secondary-fg bg-da-secondary-fg text-da-secondary" : "border-da-border-strong hover:border-da-primary",
          )}
        >
          {done && <Check aria-hidden className="size-3.5" strokeWidth={3} />}
        </button>
        <div className="min-w-0 flex-1">
          <span className={cn("inline-block rounded-da-pill px-2.5 py-0.5 text-xs font-semibold", TONES[label.tone])}>{label.text}</span>
          <h3 className={cn("mt-2 font-da-display text-lg leading-snug font-bold", done && "text-da-muted-fg line-through")}>{title}</h3>
          {subtasks.total > 0 && (
            <div className="mt-3">
              <div
                className="h-1.5 overflow-hidden rounded-full bg-da-muted"
                role="progressbar"
                aria-valuenow={subtasks.done}
                aria-valuemax={subtasks.total}
                aria-label="Subtasks"
              >
                <div className="h-full rounded-full bg-da-primary" style={{ width: `${(subtasks.done / subtasks.total) * 100}%` }} />
              </div>
              <p className="mt-1 text-xs text-da-muted-fg">
                {subtasks.done}/{subtasks.total} subtasks
              </p>
            </div>
          )}
        </div>
      </div>
      <footer className="mt-4 flex items-center gap-3 text-xs text-da-muted-fg">
        <span
          className={cn(
            "inline-flex items-center gap-1 rounded-da-pill px-2 py-1 font-medium",
            overdue && !done ? "bg-da-danger/12 text-da-danger" : "bg-da-surface-2",
          )}
        >
          <CalendarDays aria-hidden className="size-3.5" />
          {overdue && !done && <span className="sr-only">Overdue: </span>}
          {due}
        </span>
        <span className="inline-flex items-center gap-1">
          <MessageCircle aria-hidden className="size-3.5" />
          {comments}
          <span className="sr-only"> comments</span>
        </span>
        <span className="inline-flex items-center gap-1">
          <Paperclip aria-hidden className="size-3.5" />
          {attachments}
          <span className="sr-only"> attachments</span>
        </span>
        <span className="ml-auto flex -space-x-1.5" role="img" aria-label={`Assigned to ${assignees.join(", ")}`}>
          {assignees.map((a, i) => (
            <span
              key={a}
              className={cn("grid size-7 place-items-center rounded-full text-[10px] font-bold text-da-fg ring-2 ring-da-surface", AV[i % AV.length])}
            >
              {a
                .split(" ")
                .map((w) => w[0])
                .join("")}
            </span>
          ))}
        </span>
      </footer>
    </article>
  );
}

export default TaskCard;