import { ChevronDown, ChevronUp } from 'lucide-react';

import { RoutingBadge } from '@/components/chat/routing-badge';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { useToggle } from '@/hooks/common/use-toggle';
import { cn } from '@/lib/utils';
import type { RoutingTransparencyProps } from '@/types';
import { getConfidenceClass, getConfidenceLabel } from '@/utilities';

export function RoutingTransparency({ decision }: RoutingTransparencyProps) {
  const { isOpen: isExpanded, toggle: toggleExpanded } = useToggle(false);

  return (
    <div className="mt-1 rounded-md border bg-card p-2 text-xs">
      <div className="flex flex-wrap items-center gap-1.5">
        <Badge variant="outline">{decision.selectedProvider}</Badge>
        <Badge variant="outline">{decision.selectedModel}</Badge>
        <RoutingBadge mode={decision.routingMode} />
        <span className={cn('font-medium', getConfidenceClass(decision.confidence))}>
          {getConfidenceLabel(decision.confidence)}
          {decision.confidence !== null ? ` (${Math.round(decision.confidence * 100)}%)` : ''}
        </span>
        {decision.reasonTags.map((tag) => (
          <Badge key={tag} variant="secondary" className="text-xs">
            {tag}
          </Badge>
        ))}
        <Button
          variant="ghost"
          size="sm"
          className="ms-auto h-6 px-1"
          onClick={toggleExpanded}
        >
          {isExpanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
        </Button>
      </div>

      {isExpanded ? (
        <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 border-t pt-2 text-xs">
          <div>
            <span className="text-muted-foreground">Privacy class: </span>
            <span>{decision.privacyClass ?? 'N/A'}</span>
          </div>
          <div>
            <span className="text-muted-foreground">Cost class: </span>
            <span>{decision.costClass ?? 'N/A'}</span>
          </div>
          <div>
            <span className="text-muted-foreground">Fallback provider: </span>
            <span>{decision.fallbackProvider ?? 'None'}</span>
          </div>
          <div>
            <span className="text-muted-foreground">Fallback model: </span>
            <span>{decision.fallbackModel ?? 'None'}</span>
          </div>
          <div className="col-span-2">
            <span className="text-muted-foreground">Decision ID: </span>
            <span className="font-mono">{decision.id}</span>
          </div>
        </div>
      ) : null}
    </div>
  );
}
