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';

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

function filteredItems(rows: string[]): string[] {
    return rows.map((row) => row.trim()).filter(Boolean);
}

function rowsFromItems(items: string[]): string[] {
    return items.length > 0 ? [...items] : [''];
}

export function FeatureListInput({
    label = 'Feature list',
    items,
    onChange,
    error,
    helpText = 'Add bullet points shown on the service detail page.',
}: FeatureListInputProps) {
    const [rows, setRows] = useState<string[]>(() => 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: string[]) => {
        onChange(filteredItems(nextRows));
    };

    const updateRow = (index: number, value: string) => {
        const next = [...rows];
        next[index] = value;
        setRows(next);
        pushToParent(next);
    };

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

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

            return result;
        });
    };

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

            <div className="space-y-2 mt-2">
                {rows.map((row, index) => (
                    <div key={index} className="flex items-center gap-2">
                        <input
                            type="text"
                            className={cn(formControlClassName, error && '!border-danger')}
                            value={row}
                            placeholder={`Feature ${index + 1}`}
                            onChange={(event) => updateRow(index, event.target.value)}
                        />
                        <button
                            type="button"
                            className={dangerSoftButtonClassName}
                            onClick={() => removeRow(index)}
                            aria-label="Remove feature"
                        >
                            <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 feature
            </button>

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