import { whenLabel } from "../../logic/format";
import type { Todo, TodoKind } from "../../logic/today";
import { cn, EmptyState, Icon, SectionHeader, type IconName } from "../kit";
import { tabPath } from "../patient/links";
import { Link } from "../router";

const SHOWN = 6;
const look: Record<TodoKind, { icon: IconName; tone: string }> = {
  urgent: { icon: "alarm-warning-line", tone: "text-red-icon" },
  notes: { icon: "file-text-line", tone: "text-blue-icon" },
  new: { icon: "file-search-line", tone: "text-amber-icon" },
};
export const todoPath = (t: Todo) => (t.checkInId ? `${tabPath(t.patientId, "check_ins")}/${t.checkInId}` : tabPath(t.patientId, t.tab));

/** To-do cards, one per patient, each opening the tab where the thing waits. */
export function NeedsYou({ todos }: { todos: Todo[] }) {
  return (
    <section aria-label="Needs you" className="flex flex-col gap-3">
      <SectionHeader title="Needs you" count={todos.length} to={todos.length > SHOWN ? "/app/patients?show=needs-you" : undefined} />
      {todos.length ? (
        <ul className="m-0 grid list-none grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-3 p-0">
          {todos.slice(0, SHOWN).map((t) => (
            <li key={`${t.kind}-${t.patientId}`} className="flex">
              <Link
                to={todoPath(t)}
                className="flex w-full flex-col gap-1.5 rounded-2xl bg-page p-[18px] text-inherit no-underline shadow-card transition-[box-shadow,translate] duration-200 ease-out outline-none hover:-translate-y-px hover:shadow-card-hover focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--color-brand)] motion-reduce:hover:translate-y-0"
              >
                <Icon name={look[t.kind].icon} size={20} className={cn("mb-4", look[t.kind].tone)} />
                <strong className="text-[14.5px] leading-5 font-medium text-ink">{t.title}</strong>
                <span className="line-clamp-2 text-[13px] leading-[18px] text-muted">{t.detail}</span>
                {t.at && <span className="mt-auto pt-2 font-mono text-[11.5px] text-subtle">{whenLabel(t.at)}</span>}
              </Link>
            </li>
          ))}
        </ul>
      ) : (
        <EmptyState title="Nothing needs you right now" body="Urgent notes, unread check-in notes and new information since your last check show here." />
      )}
    </section>
  );
}