import React, { useState } from 'react';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import InputError from '@/components/input-error';
import FileSingle from '@/components/file-single';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Combobox } from './ui/combobox';
import { DateRangePickerRAC } from './date-range-picker-rac';
import SocialMediaField from '@/components/form/social-media-field';
import PhoneInputField from '@/components/form/phone-input-field';


// import { Combobox } from '@/components/ui/combobox';

const FieldLabel = ({ htmlFor, required, children }: { htmlFor: string; required?: boolean; children: React.ReactNode }) => (
    <Label htmlFor={htmlFor}>
        {children} {required && <span className="text-red-500">*</span>}
    </Label>
);

interface TextInputFieldProps {
    id: string;
    label: string;
    value: string | number;
    onChange: (v: string) => void;
    required?: boolean;
    placeholder?: string;
    maxLength?: number;
    error?: string;
    showCounter?: boolean;
    type?: string;
    min?: number;
    max?: number; // <-- agregado
}
const TextInputField = ({
    id,
    label,
    value,
    onChange,
    required,
    placeholder,
    maxLength,
    error,
    showCounter,
    type = 'text',
    min,
    max, // <-- agregado
}: TextInputFieldProps) => (
    <div className="grid gap-2">
        <FieldLabel htmlFor={id} required={required}>{label}</FieldLabel>
        <Input
            id={id}
            name={id}
            value={typeof value === 'number' ? String(value) : value}
            onChange={(e) => onChange(e.target.value)}
            placeholder={placeholder}
            maxLength={maxLength}
            required={required}
            type={type}
            min={min}
            max={max} // <-- agregado
        />
        {showCounter && maxLength && (
            <div className="text-right text-xs text-muted-foreground">
                {String(value).length}/{maxLength}
            </div>
        )}
        <InputError message={error} />
    </div>
);

interface TextAreaFieldProps {
    id: string;
    label: string;
    value: string;
    onChange: (v: string) => void;
    placeholder?: string;
    maxLength?: number;
    rows?: number;
    error?: string;
    showCounter?: boolean;
}
const TextAreaField = ({
    id,
    label,
    value,
    onChange,
    placeholder,
    maxLength,
    rows = 3,
    error,
    showCounter,
}: TextAreaFieldProps) => (
    <div className="grid gap-2">
        <FieldLabel htmlFor={id}>{label}</FieldLabel>
        <Textarea
            id={id}
            name={id}
            value={value}
            onChange={(e) => onChange(e.target.value)}
            placeholder={placeholder}
            maxLength={maxLength}
            rows={rows}
        />
        {showCounter && maxLength && (
            <div className="text-right text-xs text-muted-foreground">
                {value.length}/{maxLength}
            </div>
        )}
        <InputError message={error} />
    </div>
);

interface FileUploadFieldProps {
    id: string;
    label: string;
    file: File | null;
    accept: string;
    onChange: (file: File | null) => void;
    error?: string;
    maxSizeMB?: number; // agregado
    sizeErrorMessage?: string; // agregado
    maxSizeLabel?: string; // NUEVO
}
const FileUploadField = ({ id, label, file, accept, onChange, error, maxSizeMB, sizeErrorMessage, maxSizeLabel }: FileUploadFieldProps) => {
    const [localError, setLocalError] = useState<string | undefined>(undefined);

    const handleChange = (f: File | null) => {
        if (f && maxSizeMB && f.size > maxSizeMB * 1024 * 1024) {
            setLocalError(sizeErrorMessage || `El archivo supera ${maxSizeMB}MB.`);
            onChange(null);
        } else {
            setLocalError(undefined);
            onChange(f);
        }
    };

    return (
        <div className="grid gap-3">
            <FieldLabel htmlFor={id}>{label}</FieldLabel>
            <FileSingle
                accept={accept}
                label={`Selecciona ${label.toLowerCase()}`}
                file={file}
                onChange={handleChange}
                maxSizeMB={maxSizeMB} // <- PROPAGADO (antes faltaba, por eso siempre 5MB)
            />
            {maxSizeMB && (
                <div className="text-xs text-muted-foreground">
                    {(maxSizeLabel ?? 'Tamaño máximo')}: {maxSizeMB}MB
                </div>
            )}
            {/* Si no quieres duplicar el texto (FileSingle ya lo muestra), elimina el bloque anterior */}
            {localError && <div className="text-xs text-red-500">{localError}</div>}
            <InputError message={error} />
        </div>
    );
};

