import { useEffect, useMemo, useState } from 'preact/hooks';
import ModalShell from '../ui/ModalShell';

const RATE_OPTIONS = [
    { value: 'HR', label: 'Hrvatska', amount: '30.00' },
    { value: 'BIH', label: 'BiH', amount: '50.00' },
    { value: 'SI', label: 'Slovenija', amount: '80.00' },
    { value: 'CG', label: 'Crna Gora', amount: '50.00' },
];

const DEFAULT_ROW = {
    broj_sati: '0.00',
    kolicina_dnevnica: '0.00',
    iznos_dnevnica: '30.00',
    daily_rate_country: 'HR',
};

function parseAmount(value) {
    const normalized = String(value || '').trim().replace('€', '').replace(/\s+/g, '').replace(',', '.');
    const parsed = Number(normalized);
    return Number.isFinite(parsed) ? parsed : 0;
}

function toDisplayValue(value) {
    if (value == null || value === '') return '0.00';
    const numeric = Number(String(value).replace(',', '.'));
    return Number.isFinite(numeric) ? numeric.toFixed(2) : String(value);
}

function getRateAmount(country) {
    const option = RATE_OPTIONS.find((item) => item.value === country);
    return option ? option.amount : DEFAULT_ROW.iznos_dnevnica;
}

