import * as React from 'react';
import InputError from '@/components/input-error';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';

/**
 * A native select, styled to match the shared Input component.
 *
 * The CRM forms submit through Inertia's Form component, which reads plain form
 * values, so a native select keeps submission and validation simple while the
 * Radix select in @/components/ui/select stays available for rich menus.
 */
function NativeSelect({ className, ...props }: React.ComponentProps<'select'>) {
    return (
        <select
            data-slot="native-select"
            className={cn(
                'border-input dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
                'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
                'disabled:cursor-not-allowed disabled:opacity-50',
                'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
                className,
            )}
            {...props}
        />
    );
}

/**
 * Label, control and inline error, so every field looks and behaves the same.
 */
function FormField({
    label,
    htmlFor,
    error,
    hint,
    required = false,
    className,
    children,
}: {
    label: string;
    htmlFor?: string;
    error?: string;
    hint?: string | null;
    required?: boolean;
    className?: string;
    children: React.ReactNode;
}) {
    return (
        <div className={cn('grid gap-2', className)}>
            <Label htmlFor={htmlFor}>
                {label}
                {required ? (
                    <span className="text-destructive" aria-hidden>
                        *
                    </span>
                ) : null}
            </Label>
            {children}
            {hint ? (
                <p className="text-muted-foreground text-xs">{hint}</p>
            ) : null}
            <InputError message={error} />
        </div>
    );
}

/**
 * A read-only key/value pair rendered as a form-like row.
 */
function StaticField({
    label,
    value,
    className,
}: {
    label: string;
    value: React.ReactNode;
    className?: string;
}) {
    return (
        <div className={cn('grid gap-2', className)}>
            <span className="text-sm font-medium">{label}</span>
            <div className="text-muted-foreground text-sm">
                {value ?? '—'}
            </div>
        </div>
    );
}

export { NativeSelect, FormField, StaticField };