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

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

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

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 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);
        }
    }, [open]);

    useEffect(() => {
        if (!selectedTemplate) return;
        setForm((prev) => ({
            ...prev,
            title: selectedTemplate.title || '',
            description: selectedTemplate.description || '',
            status: 'aktivan',
            work_order: '',
        }));
    }, [selectedTemplate]);

    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,
            };
        } 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,
            };
        }

        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>
                    )}

                    <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">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) => (
                                    <option key={workOrder.id} value={String(workOrder.id)}>
                                        {formatWorkOrderDisplayCode(workOrder)} • {workOrder.craneLabel || workOrder.craneInfo?.registration_number || '-'} • {formatPurposeLabel(workOrder.purpose) || '-'}
                                    </option>
                                ))}
                            </select>
                            {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>
    );
}