export default function WorkOrderTravelExpensesModal({
    open,
    workOrder,
    tableData,
    saving = false,
    onClose,
    onSave,
}) {
    const [row, setRow] = useState(DEFAULT_ROW);

    useEffect(() => {
        if (!open) {
            setRow(DEFAULT_ROW);
            return;
        }
        const incoming = tableData && typeof tableData === 'object' ? tableData : {};
        const country = String(incoming.daily_rate_country || DEFAULT_ROW.daily_rate_country).toUpperCase();
        const amount = incoming.iznos_dnevnica != null && incoming.iznos_dnevnica !== ''
            ? incoming.iznos_dnevnica
            : getRateAmount(country);
        setRow({
            broj_sati: toDisplayValue(incoming.broj_sati),
            kolicina_dnevnica: toDisplayValue(incoming.kolicina_dnevnica),
            iznos_dnevnica: toDisplayValue(amount),
            daily_rate_country: country,
        });
    }, [open, tableData]);

    const total = useMemo(() => (
        (parseAmount(row.kolicina_dnevnica) * parseAmount(row.iznos_dnevnica)).toFixed(2)
    ), [row]);

    if (!open) return null;

    const updateField = (field, value) => {
        setRow((prev) => ({ ...prev, [field]: value }));
    };

    const updateCountry = (country) => {
        setRow((prev) => ({
            ...prev,
            daily_rate_country: country,
            iznos_dnevnica: getRateAmount(country),
        }));
    };

    const handleSave = async () => {
        await onSave?.({
            broj_sati: String(row.broj_sati || '').trim(),
            kolicina_dnevnica: String(row.kolicina_dnevnica || '').trim(),
            iznos_dnevnica: String(row.iznos_dnevnica || '').trim(),
            daily_rate_country: String(row.daily_rate_country || '').trim(),
        });
    };

    return (
        <ModalShell
            onClose={onClose}
            overlayClassName="z-[70] overflow-y-auto p-4 pt-16"
            contentClassName="flex min-h-full items-start justify-center"
            panelClassName="w-full max-w-4xl rounded-xl border border-border-hairline bg-canvas-elevated shadow-xl overflow-hidden max-h-[calc(100vh-2rem)]"
        >
            <div className="flex w-full flex-col">
                <div className="flex items-center justify-between border-b border-border-hairline px-5 py-3">
                    <div>
                        <h3 className="text-base font-semibold text-text-main">OBRAČUN PUTNIH TROŠKOVA</h3>
                        <p className="text-xs text-text-muted">{workOrder?.display_code || workOrder?.id || '-'}</p>
                    </div>
                    <button
                        type="button"
                        onClick={onClose}
                        aria-label="Zatvori"
                        className="ml-4 rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700"
                    >
                        ✕
                    </button>
                </div>

                <div className="space-y-4 overflow-y-auto px-5 py-4">
                    <div className="rounded-lg border border-gray-200 bg-white p-4 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">
                        <p className="font-semibold text-gray-800 dark:text-gray-100">Brzi odabir dnevnice</p>
                        <p>Odabir države automatski postavlja iznos dnevnice. Po potrebi iznos možete ručno izmijeniti.</p>
                    </div>

                    <div className="overflow-auto rounded-xl border border-gray-200 shadow-sm dark:border-gray-700">
                        <table className="min-w-[900px] w-full bg-white text-xs dark:bg-gray-900">
                            <thead>
                                <tr className="border-b border-gray-200 bg-gray-50 text-left dark:border-gray-700 dark:bg-gray-800">
                                    <th className="w-8 px-2 py-2.5 text-center text-gray-400">#</th>
                                    <th className="px-2 py-2.5 font-semibold text-gray-700 dark:text-gray-200">Broj sati</th>
                                    <th className="px-2 py-2.5 font-semibold text-gray-700 dark:text-gray-200">Količina dnevnica</th>
                                    <th className="px-2 py-2.5 font-semibold text-gray-700 dark:text-gray-200">Država</th>
                                    <th className="px-2 py-2.5 font-semibold text-gray-700 dark:text-gray-200">Iznos dnevnice</th>
                                    <th className="px-2 py-2.5 font-semibold text-gray-700 dark:text-gray-200">Ukupan iznos</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr className="border-t border-gray-100 dark:border-gray-700">
                                    <td className="px-2 py-1.5 text-center text-[11px] text-gray-400">1</td>
                                    <td className="px-1 py-1">
                                        <input
                                            type="text"
                                            value={row.broj_sati}
                                            onInput={(event) => updateField('broj_sati', event.currentTarget.value)}
                                            className="block w-full rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-2 text-xs text-gray-900"
                                        />
                                    </td>
                                    <td className="px-1 py-1">
                                        <input
                                            type="text"
                                            value={row.kolicina_dnevnica}
                                            onInput={(event) => updateField('kolicina_dnevnica', event.currentTarget.value)}
                                            className="block w-full rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-2 text-xs text-gray-900"
                                        />
                                    </td>
                                    <td className="px-1 py-1">
                                        <select
                                            value={row.daily_rate_country}
                                            onChange={(event) => updateCountry(event.currentTarget.value)}
                                            className="block w-full rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-2 text-xs text-gray-900"
                                        >
                                            {RATE_OPTIONS.map((option) => (
                                                <option key={option.value} value={option.value}>
                                                    {option.label}
                                                </option>
                                            ))}
                                        </select>
                                    </td>
                                    <td className="px-1 py-1">
                                        <input
                                            type="text"
                                            value={row.iznos_dnevnica}
                                            onInput={(event) => updateField('iznos_dnevnica', event.currentTarget.value)}
                                            className="block w-full rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-2 text-xs text-gray-900"
                                        />
                                    </td>
                                    <td className="px-1 py-1">
                                        <div className="rounded-lg border border-gray-300 bg-gray-100 px-2.5 py-2 text-right text-xs font-semibold text-gray-800">
                                            {total} €
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div className="flex items-center justify-end gap-3 border-t border-border-hairline px-5 py-3">
                    <button
                        type="button"
                        onClick={onClose}
                        disabled={saving}
                        className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
                    >
                        Odustani
                    </button>
                    <button
                        type="button"
                        onClick={handleSave}
                        disabled={saving}
                        className="rounded-lg bg-blue-600 px-5 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-60"
                    >
                        {saving ? 'Spremam…' : 'Spremi obračun'}
                    </button>
                </div>
            </div>
        </ModalShell>
    );
}