import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useTranslation } from '@/hooks/use-translation';
import type { Season } from '../types';

type SeasonFormFieldsProps = {
    value: Season;
    onChange: (patch: Partial<Season>) => void;
    /** Focus the daily-price input on mount (template gallery pre-fills everything else). */
    autoFocusPrice?: boolean;
};

export default function SeasonFormFields({ value, onChange, autoFocusPrice }: SeasonFormFieldsProps) {
    const { t } = useTranslation();

    return (
        <>
            <div className="col-span-full max-w-sm">
                <Label>{t('properties.step6', 'season_name')}</Label>
                <Input
                    type="text"
                    placeholder={t('properties.step6', 'season_name_placeholder')}
                    value={value.name || ''}
                    onChange={(e) => onChange({ name: e.target.value })}
                />
            </div>
            <div>
                <Label>
                    {t('properties.step6', 'from')}
                    <span className="text-red-500">*</span>
                </Label>
                <Input
                    type="date"
                    placeholder={t('properties.step6', 'start_date_placeholder')}
                    value={value.start_date}
                    onChange={(e) => onChange({ start_date: e.target.value })}
                />
            </div>
            <div>
                <Label>
                    {t('properties.step6', 'to')} <span className="text-red-500">*</span>
                </Label>
                <Input
                    type="date"
                    placeholder={t('properties.step6', 'end_date_placeholder')}
                    value={value.end_date}
                    min={value.start_date}
                    onChange={(e) => onChange({ end_date: e.target.value })}
                />
            </div>

            <div>
                <Label>
                    {t('properties.step6', 'daily_price_usd')} <span className="text-red-500">*</span>
                </Label>
                <Input
                    type="number"
                    placeholder={t('properties.step6', 'daily_price_placeholder')}
                    value={value.daily_price}
                    autoFocus={autoFocusPrice}
                    onChange={(e) => onChange({ daily_price: parseFloat(e.target.value) })}
                />
            </div>

            <div>
                <Label>{t('properties.step6', 'extra_price')}</Label>

                <Input
                    type="number"
                    placeholder={t('properties.step6', 'optional')}
                    value={value.extra_price}
                    onChange={(e) => onChange({ extra_price: parseFloat(e.target.value) })}
                />

                <span className="text-xs text-gray-500">
                    {t('properties.step6', 'extra_price_description')}
                </span>
            </div>
        </>
    );
}