import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes, } from 'react'; import { cn } from '@/lib/utils/cn'; interface ResourceFieldProps { label: ReactNode; hint?: ReactNode; error?: string; className?: string; tooltip?: string; container?: 'label' | 'div'; children: ReactNode; } function FieldTooltip({ content }: { content: string }) { return ( ? {content} ); } export function ResourceField({ label, hint, error, className, tooltip, container = 'label', children, }: ResourceFieldProps) { const Container = container; return ( {label} {tooltip ? : null} {children} {error ? ( {error} ) : hint ? ( {hint} ) : null} ); } export function ResourceInput(props: InputHTMLAttributes) { return ( ); } export function ResourceTextarea( props: TextareaHTMLAttributes, ) { return (

);
}

export function ResourceSelect(props: SelectHTMLAttributes<HTMLSelectElement>) {
  return (
    <select
      {...props}
      className={cn(
        'w-full rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3 text-sm text-[var(--foreground-primary)] transition outline-none focus:border-[var(--border-strong)] focus:ring-2 focus:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-60',
        props.className,
      )}
    />
  );
}

function baseButtonClassName(className?: string) {
  return cn(
    'inline-flex items-center justify-center rounded-2xl px-4 py-3 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-60',
    className,
  );
}

export function PrimaryButton({
  className,
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      {...props}
      className={baseButtonClassName(
        cn(
          'bg-[var(--brand-primary)] text-[var(--foreground-inverse)] hover:opacity-90',
          className,
        ),
      )}
    />
  );
}

export function SecondaryButton({
  className,
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      {...props}
      className={baseButtonClassName(
        cn(
          'border border-[var(--border-default)] bg-[var(--control-background)] text-[var(--foreground-primary)] hover:bg-[var(--control-background-hover)]',
          className,
        ),
      )}
    />
  );
}

export function DangerButton({
  className,
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      {...props}
      className={baseButtonClassName(
        cn(
          'border border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)] hover:opacity-90',
          className,
        ),
      )}
    />
  );
}

interface ToggleFieldProps {
  label: string;
  description?: string;
  checked: boolean;
  disabled?: boolean;
  tooltip?: string;
  onChange: (checked: boolean) => void;
}

export function ToggleField({
  label,
  description,
  checked,
  disabled,
  tooltip,
  onChange,
}: ToggleFieldProps) {
  return (
    <label className="flex cursor-pointer items-start gap-3 self-start rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3">
      <input
        type="checkbox"
        checked={checked}
        disabled={disabled}
        onChange={(event) => onChange(event.target.checked)}
        className="mt-1 h-4 w-4 rounded border-[var(--border-default)] accent-[var(--brand-primary)]"
      />
      <span className="flex flex-col">
        <span className="flex items-center gap-2 text-sm font-medium text-[var(--foreground-primary)]">
          <span>{label}</span>
          {tooltip ? <FieldTooltip content={tooltip} /> : null}
        </span>
        {description ? (
          <span className="mt-1 block text-xs leading-5 text-[var(--foreground-secondary)]">
            {description}
          </span>
        ) : null}
      </span>
    </label>
  );
}

export function CodeBlock({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <pre
      className={cn(
        'overflow-x-auto rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 text-xs leading-6 text-[var(--foreground-primary)]',
        className,
      )}
    >
      {children}
    </pre>
  );
}