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

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

function formatDate(value) {
    if (!value) return '-';
    const parsed = new Date(value);
    if (Number.isNaN(parsed.getTime())) return value;
    return parsed.toLocaleDateString('hr-HR');
}

function formatDateTime(value) {
    if (!value) return '-';
    const parsed = new Date(value);
    if (Number.isNaN(parsed.getTime())) return '-';
    return parsed.toLocaleString('hr-HR');
}

function formatCost(value) {
    const numeric = Number(value);
    if (Number.isNaN(numeric)) return '-';
    return `${numeric.toFixed(2)} EUR`;
}

export default function TaskServiceRecordsModal({
    open,
    task,
    records = [],
    workOrders = [],
    onClose,
    onOpenServiceRecord,
    onAssignWorkOrder,
    onUpdateTask,
    onCreateServiceRecord,
}) {
    const [showWorkOrderEditor, setShowWorkOrderEditor] = useState(false);
    const [selectedWorkOrderId, setSelectedWorkOrderId] = useState('');
    const [assigningWorkOrder, setAssigningWorkOrder] = useState(false);
    const [assignError, setAssignError] = useState('');
    const [showTaskEditor, setShowTaskEditor] = useState(false);
    const [updatingTask, setUpdatingTask] = useState(false);
    const [taskError, setTaskError] = useState('');
    const [taskForm, setTaskForm] = useState({
        title: '',
        description: '',
        status: 'aktivan',
        scheduled_date: '',
    });

    useEffect(() => {
        if (!open || typeof window === 'undefined') return;
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }, [open]);

    useEffect(() => {
        if (!task) return;
        setSelectedWorkOrderId(task.work_order ? String(task.work_order) : '');
        setShowWorkOrderEditor(!task.work_order);
        setAssignError('');
        setAssigningWorkOrder(false);
        setShowTaskEditor(false);
        setTaskError('');
        setUpdatingTask(false);
        setTaskForm({
            title: String(task.title || ''),
            description: String(task.description || ''),
            status: String(task.status || 'aktivan'),
            scheduled_date: String(task.scheduled_date || ''),
        });
    }, [task?.id, task?.work_order]);

    const currentWorkOrder = useMemo(
        () => workOrders.find((item) => String(item.id) === String(task?.work_order || selectedWorkOrderId)) || null,
        [workOrders, task?.work_order, selectedWorkOrderId]
    );

    const sortedWorkOrders = useMemo(
        () => [...workOrders].sort((a, b) => String(b.date || '').localeCompare(String(a.date || ''))),
        [workOrders]
    );

    const effectiveWorkOrderId = task?.work_order ? String(task.work_order) : String(selectedWorkOrderId || '');

    const handleWorkOrderChange = async (event) => {
        const nextValue = String(event.currentTarget.value || '');
        setSelectedWorkOrderId(nextValue);
        setAssignError('');
        setAssigningWorkOrder(true);
        try {
            await onAssignWorkOrder?.(task, nextValue || null);
            setShowWorkOrderEditor(false);
        } catch (error) {
            setAssignError(error?.message || 'Neuspješno spremanje putnog naloga za radni zadatak.');
        } finally {
            setAssigningWorkOrder(false);
        }
    };

    const handleTaskUpdate = async (event) => {
        event.preventDefault();
        const title = String(taskForm.title || '').trim();
        const status = String(taskForm.status || 'aktivan');
        const description = String(taskForm.description || '').trim();
        if (!title) {
            setTaskError('Naslov zadatka je obavezan.');
            return;
        }
        if ((status === 'zavrsen' || status === 'neaktivan') && !effectiveWorkOrderId) {
            setTaskError('Putni nalog je obavezan prije zatvaranja zadatka.');
            return;
        }
        setTaskError('');
        setUpdatingTask(true);
        try {
            await onUpdateTask?.(task, {
                title,
                description,
                status,
                    scheduled_date: taskForm.scheduled_date || null,
                });
            setShowTaskEditor(false);
        } catch (error) {
            const conflictCode = error?.details?.code;
            if (error?.status === 409 && conflictCode === 'OPEN_WORK_ORDER_BLOCKING_TASK_CLOSE') {
                const confirmText = error?.details?.message || error?.message || 'Povezani putni nalog je još otvoren. Želite li ga automatski zatvoriti?';
                const approved = typeof window !== 'undefined' ? window.confirm(confirmText) : false;
                if (approved) {
                    try {
                        await onUpdateTask?.(task, {
                            title,
                            description,
                            status,
                            scheduled_date: taskForm.scheduled_date || null,
                            auto_close_work_order: true,
                        });
                        setShowTaskEditor(false);
                        return;
                    } catch (retryError) {
                        setTaskError(retryError?.message || 'Neuspješno automatsko zatvaranje putnog naloga i završetak zadatka.');
                        return;
                    }
                }
                setTaskError(confirmText);
                return;
            }
            setTaskError(error?.message || 'Neuspješno spremanje izmjena radnog zadatka.');
        } finally {
            setUpdatingTask(false);
        }
    };

    if (!open || !task) return null;

    return (
        <ModalShell
            onClose={onClose}
            overlayClassName="z-50 overflow-y-auto p-4 pt-2"
            contentClassName="flex items-start justify-center min-h-full"
            panelClassName="w-full max-w-4xl rounded-xl border border-border-hairline bg-canvas-elevated shadow-xl max-h-[calc(100vh-6rem)] overflow-hidden"
        >
            <div className="w-full flex flex-col h-full">
                    <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">Radni zadatak detalji</h3>
                            <p className="text-xs text-text-muted">
                                Radni zadatak: {task.title || '-'} • Status: {getStatusLabel(task.status || '-')} • Zapisa: {records.length}
                            </p>
                        </div>
                        <button
                            type="button"
                            onClick={onClose}
                            className="rounded-md px-2 py-1 text-sm text-text-muted hover:bg-canvas-deep"
                            aria-label="Zatvori"
                        >
                            ✕
                        </button>
                    </div>

                    <div className="max-h-[calc(100vh-12rem)] overflow-y-auto p-4">
                        <div className="space-y-4">
                            <div className="rounded-lg border border-border-hairline bg-canvas-base p-3">
                                <div className="mb-2 flex items-center justify-between gap-2">
                                    <h4 className="text-sm font-semibold text-text-main">Podaci radnog zadatka</h4>
                                    {!showTaskEditor ? (
                                        <button
                                            type="button"
                                            onClick={() => {
                                                setTaskError('');
                                                setShowTaskEditor(true);
                                            }}
                                            className="rounded border border-border-hairline px-2 py-1 text-xs text-text-main hover:bg-canvas-base"
                                        >
                                            Izmijeni radni zadatak
                                        </button>
                                    ) : null}
                                </div>
                                {!showTaskEditor ? (
                                    <dl className="grid gap-2 text-sm sm:grid-cols-2">
                                        <div>
                                            <dt className="text-xs text-text-muted">Naslov</dt>
                                            <dd className="text-text-main">{task.title || '-'}</dd>
                                        </div>
                                        <div>
                                            <dt className="text-xs text-text-muted">Status</dt>
                                            <dd className="text-text-main">{getStatusLabel(task.status || '-')}</dd>
                                        </div>
                                        <div>
                                            <dt className="text-xs text-text-muted">Dodijeljeno</dt>
                                            <dd className="text-text-main">{task.assigned_to_name || '-'}</dd>
                                        </div>
                                        <div>
                                            <dt className="text-xs text-text-muted">Dizalica</dt>
                                            <dd className="text-text-main">{task.vehicle_registration || '-'}</dd>
                                        </div>
                                        <div>
                                            <dt className="text-xs text-text-muted">Putni nalog</dt>
                                            <dd className="text-text-main">{task.work_order_label || '-'}</dd>
                                        </div>
                                        <div>
                                            <dt className="text-xs text-text-muted">Planirani datum</dt>
                                            <dd className="text-text-main">{task.scheduled_date ? formatDate(task.scheduled_date) : '-'}</dd>
                                        </div>
                                        <div>
                                            <dt className="text-xs text-text-muted">Vrijeme izrade</dt>
                                            <dd className="text-text-main">{formatDateTime(task.created_at)}</dd>
                                        </div>
                                        <div className="sm:col-span-2">
                                            <dt className="text-xs text-text-muted">Opis</dt>
                                            <dd className="whitespace-pre-wrap text-text-main">{task.description || '-'}</dd>
                                        </div>
                                    </dl>
                                ) : (
                                    <form onSubmit={handleTaskUpdate} className="space-y-3">
                                        <label className="flex flex-col gap-1 text-sm">
                                            <span className="text-xs text-text-muted">Naslov *</span>
                                            <input
                                                type="text"
                                                value={taskForm.title}
                                                onInput={(event) => setTaskForm((prev) => ({ ...prev, title: event.currentTarget.value }))}
                                                disabled={updatingTask}
                                                className="rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-text-main disabled:opacity-60"
                                                required
                                            />
                                        </label>
                                        <label className="flex flex-col gap-1 text-sm">
                                            <span className="text-xs text-text-muted">Opis</span>
                                            <textarea
                                                rows={3}
                                                value={taskForm.description}
                                                onInput={(event) => setTaskForm((prev) => ({ ...prev, description: event.currentTarget.value }))}
                                                disabled={updatingTask}
                                                className="resize-none rounded-lg border border-border-hairline bg-canvas-elevated 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">Status</span>
                                            <select
                                                value={taskForm.status}
                                                onChange={(event) => setTaskForm((prev) => ({ ...prev, status: event.currentTarget.value }))}
                                                disabled={updatingTask}
                                                className="rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-text-main disabled:opacity-60"
                                            >
                                                {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="text-xs text-text-muted">Planirani datum izvršenja</span>
                                            <input
                                                type="date"
                                                value={taskForm.scheduled_date || ''}
                                                onInput={(event) => setTaskForm((prev) => ({ ...prev, scheduled_date: event.currentTarget.value }))}
                                                disabled={updatingTask}
                                                className="rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-text-main disabled:opacity-60"
                                            />
                                        </label>
                                        {taskError ? (
                                            <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                                                {taskError}
                                            </div>
                                        ) : null}
                                        <div className="flex justify-end gap-2">
                                            <button
                                                type="button"
                                                onClick={() => {
                                                    setTaskError('');
                                                    setShowTaskEditor(false);
                                                    setTaskForm({
                                                        title: String(task.title || ''),
                                                        description: String(task.description || ''),
                                                        status: String(task.status || 'aktivan'),
                                                        scheduled_date: String(task.scheduled_date || ''),
                                                    });
                                                }}
                                                disabled={updatingTask}
                                                className="rounded border border-border-hairline px-3 py-1.5 text-xs text-text-main hover:bg-canvas-elevated disabled:opacity-60"
                                            >
                                                Odustani
                                            </button>
                                            <button
                                                type="submit"
                                                disabled={updatingTask}
                                                className="rounded bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
                                            >
                                                {updatingTask ? 'Spremanje...' : 'Spremi izmjene'}
                                            </button>
                                        </div>
                                    </form>
                                )}
                            </div>

                            <div className="rounded-lg border border-border-hairline bg-canvas-base p-3">
                                <h4 className="mb-2 text-sm font-semibold text-text-main">Putni nalozi</h4>
                                {currentWorkOrder && !showWorkOrderEditor ? (
                                    <div className="flex flex-wrap items-center justify-between gap-2 rounded border border-border-hairline bg-canvas-elevated px-3 py-2">
                                        <p className="text-sm text-text-main">
                                            {formatWorkOrderDisplayCode(currentWorkOrder)} • {currentWorkOrder.craneLabel || currentWorkOrder.craneInfo?.registration_number || '-'} • {currentWorkOrder.status || '-'}
                                        </p>
                                        <button
                                            type="button"
                                            onClick={() => setShowWorkOrderEditor(true)}
                                            className="rounded border border-border-hairline px-2 py-1 text-xs text-text-main hover:bg-canvas-base"
                                        >
                                            Izmijeni putni nalog
                                        </button>
                                    </div>
                                ) : (
                                    <div className="space-y-2">
                                        <select
                                            value={selectedWorkOrderId}
                                            onChange={handleWorkOrderChange}
                                            disabled={assigningWorkOrder}
                                            className="w-full rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-sm text-text-main disabled:opacity-60"
                                        >
                                            <option value="">— Odaberi putni nalog —</option>
                                            {sortedWorkOrders.map((workOrder) => (
                                                <option key={workOrder.id} value={String(workOrder.id)}>
                                                    {formatWorkOrderDisplayCode(workOrder)} • {workOrder.craneLabel || workOrder.craneInfo?.registration_number || '-'} • {workOrder.status || '-'}
                                                </option>
                                            ))}
                                        </select>
                                        <p className="text-xs text-text-muted">
                                            {assigningWorkOrder ? 'Spremanje odabira putnog naloga...' : 'Odabir se automatski sprema u bazu.'}
                                        </p>
                                    </div>
                                )}
                                {assignError && (
                                    <div className="mt-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                                        {assignError}
                                    </div>
                                )}
                            </div>

                            <div className="rounded-lg border border-border-hairline bg-canvas-base p-3">
                                <div className="mb-2 flex items-center justify-between gap-2">
                                    <h4 className="text-sm font-semibold text-text-main">Povezani servisni zapisi</h4>
                                    <button
                                        type="button"
                                        onClick={() => onCreateServiceRecord?.(task)}
                                        className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-emerald-700"
                                    >
                                        + Servisni zapis
                                    </button>
                                </div>
                                {records.length === 0 ? (
                                    <div className="rounded-lg border border-border-hairline bg-canvas-elevated px-4 py-3 text-sm text-text-muted">
                                        Nema povezanih servisnih zapisa za odabrani radni zadatak.
                                    </div>
                                ) : (
                                    <div className="overflow-hidden rounded-lg border border-border-hairline">
                                        <table className="w-full table-auto text-sm">
                                            <thead className="bg-canvas-base text-left text-text-muted">
                                                <tr>
                                                    <th className="px-3 py-2">Datum</th>
                                                    <th className="px-3 py-2">Opis</th>
                                                    <th className="px-3 py-2">Trošak</th>
                                                    <th className="px-3 py-2">Datoteke</th>
                                                    <th className="px-3 py-2">Akcija</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {records.map((record) => (
                                                    <tr key={record.id} className="border-t border-border-hairline">
                                                        <td className="px-3 py-2">{formatDate(record.service_date)}</td>
                                                        <td className="max-w-[420px] truncate px-3 py-2" title={record.description || ''}>
                                                            {record.description || '-'}
                                                        </td>
                                                        <td className="px-3 py-2">{formatCost(record.cost)}</td>
                                                        <td className="px-3 py-2">{record.files_count ?? (record.photos_count ?? 0)}</td>
                                                        <td className="px-3 py-2">
                                                            <button
                                                                type="button"
                                                                onClick={() => onOpenServiceRecord?.(record)}
                                                                className="rounded border border-border-hairline px-2 py-1 text-xs text-text-main hover:bg-canvas-base"
                                                            >
                                                                Detalji
                                                            </button>
                                                        </td>
                                                    </tr>
                                                ))}
                                            </tbody>
                                        </table>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </ModalShell>
    );
}