'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback } from 'react';
import { Clock, Plus, Trash2 } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
import { Button } from '../../ui/button.js';
import { Input } from '../../ui/input.js';
import { logTimeEntry, deleteTimeEntry } from '../../../app/actions/manage-time-entries.js';
function formatDuration(minutes) {
    if (minutes < 60)
        return `${String(minutes)}m`;
    const h = Math.floor(minutes / 60);
    const m = minutes % 60;
    return m > 0 ? `${String(h)}h ${String(m)}m` : `${String(h)}h`;
}
function formatDate(date) {
    const d = typeof date === 'string' ? new Date(date) : date;
    return d.toLocaleDateString(undefined, {
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
    });
}
export function TimeEntryList({ workItemId, timeEntries: initialEntries, totalMinutes: initialTotal, className, }) {
    const [entries, setEntries] = useState(initialEntries);
    const [totalMinutes, setTotalMinutes] = useState(initialTotal);
    const [showForm, setShowForm] = useState(false);
    const [hours, setHours] = useState('');
    const [minutes, setMinutes] = useState('');
    const [note, setNote] = useState('');
    const [saving, setSaving] = useState(false);
    const handleSubmit = useCallback(async (e) => {
        e.preventDefault();
        const h = parseInt(hours, 10) || 0;
        const m = parseInt(minutes, 10) || 0;
        const total = h * 60 + m;
        if (total <= 0)
            return;
        setSaving(true);
        try {
            const result = await logTimeEntry(workItemId, total, note || undefined);
            if (result.timeEntry) {
                setEntries((prev) => [result.timeEntry, ...prev]);
                setTotalMinutes((prev) => prev + total);
                setHours('');
                setMinutes('');
                setNote('');
                setShowForm(false);
            }
        }
        finally {
            setSaving(false);
        }
    }, [workItemId, hours, minutes, note]);
    const handleDelete = useCallback(async (entryId, duration) => {
        const result = await deleteTimeEntry(entryId);
        if (!result.error) {
            setEntries((prev) => prev.filter((e) => e.id !== entryId));
            setTotalMinutes((prev) => prev - duration);
        }
    }, []);
    return (_jsxs("div", { "data-testid": "time-entry-list", className: cn('space-y-3', className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Clock, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("span", { className: "text-xs font-medium", children: "Time Logged" }), totalMinutes > 0 ? (_jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", formatDuration(totalMinutes), " total)"] })) : null] }), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-6 gap-1 text-xs", onClick: () => setShowForm(!showForm), "data-testid": "log-time-btn", children: [_jsx(Plus, { className: "h-3 w-3" }), "Log Time"] })] }), showForm ? (_jsxs("form", { onSubmit: handleSubmit, className: "bg-muted/50 space-y-2 rounded-md border p-2", "data-testid": "log-time-form", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { type: "number", min: "0", placeholder: "0", value: hours, onChange: (e) => setHours(e.target.value), className: "h-7 w-14 text-xs", "data-testid": "hours-input" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "h" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { type: "number", min: "0", max: "59", placeholder: "0", value: minutes, onChange: (e) => setMinutes(e.target.value), className: "h-7 w-14 text-xs", "data-testid": "minutes-input" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "m" })] })] }), _jsx(Input, { placeholder: "Note (optional)", value: note, onChange: (e) => setNote(e.target.value), className: "h-7 text-xs", "data-testid": "note-input" }), _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 text-xs", onClick: () => setShowForm(false), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", className: "h-6 text-xs", disabled: saving, "data-testid": "save-time-btn", children: saving ? 'Saving...' : 'Save' })] })] })) : null, entries.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-[10px]", children: "No time logged" })) : (_jsx("div", { className: "space-y-1", children: entries.map((entry) => (_jsxs("div", { "data-testid": `time-entry-${entry.id}`, className: "group hover:bg-accent/50 flex items-center gap-2 rounded-sm px-2 py-1 text-xs", children: [_jsx(Clock, { className: "text-muted-foreground h-3 w-3 shrink-0" }), _jsx("span", { className: "font-medium", children: formatDuration(entry.durationMinutes) }), entry.note ? (_jsx("span", { className: "text-muted-foreground flex-1 truncate", children: entry.note })) : (_jsx("span", { className: "flex-1" })), _jsx("span", { className: "text-muted-foreground text-[10px]", children: formatDate(entry.loggedAt) }), _jsx("div", { className: "hidden group-hover:flex", children: _jsx(Button, { variant: "ghost", size: "sm", className: "text-destructive h-5 w-5 p-0", onClick: () => handleDelete(entry.id, entry.durationMinutes), title: "Delete", children: _jsx(Trash2, { className: "h-3 w-3" }) }) })] }, entry.id))) }))] }));
}
