import { splitProps, mergeProps, JSX } from 'solid-js';
import clsx from 'clsx';

export type PanelVariant = 'bordered' | 'borderless';
export type PanelSize = 'sm' | 'md' | 'lg';

export interface PanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
  variant?: PanelVariant;
  size?: PanelSize;
  accent?: string;
  glow?: boolean;
}

/**
 * Panel -- semitransparent card container with angular notched corners.
 *
 * Bordered variant uses full hh-panel pseudo-element border technique.
 * Borderless variant renders just the fill background without border pseudo-elements.
 * Glow is applied via filter: drop-shadow on the wrapper (works with clip-path).
 */
export function Panel(rawProps: PanelProps) {
  const merged = mergeProps(
    { variant: 'bordered' as PanelVariant, size: 'md' as PanelSize, glow: true },
    rawProps,
  );
  const [local, rest] = splitProps(merged, [
    'variant', 'size', 'accent', 'glow', 'class', 'children', 'style',
  ]);

  const sizeClass = () => `hh-panel--${local.size}`;

  const classes = () =>
    clsx(
      local.variant === 'bordered' ? 'hh-panel' : 'hh-panel--borderless',
      sizeClass(),
      !local.glow && 'hh-panel--no-glow',
      local.class,
    );

  const panelStyle = (): JSX.CSSProperties | undefined => {
    const base: Record<string, string> = {};
    if (local.accent) {
      base['--hh-comp-accent'] = local.accent;
      // Override the panel border color to the custom accent
      base['--hh-color-primary'] = local.accent;
    }
    if (typeof local.style === 'object' && local.style) {
      return { ...base, ...local.style } as JSX.CSSProperties;
    }
    if (Object.keys(base).length > 0) {
      return base as JSX.CSSProperties;
    }
    return local.style as JSX.CSSProperties | undefined;
  };

  return (
    <div class={classes()} style={panelStyle()} {...rest}>
      {local.children}
    </div>
  );
}