import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import { PlusIcon, Trash2Icon } from 'lucide-react';
import type { CancellationPolicy } from '../types';

type CancellationPoliciesEditorProps = {
    policies: CancellationPolicy[];
    onChange: (next: CancellationPolicy[]) => void;
    fieldErrors?: Record<string, string>;
};

export default function CancellationPoliciesEditor({ policies, onChange, fieldErrors = {} }: CancellationPoliciesEditorProps) {
    const { t } = useTranslation();

    const handleAddCancellationPolicy = () => {
        const newPolicy = { valid_from: '', valid_to: '', charge: '' };
        onChange([...policies, newPolicy]);
    };

    const handleCancellationPolicyChange = (index: number, field: keyof CancellationPolicy, value: string) => {
        const updatedPolicies = [...policies];
        updatedPolicies[index] = {
            ...updatedPolicies[index],
            [field]: field === 'charge' ? parseFloat(value) : parseInt(value),
        };
        onChange(updatedPolicies);
    };

    const handleRemoveCancellationPolicy = (index: number) => {
        const updatedPolicies = [...policies];
        updatedPolicies.splice(index, 1);
        onChange(updatedPolicies);
    };

    return (
        <div className={cn('rounded-lg', fieldErrors.cancellation_policies && 'border border-red-500 p-4')}>
            <h2 className="mt-4 mb-1 text-lg font-bold">
                <span className="text-secondary mr-1">•</span>
                {t('properties.step5', 'cancellation_policies_title')}
            </h2>
            <p className="text-xs text-gray-500 sm:text-sm">
                {t('properties.step5', 'select_cancellation_policy')} <span className="text-red-500">*</span>
            </p>
            <InputError message={fieldErrors.cancellation_policies} />
            <div>
                <Button
                    type="button"
                    variant={'outline'}
                    onClick={handleAddCancellationPolicy}
                    className="border-secondary text-secondary hover:text-primary mb-4 cursor-pointer border hover:bg-white"
                >
                    <PlusIcon className="mr-1 h-4 w-4" />
                    {t('properties.step5', 'add_penalty')}
                </Button>
            </div>

            {policies.map((policy, index) => (
                <div className="flex items-center justify-between gap-3 rounded-lg border p-4">
                    <div key={index} className="mb-4 flex flex-wrap items-end gap-3 text-sm">
                        <div className="flex flex-col gap-1">
                            <Label htmlFor={`valid_from_${index}`}> {t('properties.step5', 'from')}</Label>
                            <Input
                                type="number"
                                id={`valid_from_${index}`}
                                className="w-24"
                                value={policy.valid_from}
                                required
                                onChange={(e) => handleCancellationPolicyChange(index, 'valid_from', e.target.value)}
                            />
                        </div>
                        <span>{t('properties.step5', 'days')}</span>
                        <div className="flex flex-col gap-1">
                            <Label htmlFor={`valid_to_${index}`}> {t('properties.step5', 'to')}</Label>
                            <Input
                                type="number"
                                id={`valid_to_${index}`}
                                className="w-24"
                                value={policy.valid_to}
                                required
                                onChange={(e) => handleCancellationPolicyChange(index, 'valid_to', e.target.value)}
                            />
                        </div>
                        <span>{t('properties.step5', 'days_before_arrival_fee')}</span>
                        <div className="flex flex-col gap-1">
                            <Label htmlFor={`charge_${index}`}>{t('properties.step5', 'charge')}</Label>
                            <Input
                                type="number"
                                id={`charge_${index}`}
                                className="w-24"
                                value={policy.charge}
                                required
                                onChange={(e) => handleCancellationPolicyChange(index, 'charge', e.target.value)}
                            />
                        </div>
                        <span> {t('properties.step5', 'of_total_price')}</span>
                    </div>
                    <Trash2Icon className="h-8 w-8 cursor-pointer text-red-500 sm:h-4 sm:w-4" onClick={() => handleRemoveCancellationPolicy(index)} />
                </div>
            ))}
        </div>
    );
}