interface SelectFieldOption {
    value: string;
    label: string;
}

interface SelectFieldProps {
    id: string;
    label: string;
    value: string;
    onChange: (v: string) => void;
    options: SelectFieldOption[];
    placeholder?: string;
    required?: boolean;
    showError?: boolean;
    error?: string;
}

const SelectField = ({
    id,
    label,
    value,
    onChange,
    options,
    placeholder = 'Selecciona una opción',
    required = false,
    showError,
    error,
}: SelectFieldProps) => (
    <div className="grid gap-2">
        <FieldLabel htmlFor={id} required={required}>{label}</FieldLabel>
        <Select value={value} onValueChange={onChange}>
            <SelectTrigger id={id} className="w-full">
                <SelectValue placeholder={placeholder} />
            </SelectTrigger>
            <SelectContent>
                {options.filter(o => o.value !== '').map(o => (
                    <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
                ))}
            </SelectContent>
        </Select>
        {showError && required && value === '' && (
            <div className="text-xs text-red-500">Debes seleccionar una opción.</div>
        )}
        {error && <div className="text-xs text-red-500">{error}</div>}
    </div>
);

export interface CheckboxFieldProps {
    id: string;
    label: string;
    checked: boolean;
    onChange: (checked: boolean) => void;
    error?: string;
    disabled?: boolean;
}

function CheckboxField({ id, label, checked, onChange, error, disabled }: CheckboxFieldProps) {
    return (
        <div className="flex flex-col gap-1">
            <label htmlFor={id} className="flex items-center gap-2 cursor-pointer">
                <input
                    id={id}
                    type="checkbox"
                    checked={checked}
                    onChange={e => onChange(e.target.checked)}
                    disabled={disabled}
                    className="form-checkbox"
                />
                {label}
            </label>
            {error && <span className="text-xs text-red-500">{error}</span>}
        </div>
    );
}

interface ComboBoxFieldOption {
    value: string;
    label: string;
}

interface ComboBoxFieldProps {
    id: string;
    label: string;
    value: string;
    onChange: (value: string) => void;
    options: ComboBoxFieldOption[];
    error?: string;
    required?: boolean;
    disabled?: boolean;
    showError?: boolean; // <-- agregado
}

const ComboBoxField = ({
    id,
    label,
    value,
    onChange,
    options,
    error,
    required,
    disabled,
    showError, // <-- agregado
}: ComboBoxFieldProps) => (
    <div className="grid gap-2">
        <FieldLabel htmlFor={id} required={required}>{label}</FieldLabel>
        <Combobox
            data={options.filter(o => o.value !== "")} // Elimina opción placeholder de los datos
            value={value}
            onChange={(v) => { if (!disabled) onChange(v); }}
            placeholder={`Seleccione ${label.toLowerCase()}...`}
            className={`w-full transition-colors focus:border-primary focus:ring-primary${disabled ? ' opacity-60 cursor-not-allowed pointer-events-none' : ''}`}
        />
        {error && <span className="text-xs text-red-500">{error}</span>}
        {showError && required && !value && (
            <span className="text-xs text-red-500">Debes seleccionar una opción.</span>
        )}
    </div>
);

interface DateRangePickerRACFieldProps {
    id: string;
    label: string;
    startDate: string | null | undefined;
    endDate: string | null | undefined;
    onChange: (start: string | null, end: string | null) => void;
    required?: boolean;
    showError?: boolean;
    error?: string;
}

const DateRangePickerRACField = ({
    id,
    label,
    startDate,
    endDate,
    onChange,
    required,
    showError,
    error,
}: DateRangePickerRACFieldProps) => (
    <div className="grid gap-2">
        <FieldLabel htmlFor={id} required={required}>{label}</FieldLabel>
        <DateRangePickerRAC
            startDate={startDate}
            endDate={endDate}
            onChange={onChange}
            required={required}
            showError={showError}
        />
        {error && <span className="text-xs text-red-500">{error}</span>}
    </div>
);

// Gender options
export const GENDER_OPTIONS: SelectFieldOption[] = [
    { value: 'masculino', label: 'Masculino' },
    { value: 'femenino', label: 'Femenino' },
    { value: 'otro', label: 'Otro' },
    { value: 'prefiero_no_decir', label: 'Prefiero no decir' }
];

export { FieldLabel, TextInputField, TextAreaField, FileUploadField, SelectField, CheckboxField, ComboBoxField, DateRangePickerRACField, SocialMediaField, PhoneInputField };