import InputError from '@/components/input-error';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useTranslation } from '@/hooks/use-translation';
import { CIVILITES, NATIONALITIES } from './ownerIdentity';

/**
 * Reusable owner-form body shared by:
 *  - CreateOwnerDialog (folder-scoped, email locked if folder already has one)
 *  - StandaloneCreateOwnerDialog (no folder, all fields editable)
 *
 * Keeping the field layout in one place avoids drift between the two dialogs.
 */
export type OwnerFormShape = {
    name: string;
    last_name: string;
    civilite: string;
    cin: string;
    pay_origine: string;
    email: string;
    phone: string;
    prefix_phone: string;
    password: string;
    photo_cin_recto: File | null;
    photo_cin_verso: File | null;
};

type OwnerFormErrors = Partial<Record<keyof OwnerFormShape, string>>;

export const OwnerFormFields = ({
    data,
    setData,
    errors,
    phonesPrefix,
    emailDisabled = false,
    requireCinFiles = true,
}: {
    data: OwnerFormShape;
    setData: <K extends keyof OwnerFormShape>(key: K, value: OwnerFormShape[K]) => void;
    errors: OwnerFormErrors;
    phonesPrefix: string[];
    emailDisabled?: boolean;
    requireCinFiles?: boolean;
}) => {
    const { t } = useTranslation();

    return (
        <div className="grid grid-cols-2 gap-4 py-2">
            <div>
                <Label htmlFor="owner_name">{t('crm', 'name')}</Label>
                <Input id="owner_name" value={data.name} onChange={(e) => setData('name', e.target.value)} required />
                <InputError className="mt-2" message={errors.name} />
            </div>
            <div>
                <Label htmlFor="owner_last_name">{t('crm', 'last_name')}</Label>
                <Input id="owner_last_name" value={data.last_name} onChange={(e) => setData('last_name', e.target.value)} />
                <InputError className="mt-2" message={errors.last_name} />
            </div>

            <div>
                <Label htmlFor="owner_civilite">{t('crm', 'civility')}</Label>
                <Select value={data.civilite} onValueChange={(value) => setData('civilite', value)}>
                    <SelectTrigger className="mt-1">
                        <SelectValue placeholder={t('crm', 'select_civility')} />
                    </SelectTrigger>
                    <SelectContent className="z-[80]">
                        <SelectGroup>
                            {CIVILITES.map((c) => (
                                <SelectItem key={c} value={c}>
                                    {c}
                                </SelectItem>
                            ))}
                        </SelectGroup>
                    </SelectContent>
                </Select>
                <InputError className="mt-2" message={errors.civilite} />
            </div>
            <div>
                <Label htmlFor="owner_cin">{t('crm', 'cin_number')}</Label>
                <Input id="owner_cin" value={data.cin} onChange={(e) => setData('cin', e.target.value)} />
                <InputError className="mt-2" message={errors.cin} />
            </div>

            <div className="col-span-full">
                <Label htmlFor="owner_pay_origine">{t('crm', 'nationality')}</Label>
                <Select value={data.pay_origine} onValueChange={(value) => setData('pay_origine', value)}>
                    <SelectTrigger className="mt-1">
                        <SelectValue placeholder={t('crm', 'select_nationality')} />
                    </SelectTrigger>
                    <SelectContent className="z-[80]">
                        <SelectGroup>
                            {NATIONALITIES.map((n) => (
                                <SelectItem key={n} value={n}>
                                    {n}
                                </SelectItem>
                            ))}
                        </SelectGroup>
                    </SelectContent>
                </Select>
                <InputError className="mt-2" message={errors.pay_origine} />
            </div>

            <div className="col-span-full">
                <Label htmlFor="owner_email">{t('crm', 'email')}</Label>
                <Input
                    type="email"
                    id="owner_email"
                    value={data.email}
                    disabled={emailDisabled}
                    onChange={(e) => setData('email', e.target.value)}
                    required
                />
                <InputError className="mt-2" message={errors.email} />
            </div>

            <div>
                <Label htmlFor="owner_prefix_phone">{t('crm', 'prefix')}</Label>
                <Select value={data.prefix_phone} onValueChange={(value) => setData('prefix_phone', value)}>
                    <SelectTrigger className="mt-1">
                        <SelectValue placeholder={t('crm', 'prefix')} />
                    </SelectTrigger>
                    {/* z-[80] so the list stacks above the nested StandaloneCreateOwnerDialog (z-[60]) and AddFolderDialog behind it. */}
                    <SelectContent className="z-[80]">
                        <SelectGroup>
                            {phonesPrefix.map((prefix) => (
                                <SelectItem key={prefix} value={prefix}>
                                    {prefix}
                                </SelectItem>
                            ))}
                        </SelectGroup>
                    </SelectContent>
                </Select>
            </div>
            <div>
                <Label htmlFor="owner_phone">{t('crm', 'phone')}</Label>
                <Input type="tel" id="owner_phone" value={data.phone} onChange={(e) => setData('phone', e.target.value)} />
                <InputError className="mt-2" message={errors.phone} />
            </div>

            <div className="col-span-full">
                <Label htmlFor="owner_password">
                    {t('crm', 'password')} <span className="text-red-500">*</span>
                </Label>
                <Input
                    type="password"
                    id="owner_password"
                    value={data.password}
                    onChange={(e) => setData('password', e.target.value)}
                    required
                />
                <InputError className="mt-2" message={errors.password} />
            </div>

            <div>
                <Label htmlFor="photo_cin_recto">
                    {t('crm', 'photo_cin_recto')} {requireCinFiles && <span className="text-red-500">*</span>}
                </Label>
                <Input
                    type="file"
                    id="photo_cin_recto"
                    accept="image/*"
                    onChange={(e) => setData('photo_cin_recto', e.target.files ? e.target.files[0] : null)}
                />
                <InputError className="mt-2" message={errors.photo_cin_recto} />
            </div>
            <div>
                <Label htmlFor="photo_cin_verso">
                    {t('crm', 'photo_cin_verso')} {requireCinFiles && <span className="text-red-500">*</span>}
                </Label>
                <Input
                    type="file"
                    id="photo_cin_verso"
                    accept="image/*"
                    onChange={(e) => setData('photo_cin_verso', e.target.files ? e.target.files[0] : null)}
                />
                <InputError className="mt-2" message={errors.photo_cin_verso} />
            </div>
        </div>
    );
};