@php
    $tabs = [
        'overheads' => __('Labour & Overhead'),
        'ink' => __('Ink Pass-Modes'),
        'defaults' => __('Costing Defaults'),
        'import' => __('Import from Excel'),
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-5xl">

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <x-page-header :title="__('Costing')" :subtitle="__('The rate master that powers product costing, labour, overhead, ink and pricing defaults.')" />
            <x-costing-tabs />
        </div>

        <div class="mt-6 mb-6 flex flex-wrap gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($tabs as $key => $label)
                <button wire:click="$set('tab', '{{ $key }}')" @class([
                    'flex-1 rounded-lg px-3 py-2 transition',
                    'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' => $tab === $key,
                    'text-slate-500 hover:text-slate-700' => $tab !== $key,
                ])>{{ $label }}</button>
            @endforeach
        </div>

        {{-- ===================== LABOUR & OVERHEAD ===================== --}}
        @if ($tab === 'overheads')
            <x-card class="p-5">
                <div class="mb-4 flex items-center justify-between">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Labour & Overhead') }}</h2>
                        <p class="text-xs text-slate-500">{{ __('Monthly costs are spread to a daily figure (÷ :n working days) and allocated per unit via each product\'s jobs-per-day.', ['n' => $workingDays]) }}</p>
                    </div>
                    @if ($canManage)
                        <div class="flex flex-wrap gap-2">
                            <x-secondary-button wire:click="createOc('labour')"><x-icon name="plus" class="mr-1 h-4 w-4" />{{ __('Labour') }}</x-secondary-button>
                            <x-button wire:click="createOc('overhead')"><x-icon name="plus" class="mr-1 h-4 w-4" />{{ __('Overhead') }}</x-button>
                        </div>
                    @endif
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100 text-sm">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Name') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Type') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Monthly') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Daily') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Allocation') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($operatingCosts as $oc)
                                <tr wire:key="oc-{{ $oc->id }}" class="transition hover:bg-slate-50/70 {{ $oc->is_active ? '' : 'opacity-50' }}">
                                    <td class="px-3 lg:px-4 py-4 font-medium text-slate-800">
                                        {{ $oc->name }}
                                        @if ($oc->isSourcedFromActuals())
                                            <span class="ml-1 inline-flex items-center rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-medium text-emerald-700" title="{{ __('Sourced live from the :c expense category', ['c' => $oc->expenseCategory?->name]) }}">
                                                {{ __('actuals: :c', ['c' => $oc->expenseCategory?->name ?? __('expenses')]) }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        <x-badge :color="$oc->type === 'labour' ? 'violet' : 'sky'">{{ ucfirst($oc->type) }}</x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-600">
                                        {{ number_format($oc->effectiveMonthlyCost(), 2) }}
                                        @if ($oc->isSourcedFromActuals())
                                            <span class="block text-[10px] text-slate-400">{{ __('manual: :m', ['m' => number_format((float) $oc->monthly_cost, 2)]) }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-600">{{ number_format($oc->dailyCost($workingDays), 2) }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-slate-500">{{ str_replace('_', ' ', $oc->allocation_basis) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                        @if ($canManage)
                                            <div class="flex items-center justify-end gap-3">
                                                <button wire:click="editOc({{ $oc->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                                <button wire:click="deleteOc({{ $oc->id }})" wire:confirm="{{ __('Remove this cost?') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-3 lg:px-4 py-12">
                                        <x-empty-state icon="calculator" :title="__('No operating costs yet')"
                                            :message="__('Add your labour roles and overheads.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- ===================== INK PASS-MODES ===================== --}}
        @if ($tab === 'ink')
            <x-card class="p-5">
                <div class="mb-4 flex items-center justify-between">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Ink Pass-Modes') }}</h2>
                        <p class="text-xs text-slate-500">{{ __('Cost/m² = ml/m² × ink cost per ml (:c) × (1 + waste :w%).', ['c' => number_format($inkCostPerMl, 4), 'w' => rtrim(rtrim(number_format($inkWastePct, 2), '0'), '.')]) }}</p>
                    </div>
                    @if ($canManage)
                        <x-button wire:click="createIm"><x-icon name="plus" class="mr-1 h-4 w-4" />{{ __('Pass-Mode') }}</x-button>
                    @endif
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100 text-sm">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Mode') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('ml / m²') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Cost / m²') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($inkModes as $im)
                                <tr wire:key="im-{{ $im->id }}" class="transition hover:bg-slate-50/70 {{ $im->is_active ? '' : 'opacity-50' }}">
                                    <td class="px-3 lg:px-4 py-4 font-medium text-slate-800">{{ $im->name }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-600">{{ rtrim(rtrim(number_format((float) $im->ml_per_sqm, 2), '0'), '.') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums text-slate-600">{{ number_format($im->costPerSqm($inkCostPerMl, $inkWastePct), 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                        @if ($canManage)
                                            <div class="flex items-center justify-end gap-3">
                                                <button wire:click="editIm({{ $im->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                                <button wire:click="deleteIm({{ $im->id }})" wire:confirm="{{ __('Remove this mode?') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-3 lg:px-4 py-12">
                                        <x-empty-state icon="swatch" :title="__('No pass-modes yet')"
                                            :message="__('e.g. 3 PASS Standard = 18 ml/m².')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- ===================== DEFAULTS ===================== --}}
        @if ($tab === 'defaults')
            <x-card class="p-6">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Costing Defaults') }}</h2>
                <p class="mb-4 text-xs text-slate-500">{{ __('Used to spread overheads to daily costs, price ink, and pre-fill new products.') }}</p>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <x-label :value="__('Working days / month')" />
                        <x-input type="number" min="1" max="31" class="mt-1 block w-full" wire:model="working_days_per_month" />
                        <x-input-error for="working_days_per_month" class="mt-2" />
                    </div>
                    <div>
                        <x-label :value="__('Default jobs / day')" />
                        <x-input type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="default_jobs_per_day" placeholder="5" />
                        <p class="mt-1 text-xs text-slate-500">{{ __('Pre-fills throughput on new products so auto-seeded overhead allocates sensibly.') }}</p>
                        <x-input-error for="default_jobs_per_day" class="mt-2" />
                    </div>
                    <div>
                        <x-label :value="__('Ink cost per ml')" />
                        <x-input type="number" step="0.0001" min="0" class="mt-1 block w-full" wire:model="ink_cost_per_ml" />
                        <x-input-error for="ink_cost_per_ml" class="mt-2" />
                    </div>
                    <div>
                        <x-label :value="__('Ink waste %')" />
                        <x-input type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="ink_waste_pct" />
                        <x-input-error for="ink_waste_pct" class="mt-2" />
                    </div>
                    <div>
                        <x-label :value="__('Default markup %')" />
                        <x-input type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="default_markup_pct" placeholder="40" />
                        <x-input-error for="default_markup_pct" class="mt-2" />
                    </div>
                    <div>
                        <x-label :value="__('Default misc / buffer %')" />
                        <x-input type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="default_misc_pct" placeholder="5" />
                        <x-input-error for="default_misc_pct" class="mt-2" />
                    </div>
                    <div class="sm:col-span-2">
                        <x-label :value="__('Google Sheet link (costing workbook)')" />
                        <x-input type="text" class="mt-1 block w-full" wire:model="google_costing_sheet_id"
                            placeholder="https://docs.google.com/spreadsheets/d/…/edit" />
                        <p class="mt-1 text-xs text-slate-500">{{ __('Paste the shareable link (or id) of the directors\' costing sheet. Enables one-click sync on the Import tab. The sheet must be shared as “anyone with the link”.') }}</p>
                        <x-input-error for="google_costing_sheet_id" class="mt-2" />
                    </div>
                </div>
                @if ($canManage)
                    <div class="mt-6 flex justify-end">
                        <x-button wire:click="saveSettings">{{ __('Save defaults') }}</x-button>
                    </div>
                @endif
            </x-card>
        @endif

        {{-- ===================== IMPORT FROM EXCEL ===================== --}}
        @if ($tab === 'import')
            <x-card class="p-6">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Import from your costing spreadsheet') }}</h2>
                <p class="mb-4 text-xs text-slate-500">{{ __('Seeds the rate master (labour, overhead, ink, exchange) and creates products with prices, DTF/EMB methods and quantity tiers. The Large Format (LFP) matrix also imports as a full per-component recipe. Re-running updates existing records (matched by name).') }}</p>

                @if ($canManage)
                    {{-- One-click Google Sheets sync --}}
                    <div class="mb-4 rounded-2xl border border-emerald-200 bg-emerald-50/60 p-6">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <h3 class="text-sm font-semibold text-emerald-900">{{ __('Sync from Google Sheets') }}</h3>
                                <p class="mt-1 text-xs text-emerald-700">
                                    @if ($google_costing_sheet_id !== '')
                                        {{ __('Pulls the live workbook straight from your saved Google Sheet link, no download needed.') }}
                                    @else
                                        {{ __('Add the Google Sheet link on the Costing Defaults tab to enable one-click sync.') }}
                                    @endif
                                </p>
                                <x-input-error for="google_costing_sheet_id" class="mt-2" />
                            </div>
                            <x-button wire:click="syncFromGoogleSheet" wire:loading.attr="disabled" wire:target="syncFromGoogleSheet"
                                :disabled="$google_costing_sheet_id === ''">
                                <span wire:loading.remove wire:target="syncFromGoogleSheet">{{ __('Sync now') }}</span>
                                <span wire:loading wire:target="syncFromGoogleSheet">{{ __('Syncing…') }}</span>
                            </x-button>
                        </div>
                    </div>

                    <p class="mb-2 text-xs font-medium uppercase tracking-wider text-slate-400">{{ __('Or upload a file') }}</p>
                    <div class="rounded-2xl border-2 border-dashed border-slate-200 p-6">
                        <input type="file" wire:model="importFile" accept=".xlsx"
                            class="block w-full text-sm text-slate-600 file:mr-4 file:rounded-xl file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100">
                        <x-upload-progress target="importFile" class="mt-2" />
                        <div class="mt-4">
                            <x-button wire:click="runCostingImport" wire:loading.attr="disabled" wire:target="runCostingImport,importFile">
                                <span wire:loading.remove wire:target="runCostingImport">{{ __('Import spreadsheet') }}</span>
                                <span wire:loading wire:target="runCostingImport">{{ __('Importing…') }}</span>
                            </x-button>
                        </div>
                    </div>
                @endif

                @if ($importResult)
                    <div class="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-6">
                        @foreach ([
                            ['label' => __('Products'), 'value' => $importResult['counts']['products'] ?? 0],
                            ['label' => __('Cost lines'), 'value' => $importResult['counts']['bom_lines'] ?? 0],
                            ['label' => __('Price tiers'), 'value' => $importResult['counts']['tiers'] ?? 0],
                            ['label' => __('Operating costs'), 'value' => $importResult['counts']['operating_costs'] ?? 0],
                            ['label' => __('Ink modes'), 'value' => $importResult['counts']['ink_modes'] ?? 0],
                            ['label' => __('Currencies'), 'value' => $importResult['counts']['currencies'] ?? 0],
                        ] as $stat)
                            <div class="rounded-2xl bg-slate-50 p-4 text-center">
                                <p class="text-2xl font-bold text-slate-900">{{ $stat['value'] }}</p>
                                <p class="mt-1 text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ $stat['label'] }}</p>
                            </div>
                        @endforeach
                    </div>
                    @if (! empty($importResult['notes']))
                        <div class="mt-3 rounded-xl border border-amber-200 bg-amber-50 p-3 text-xs text-amber-700">
                            @foreach ($importResult['notes'] as $n)<p>⚠ {{ $n }}</p>@endforeach
                        </div>
                    @endif
                    <div class="mt-4">
                        <a href="{{ route('products.index') }}"><x-secondary-button>{{ __('View products') }}</x-secondary-button></a>
                    </div>
                @endif
            </x-card>
        @endif
    </div>

    {{-- Operating cost modal --}}
    <x-dialog-modal wire:model.live="showOcModal">
        <x-slot name="title">{{ $ocId ? __('Edit Operating Cost') : __('New Operating Cost') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label :value="__('Name')" />
                    <x-input type="text" class="mt-1 block w-full" wire:model="oc_name" placeholder="Electricity / Production labour" />
                    <x-input-error for="oc_name" class="mt-2" />
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <x-label :value="__('Type')" />
                        <select wire:model="oc_type" 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="labour">{{ __('Labour') }}</option>
                            <option value="overhead">{{ __('Overhead') }}</option>
                        </select>
                    </div>
                    <div>
                        <x-label :value="__('Monthly cost')" />
                        <x-input type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="oc_monthly_cost" />
                        <x-input-error for="oc_monthly_cost" class="mt-2" />
                    </div>
                </div>
                <div>
                    <x-label :value="__('Allocation basis')" />
                    <select wire:model="oc_allocation_basis" 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="per_job">{{ __('Per job (daily ÷ jobs-per-day)') }}</option>
                        <option value="per_sqm">{{ __('Per m²') }}</option>
                        <option value="fixed">{{ __('Fixed amount (set on product)') }}</option>
                    </select>
                </div>
                <div>
                    <x-label :value="__('Source from actual expenses (optional)')" />
                    <select wire:model="oc_expense_category_id" 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="">{{ __('— Use the manual monthly cost above —') }}</option>
                        @foreach ($expenseCategories as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-500">{{ __('When linked, the monthly figure is taken live from this category\'s recurring expenses, so product costing always tracks real spend. The manual amount is kept as a fallback.') }}</p>
                    <x-input-error for="oc_expense_category_id" class="mt-2" />
                </div>
                <label class="flex items-center gap-3">
                    <input type="checkbox" wire:model="oc_is_active" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                    <span class="text-sm text-slate-700">{{ __('Active') }}</span>
                </label>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showOcModal', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveOc">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Ink mode modal --}}
    <x-dialog-modal wire:model.live="showImModal">
        <x-slot name="title">{{ $imId ? __('Edit Pass-Mode') : __('New Pass-Mode') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label :value="__('Name')" />
                    <x-input type="text" class="mt-1 block w-full" wire:model="im_name" placeholder="3 PASS Standard" />
                    <x-input-error for="im_name" class="mt-2" />
                </div>
                <div>
                    <x-label :value="__('Ink usage (ml / m²)')" />
                    <x-input type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="im_ml_per_sqm" placeholder="18" />
                    <x-input-error for="im_ml_per_sqm" class="mt-2" />
                </div>
                <label class="flex items-center gap-3">
                    <input type="checkbox" wire:model="im_is_active" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                    <span class="text-sm text-slate-700">{{ __('Active') }}</span>
                </label>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showImModal', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveIm">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>
</div>