export default function PlatformSection({ t, form, setForm }) {
    const updatePlatform = (field, value) => {
        setForm((prev) => ({
            ...prev,
            platform: { ...prev.platform, [field]: value },
        }))
    }

    return (
        <div className="bg-card border border-border rounded-xl p-5 space-y-4">
            <h3 className="font-semibold">{t('settings.platformTitle')}</h3>
            <p className="text-sm text-muted-foreground">{t('settings.platformDescription')}</p>
            <div className="flex gap-4">
                <label className="flex items-center gap-2 cursor-pointer">
                    <input
                        type="radio"
                        name="platform-mode"
                        value="android"
                        checked={form.platform.mode === 'android'}
                        onChange={() => updatePlatform('mode', 'android')}
                        className="w-4 h-4"
                    />
                    <span className="text-sm">{t('settings.platformAndroid')}</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                    <input
                        type="radio"
                        name="platform-mode"
                        value="web"
                        checked={form.platform.mode === 'web'}
                        onChange={() => updatePlatform('mode', 'web')}
                        className="w-4 h-4"
                    />
                    <span className="text-sm">{t('settings.platformWeb')}</span>
                </label>
            </div>
            {form.platform.mode === 'web' && (
                <p className="text-xs text-amber-600 dark:text-amber-400">
                    {t('settings.platformWebNotice')}
                </p>
            )}

            <div className="border-t border-border pt-4 space-y-3">
                <h4 className="text-sm font-medium">{t('settings.platformVersionTitle')}</h4>
                <p className="text-xs text-muted-foreground">{t('settings.platformVersionDesc')}</p>

                {form.platform.mode === 'android' && (
                    <>
                        <div className="space-y-1">
                            <label className="text-xs text-muted-foreground">{t('settings.platformAndroidVersion')}</label>
                            <input
                                type="text"
                                value={form.platform.android_version || ''}
                                onChange={(e) => updatePlatform('android_version', e.target.value)}
                                placeholder="2.1.5"
                                className="w-full px-3 py-2 rounded-lg border border-border bg-background text-sm"
                            />
                        </div>
                        <div className="space-y-1">
                            <label className="text-xs text-muted-foreground">{t('settings.platformAndroidAPILevel')}</label>
                            <input
                                type="text"
                                value={form.platform.android_api_level || ''}
                                onChange={(e) => updatePlatform('android_api_level', e.target.value)}
                                placeholder="32"
                                className="w-full px-3 py-2 rounded-lg border border-border bg-background text-sm"
                            />
                        </div>
                    </>
                )}

                {form.platform.mode === 'web' && (
                    <div className="space-y-1">
                        <label className="text-xs text-muted-foreground">{t('settings.platformWebVersion')}</label>
                        <input
                            type="text"
                            value={form.platform.web_version || ''}
                            onChange={(e) => updatePlatform('web_version', e.target.value)}
                            placeholder="2.0.0"
                            className="w-full px-3 py-2 rounded-lg border border-border bg-background text-sm"
                        />
                    </div>
                )}
            </div>
        </div>
    )
}