import type { Dispatch, SetStateAction } from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import type { SupplierFormDraft } from '@/features/suppliers/lib/supplier-form-draft';
import type { ClientOption } from '@/features/suppliers/types';

type Translate = (key: string, params?: Record<string, string | number>) => string;

type SectionProps = {
    form: SupplierFormDraft;
    setForm: Dispatch<SetStateAction<SupplierFormDraft>>;
    t: Translate;
    clients: ClientOption[];
    mode: 'create' | 'edit';
    errors: Record<string, string>;
};

export function SupplierFormGeneralSection({ form, setForm, t, clients, mode, errors }: SectionProps) {
    return (
        <div className="space-y-6">
            <p className="text-xs leading-relaxed text-muted-foreground">{t('suppliers.admin_form.hints.general')}</p>

            <div className="space-y-3">
                <h3 className="text-sm font-semibold">{t('suppliers.admin_form.sections.assignment')}</h3>
                <p className="text-xs text-muted-foreground">{t('suppliers.admin_form.fields.clients_hint')}</p>
                <div className="max-h-48 space-y-2 overflow-y-auto rounded-lg border border-border p-3">
                    {clients.map((client) => {
                        const checked = form.client_ids.includes(client.id);

                        return (
                            <label
                                key={client.id}
                                htmlFor={`supplier-client-${client.id}`}
                                className="flex cursor-pointer items-center gap-3 rounded-md px-1 py-1.5 hover:bg-muted/50"
                            >
                                <Checkbox
                                    id={`supplier-client-${client.id}`}
                                    checked={checked}
                                    onCheckedChange={(value) => {
                                        setForm((prev) => ({
                                            ...prev,
                                            client_ids: value
                                                ? [...prev.client_ids, client.id]
                                                : prev.client_ids.filter((id) => id !== client.id),
                                        }));
                                    }}
                                />
                                <span className="text-sm">{client.name}</span>
                            </label>
                        );
                    })}
                </div>
                {errors.client_ids ? <p className="text-xs text-destructive">{errors.client_ids}</p> : null}
            </div>

            <div className="space-y-3">
                <h3 className="text-sm font-semibold">{t('suppliers.admin_form.sections.identification')}</h3>
                <div className="grid gap-3 sm:grid-cols-2">
                    <div className="space-y-2 sm:col-span-2">
                        <Label htmlFor="supplier-name">{t('suppliers.admin_form.fields.name')}</Label>
                        <Input
                            id="supplier-name"
                            value={form.name}
                            onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
                            placeholder={t('suppliers.admin_form.fields.name_placeholder')}
                            autoComplete="organization"
                        />
                        {errors.name ? <p className="text-xs text-destructive">{errors.name}</p> : null}
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="supplier-cif">{t('suppliers.admin_form.fields.cif')}</Label>
                        <Input
                            id="supplier-cif"
                            value={form.cif}
                            onChange={(e) => setForm((p) => ({ ...p, cif: e.target.value }))}
                            placeholder={t('suppliers.admin_form.fields.cif_placeholder')}
                        />
                        {errors.cif ? <p className="text-xs text-destructive">{errors.cif}</p> : null}
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="supplier-vat">{t('suppliers.admin_form.fields.vat_number')}</Label>
                        <Input
                            id="supplier-vat"
                            value={form.vat_number}
                            onChange={(e) => setForm((p) => ({ ...p, vat_number: e.target.value }))}
                            placeholder={t('suppliers.admin_form.fields.vat_number_placeholder')}
                        />
                        {errors.vat_number ? <p className="text-xs text-destructive">{errors.vat_number}</p> : null}
                    </div>
                    <div className="space-y-2 sm:col-span-2">
                        <Label htmlFor="supplier-rc">{t('suppliers.admin_form.fields.trade_register')}</Label>
                        <Input
                            id="supplier-rc"
                            value={form.trade_register_number}
                            onChange={(e) => setForm((p) => ({ ...p, trade_register_number: e.target.value }))}
                            placeholder={t('suppliers.admin_form.fields.trade_register_placeholder')}
                        />
                        {errors.trade_register_number ? (
                            <p className="text-xs text-destructive">{errors.trade_register_number}</p>
                        ) : null}
                    </div>
                </div>
            </div>

            <div className="space-y-3">
                <h3 className="text-sm font-semibold">{t('suppliers.admin_form.sections.status')}</h3>
                <div className="grid gap-3 sm:grid-cols-2">
                    <div className="flex items-center justify-between gap-3 rounded-lg border border-border px-3 py-2">
                        <div>
                            <p className="text-sm font-medium">{t('suppliers.admin_form.switches.vat_payer')}</p>
                            <p className="text-xs text-muted-foreground">{t('suppliers.admin_form.switches.vat_payer_hint')}</p>
                        </div>
                        <Switch
                            checked={form.is_vat_payer}
                            onCheckedChange={(v) => setForm((p) => ({ ...p, is_vat_payer: Boolean(v) }))}
                        />
                    </div>
                    {mode === 'create' ? (
                        <div className="flex items-center justify-between gap-3 rounded-lg border border-border px-3 py-2">
                            <div>
                                <p className="text-sm font-medium">{t('suppliers.admin_form.switches.active_on_create')}</p>
                                <p className="text-xs text-muted-foreground">
                                    {t('suppliers.admin_form.switches.active_on_create_hint')}
                                </p>
                            </div>
                            <Switch
                                checked={form.active}
                                onCheckedChange={(v) => setForm((p) => ({ ...p, active: Boolean(v) }))}
                            />
                        </div>
                    ) : null}
                </div>
            </div>
        </div>
    );
}

