import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  AlertTriangle,
  CheckCircle2,
  PackageSearch,
  Sparkles,
  Timer,
  PackagePlus,
  PackageX
} from "lucide-react"

export type ProductView = {
  id: string
  label: string
  icon: any
  iconClassName: string
}

export const PRODUCT_VIEWS: ProductView[] = [
  {
    id: "all",
    label: "All Products",
    icon: PackageSearch,
    iconClassName: ""
  },
  {
    id: "critical",
    label: "Critical Stock",
    icon: AlertTriangle,
    iconClassName: ""
  },
  {
    id: "reorder",
    label: "Reorder Soon",
    icon: PackagePlus,
    iconClassName: ""
  },
  {
    id: "healthy",
    label: "Healthy Stock",
    icon: CheckCircle2,
    iconClassName: ""
  },
  {
    id: "at-risk",
    label: "At Risk",
    icon: Timer,
    iconClassName: ""
  },
  {
    id: "overstocked",
    label: "Overstock",
    icon: PackageX,
    iconClassName: ""
  },
  {
    id: "new",
    label: "New Products",
    icon: Sparkles,
    iconClassName: ""
  }
]

interface ViewCounts {
  critical_count: number;
  reorder_count: number;
  at_risk_count: number;
  overstock_count: number;
  healthy_count: number;
  new_count: number;
  total_products: number;
}

interface ProductViewsProps {
  activeView: string
  onViewChange: (view: string) => void
  viewCounts?: ViewCounts | null
}

function getCountForView(viewId: string, counts: ViewCounts): number | null {
  switch (viewId) {
    case 'all': return counts.total_products;
    case 'critical': return counts.critical_count;
    case 'reorder': return counts.reorder_count;
    case 'healthy': return counts.healthy_count;
    case 'at-risk': return counts.at_risk_count;
    case 'overstocked': return counts.overstock_count;
    case 'new': return counts.new_count;
    default: return null;
  }
}

export function ProductViews({ activeView, onViewChange, viewCounts }: ProductViewsProps) {
  return (
    <Tabs value={activeView} onValueChange={onViewChange} className="w-full">
      <TabsList className="inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground w-fit">
        {PRODUCT_VIEWS.map((view) => {
          const count = viewCounts ? getCountForView(view.id, viewCounts) : null;
          return (
            <TabsTrigger
              key={view.id}
              value={view.id}
              className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
            >
              <view.icon className={`h-4 w-4 ${view.iconClassName} mr-2`} />
              {view.label}
              {count !== null && (
                <span className="ml-1.5 text-[10px] rounded-full bg-background/50 px-1.5 py-0 text-muted-foreground tabular-nums">
                  {count.toLocaleString()}
                </span>
              )}
            </TabsTrigger>
          );
        })}
      </TabsList>
    </Tabs>
  )
}
