import { ChevronDown } from 'lucide-react';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

interface DetailedViewCollapsibleProps {
  isCollapsed: boolean;
  onToggle: () => void;
  children: React.ReactNode;
  fieldCount?: number;
  className?: string;
  staggerIndex?: number;
}

/**
 * Collapsible wrapper for detailed field-by-field view sections
 * Provides expand/collapse functionality with visual indicators
 */
export function DetailedViewCollapsible({
  isCollapsed,
  onToggle,
  children,
  fieldCount,
  className,
  staggerIndex = 0
}: DetailedViewCollapsibleProps) {
  // Calculate stagger delay: 50ms per item, max 300ms
  const staggerDelay = Math.min(staggerIndex * 50, 300);
  return (
    <Collapsible open={!isCollapsed} onOpenChange={() => onToggle()}>
      <div className={cn("mt-6 pt-6 border-t", className)}>
        <CollapsibleTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className="w-full flex items-center justify-between hover:bg-muted/50 p-2 h-auto transition-colors"
          >
            <div className="flex items-center gap-2">
              <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                All Fields (Detailed View)
              </span>
              {fieldCount !== undefined && fieldCount > 0 && (
                <Badge 
                  variant="secondary" 
                  className="h-5 px-1.5 text-xs font-normal transition-transform duration-200 hover:scale-105"
                >
                  {fieldCount}
                </Badge>
              )}
            </div>
            <div className="flex items-center gap-2">
              <span className="text-xs text-muted-foreground normal-case font-normal">
                {isCollapsed ? 'Show' : 'Hide'}
              </span>
              <ChevronDown 
                className={cn(
                  "h-4 w-4 text-muted-foreground transition-all duration-300 ease-out",
                  !isCollapsed && "rotate-180"
                )}
              />
            </div>
          </Button>
        </CollapsibleTrigger>
        
        <CollapsibleContent 
          className="mt-3"
          style={{
            animationDelay: `${staggerDelay}ms`,
            transitionDelay: `${staggerDelay}ms`
          }}
        >
          {children}
        </CollapsibleContent>
      </div>
    </Collapsible>
  );
}