import { ReactNode } from 'react';
import { Heading } from './Heading';
import { Text } from './Text';

export interface PanelProps {
  title?: string;
  description?: string;
  children: ReactNode;
  footer?: ReactNode;
  variant?: 'default' | 'muted' | 'ghost' | 'dark' | any;
  padding?: 'none' | 'sm' | 'md' | 'lg' | number | any;
  actions?: ReactNode;
  className?: string;
  style?: React.CSSProperties;
  border?: boolean;
  rounded?: string;
  borderColor?: string;
  bg?: string;
}

/**
 * Panel - Redesigned for "Modern Precision" theme.
 * Includes compatibility props to prevent app-wide breakage.
 */
export const Panel = ({ 
  title, 
  description, 
  children, 
  footer,
  variant = 'default',
  padding = 'md',
  actions,
  className,
  style,
  border,
  rounded,
  borderColor,
  bg,
}: PanelProps) => {
  const variantClasses = {
    default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)]',
    muted: 'bg-[var(--ui-color-bg-surface-muted)] border-[var(--ui-color-border-muted)]',
    ghost: 'bg-transparent border-transparent',
    dark: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]',
  };

  const paddingClasses = {
    none: 'p-0',
    sm: 'p-2',
    md: 'p-4',
    lg: 'p-8',
  };

  const getPaddingClass = (pad: any) => {
    if (typeof pad === 'string') return paddingClasses[pad as keyof typeof paddingClasses] || paddingClasses.md;
    return ''; // Handled in style
  };

  const combinedStyle: React.CSSProperties = {
    ...style,
    ...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
    ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
    ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
    ...(border === false ? { border: 'none' } : {}),
  };

  return (
    <div className={`border ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default} ${getPaddingClass(padding)} transition-all duration-200 ${className || ''}`} style={combinedStyle}>
      {(title || description || actions) && (
        <div className={`border-b border-[var(--ui-color-border-muted)] flex items-center justify-between ${getPaddingClass(padding)}`}>
          <div>
            {title && <Heading level={4} weight="semibold" uppercase>{title}</Heading>}
            {description && <Text size="xs" variant="low">{description}</Text>}
          </div>
          {actions && (
            <div className="flex items-center gap-2">
              {actions}
            </div>
          )}
        </div>
      )}
      
      <div className={typeof padding === 'number' ? '' : getPaddingClass(padding)}>
        {children}
      </div>
      
      {footer && (
        <div className={`border-t border-[var(--ui-color-border-muted)] bg-white/[0.02] ${getPaddingClass(padding)}`}>
          {footer}
        </div>
      )}
    </div>
  );
};