@php
    $fmtDuration = function (?int $seconds): string {
        $seconds = max(0, (int) $seconds);
        $h = intdiv($seconds, 3600);
        $m = intdiv($seconds % 3600, 60);
        $s = $seconds % 60;

        return sprintf('%02d:%02d:%02d', $h, $m, $s);
    };
@endphp

<div class="rounded-2xl border border-slate-200 bg-white shadow-sm">
    <!-- Header -->
    <div class="flex flex-col gap-2 border-b border-slate-100 p-6 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="text-lg font-semibold text-slate-900">{{ __('Time Tracking') }}</h2>
            <p class="mt-1 text-sm text-slate-500">{{ __('Track time across everyone working on this job.') }}</p>
        </div>
        <div class="flex items-center gap-4">
            @if ($canManage)
                <button
                    type="button"
                    wire:click="addManual"
                    class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium text-slate-600 shadow-sm transition hover:bg-slate-50 hover:text-slate-800"
                >
                    <x-icon name="plus" class="h-4 w-4" />
                    {{ __('Add manual time') }}
                </button>
            @endif
            <div class="text-right">
                <p class="text-xs uppercase tracking-wide text-slate-400">{{ __('Total logged') }}</p>
                <p class="text-2xl font-bold text-indigo-600">{{ number_format($totalHours, 2) }}<span class="ml-1 text-sm font-medium text-slate-400">{{ __('hrs') }}</span></p>
            </div>
        </div>
    </div>

    {{-- Where the job's time went. The single total above answers "how long
         has this taken"; on a job making several things, this answers the
         question that decides what to quote next time. --}}
    @if (count($byProduct) > 1)
        <div class="border-b border-slate-100 px-6 py-4">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Where the time went') }}</p>
            <div class="mt-2 flex flex-wrap gap-2">
                @foreach ($byProduct as $row)
                    <span class="inline-flex items-center gap-2 rounded-lg bg-slate-50 px-2.5 py-1.5 text-xs text-slate-600 ring-1 ring-slate-200">
                        {{ $row['label'] }}
                        <span class="font-semibold tabular-nums text-slate-900">{{ number_format($row['hours'], 2) }} h</span>
                    </span>
                @endforeach
            </div>
        </div>
    @endif

    <!-- Start / Stop control for the current user -->
    <div class="border-b border-slate-100 p-6">
        @if ($active)
            <div
                class="flex flex-col gap-4 rounded-xl bg-emerald-50 p-4 ring-1 ring-emerald-200 sm:flex-row sm:items-center sm:justify-between"
                x-data="{
                    start: {{ $active->started_at->timestamp }},
                    now: Math.floor(Date.now() / 1000),
                    label: '00:00:00',
                    tick() {
                        let s = Math.max(0, this.now - this.start);
                        let h = String(Math.floor(s / 3600)).padStart(2, '0');
                        let m = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
                        let sec = String(s % 60).padStart(2, '0');
                        this.label = `${h}:${m}:${sec}`;
                    },
                }"
                x-init="tick(); setInterval(() => { now = Math.floor(Date.now() / 1000); tick(); }, 1000)"
            >
                <div class="flex items-center gap-3">
                    <span class="relative flex h-3 w-3">
                        <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
                        <span class="relative inline-flex h-3 w-3 rounded-full bg-emerald-500"></span>
                    </span>
                    <div>
                        <p class="text-sm font-medium text-emerald-800">
                            {{ __('Timer running') }}, <span class="capitalize">{{ $active->activity }}</span>
                            @unless ($active->is_billable)
                                <span class="ml-1 text-xs font-normal text-emerald-600">({{ __('non-billable') }})</span>
                            @endunless
                        </p>
                        <p class="font-mono text-2xl font-bold tabular-nums text-emerald-700" x-text="label">00:00:00</p>
                    </div>
                </div>
                <button
                    type="button"
                    wire:click="stop"
                    wire:loading.attr="disabled"
                    class="inline-flex items-center justify-center gap-2 rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2"
                >
                    <x-icon name="stop" class="h-5 w-5" />
                    {{ __('Stop') }}
                </button>
            </div>
        @else
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-12 sm:items-end">
                {{-- What the hour is for. On a job making several things, "four
                     hours on the job" never says whether the banner took forty
                     minutes and the wrap took the rest. --}}
                @if (count($workTargets) > 0)
                    <div class="sm:col-span-12">
                        <x-label for="work-target" value="{{ __('What are you working on?') }}" />
                        <select id="work-target" wire:model="workTarget" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('The job as a whole') }}</option>
                            @foreach ($workTargets as $option)
                                <option value="{{ $option['key'] }}">{{ $option['label'] }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-400">{{ __('Time named here becomes that product’s labour. Left on the job, it is shared across the job’s products.') }}</p>
                    </div>
                @endif

                <div class="sm:col-span-4">
                    <x-label for="activity" value="{{ __('Activity') }}" />
                    <select id="activity" wire:model="activity" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($activities as $a)
                            <option value="{{ $a }}">{{ ucfirst($a) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="sm:col-span-3">
                    <x-label for="hourly_rate" value="{{ __('Hourly rate') }}" />
                    <x-input id="hourly_rate" type="number" step="0.01" min="0" placeholder="{{ __('optional') }}" class="mt-1 block w-full text-sm" wire:model="hourly_rate" />
                </div>
                <div class="sm:col-span-3">
                    <label class="mt-1 inline-flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" wire:model="is_billable" class="rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                        {{ __('Billable') }}
                    </label>
                </div>
                <div class="sm:col-span-2">
                    <button
                        type="button"
                        wire:click="start"
                        wire:loading.attr="disabled"
                        class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:from-indigo-700 hover:to-violet-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                    >
                        <x-icon name="play" class="h-5 w-5" />
                        {{ __('Start') }}
                    </button>
                </div>
                <div class="sm:col-span-12">
                    <x-input type="text" placeholder="{{ __('Notes (optional)') }}" class="block w-full text-sm" wire:model="notes" />
                </div>
            </div>
        @endif
    </div>

    <!-- All entries (every team user) -->
    <div class="hidden overflow-x-auto sm:block">
        <table class="min-w-full divide-y divide-slate-100">
            <thead>
                <tr class="bg-slate-50/80">
                    <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Member') }}</th>
                    <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Activity') }}</th>
                    <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('On') }}</th>
                    <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Started') }}</th>
                    <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Ended') }}</th>
                    <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Duration') }}</th>
                    <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Billable') }}</th>
                    <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($entries as $entry)
                    <tr wire:key="entry-{{ $entry->id }}" class="transition-colors hover:bg-slate-50/70">
                        <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">
                            {{ $entry->user?->name ?: '—' }}
                            @if ($entry->user_id === $currentUserId)
                                <span class="ml-1 text-xs font-normal text-slate-400">({{ __('you') }})</span>
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm capitalize text-slate-600">{{ $entry->activity }}</td>
                        <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                            @if ($entry->productPart)
                                <span class="font-medium">{{ $entry->productPart->label }}</span>
                                <span class="block text-xs text-slate-400">{{ $entry->lineItem?->name }}</span>
                            @elseif ($entry->lineItem)
                                <span class="font-medium">{{ $entry->lineItem->name }}</span>
                            @else
                                <span class="text-slate-400">{{ __('Whole job') }}</span>
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ optional($entry->started_at)->format('Y-m-d H:i') }}</td>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                            @if ($entry->ended_at)
                                {{ $entry->ended_at->format('Y-m-d H:i') }}
                            @else
                                <x-badge color="emerald">{{ __('Running') }}</x-badge>
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right font-mono text-sm tabular-nums text-slate-700">
                            @if ($entry->ended_at)
                                {{ $fmtDuration($entry->duration_seconds) }}
                            @else
                                <span class="text-slate-400">—</span>
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                            @if ($entry->is_billable)
                                <x-badge color="indigo">{{ __('Billable') }}</x-badge>
                            @else
                                <x-badge color="slate">{{ __('No') }}</x-badge>
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                            @if ($canManage || $entry->user_id === $currentUserId)
                                <div class="flex items-center justify-end gap-3">
                                    @if ($entry->ended_at)
                                        <button wire:click="editEntry({{ $entry->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                    @endif
                                    <button
                                        wire:click="deleteEntry({{ $entry->id }})"
                                        wire:confirm="{{ __('Delete this time entry?') }}"
                                        class="text-rose-600 transition hover:text-rose-700"
                                    >{{ __('Delete') }}</button>
                                </div>
                            @else
                                <span class="text-slate-300">—</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-3 lg:px-4 py-10 text-center text-sm text-slate-500">{{ __('No time logged on this job yet.') }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Entries (mobile) -->
    <div class="divide-y divide-slate-100 sm:hidden">
        @forelse ($entries as $entry)
            <div wire:key="entry-mobile-{{ $entry->id }}" class="p-4">
                <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <p class="text-sm font-medium text-slate-900">
                            {{ $entry->user?->name ?: '—' }}
                            @if ($entry->user_id === $currentUserId)
                                <span class="text-xs font-normal text-slate-400">({{ __('you') }})</span>
                            @endif
                        </p>
                        <p class="text-sm capitalize text-slate-500">{{ $entry->activity }}</p>
                        <p class="text-xs text-slate-500">
                            @if ($entry->productPart)
                                {{ $entry->lineItem?->name }} · <span class="font-medium">{{ $entry->productPart->label }}</span>
                            @elseif ($entry->lineItem)
                                <span class="font-medium">{{ $entry->lineItem->name }}</span>
                            @else
                                <span class="text-slate-400">{{ __('Whole job') }}</span>
                            @endif
                        </p>
                        <p class="mt-1 text-xs text-slate-500">{{ optional($entry->started_at)->format('Y-m-d H:i') }}
                            @if ($entry->ended_at) &rarr; {{ $entry->ended_at->format('H:i') }} @endif
                        </p>
                        <p class="mt-1.5 flex items-center gap-2">
                            @if ($entry->ended_at)
                                <span class="font-mono text-sm font-medium tabular-nums text-slate-700">{{ $fmtDuration($entry->duration_seconds) }}</span>
                            @else
                                <x-badge color="emerald">{{ __('Running') }}</x-badge>
                            @endif
                            @if ($entry->is_billable)
                                <x-badge color="indigo">{{ __('Billable') }}</x-badge>
                            @endif
                        </p>
                    </div>
                    @if ($canManage || $entry->user_id === $currentUserId)
                        <div class="flex shrink-0 flex-col items-end gap-2 text-sm font-medium">
                            @if ($entry->ended_at)
                                <button wire:click="editEntry({{ $entry->id }})" class="text-indigo-600">{{ __('Edit') }}</button>
                            @endif
                            <button
                                wire:click="deleteEntry({{ $entry->id }})"
                                wire:confirm="{{ __('Delete this time entry?') }}"
                                class="text-rose-600"
                            >{{ __('Delete') }}</button>
                        </div>
                    @endif
                </div>
            </div>
        @empty
            <div class="p-6 text-center text-sm text-slate-500">{{ __('No time logged on this job yet.') }}</div>
        @endforelse
    </div>

    <!-- Concurrency confirmation modal -->
    <x-dialog-modal wire:model.live="showConflictModal" maxWidth="md">
        <x-slot name="title">
            {{ __('Timer already running') }}
        </x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-600">
                {{ __('You have a timer running on') }}
                <span class="font-semibold text-slate-900">{{ $conflictJobTitle }}</span>.
                {{ __('Keep it running, or stop it and start this one?') }}
            </p>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeConflictModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>
            <x-secondary-button class="ms-3" wire:click="keepBothAndStart" wire:loading.attr="disabled">
                {{ __('Keep both running') }}
            </x-secondary-button>
            <x-button class="ms-3" wire:click="stopOtherAndStart" wire:loading.attr="disabled">
                {{ __('Stop other & start this') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Add / edit entry modal -->
    <x-dialog-modal wire:model.live="showEditModal" maxWidth="xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Time Entry') : __('Add Manual Time') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                @if (count($workTargets) > 0)
                    <div class="sm:col-span-2">
                        <x-label for="edit-work-target" value="{{ __('What was it for?') }}" />
                        <select id="edit-work-target" wire:model="editWorkTarget" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('The job as a whole') }}</option>
                            @foreach ($workTargets as $option)
                                <option value="{{ $option['key'] }}">{{ $option['label'] }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="editWorkTarget" class="mt-2" />
                    </div>
                @endif

                <div>
                    <x-label for="edit_activity" value="{{ __('Activity') }}" />
                    <select id="edit_activity" wire:model="edit_activity" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($activities as $a)
                            <option value="{{ $a }}">{{ ucfirst($a) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="edit_activity" class="mt-2" />
                </div>
                <div>
                    <x-label for="edit_hourly_rate" value="{{ __('Hourly rate') }}" />
                    <x-input id="edit_hourly_rate" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="edit_hourly_rate" />
                    <x-input-error for="edit_hourly_rate" class="mt-2" />
                </div>
                <div>
                    <x-label for="edit_started_at" value="{{ __('Started at') }}" />
                    <x-input id="edit_started_at" type="datetime-local" class="mt-1 block w-full" wire:model="edit_started_at" />
                    <x-input-error for="edit_started_at" class="mt-2" />
                </div>
                <div>
                    <x-label for="edit_ended_at" value="{{ __('Ended at') }}" />
                    <x-input id="edit_ended_at" type="datetime-local" class="mt-1 block w-full" wire:model="edit_ended_at" />
                    <x-input-error for="edit_ended_at" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" wire:model="edit_is_billable" class="rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                        {{ __('Billable') }}
                    </label>
                </div>
                <div class="sm:col-span-2">
                    <x-label for="edit_notes" value="{{ $editingId ? __('Notes') : __('Reason for manual entry') }}" />
                    <textarea id="edit_notes" rows="2" wire:model="edit_notes" placeholder="{{ $editingId ? '' : __('e.g. on-site install, worked offline, forgot to start timer') }}" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="edit_notes" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeEditModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>
            <x-button class="ms-3" wire:click="saveEntry" wire:loading.attr="disabled">
                {{ __('Save') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>