import React, { ReactNode, CSSProperties } from 'react';
import { Spacing } from './Box';

export interface PanelProps {
  children: ReactNode;
  variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | 'precision' | 'bordered' | 'elevated';
  padding?: Spacing | number;
  onClick?: () => void;
  style?: CSSProperties;
  title?: string | ReactNode;
  actions?: ReactNode;
  description?: string;
  footer?: ReactNode;
  border?: boolean;
  rounded?: string;
  className?: string;
  borderColor?: string;
  bg?: string;
}

export function Panel({ 
  children, 
  variant = 'default', 
  padding = 'md',
  onClick,
  style,
  title,
  actions,
  description,
  footer,
  border,
  rounded,
  className
}: PanelProps) {
  const variantClasses = {
    default: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-sm',
    muted: 'bg-[var(--ui-color-bg-surface-muted)] border border-[var(--ui-color-border-muted)]',
    outline: 'bg-transparent border border-[var(--ui-color-border-default)]',
    glass: 'bg-white/[0.03] backdrop-blur-md border border-white/[0.05]',
    dark: 'bg-[var(--ui-color-bg-base)] border border-[var(--ui-color-border-default)]',
    precision: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.02)]',
    bordered: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)]',
    elevated: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-md',
  };

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

  const getPaddingClass = (p: any) => {
    if (typeof p === 'string') return `p-${p}`;
    return '';
  };

  const interactiveClasses = onClick 
    ? 'cursor-pointer hover:border-[var(--ui-color-border-bright)] transition-all duration-200 ease-in-out active:scale-[0.99]' 
    : '';

  return (
    <div 
      className={`${variantClasses[variant]} ${getPaddingClass(padding)} ${interactiveClasses} ${rounded ? `rounded-${rounded}` : 'rounded-md'} ${border ? 'border' : ''} ${className || ''}`}
      onClick={onClick}
      style={{
        ...style,
        ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {})
      }}
    >
      {(title || actions) && (
        <div className="flex items-center justify-between mb-6 border-b border-[var(--ui-color-border-muted)] pb-4">
          {title && (
            <div className="flex flex-col gap-1">
              <div className="flex items-center gap-2">
                <div className="w-1 h-4 bg-[var(--ui-color-intent-primary)]" />
                <h3 className="text-xs font-bold uppercase tracking-widest text-[var(--ui-color-text-high)]">
                  {title}
                </h3>
              </div>
              {description && (
                <p className="text-[10px] text-[var(--ui-color-text-low)] uppercase mono ml-3">
                  {description}
                </p>
              )}
            </div>
          )}
          {actions && <div>{actions}</div>}
        </div>
      )}
      {children}
      {footer && (
        <div className="mt-6 pt-4 border-t border-[var(--ui-color-border-muted)]">
          {footer}
        </div>
      )}
    </div>
  );
}