import { useEffect, useState } from 'react';

import {
    dangerSoftButtonClassName,
    formControlClassName,
    formErrorClassName,
    formFieldClassName,
    formHelpClassName,
    formLabelClassName,
    primarySoftButtonClassName,
} from '@admin/components/ui/field-styles';
import { cn } from '@admin/lib/utils';

export type BenefitItem = {
    label: string;
    percentage: number;
};

type BenefitListInputProps = {
    label?: string;
    items: BenefitItem[];
    onChange: (items: BenefitItem[]) => void;
    error?: string;
    helpText?: string;
};

function filteredItems(rows: BenefitItem[]): BenefitItem[] {
    return rows.filter((row) => row.label.trim() !== '');
}

function rowsFromItems(items: BenefitItem[]): BenefitItem[] {
    return items.length > 0 ? items.map((item) => ({ ...item })) : [{ label: '', percentage: 0 }];
}

export function BenefitListInput({
    label = 'Benefits',
    items,
    onChange,
    error,
    helpText = 'Add benefit labels with percentage values shown as progress bars on service detail pages.',
}: BenefitListInputProps) {
    const [rows, setRows] = useState<BenefitItem[]>(() => rowsFromItems(items));

    useEffect(() => {
        setRows((current) => {
            const parentItems = filteredItems(items);
            const localItems = filteredItems(current);

            if (JSON.stringify(parentItems) === JSON.stringify(localItems)) {
                return current;
            }

            return rowsFromItems(items);
        });
    }, [items]);

    const pushToParent = (nextRows: BenefitItem[]) => {
        onChange(filteredItems(nextRows));
    };

    const updateRow = (index: number, field: keyof BenefitItem, value: string | number) => {
        const next = [...rows];
        next[index] = {
            ...next[index],
            [field]: field === 'percentage' ? Number(value) : value,
        };
        setRows(next);
        pushToParent(next);
    };

    const addRow = () => {
        setRows((current) => [...current, { label: '', percentage: 0 }]);
    };

    const removeRow = (index: number) => {
        setRows((current) => {
            const next = current.filter((_, rowIndex) => rowIndex !== index);
            const result = next.length > 0 ? next : [{ label: '', percentage: 0 }];
            pushToParent(result);

            return result;
        });
    };

    return (
        <div className={cn(formFieldClassName, 'mb-4')}>
            <label className={formLabelClassName}>{label}</label>
            {helpText && <p className={formHelpClassName}>{helpText}</p>}

            <div className="mt-2 space-y-3">
                {rows.map((row, index) => (
                    <div key={index} className="flex flex-col gap-2 sm:flex-row sm:items-center">
                        <input
                            type="text"
                            className={cn(formControlClassName, error && '!border-danger', 'sm:flex-1')}
                            value={row.label}
                            placeholder={`Benefit ${index + 1}`}
                            onChange={(event) => updateRow(index, 'label', event.target.value)}
                        />
                        <div className="flex items-center gap-2 sm:w-40">
                            <input
                                type="number"
                                min={0}
                                max={100}
                                className={cn(formControlClassName, error && '!border-danger')}
                                value={row.percentage}
                                onChange={(event) => updateRow(index, 'percentage', event.target.value)}
                            />
                            <span className="text-sm text-gray-500 dark:text-white/70">%</span>
                        </div>
                        <button
                            type="button"
                            className={dangerSoftButtonClassName}
                            onClick={() => removeRow(index)}
                            aria-label="Remove benefit"
                        >
                            <i className="ri-delete-bin-line" />
                        </button>
                    </div>
                ))}
            </div>

            <button type="button" className={cn(primarySoftButtonClassName, 'mt-3')} onClick={addRow}>
                <i className="ri-add-line me-1" />
                Add benefit
            </button>

            {error && <span className={formErrorClassName}>{error}</span>}
        </div>
    );
}