"use client";

import * as React from "react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const memberBadgeClass =
  "w-fit border-accent/40 bg-accent/10 px-1.5 py-0 font-['Lexend_Deca'] text-[9px] font-semibold text-accent leading-none";

/** Role + team-lead pills under a rep name in sales-target tables. */
export function SalesTargetMemberBadges({
  roleName,
  isTeamLead,
  className,
}: {
  roleName?: string | null;
  isTeamLead?: boolean;
  className?: string;
}) {
  const role = roleName?.trim();
  if (!role && !isTeamLead) return null;

  return (
    <div className={cn("flex flex-wrap items-center gap-1", className)}>
      {role ? (
        <Badge variant="outline" className={memberBadgeClass}>
          {role}
        </Badge>
      ) : null}
      {isTeamLead ? (
        <Badge variant="outline" className={memberBadgeClass}>
          Team lead
        </Badge>
      ) : null}
    </div>
  );
}

/** Shared surface fill for sales targets panels (no white / bg-card). */
export const salesTargetSurfaceClass = "bg-[#CEDAE2] border-border/60";

/** Inset blocks on #CEDAE2 panels */
export const salesTargetInsetClass =
  "rounded-lg border border-border/40 bg-black/[0.04]";

/** Shared card surface for sales targets panels. */
export function SalesTargetPanel({
  className,
  children,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "rounded-xl border shadow-sm",
        salesTargetSurfaceClass,
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export function SalesTargetPageSection({
  title,
  description,
  action,
  headingId,
  className,
  children,
}: {
  title: string;
  description?: string;
  action?: React.ReactNode;
  headingId?: string;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <section
      className={cn("flex flex-col gap-4 md:gap-5", className)}
      aria-labelledby={headingId}
    >
      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end sm:justify-between">
        <div className="min-w-0">
          <h2
            id={headingId}
            className="font-['Lexend'] text-base font-bold text-text sm:text-lg"
          >
            {title}
          </h2>
          {description ? (
            <p className="mt-0.5 font-['Lexend_Deca'] text-xs text-muted-foreground">
              {description}
            </p>
          ) : null}
        </div>
        {action}
      </div>
      {children}
    </section>
  );
}