import Link from "next/link";
import { ChevronRight } from "lucide-react";

// Reports breadcrumb: always rooted at "Reports", then the section and any
// drill/detail crumbs. A crumb with an href is a link; the last is the current.
export function ReportBreadcrumb({ trail }: { trail: { label: string; href?: string }[] }) {
  return (
    <nav className="mb-4 flex flex-wrap items-center gap-2 text-sm text-neutral-500">
      <span>Reports</span>
      {trail.map((t, i) => (
        <span key={i} className="flex items-center gap-2">
          <ChevronRight className="h-3.5 w-3.5 shrink-0" />
          {t.href ? (
            <Link href={t.href} className="hover:text-neutral-800">{t.label}</Link>
          ) : (
            <span className="font-medium text-neutral-900">{t.label}</span>
          )}
        </span>
      ))}
    </nav>
  );
}

// Server-rendered segmented control: each option is a link that re-renders the
// page with the new value in the query string (used for tier / break-down / top-N).
export function SegLink({
  label,
  options,
  current,
  hrefFor,
}: {
  label: string;
  options: { value: string; label: string }[];
  current: string;
  hrefFor: (v: string) => string;
}) {
  return (
    <div className="flex items-center gap-2">
      <span className="text-xs text-neutral-400">{label}</span>
      <div className="inline-flex rounded-lg border border-neutral-200 bg-white p-0.5 text-xs">
        {options.map((o) => (
          <Link
            key={o.value}
            href={hrefFor(o.value)}
            className={
              "rounded-md px-2.5 py-1 font-medium " +
              (o.value === current ? "bg-primary-600 text-white" : "text-neutral-500 hover:text-neutral-800")
            }
          >
            {o.label}
          </Link>
        ))}
      </div>
    </div>
  );
}

export function ReportTitle({ title, subtitle, badge }: { title: string; subtitle?: string; badge?: React.ReactNode }) {
  return (
    <div className="mb-6">
      <div className="flex items-center gap-3">
        <h1 className="text-2xl font-semibold text-neutral-900">{title}</h1>
        {badge}
      </div>
      {subtitle && <p className="mt-1 text-sm text-neutral-500">{subtitle}</p>}
    </div>
  );
}