import { CheckCircle2, Circle, ClipboardList, PlayCircle, Repeat, Sparkles, XCircle, type LucideIcon } from "lucide-react";
import { Task, TaskStatus } from "@/lib/tasks/types";
import { TASK_STATUS_LABELS } from "@/lib/tasks/labels";
import { DueState } from "@/lib/tasks/today";
import { cn } from "@/lib/utils";

const STATUS_META: Record<TaskStatus, { icon: LucideIcon; className: string }> = {
  OPEN: { icon: Circle, className: "bg-muted text-foreground/80" },
  IN_PROGRESS: {
    icon: PlayCircle,
    className: "bg-[color-mix(in_oklch,var(--chart-5)_16%,var(--card))] text-foreground",
  },
  DONE: { icon: CheckCircle2, className: "bg-success/15 text-foreground" },
  CANCELLED: { icon: XCircle, className: "bg-muted text-muted-foreground line-through" },
};

/** Status as icon AND word - never colour alone. */
export function TaskStatusPill({ status, className }: { status: TaskStatus; className?: string }) {
  const meta = STATUS_META[status];
  const Icon = meta.icon;
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
        meta.className,
        className,
      )}
    >
      <Icon className="size-3.5" aria-hidden />
      {TASK_STATUS_LABELS[status]}
    </span>
  );
}

/**
 * Where a task came from. An automatic task is a suggestion to look at
 * something - it says nothing about work having been done.
 */
export function TaskSourceBadge({
  task,
}: {
  task: Pick<Task, "sourceAutomationTrigger" | "sourceTemplateId" | "sourceInspectionId">;
}) {
  const source = task.sourceAutomationTrigger
    ? { icon: Sparkles, label: "Vorschlag", title: "Automatisch vorgeschlagen – noch nichts erledigt" }
    : task.sourceTemplateId
      ? { icon: Repeat, label: "Wiederkehrend", title: "Aus einer wiederkehrenden Vorlage" }
      : task.sourceInspectionId
        ? { icon: ClipboardList, label: "Aus Durchsicht", title: "Bei einer Durchsicht angelegt" }
        : null;
  if (!source) return null;
  const Icon = source.icon;
  return (
    <span
      title={source.title}
      className="inline-flex items-center gap-1 rounded-full border border-dashed border-primary/45 px-2 py-0.5 text-xs text-foreground/80"
    >
      <Icon className="size-3.5 text-primary" aria-hidden />
      {source.label}
    </span>
  );
}

const DUE_LABEL: Record<Exclude<DueState, "none">, string> = {
  overdue: "Überfällig",
  today: "Heute",
  upcoming: "Geplant",
};

export function DueChip({ state, dueDate }: { state: DueState; dueDate: string | null }) {
  if (state === "none" || !dueDate) {
    return <span className="text-xs text-muted-foreground">ohne Termin</span>;
  }
  const date = new Date(dueDate).toLocaleDateString("de-DE", {
    day: "numeric",
    month: "short",
    timeZone: "UTC",
  });
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
        state === "overdue" && "bg-warning/20 text-foreground",
        state === "today" && "bg-primary/12 text-foreground",
        state === "upcoming" && "bg-muted text-muted-foreground",
      )}
    >
      {DUE_LABEL[state]}
      {state !== "today" ? <span className="font-normal">· {date}</span> : null}
    </span>
  );
}