import * as React from 'react';
import { cn } from '../../shared/utils';

/**
 * Chronological event list component.
 *
 * @description
 * A vertical list of events connected by a left-side line. Ideal for activity
 * logs, audit trails, case histories, and status tracking.
 *
 * @ai-rules
 * 1. Compose each event with `TimelineItem > TimelineDot + TimelineContent`.
 * 2. Use `TimelineDot` `variant="outline"` for pending or future states.
 * 3. `TimelineTime` renders a `<time>` element — pass a pre-formatted display string.
 */
const Timeline = React.forwardRef<HTMLOListElement, React.HTMLAttributes<HTMLOListElement>>(
  ({ className, ...props }, ref) => (
    <ol ref={ref} className={cn('relative border-l border-border', className)} {...props} />
  )
);
Timeline.displayName = 'Timeline';

const TimelineItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(
  ({ className, ...props }, ref) => (
    <li ref={ref} className={cn('mb-10 ml-6', className)} {...props} />
  )
);
TimelineItem.displayName = 'TimelineItem';

const TimelineDot = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    variant?: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'destructive' | 'outline';
    icon?: React.ReactNode;
  }
>(({ className, variant = 'default', icon, children, ...props }, ref) => {
  const variantStyles = {
    default: 'bg-muted border-border',
    primary: 'bg-primary border-primary',
    success: 'bg-success border-success',
    info: 'bg-info border-info',
    warning: 'bg-warning border-warning',
    destructive: 'bg-destructive border-destructive',
    outline: 'bg-background border-border',
  };

  const iconColorStyles = {
    default: 'text-muted-foreground',
    primary: 'text-primary-foreground',
    success: 'text-success-foreground',
    info: 'text-info-foreground',
    warning: 'text-warning-foreground',
    destructive: 'text-destructive-foreground',
    outline: 'text-foreground',
  };

  // Se tem ícone, usar tamanho maior
  if (icon || children) {
    return (
      <div
        ref={ref}
        className={cn(
          'absolute -left-[17px] mt-0.5 h-8 w-8 rounded-full border-2 flex items-center justify-center',
          variantStyles[variant],
          className
        )}
        {...props}
      >
        <span className={cn('h-4 w-4', iconColorStyles[variant])}>{icon || children}</span>
      </div>
    );
  }

  return (
    <div
      ref={ref}
      className={cn(
        'absolute -left-[9px] mt-1.5 h-4 w-4 rounded-full border-2',
        variantStyles[variant],
        className
      )}
      {...props}
    />
  );
});
TimelineDot.displayName = 'TimelineDot';

const TimelineContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn('', className)} {...props} />
);
TimelineContent.displayName = 'TimelineContent';

const TimelineHeading = React.forwardRef<
  HTMLHeadingElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h3 ref={ref} className={cn('mb-1 text-foreground', className)} {...props} />
));
TimelineHeading.displayName = 'TimelineHeading';

const TimelineTime = React.forwardRef<HTMLTimeElement, React.TimeHTMLAttributes<HTMLTimeElement>>(
  ({ className, ...props }, ref) => (
    <time ref={ref} className={cn('mb-2 block text-muted-foreground', className)} {...props} />
  )
);
TimelineTime.displayName = 'TimelineTime';

const TimelineDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p ref={ref} className={cn('text-muted-foreground', className)} {...props} />
));
TimelineDescription.displayName = 'TimelineDescription';

export {
  Timeline,
  TimelineItem,
  TimelineDot,
  TimelineContent,
  TimelineHeading,
  TimelineTime,
  TimelineDescription,
};