import React from 'react';

type IconTone = 'blue' | 'green' | 'yellow' | 'black' | 'neutral';

const ICON_TONE: Record<IconTone, string> = {
  blue: 'bg-brutal-blue text-white',
  green: 'bg-brutal-green text-brutal-black',
  yellow: 'bg-brutal-yellow text-brutal-black',
  black: 'bg-brutal-black text-white',
  neutral: 'bg-neutral-400 text-white',
};

interface SectionCardHeaderProps {
  /** Heroicon-style svg path(s) rendered inside the icon tile. */
  icon?: React.ReactNode;
  iconTone?: IconTone;
  title: string;
  description?: React.ReactNode;
  /** Controls aligned to the right of the header (badge, toggle, button…). */
  actions?: React.ReactNode;
}

/**
 * Standard header for a section card: optional icon tile + title + description,
 * with an optional right-aligned actions slot. Replaces the hand-rolled
 * `flex items-start gap-4` header blocks that drifted across tabs.
 */
export function SectionCardHeader({
  icon,
  iconTone = 'blue',
  title,
  description,
  actions,
}: SectionCardHeaderProps): React.ReactElement {
  return (
    <div className="flex items-start justify-between gap-4 mb-6">
      <div className="flex items-start gap-4 min-w-0">
        {icon && (
          <div
            className={`w-12 h-12 border-2 border-brutal-black flex items-center justify-center shrink-0 shadow-brutal-sm ${ICON_TONE[iconTone]}`}
          >
            {icon}
          </div>
        )}
        <div className="min-w-0">
          <h3 className="text-xl font-bold uppercase">{title}</h3>
          {description && (
            <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">{description}</p>
          )}
        </div>
      </div>
      {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
    </div>
  );
}

interface GridCardProps {
  /** Main heading shown in the header strip. */
  title: React.ReactNode;
  /** Optional secondary line under the title. */
  subtitle?: React.ReactNode;
  /** When provided, shows a status dot (filled green when true, hollow when false). */
  active?: boolean;
  /** Custom controls aligned to the right of the header strip (overrides the status dot). */
  headerRight?: React.ReactNode;
  className?: string;
  children: React.ReactNode;
}

/**
 * Heavier grid card with a colored header strip and bold drop shadow. Used by
 * the equally-sized cards laid out in responsive grids (model roles, social
 * platforms) where each tile reads as a discrete unit.
 */
export function GridCard({
  title,
  subtitle,
  active,
  headerRight,
  className = '',
  children,
}: GridCardProps): React.ReactElement {
  return (
    <div
      className={`bg-white dark:bg-zinc-800 dark:text-white border-3 border-brutal-black shadow-brutal-xl flex flex-col ${className}`}
    >
      <div className="p-4 bg-neutral-50 dark:bg-zinc-900 border-b-3 border-brutal-black flex items-center justify-between gap-3">
        <div className="min-w-0">
          <div className="font-black uppercase text-lg tracking-wide truncate">{title}</div>
          {subtitle && (
            <div className="text-xs text-neutral-500 dark:text-neutral-400 normal-case font-normal mt-0.5">
              {subtitle}
            </div>
          )}
        </div>
        {headerRight ?? (
          active !== undefined && (
            <div
              className={`w-4 h-4 rounded-full border-2 border-brutal-black flex-shrink-0 ${active ? 'bg-brutal-green' : 'bg-transparent'}`}
            />
          )
        )}
      </div>
      <div className="flex-1">{children}</div>
    </div>
  );
}

interface SettingsCardProps {
  className?: string;
  children: React.ReactNode;
}

/**
 * Standard full-width section card. One border/shadow/padding convention shared
 * by every settings tab (matches the Usage/Appearance cards).
 */
export function SettingsCard({ className = '', children }: SettingsCardProps): React.ReactElement {
  return (
    <div
      className={`border-3 border-brutal-black bg-white dark:bg-zinc-800 dark:text-white shadow-brutal p-6 ${className}`}
    >
      {children}
    </div>
  );
}

interface SettingsListActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  tone?: 'blue' | 'red' | 'neutral';
  active?: boolean;
}

/**
 * Standard soft action button for list items (edit, remove, test, etc).
 */
export function SettingsListAction({ tone = 'neutral', active, className = '', children, ...props }: SettingsListActionProps): React.ReactElement {
  let colorClasses = '';
  if (active) {
    colorClasses = 'bg-brutal-black text-white border-brutal-black dark:bg-white dark:text-black dark:border-white';
  } else if (tone === 'blue') {
    colorClasses = 'border-brutal-black/20 dark:border-white/10 bg-transparent text-neutral-500 dark:text-neutral-400 hover:border-brutal-blue hover:text-brutal-blue dark:hover:border-blue-400 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20';
  } else if (tone === 'red') {
    colorClasses = 'border-brutal-black/20 dark:border-white/10 bg-transparent text-neutral-500 dark:text-neutral-400 hover:border-brutal-red hover:text-brutal-red dark:hover:border-red-400 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20';
  } else {
    colorClasses = 'border-brutal-black/20 dark:border-white/10 bg-transparent text-neutral-500 dark:text-neutral-400 hover:border-brutal-black hover:text-brutal-black dark:hover:border-white dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-zinc-800';
  }

  return (
    <button
      className={`px-3 py-1 border text-[11px] font-bold uppercase transition-colors disabled:opacity-50 rounded-sm ${colorClasses} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
}

interface SettingsListItemProps {
  children: React.ReactNode;
  className?: string;
}

/**
 * Common wrapper for list items in settings (MCP servers, Cron Jobs).
 * Applies the standard heavy border, drop shadow, and subtle textured background.
 */
export function SettingsListItem({ children, className = '' }: SettingsListItemProps): React.ReactElement {
  return (
    <div className={`group relative overflow-hidden bg-neutral-50 dark:bg-zinc-900 border-[3px] border-brutal-black shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] ${className}`}>
      <div className="absolute inset-0 opacity-[0.03] bg-[radial-gradient(#000_2px,transparent_2px)] [background-size:16px_16px] pointer-events-none" />
      <div className="relative z-10 w-full h-full flex flex-col">
        {children}
      </div>
    </div>
  );
}
