'use client';

import type { ReactNode } from 'react';
import { X } from 'lucide-react';

import { cn } from '@djangocfg/ui-core/lib';

/** One action button in the banner. */
export interface ComposerBannerAction {
  /** Stable key. */
  id: string;
  label: ReactNode;
  onClick: () => void;
  /** `primary` — filled accent; `outline` — bordered neutral. Default `outline`. */
  variant?: 'primary' | 'outline';
}

export interface ComposerBannerProps {
  /** Leading icon (Lucide element). */
  icon?: ReactNode;
  /** Bold headline. */
  title: ReactNode;
  /** Secondary line under the title. */
  description?: ReactNode;
  /** Up to two trailing action buttons. */
  actions?: ComposerBannerAction[];
  /** Accent tint: `info` neutral, `warning` destructive, `upgrade` primary. */
  variant?: 'info' | 'warning' | 'upgrade';
  /** Show a dismiss `×` in the top-right corner. */
  onDismiss?: () => void;
  className?: string;
}

/** Icon-tint per variant — keeps the surface neutral, accents the icon only. */
const ICON_TINT: Record<NonNullable<ComposerBannerProps['variant']>, string> = {
  info: 'text-muted-foreground',
  warning: 'text-destructive',
  upgrade: 'text-primary',
};

const ACTION_VARIANT: Record<
  NonNullable<ComposerBannerAction['variant']>,
  string
> = {
  primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
  outline:
    'border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
};

/**
 * A standalone notice bubble that sits above the composer — its own
 * rounded surface, separated by a gap (drop it into
 * `composerSlots.blockStart`). Mirrors ChatGPT's "free limit reached"
 * banner: leading icon, title + description, trailing action buttons.
 */
export function ComposerBanner({
  icon,
  title,
  description,
  actions,
  variant = 'info',
  onDismiss,
  className,
}: ComposerBannerProps) {
  return (
    <div
      role="status"
      className={cn(
        'flex items-start gap-3 rounded-2xl border border-border bg-muted/60 px-3.5 py-3',
        'text-sm text-foreground',
        className,
      )}
    >
      {icon ? (
        <span
          className={cn('mt-0.5 flex shrink-0 [&_svg]:size-5', ICON_TINT[variant])}
          aria-hidden
        >
          {icon}
        </span>
      ) : null}

      <div className="min-w-0 flex-1">
        <p className="font-semibold leading-snug">{title}</p>
        {description ? (
          <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
        ) : null}
      </div>

      {actions && actions.length > 0 ? (
        <div className="flex shrink-0 items-center gap-1.5">
          {actions.map((action) => (
            <button
              key={action.id}
              type="button"
              onClick={action.onClick}
              className={cn(
                'inline-flex h-8 cursor-pointer items-center justify-center rounded-lg px-3',
                'text-xs font-medium transition-colors',
                'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
                ACTION_VARIANT[action.variant ?? 'outline'],
              )}
            >
              {action.label}
            </button>
          ))}
        </div>
      ) : null}

      {onDismiss ? (
        <button
          type="button"
          onClick={onDismiss}
          aria-label="Dismiss"
          title="Dismiss"
          className={cn(
            'inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg',
            'text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',
            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
            '[&_svg]:size-4',
          )}
        >
          <X aria-hidden />
        </button>
      ) : null}
    </div>
  );
}