import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormNumberInput } from '@admin/components/ui/forms/form-number-input';
import { FormSelect } from '@admin/components/ui/forms/form-select';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';
import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input';
import { positionOptionsToSelect } from '@admin/lib/sort-select-options';

type TeamPositionOption = {
    id: number;
    name: string;
};

type TeamMemberFormFieldsProps = {
    data: {
        team_position_id: string;
        name: string;
        photo: string;
        sort_order: number;
        facebook: string;
        linkedin: string;
        x: string;
        telegram: string;
        status: boolean;
    };
    errors: Partial<
        Record<
            'team_position_id' | 'name' | 'photo' | 'sort_order' | 'facebook' | 'linkedin' | 'x' | 'telegram' | 'status',
            string
        >
    >;
    positions: TeamPositionOption[];
    setData: (key: string, value: unknown) => void;
    photoInputId?: string;
};

export function TeamMemberFormFields({
    data,
    errors,
    positions,
    setData,
    photoInputId = 'team-member-photo',
}: TeamMemberFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Name"
                error={errors.name}
                inputProps={{
                    value: data.name,
                    onChange: (event) => setData('name', event.target.value),
                    required: true,
                }}
            />

            <FormSelect
                label="Position"
                value={data.team_position_id}
                options={positionOptionsToSelect(positions)}
                placeholder="Select position"
                error={errors.team_position_id}
                onChange={(value) => setData('team_position_id', value)}
            />

            <FileUploadInput
                label="Photo (551×642 px recommended)"
                inputId={photoInputId}
                uploadUrl="/admin/api/team_member/upload_photo"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.photo ? `/storage/${data.photo}` : ''}
                previewType="image"
                error={errors.photo}
                onSuccess={(filename) => setData('photo', filename)}
            />

            <FormNumberInput
                label="Display order"
                helpText="Lower numbers appear first on the team page."
                min={0}
                value={data.sort_order}
                error={errors.sort_order}
                required
                onChange={(value) => setData('sort_order', value)}
            />

            <FormGroup
                label="Facebook"
                error={errors.facebook}
                inputProps={{
                    type: 'url',
                    value: data.facebook,
                    placeholder: 'https://facebook.com/…',
                    onChange: (event) => setData('facebook', event.target.value),
                }}
            />

            <FormGroup
                label="LinkedIn"
                error={errors.linkedin}
                inputProps={{
                    type: 'url',
                    value: data.linkedin,
                    placeholder: 'https://linkedin.com/in/…',
                    onChange: (event) => setData('linkedin', event.target.value),
                }}
            />

            <FormGroup
                label="X (Twitter)"
                error={errors.x}
                inputProps={{
                    type: 'url',
                    value: data.x,
                    placeholder: 'https://x.com/…',
                    onChange: (event) => setData('x', event.target.value),
                }}
            />

            <FormGroup
                label="Telegram"
                error={errors.telegram}
                inputProps={{
                    type: 'url',
                    value: data.telegram,
                    placeholder: 'https://t.me/…',
                    onChange: (event) => setData('telegram', event.target.value),
                }}
            />

            <FormSwitch
                id="team-member-status"
                label="Active"
                checked={data.status}
                onChange={(event) => setData('status', event.target.checked)}
            />
        </>
    );
}