import Link from "next/link";
import { ArrowUpRight, Link2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { Card, CardHeader, CardContent } from "./card";
import { Icon } from "@/components/icon";

export interface ConnectedItem {
  ref?: string | null;
  label: string;
  sub?: string | null;
  href: string;
  badge?: React.ReactNode;
}
export interface ConnectedGroup {
  key: string;
  label: string;
  icon: string;
  items: ConnectedItem[];
  /** Total count when only a slice is listed */
  total?: number;
  moreHref?: string;
}

/**
 * "Connected Records" — every relationship of an entity, clickable, with its
 * reference. Groups with no items are shown muted so the admin can see the
 * shape of the graph, not only what exists.
 */
export function ConnectedRecords({ groups, title = "Connected records", className, compact }: { groups: ConnectedGroup[]; title?: string; className?: string; compact?: boolean }) {
  return (
    <Card className={cn("overflow-hidden", className)}>
      <CardHeader
        title={
          <span className="flex items-center gap-2">
            <Link2 className="size-4 text-primary" /> {title}
          </span>
        }
        description="Everything linked to this record. Click to open."
      />
      <CardContent className="space-y-3">
        {groups.map((g) => (
          <section key={g.key}>
            <div className="mb-1 flex items-center justify-between">
              <h4 className="flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-fg-subtle">
                <Icon name={g.icon} className="size-3.5" /> {g.label}
                <span className="rounded-full bg-surface-2 px-1.5 text-[10px] tabular text-fg-muted">{g.total ?? g.items.length}</span>
              </h4>
              {g.moreHref && (g.total ?? 0) > g.items.length ? (
                <Link href={g.moreHref} className="text-2xs font-medium text-primary hover:underline">
                  View all
                </Link>
              ) : null}
            </div>
            {g.items.length === 0 ? (
              <p className="rounded-md border border-dashed border-border px-2.5 py-1.5 text-xs text-fg-subtle">None yet</p>
            ) : (
              <ul className={cn("divide-y divide-border rounded-md border border-border", compact && "text-xs")}>
                {g.items.map((it, i) => (
                  <li key={i}>
                    <Link href={it.href} className="group flex items-center gap-2.5 px-2.5 py-1.5 transition hover:bg-surface-2">
                      {it.ref ? <span className="shrink-0 font-mono text-2xs font-semibold text-fg-muted">{it.ref}</span> : null}
                      <span className="min-w-0 flex-1">
                        <span className="block truncate text-sm font-medium">{it.label}</span>
                        {it.sub ? <span className="block truncate text-2xs text-fg-muted">{it.sub}</span> : null}
                      </span>
                      {it.badge}
                      <ArrowUpRight className="size-3.5 shrink-0 text-fg-subtle opacity-0 transition group-hover:opacity-100" />
                    </Link>
                  </li>
                ))}
              </ul>
            )}
          </section>
        ))}
      </CardContent>
    </Card>
  );
}