import { useEffect, useMemo, useState } from 'preact/hooks';
import { createTask, fetchTaskTemplates, getStatusLabel } from '../../stores/taskStore';
import { formatPurposeLabel, formatWorkOrderDisplayCode } from '../../lib/displayIds';
import ModalShell from '../ui/ModalShell';
import { updateVehicle } from '../../stores/fleetDashboardStore';

const STATUS_OPTIONS = ['aktivan', 'servis', 'zavrsen', 'neaktivan'];

const INITIAL_FORM = {
    title: '',
    description: '',
    status: 'aktivan',
    work_order: '',
    scheduled_date: '',
};

function todayIso() {
    return new Date().toISOString().slice(0, 10);
}

function formatWODate(dateStr) {
    if (!dateStr) return '';
    const d = new Date(dateStr);
    if (Number.isNaN(d.getTime())) return '';
    return d.toLocaleDateString('hr-HR');
}

export default function TaskCreateModal({ open, workOrders = [], contextCrane = null, onClose, onSuccess }) {
    const [form, setForm] = useState(INITIAL_FORM);
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState('');
    const [templateMode, setTemplateMode] = useState(false);
    const [templateLoading, setTemplateLoading] = useState(false);
    const [templateId, setTemplateId] = useState('');
    const [templates, setTemplates] = useState([]);
    const [craneDataModalOpen, setCraneDataModalOpen] = useState(false);
    const [craneDataForm, setCraneDataForm] = useState({ superstructure_working_hours: '', chassis_working_hours: '', current_mileage: '' });
    const [savingCraneData, setSavingCraneData] = useState(false);
    const [craneDataError, setCraneDataError] = useState('');

    const selectedTemplate = useMemo(
        () => templates.find((template) => String(template.id) === String(templateId)) || null,
        [templates, templateId]
    );
    const availableWorkOrders = useMemo(
        () => workOrders.filter((workOrder) => String(workOrder?.status || '').toLowerCase() !== 'closed'),
        [workOrders]
    );

    useEffect(() => {
        if (!open) {
            setForm(INITIAL_FORM);
            setSubmitting(false);
            setError('');
            setTemplateMode(false);
            setTemplateId('');
            setTemplates([]);
            setTemplateLoading(false);
            setCraneDataModalOpen(false);
            setCraneDataForm({ superstructure_working_hours: '', chassis_working_hours: '', current_mileage: '' });
            setSavingCraneData(false);
            setCraneDataError('');
            return;
        }
        // Auto-pre-select today's open work order if exactly one exists for this crane
        const today = todayIso();
        const todayOpen = workOrders.filter(
            (wo) => String(wo?.status || '').toLowerCase() !== 'closed'
                && String(wo?.date || '').slice(0, 10) === today
        );
        if (todayOpen.length === 1) {
            setForm((prev) => ({ ...prev, work_order: String(todayOpen[0].id) }));
        }
    }, [open]); // eslint-disable-line react-hooks/exhaustive-deps

    useEffect(() => {
        if (!selectedTemplate) return;
        setForm((prev) => ({
            ...prev,
            title: selectedTemplate.title || '',
            description: selectedTemplate.description || '',
            status: 'aktivan',
            work_order: '',
            // scheduled_date is kept so user can set it in template mode too
        }));
    }, [selectedTemplate]);

    function openCraneDataModal() {
        if (!contextCrane?.id) {
            setCraneDataError('Dizalica nije odabrana u servisnom kontekstu.');
            return;
        }
        setCraneDataForm({
            superstructure_working_hours: String(contextCrane?.superstructure_working_hours ?? ''),
            chassis_working_hours: String(contextCrane?.chassis_working_hours ?? ''),
            current_mileage: String(contextCrane?.current_mileage ?? ''),
        });
        setCraneDataError('');
        setCraneDataModalOpen(true);
    }

    async function handleSaveCraneData() {
        if (!contextCrane?.id) {
            setCraneDataError('Dizalica nije odabrana u servisnom kontekstu.');
            return;
        }
        const superstructure = craneDataForm.superstructure_working_hours === '' ? undefined : Number(craneDataForm.superstructure_working_hours);
        const chassis = craneDataForm.chassis_working_hours === '' ? undefined : Number(craneDataForm.chassis_working_hours);
        const mileage = craneDataForm.current_mileage === '' ? undefined : Number(craneDataForm.current_mileage);
        if (superstructure !== undefined && (Number.isNaN(superstructure) || superstructure < 0)) {
            setCraneDataError('Radni sati nadogradnje moraju biti pozitivan broj.');
            return;
        }
        if (chassis !== undefined && (Number.isNaN(chassis) || chassis < 0)) {
            setCraneDataError('Radni sati podvozja moraju biti pozitivan broj.');
            return;
        }
        if (mileage !== undefined && (Number.isNaN(mileage) || mileage < 0)) {
            setCraneDataError('Kilometraza mora biti pozitivan broj.');
            return;
        }
        const payload = {};
        if (superstructure !== undefined) payload.superstructure_working_hours = superstructure;
        if (chassis !== undefined) payload.chassis_working_hours = chassis;
        if (mileage !== undefined) payload.current_mileage = mileage;
        if (Object.keys(payload).length === 0) {
            setCraneDataError('Unesite barem jednu vrijednost za azuriranje.');
            return;
        }
        setSavingCraneData(true);
        setCraneDataError('');
        try {
            await updateVehicle(contextCrane.id, payload);
            setCraneDataModalOpen(false);
        } catch (err) {
            setCraneDataError(err?.message || 'Azuriranje podataka dizalice nije uspjelo.');
        } finally {
            setSavingCraneData(false);
        }
    }

    if (!open) return null;

    function setField(name, value) {
        setForm((prev) => ({ ...prev, [name]: value }));
    }

    async function enableTemplateMode() {
        if (templateMode) {
            setTemplateMode(false);
            setTemplateId('');
            setForm(INITIAL_FORM);
            return;
        }
        setError('');
        setTemplateLoading(true);
        try {
            const fetched = await fetchTaskTemplates();
            setTemplates(fetched);
            setTemplateMode(true);
        } catch (err) {
            setError(err?.message || 'Neuspješno učitavanje templatea.');
        } finally {
            setTemplateLoading(false);
        }
    }

    async function submit(event) {
        event.preventDefault();
        setError('');

        if (!contextCrane?.id) {
            setError('Odaberite dizalicu u Servisnom kontekstu prije kreiranja zadatka.');
            return;
        }

        let payload;
        if (templateMode) {
            if (!templateId) {
                setError('Odaberite template za unos zadatka.');
                return;
            }
            payload = {
                template_id: templateId,
                vehicle: contextCrane.id,
                work_order: null,
                scheduled_date: form.scheduled_date || null,
            };
        } else {
            const title = String(form.title || '').trim();
            if (!title) {
                setError('Naslov zadatka je obavezan.');
                return;
            }
            if ((form.status === 'neaktivan' || form.status === 'zavrsen') && !form.work_order) {
                setError('Putni nalog je obavezan prije zatvaranja zadatka.');
                return;
            }
            payload = {
                title,
                description: String(form.description || '').trim(),
                status: form.status || 'aktivan',
                vehicle: contextCrane.id,
                work_order: form.work_order || null,
                scheduled_date: form.scheduled_date || null,
            };
        }

        setSubmitting(true);
        try {
            await createTask(payload);
            await onSuccess?.();
            onClose?.();
        } catch (err) {
            setError(err?.message || 'Neuspješno kreiranje zadatka.');
        } finally {
            setSubmitting(false);
        }
    }

    return (
        <>
        <ModalShell
            onClose={onClose}
            overlayClassName="z-50 overflow-y-auto p-4 pt-20"
            contentClassName="flex items-start justify-center min-h-full"
            panelClassName="w-full max-w-2xl rounded-xl border border-border-hairline bg-canvas-elevated shadow-xl overflow-hidden max-h-[calc(100vh-2rem)]"
        >
            <div className="w-full flex flex-col">
                <div className="flex items-center justify-between border-b border-border-hairline px-5 py-4">
                    <div>
                        <h3 className="text-lg font-semibold text-text-main">Novi radni zadatak</h3>
                        <p className="text-xs text-text-muted">
                            Kontekst dizalice: {contextCrane?.registration_number || 'Nije odabrana'}
                        </p>
                    </div>
                    <div className="flex items-center gap-2">
                        <button
                            type="button"
                            onClick={enableTemplateMode}
                            disabled={templateLoading || submitting}
                            className="rounded-md border border-border-hairline px-3 py-1 text-xs font-medium text-text-main hover:bg-canvas-deep disabled:opacity-60"
                        >
                            {templateMode ? 'Ručni unos' : 'Unos iz templatea'}
                        </button>
                        <button
                            type="button"
                            onClick={onClose}
                            className="rounded-md px-2 py-1 text-sm text-text-muted hover:bg-canvas-deep"
                            aria-label="Zatvori modal"
                        >
                            ✕
                        </button>
                    </div>
                </div>

                <form onSubmit={submit} className="max-h-[calc(100vh-8rem)] space-y-4 overflow-y-auto px-5 py-4">
                    {templateMode && (
                        <label className="flex flex-col gap-1 text-sm">
                            <span className="font-medium text-text-main">Template zadatka *</span>
                            <select
                                value={templateId}
                                onChange={(event) => setTemplateId(event.currentTarget.value)}
                                disabled={submitting || templateLoading}
                                className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
                            >
                                <option value="">— Odaberite template —</option>
                                {templates.map((template) => (
                                    <option key={template.id} value={String(template.id)}>
                                        {template.title}
                                    </option>
                                ))}
                            </select>
                            {selectedTemplate && (
                                <span className="text-[11px] text-text-muted">
                                    Generirat će se do 10 servisnih zapisa iz predloška (vidljivo u tablici Servisni zapisi).
                                </span>
                            )}
                        </label>
                    )}

                    {contextCrane && (
                        <div className="rounded-lg border border-border-hairline bg-canvas-base p-3">
                            <div className="flex items-start justify-between gap-3">
                                <div>
                                    <p className="text-sm font-semibold text-text-main">Podaci odabrane dizalice</p>
                                    <p className="text-xs text-text-muted">{contextCrane.registration_number || '-'} / {contextCrane.make || '-'} {contextCrane.model || ''}</p>
                                </div>
                                <button
                                    type="button"
                                    onClick={openCraneDataModal}
                                    disabled={submitting}
                                    className="rounded border border-border-hairline px-3 py-1 text-xs font-semibold text-text-main hover:bg-canvas-deep disabled:opacity-60"
                                >
                                    Uredi podatke dizalice
                                </button>
                            </div>
                            <dl className="mt-3 grid gap-2 text-sm sm:grid-cols-3">
                                <div>
                                    <dt className="text-xs text-text-muted">Radni sati nadogradnje</dt>
                                    <dd className="text-text-main">{contextCrane.superstructure_working_hours ?? '-'}</dd>
                                </div>
                                <div>
                                    <dt className="text-xs text-text-muted">Radni sati podvozja</dt>
                                    <dd className="text-text-main">{contextCrane.chassis_working_hours ?? '-'}</dd>
                                </div>
                                <div>
                                    <dt className="text-xs text-text-muted">Kilometraza</dt>
                                    <dd className="text-text-main">{contextCrane.current_mileage ?? '-'}</dd>
                                </div>
                            </dl>
                        </div>
                    )}

                    <label className="flex flex-col gap-1 text-sm">
                        <span className="font-medium text-text-main">Naslov zadatka *</span>
                        <input
                            type="text"
                            value={form.title}
                            onInput={(event) => setField('title', event.currentTarget.value)}
                            disabled={submitting || templateMode}
                            className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
                            required={!templateMode}
                        />
                    </label>

                    <label className="flex flex-col gap-1 text-sm">
                        <span className="font-medium text-text-main">Opis</span>
                        <textarea
                            rows={3}
                            value={form.description}
                            onInput={(event) => setField('description', event.currentTarget.value)}
                            disabled={submitting || templateMode}
                            className="resize-none rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
                        />
                    </label>

                    <div className="grid gap-4 sm:grid-cols-2">
                        <label className="flex flex-col gap-1 text-sm">
                            <span className="font-medium text-text-main">Status</span>
                            <select
                                value={form.status}
                                onChange={(event) => setField('status', event.currentTarget.value)}
                                disabled={submitting || templateMode}
                                className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
                            >
                                {STATUS_OPTIONS.map((status) => (
                                    <option key={status} value={status}>
                                        {getStatusLabel(status)}
                                    </option>
                                ))}
                            </select>
                        </label>

                        <label className="flex flex-col gap-1 text-sm">
                            <span className="font-medium text-text-main">Planirani datum izvršenja</span>
                            <input
                                type="date"
                                value={form.scheduled_date}
                                onInput={(event) => setField('scheduled_date', event.currentTarget.value)}
                                disabled={submitting}
                                className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
                            />
                        </label>

                        <label className="flex flex-col gap-1 text-sm sm:col-span-2">
                            <span className="font-medium text-text-main">Povezani putni nalog</span>
                            <select
                                value={form.work_order}
                                onChange={(event) => setField('work_order', event.currentTarget.value)}
                                disabled={submitting || templateMode}
                                className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
                            >
                                <option value="">— Bez povezanog naloga —</option>
                                {availableWorkOrders.map((workOrder) => {
                                    const isToday = String(workOrder.date || '').slice(0, 10) === todayIso();
                                    return (
                                        <option key={workOrder.id} value={String(workOrder.id)}>
                                            {isToday ? '★ ' : ''}{formatWorkOrderDisplayCode(workOrder)} • {formatWODate(workOrder.date)} • {workOrder.craneLabel || workOrder.craneInfo?.registration_number || '-'} • {formatPurposeLabel(workOrder.purpose) || '-'}
                                        </option>
                                    );
                                })}
                            </select>
                            <span className="text-[11px] text-text-muted">
                                Više zadataka može dijeliti isti putni nalog. Danas kreiran nalog označen je s ★.
                            </span>
                            {templateMode && (
                                <span className="text-[11px] text-text-muted">
                                    Kod template unosa nalog nije obavezan i backend ga neće automatski povezati.
                                </span>
                            )}
                            {availableWorkOrders.length === 0 && (
                                <span className="text-[11px] text-amber-600">
                                    Nema dostupnih naloga za odabranu dizalicu.
                                </span>
                            )}
                        </label>
                    </div>

                    {error && (
                        <div className="rounded-lg border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">
                            {error}
                        </div>
                    )}

                    <div className="flex justify-end gap-2 pt-1">
                        <button
                            type="button"
                            onClick={onClose}
                            className="rounded-lg border border-border-hairline px-4 py-2 text-sm font-medium text-text-main hover:bg-canvas-deep"
                            disabled={submitting}
                        >
                            Odustani
                        </button>
                        <button
                            type="submit"
                            className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
                            disabled={submitting || templateLoading}
                        >
                            {submitting ? 'Spremanje...' : 'Kreiraj radni zadatak'}
                        </button>
                    </div>
                </form>
            </div>
        </ModalShell>

            {craneDataModalOpen && (
                <ModalShell
                    onClose={() => setCraneDataModalOpen(false)}
                    overlayClassName="z-[60] bg-black/40 p-4"
                    contentClassName="flex min-h-full items-center justify-center"
                    panelClassName="w-full max-w-lg rounded-xl border border-border-hairline bg-canvas-elevated shadow-2xl"
                >
                    <div className="space-y-4 p-4">
                        <div>
                            <h4 className="text-base font-semibold text-text-main">Izmijeni podatke dizalice</h4>
                            <p className="mt-1 text-sm text-text-muted">
                                Azurirajte radne sate i kilometrazu za dizalicu: <strong>{contextCrane?.registration_number || "-"}</strong>
                            </p>
                        </div>
                        <label className="flex flex-col gap-1 text-sm">
                            <span className="text-xs text-text-muted">Radni sati nadogradnje</span>
                            <input
                                type="number"
                                min="0"
                                step="0.01"
                                value={craneDataForm.superstructure_working_hours}
                                onInput={(event) => setCraneDataForm((prev) => ({ ...prev, superstructure_working_hours: event.currentTarget.value }))}
                                disabled={savingCraneData}
                                className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-60"
                            />
                        </label>
                        <label className="flex flex-col gap-1 text-sm">
                            <span className="text-xs text-text-muted">Radni sati podvozja</span>
                            <input
                                type="number"
                                min="0"
                                step="0.01"
                                value={craneDataForm.chassis_working_hours}
                                onInput={(event) => setCraneDataForm((prev) => ({ ...prev, chassis_working_hours: event.currentTarget.value }))}
                                disabled={savingCraneData}
                                className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-60"
                            />
                        </label>
                        <label className="flex flex-col gap-1 text-sm">
                            <span className="text-xs text-text-muted">Kilometraza (km)</span>
                            <input
                                type="number"
                                min="0"
                                step="1"
                                value={craneDataForm.current_mileage}
                                onInput={(event) => setCraneDataForm((prev) => ({ ...prev, current_mileage: event.currentTarget.value }))}
                                disabled={savingCraneData}
                                className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-60"
                            />
                        </label>
                        {craneDataError && (
                            <div className="rounded-lg border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">
                                {craneDataError}
                            </div>
                        )}
                        <div className="flex justify-end gap-2">
                            <button
                                type="button"
                                onClick={() => setCraneDataModalOpen(false)}
                                disabled={savingCraneData}
                                className="rounded-lg border border-border-hairline px-4 py-2 text-sm font-medium text-text-main hover:bg-canvas-deep disabled:opacity-60"
                            >
                                Odustani
                            </button>
                            <button
                                type="button"
                                onClick={handleSaveCraneData}
                                disabled={savingCraneData}
                                className="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:opacity-60"
                            >
                                {savingCraneData ? "Spremanje..." : "Spremi podatke"}
                            </button>
                        </div>
                    </div>
                </ModalShell>
            )}
        </>
    );
}