import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

type ControlButtonVariant = 'primary' | 'ghost' | 'secondary' | 'danger';

export type FinancialControlOption = {
  value: string;
  label: string;
  disabled?: boolean;
};

export type FinancialControlSection = {
  id: string;
  label: string;
  value: string;
  options: FinancialControlOption[];
  onChange: (value: string) => void;
};

export type FinancialControlAction = {
  id: string;
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: ControlButtonVariant;
};

type FinancialControlBarProps = {
  title?: string;
  subtitle?: string;
  sections: FinancialControlSection[];
  actions?: FinancialControlAction[];
  className?: string;
};

export function FinancialControlBar({
  title = 'Control Bar',
  subtitle,
  sections,
  actions,
  className
}: FinancialControlBarProps) {
  return (
    <section className={cn('rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-4 py-3', className)}>
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">{title}</h3>
          {subtitle ? (
            <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{subtitle}</p>
          ) : null}
        </div>

        {actions && actions.length > 0 ? (
          <div className="grid w-full grid-cols-1 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center sm:justify-end">
            {actions.map((action) => (
              <Button
                key={action.id}
                type="button"
                variant={action.variant ?? 'secondary'}
                disabled={action.disabled}
                className="px-2 py-1 text-xs sm:min-h-9"
                onClick={action.onClick}
              >
                {action.label}
              </Button>
            ))}
          </div>
        ) : null}
      </div>

      <div className="mt-3 grid grid-cols-1 gap-2">
          {sections.map((section) => (
            <div
              key={section.id}
              className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2"
            >
              <span className="mb-2 block text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{section.label}</span>
              <div className="flex flex-wrap items-center gap-1.5">
                {section.options.map((option) => (
                  <Button
                    key={`${section.id}-${option.value}`}
                    type="button"
                    variant={option.value === section.value ? 'primary' : 'ghost'}
                    disabled={option.disabled}
                    className="px-2 py-1 text-xs sm:min-h-9"
                    onClick={() => section.onChange(option.value)}
                  >
                    {option.label}
                  </Button>
                ))}
              </div>
            </div>
          ))}
      </div>
    </section>
  );
}