import type { ReactNode } from "react";
import { Link } from "react-router-dom";
import { Boxes, Layers, Unlink } from "lucide-react";
import { StackIcon } from "@/components/ui/StackIcon";
import type { StackGroup } from "@/lib/stackGroups";

/**
 * The heading row above a stack's volumes, networks or images.
 *
 * One component for all three pages, so a stack looks the same wherever it
 * appears — same icon, same name, same wording for the leftovers.
 *
 * `meta` is whatever the page can count that the others cannot: volumes know
 * their size, images their update status. It sits at the end in the muted tone
 * so the stack's name stays the thing you scan for.
 */
export function StackGroupHeader<T>({
  group,
  colSpan,
  meta,
}: {
  group: StackGroup<T>;
  colSpan: number;
  meta?: ReactNode;
}) {
  return (
    <tr className="bg-slate-50/80 dark:bg-slate-800/40">
      <td colSpan={colSpan} className="px-4 py-2">
        <div className="flex flex-wrap items-center gap-2">
          <Label group={group} />
          {meta && <span className="text-xs text-slate-400">{meta}</span>}
        </div>
      </td>
    </tr>
  );
}

function Label<T>({ group }: { group: StackGroup<T> }) {
  if (group.kind === "shared") {
    return (
      <>
        <Layers className="h-4 w-4 shrink-0 text-slate-400" />
        <span className="font-semibold text-slate-500">Shared by several stacks</span>
      </>
    );
  }
  if (group.kind === "builtin") {
    return (
      <>
        <Boxes className="h-4 w-4 shrink-0 text-slate-400" />
        <span className="font-semibold text-slate-500">Docker built-ins</span>
      </>
    );
  }
  if (group.kind === "none") {
    return (
      <>
        <Unlink className="h-4 w-4 shrink-0 text-slate-400" />
        <span className="font-semibold text-slate-500">Not part of a stack</span>
      </>
    );
  }
  if (group.stack) {
    return (
      <>
        <StackIcon stack={group.stack} status={group.stack.status} size="sm" />
        <Link to={`/stacks/${group.stack.id}`} className="font-semibold hover:underline">
          {group.stack.name}
        </Link>
      </>
    );
  }
  // Labelled with a compose project that is no longer a stack: exactly where
  // things left behind by a deleted stack collect.
  return (
    <>
      <Unlink className="h-4 w-4 shrink-0 text-amber-500" />
      <span className="font-semibold">{group.stackId}</span>
      <span className="rounded-pill border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[11px] font-semibold text-amber-600 dark:text-amber-400">
        stack removed
      </span>
    </>
  );
}