webui/src/features/account/AddAccountModal.jsx

import { X } from 'lucide-react'

export default function AddAccountModal({
    show,
    t,
    newAccount,
    setNewAccount,
    loading,
    onClose,
    onAdd,
}) {
    if (!show) {
        return null
    }

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in">
            <div className="bg-card w-full max-w-md rounded-xl border border-border shadow-2xl overflow-hidden animate-in zoom-in-95">
                <div className="p-4 border-b border-border flex justify-between items-center">
                    <h3 className="font-semibold">{t('accountManager.modalAddAccountTitle')}</h3>
                    <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
                        <X className="w-5 h-5" />
                    </button>
                </div>
                <div className="p-6 space-y-4">
                    <div>
                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.accountTypeLabel')}</label>
                        <div className="flex gap-3">
                            <label className={`flex-1 flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${
                                (newAccount.role || 'normal') === 'normal'
                                    ? 'border-primary bg-primary/10 text-primary'
                                    : 'border-border hover:border-primary/50'
                            }`}>
                                <input
                                    type="radio"
                                    name="account-role"
                                    value="normal"
                                    checked={(newAccount.role || 'normal') === 'normal'}
                                    onChange={() => setNewAccount({ ...newAccount, role: 'normal' })}
                                    className="sr-only"
                                />
                                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
                                    (newAccount.role || 'normal') === 'normal' ? 'border-primary' : 'border-muted-foreground'
                                }`}>
                                    {(newAccount.role || 'normal') === 'normal' && <div className="w-2 h-2 rounded-full bg-primary" />}
                                </div>
                                <div>
                                    <div className="text-sm font-medium">{t('accountManager.roleNormal')}</div>
                                    <div className="text-xs text-muted-foreground">{t('accountManager.roleNormalDesc')}</div>
                                </div>
                            </label>
                            <label className={`flex-1 flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${
                                newAccount.role === 'standby'
                                    ? 'border-amber-500 bg-amber-500/10 text-amber-500'
                                    : 'border-border hover:border-amber-500/50'
                            }`}>
                                <input
                                    type="radio"
                                    name="account-role"
                                    value="standby"
                                    checked={newAccount.role === 'standby'}
                                    onChange={() => setNewAccount({ ...newAccount, role: 'standby' })}
                                    className="sr-only"
                                />
                                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
                                    newAccount.role === 'standby' ? 'border-amber-500' : 'border-muted-foreground'
                                }`}>
                                    {newAccount.role === 'standby' && <div className="w-2 h-2 rounded-full bg-amber-500" />}
                                </div>
                                <div>
                                    <div className="text-sm font-medium">{t('accountManager.roleStandby')}</div>
                                    <div className="text-xs text-muted-foreground">{t('accountManager.roleStandbyDesc')}</div>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.nameOptional')}</label>
                        <input
                            type="text"
                            className="input-field"
                            placeholder={t('accountManager.namePlaceholder')}
                            value={newAccount.name}
                            onChange={e => setNewAccount({ ...newAccount, name: e.target.value })}
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.remarkOptional')}</label>
                        <input
                            type="text"
                            className="input-field"
                            placeholder={t('accountManager.remarkPlaceholder')}
                            value={newAccount.remark}
                            onChange={e => setNewAccount({ ...newAccount, remark: e.target.value })}
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.emailOptional')}</label>
                        <input
                            type="email"
                            className="input-field"
                            placeholder="user@example.com"
                            value={newAccount.email}
                            onChange={e => setNewAccount({ ...newAccount, email: e.target.value })}
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.mobileOptional')}</label>
                        <input
                            type="text"
                            className="input-field"
                            placeholder="+86..."
                            value={newAccount.mobile}
                            onChange={e => setNewAccount({ ...newAccount, mobile: e.target.value })}
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.passwordLabel')} <span className="text-destructive">*</span></label>
                        <input
                            type="password"
                            className="input-field bg-[#09090b]"
                            placeholder={t('accountManager.passwordPlaceholder')}
                            value={newAccount.password}
                            onChange={e => setNewAccount({ ...newAccount, password: e.target.value })}
                        />
                    </div>
                    <div className="flex justify-end gap-2 pt-2">
                        <button onClick={onClose} className="px-4 py-2 rounded-lg border border-border hover:bg-secondary transition-colors text-sm font-medium">{t('actions.cancel')}</button>
                        <button onClick={onAdd} disabled={loading} className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium disabled:opacity-50">
                            {loading ? t('accountManager.addAccountLoading') : t('accountManager.addAccountAction')}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    )
}