import type { JSX } from 'preact';
import { cn } from './cn';

export type ModuleCardProps = JSX.HTMLAttributes<HTMLDivElement>;

export function ModuleCard({ className, ...props }: ModuleCardProps) {
  return (
    <div
      className={cn(
        'ask-module-card ask-card ask-flex ask-min-h-0 ask-min-w-0 ask-flex-col ask-overflow-hidden ask-rounded-[22px] ask-border ask-border-borderSubtle ask-bg-surfaceAlt ask-shadow-sm',
        className,
      )}
      {...props}
    />
  );
}

export type ModuleHeaderProps = JSX.HTMLAttributes<HTMLDivElement> & {
  compact?: boolean;
};

export function ModuleHeader({ className, compact = false, ...props }: ModuleHeaderProps) {
  return (
    <div
      className={cn(
        'ask-module-header ask-px-4',
        compact ? 'ask-py-3' : 'ask-pt-4 ask-pb-3',
        className,
      )}
      {...props}
    />
  );
}

export function ModuleTitle({ className, ...props }: JSX.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        'ask-module-title ask-text-[13px] ask-font-semibold ask-leading-5 ask-tracking-[-0.01em] ask-text-textMain',
        className,
      )}
      {...props}
    />
  );
}

export function ModuleDescription({ className, ...props }: JSX.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        'ask-module-description ask-mt-1 ask-text-[11px] ask-leading-5 ask-text-textMuted',
        className,
      )}
      {...props}
    />
  );
}

export type ModuleContentProps = JSX.HTMLAttributes<HTMLDivElement> & {
  dense?: boolean;
};

export function ModuleContent({ className, dense = false, ...props }: ModuleContentProps) {
  return (
    <div
      className={cn(
        'ask-module-content ask-min-h-0 ask-min-w-0 ask-flex-1',
        dense ? 'ask-p-3' : 'ask-p-4',
        className,
      )}
      {...props}
    />
  );
}

export function ModuleSection({ className, ...props }: JSX.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        'ask-module-section ask-rounded-2xl ask-border ask-border-borderSubtle ask-bg-surface ask-p-3',
        className,
      )}
      {...props}
    />
  );
}

export function ModuleActions({ className, ...props }: JSX.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        'ask-module-actions ask-flex ask-flex-wrap ask-items-center ask-gap-2',
        className,
      )}
      {...props}
    />
  );
}

export type ModuleNoticeVariant = 'neutral' | 'success' | 'danger' | 'warning';

const NOTICE_VARIANTS: Record<ModuleNoticeVariant, string> = {
  neutral: 'ask-border-borderSubtle ask-bg-surfaceAlt ask-text-textMuted',
  success: 'ask-border-success/20 ask-bg-success/5 ask-text-text',
  danger: 'ask-border-danger/20 ask-bg-danger/5 ask-text-danger',
  warning: 'ask-border-warning/25 ask-bg-warning/10 ask-text-text',
};

export type ModuleNoticeProps = JSX.HTMLAttributes<HTMLDivElement> & {
  variant?: ModuleNoticeVariant;
};

export function ModuleNotice({ className, variant = 'neutral', ...props }: ModuleNoticeProps) {
  return (
    <div
      className={cn(
        'ask-module-notice ask-rounded-2xl ask-border ask-p-3 ask-text-[12px] ask-leading-5',
        NOTICE_VARIANTS[variant],
        className,
      )}
      {...props}
    />
  );
}