export function SupplierFormLocationSection({ form, setForm, t, errors }: SectionProps) {
    return (
        <div className="space-y-6">
            <p className="text-xs leading-relaxed text-muted-foreground">{t('suppliers.admin_form.hints.location')}</p>

            <div className="space-y-3">
                <h3 className="text-sm font-semibold">{t('suppliers.admin_form.sections.contact')}</h3>
                <div className="grid gap-3 sm:grid-cols-2">
                    <div className="space-y-2">
                        <Label htmlFor="supplier-phone">{t('suppliers.admin_form.fields.phone')}</Label>
                        <Input
                            id="supplier-phone"
                            value={form.phone}
                            onChange={(e) => setForm((p) => ({ ...p, phone: e.target.value }))}
                            placeholder={t('suppliers.admin_form.fields.phone_placeholder')}
                        />
                        {errors.phone ? <p className="text-xs text-destructive">{errors.phone}</p> : null}
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="supplier-email">{t('suppliers.admin_form.fields.email')}</Label>
                        <Input
                            id="supplier-email"
                            type="email"
                            value={form.email}
                            onChange={(e) => setForm((p) => ({ ...p, email: e.target.value }))}
                            placeholder={t('suppliers.admin_form.fields.email_placeholder')}
                        />
                        {errors.email ? <p className="text-xs text-destructive">{errors.email}</p> : null}
                    </div>
                </div>
            </div>

            <div className="space-y-3">
                <h3 className="text-sm font-semibold">{t('suppliers.admin_form.sections.address')}</h3>
                <div className="grid gap-3 sm:grid-cols-3">
                    <div className="space-y-2">
                        <Label htmlFor="supplier-country">{t('suppliers.admin_form.fields.country')}</Label>
                        <Input
                            id="supplier-country"
                            value={form.country}
                            onChange={(e) => setForm((p) => ({ ...p, country: e.target.value }))}
                            placeholder={t('suppliers.admin_form.fields.country_placeholder')}
                        />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="supplier-county">{t('suppliers.admin_form.fields.county')}</Label>
                        <Input
                            id="supplier-county"
                            value={form.county}
                            onChange={(e) => setForm((p) => ({ ...p, county: e.target.value }))}
                            placeholder={t('suppliers.admin_form.fields.county_placeholder')}
                        />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="supplier-city">{t('suppliers.admin_form.fields.city')}</Label>
                        <Input
                            id="supplier-city"
                            value={form.city}
                            onChange={(e) => setForm((p) => ({ ...p, city: e.target.value }))}
                            placeholder={t('suppliers.admin_form.fields.city_placeholder')}
                        />
                    </div>
                    <div className="space-y-2 sm:col-span-3">
                        <Label htmlFor="supplier-address">{t('suppliers.admin_form.fields.address')}</Label>
                        <Input
                            id="supplier-address"
                            value={form.address}
                            onChange={(e) => setForm((p) => ({ ...p, address: e.target.value }))}
                            placeholder={t('suppliers.admin_form.fields.address_placeholder')}
                        />
                        {errors.address ? <p className="text-xs text-destructive">{errors.address}</p> : null}
                    </div>
                </div>
            </div>
        </div>
    );
}

export function SupplierFormNotesSection({ form, setForm, t, errors }: SectionProps) {
    return (
        <div className="space-y-6">
            <p className="text-xs leading-relaxed text-muted-foreground">{t('suppliers.admin_form.hints.notes')}</p>
            <div className="space-y-2">
                <Label htmlFor="supplier-notes">{t('suppliers.admin_form.fields.notes')}</Label>
                <Textarea
                    id="supplier-notes"
                    value={form.notes}
                    onChange={(e) => setForm((p) => ({ ...p, notes: e.target.value }))}
                    placeholder={t('suppliers.admin_form.fields.notes_placeholder')}
                    rows={6}
                />
                {errors.notes ? <p className="text-xs text-destructive">{errors.notes}</p> : null}
            </div>
        </div>
    );
}