"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Info, BarChart3, List } from "lucide-react";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

interface EvaluationViewToggleProps {
  value: "detailed" | "aggregated";
  onValueChange: (value: "detailed" | "aggregated") => void;
  detailedCount?: number;
  aggregatedCount?: number;
}

export function EvaluationViewToggle({
  value,
  onValueChange,
  detailedCount,
  aggregatedCount,
}: EvaluationViewToggleProps) {
  return (
    <div className="flex items-center gap-2">
      <ToggleGroup
        type="single"
        value={value}
        onValueChange={(newValue) => {
          if (newValue) onValueChange(newValue as "detailed" | "aggregated");
        }}
        className="bg-muted p-1 rounded-lg"
      >
        <ToggleGroupItem
          value="detailed"
          aria-label="상세 뷰"
          className="flex items-center gap-2 data-[state=on]:bg-background"
        >
          <List className="h-4 w-4" />
          <span>상세 뷰</span>
          {detailedCount !== undefined && (
            <Badge variant="secondary" className="ml-1">
              {detailedCount}
            </Badge>
          )}
        </ToggleGroupItem>
        
        <ToggleGroupItem
          value="aggregated"
          aria-label="집계 뷰"
          className="flex items-center gap-2 data-[state=on]:bg-background"
        >
          <BarChart3 className="h-4 w-4" />
          <span>집계 뷰</span>
          {aggregatedCount !== undefined && (
            <Badge variant="secondary" className="ml-1">
              {aggregatedCount}
            </Badge>
          )}
        </ToggleGroupItem>
      </ToggleGroup>

      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <Info className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent side="bottom" className="max-w-sm">
            <div className="space-y-2 text-sm">
              <div>
                <strong>상세 뷰:</strong> 모든 평가 기록을 개별적으로 표시
              </div>
              <div>
                <strong>집계 뷰:</strong> 동일 벤더의 여러 division 평가를 평균으로 통합하여 표시
              </div>
            </div>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  );
}