import { forwardRef, type ButtonHTMLAttributes, type InputHTMLAttributes, type LabelHTMLAttributes, type TextareaHTMLAttributes, type HTMLAttributes, type SelectHTMLAttributes } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '../../lib/cn';

const buttonStyles = cva(
  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#00FF6A]/40 disabled:opacity-50 disabled:pointer-events-none whitespace-nowrap',
  {
    variants: {
      variant: {
        primary: 'bg-[#00FF6A] text-[#0A0A0A] hover:bg-[#00CC55]',
        secondary: 'bg-[#1A1A1A] text-[#F5F5F5] border border-[#333] hover:bg-[#222] hover:border-[#444]',
        ghost: 'text-[#999] hover:text-[#F5F5F5] hover:bg-[#1A1A1A]',
        danger: 'bg-[#FF3B3B] text-white hover:bg-[#D32F2F]',
        outline: 'border border-[#333] bg-transparent text-[#F5F5F5] hover:bg-[#1A1A1A]',
      },
      size: {
        sm: 'h-8 px-3 text-xs',
        md: 'h-9 px-4',
        lg: 'h-11 px-6',
        icon: 'h-9 w-9',
      },
    },
    defaultVariants: { variant: 'primary', size: 'md' },
  },
);

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonStyles> {}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => (
    <button ref={ref} className={cn(buttonStyles({ variant, size }), className)} {...props} />
  ),
);
Button.displayName = 'Button';

export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
  ({ className, ...props }, ref) => (
    <input
      ref={ref}
      className={cn(
        'flex h-9 w-full rounded-md border border-[#333] bg-[#0A0A0A] px-3 py-1 text-sm text-[#F5F5F5] placeholder:text-[#666] focus:outline-none focus:border-[#00FF6A] transition-colors disabled:opacity-50',
        className,
      )}
      {...props}
    />
  ),
);
Input.displayName = 'Input';

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(
  ({ className, ...props }, ref) => (
    <textarea
      ref={ref}
      className={cn(
        'flex min-h-[80px] w-full rounded-md border border-[#333] bg-[#0A0A0A] px-3 py-2 text-sm text-[#F5F5F5] placeholder:text-[#666] focus:outline-none focus:border-[#00FF6A] transition-colors disabled:opacity-50',
        className,
      )}
      {...props}
    />
  ),
);
Textarea.displayName = 'Textarea';

export const Label = forwardRef<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>>(
  ({ className, ...props }, ref) => (
    <label ref={ref} className={cn('text-xs font-medium text-[#999]', className)} {...props} />
  ),
);
Label.displayName = 'Label';

export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn('bg-[#141414] border border-[#333] rounded-xl', className)}
      {...props}
    />
  );
}

export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn('px-6 py-4 border-b border-[#333]', className)} {...props} />;
}

export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
  return <h3 className={cn('text-base font-semibold text-[#F5F5F5]', className)} {...props} />;
}

export function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
  return <p className={cn('text-xs text-[#999] mt-1', className)} {...props} />;
}

export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn('px-6 py-4', className)} {...props} />;
}

export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn('px-6 py-3 border-t border-[#333] flex items-center', className)} {...props} />;
}

const badgeStyles = cva(
  'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
  {
    variants: {
      variant: {
        default: 'bg-[#1A1A1A] text-[#F5F5F5] border border-[#333]',
        success: 'bg-[#00FF6A]/10 text-[#00FF6A] border border-[#00FF6A]/20',
        warn: 'bg-[#FFA500]/10 text-[#FFA500] border border-[#FFA500]/20',
        danger: 'bg-[#FF3B3B]/10 text-[#FF3B3B] border border-[#FF3B3B]/20',
        info: 'bg-[#3B82F6]/10 text-[#3B82F6] border border-[#3B82F6]/20',
        muted: 'bg-[#1A1A1A] text-[#666] border border-[#222]',
      },
    },
    defaultVariants: { variant: 'default' },
  },
);

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeStyles> {}

export function Badge({ className, variant, ...props }: BadgeProps) {
  return <span className={cn(badgeStyles({ variant }), className)} {...props} />;
}

export const Select = forwardRef<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>(
  ({ className, children, ...props }, ref) => (
    <select
      ref={ref}
      className={cn(
        'flex h-9 w-full rounded-md border border-[#333] bg-[#0A0A0A] px-3 py-1 text-sm text-[#F5F5F5] focus:outline-none focus:border-[#00FF6A] transition-colors disabled:opacity-50',
        className,
      )}
      {...props}
    >
      {children}
    </select>
  ),
);
Select.displayName = 'Select';

export function Separator({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div role="separator" className={cn('h-px w-full bg-[#333]', className)} {...props} />;
}

export function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn('animate-pulse rounded-md bg-[#1A1A1A]', className)} {...props} />;
}

export function EmptyState({ icon, title, description, action }: { icon?: React.ReactNode; title: string; description?: string; action?: React.ReactNode }) {
  return (
    <div className="flex flex-col items-center justify-center p-10 text-center">
      {icon && <div className="mb-3 text-[#666]">{icon}</div>}
      <h3 className="text-sm font-semibold text-[#F5F5F5] mb-1">{title}</h3>
      {description && <p className="text-xs text-[#999] mb-4 max-w-sm">{description}</p>}
      {action}
    </div>
  );
}