import Link from "next/link";
import { STATUS_LABELS } from "@/lib/todoConstants";
import type { TodoStatus } from "@/models/Todo";

export type LinkedTodo = {
  id: string;
  title: string;
  status: TodoStatus;
  assignee: string;
  dueLabel: string;
};

const STATUS_COLOR: Record<TodoStatus, string> = {
  open: "#f87171",
  in_progress: "#38bdf8",
  done: "#34d399",
};

// Read-only Liste der ToDos, die auf diesen Auftrag zeigen — damit man
// Vorbereitungs-Aufgaben direkt beim Auftrag sieht und nicht separat in der
// ToDo-Übersicht suchen muss. Bearbeitet werden ToDos weiterhin dort.
export function LinkedTodosPanel({ todos }: { todos: LinkedTodo[] }) {
  if (todos.length === 0) return null;

  return (
    <div className="border border-white/10 rounded-xl p-4">
      <p className="mb-2 text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
        ToDos zu diesem Auftrag ({todos.length})
      </p>
      <ul className="flex flex-col gap-1.5">
        {todos.map((t) => (
          <li key={t.id} className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
            <span className={t.status === "done" ? "text-[var(--rk-ink-muted)] line-through" : ""}>{t.title}</span>
            <span
              className="text-[0.65rem] uppercase tracking-[0.08em]"
              style={{ color: STATUS_COLOR[t.status] }}
            >
              {STATUS_LABELS[t.status]}
            </span>
            <span className="text-xs text-[var(--rk-ink-muted)]">
              · {t.assignee}
              {t.dueLabel ? ` · fällig ${t.dueLabel}` : ""}
            </span>
          </li>
        ))}
      </ul>
      <Link
        href="/de/admin/todos"
        className="mt-2 inline-block text-xs text-[var(--rk-ink-muted)] underline hover:text-[var(--rk-ink)]"
      >
        Zur ToDo-Übersicht →
      </Link>
    </div>
  );
}