@php
    $presets = ['#124a61', '#f59e0b', '#10b981', '#0ea5e9', '#a855f7', '#ec4899', '#14b8a6', '#f43f5e', '#64748b', '#eab308'];
@endphp

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

        <x-page-header :title="__('Material Categories')" :subtitle="__('Organise stock by department (Large Format, Apparel, Stationery…) and the material types within each.')">
            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New Category') }}
                </x-button>
            @endif
        </x-page-header>

        <div class="mb-6">
            <x-inventory-tabs />
        </div>

        <x-card>
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:p-5">
                <div class="relative flex-1 sm:max-w-md">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('Search categories...') }}"
                        class="block w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    />
                </div>
            </div>

            <div class="divide-y divide-slate-100">
                @forelse ($departments as $department)
                    <div wire:key="dept-{{ $department->id }}" class="p-4 sm:p-5">
                        {{-- Department header --}}
                        <div class="flex flex-wrap items-start justify-between gap-3">
                            <div class="flex min-w-0 items-center gap-3">
                                <span class="h-3.5 w-3.5 shrink-0 rounded-full ring-2 ring-white shadow" style="background: {{ $department->color }}"></span>
                                <div class="min-w-0">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span class="text-sm font-bold text-slate-900">{{ $department->name }}</span>
                                        <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Department') }}</span>
                                        @unless ($department->is_active)
                                            <x-badge color="slate">{{ __('Inactive') }}</x-badge>
                                        @endunless
                                    </div>
                                    <p class="text-xs text-slate-400">{{ trans_choice(':count material|:count materials', (int) $department->materials_count, ['count' => $department->materials_count]) }} {{ __('directly in department') }}</p>
                                </div>
                            </div>
                            <div class="flex shrink-0 flex-wrap items-center gap-3 text-sm font-medium">
                                @if ($canManage)
                                    <button wire:click="create({{ $department->id }})" class="inline-flex items-center gap-1 text-indigo-600 transition hover:text-indigo-700">
                                        <x-icon name="plus" class="h-3.5 w-3.5" />{{ __('Type') }}
                                    </button>
                                    <button wire:click="edit({{ $department->id }})" class="text-slate-500 transition hover:text-slate-700">{{ __('Edit') }}</button>
                                @endif
                                @if ($canDelete)
                                    <button wire:click="delete({{ $department->id }})" wire:confirm="{{ __('Delete this department? Its types become top-level and materials in it become uncategorised.') }}" class="text-rose-600 transition hover:text-rose-700">{{ __('Delete') }}</button>
                                @endif
                            </div>
                        </div>

                        {{-- Type children --}}
                        @if ($department->children->isNotEmpty())
                            <div class="mt-3 space-y-1.5 border-l-2 border-slate-100 pl-3 sm:pl-4">
                                @foreach ($department->children as $type)
                                    <div wire:key="type-{{ $type->id }}" class="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 rounded-lg px-2 py-1.5 transition hover:bg-slate-50">
                                        <div class="flex min-w-0 flex-wrap items-center gap-x-2.5 gap-y-1">
                                            <span class="h-2.5 w-2.5 shrink-0 rounded-full" style="background: {{ $type->color }}"></span>
                                            <span class="text-sm text-slate-700">{{ $type->name }}</span>
                                            <span class="text-xs text-slate-400">· {{ trans_choice(':count material|:count materials', (int) $type->materials_count, ['count' => $type->materials_count]) }}</span>
                                            @unless ($type->is_active)
                                                <x-badge color="slate">{{ __('Inactive') }}</x-badge>
                                            @endunless
                                        </div>
                                        <div class="flex shrink-0 flex-wrap items-center gap-3 text-sm font-medium">
                                            @if ($canManage)
                                                <button wire:click="edit({{ $type->id }})" class="text-slate-500 transition hover:text-slate-700">{{ __('Edit') }}</button>
                                            @endif
                                            @if ($canDelete)
                                                <button wire:click="delete({{ $type->id }})" wire:confirm="{{ __('Delete this type? Materials in it become uncategorised.') }}" class="text-rose-600 transition hover:text-rose-700">{{ __('Delete') }}</button>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="mt-2 border-l-2 border-slate-100 pl-4 text-xs italic text-slate-400">{{ __('No material types yet, add one to break this department down.') }}</p>
                        @endif
                    </div>
                @empty
                    <div class="px-6 py-12">
                        <x-empty-state
                            icon="tag"
                            :title="__('No categories yet')"
                            :message="__('Add the recommended print-shop departments and types, or create your own.')"
                            class="border-0"
                        >
                            @if ($canManage)
                                <div class="flex flex-wrap items-center justify-center gap-3">
                                    <x-button wire:click="seedDefaults" type="button">
                                        <x-icon name="sparkles" class="-ms-1 me-1.5 h-4 w-4" />
                                        {{ __('Add recommended categories') }}
                                    </x-button>
                                    <x-secondary-button wire:click="create" type="button">
                                        {{ __('Create manually') }}
                                    </x-secondary-button>
                                </div>
                            @endif
                        </x-empty-state>
                    </div>
                @endforelse
            </div>
        </x-card>
    </div>

    {{-- Create / Edit Modal --}}
    <x-dialog-modal wire:model.live="showModal" maxWidth="md">
        <x-slot name="title">
            {{ $editingId ? __('Edit Category') : __('New Category') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="mc-name" value="{{ __('Name') }}" />
                    <x-input id="mc-name" type="text" class="mt-1 block w-full" wire:model="name" placeholder="{{ __('e.g. Blank apparel') }}" />
                    <x-input-error for="name" class="mt-2" />
                </div>

                <div>
                    <x-label for="mc-parent" value="{{ __('Department') }}" />
                    <select id="mc-parent" wire:model="parent_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="">{{ __('— None (this is a department) —') }}</option>
                        @foreach ($departmentOptions as $opt)
                            @if ($opt->id !== $editingId)
                                <option value="{{ $opt->id }}">{{ $opt->name }}</option>
                            @endif
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Leave as a department for a top-level group, or pick one to make this a material type within it.') }}</p>
                    <x-input-error for="parent_id" class="mt-2" />
                </div>

                <div>
                    <x-label for="mc-color" value="{{ __('Colour') }}" />
                    <div class="mt-1 flex items-center gap-3">
                        <input type="color" id="mc-color" wire:model.live="color" class="h-11 w-16 shrink-0 cursor-pointer rounded-xl border border-slate-300 bg-white p-1 shadow-sm" />
                        <input type="text" wire:model.live.debounce.400ms="color" class="block w-32 rounded-xl border-slate-300 text-sm uppercase shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    </div>
                    <div class="mt-3 flex flex-wrap gap-2">
                        @foreach ($presets as $preset)
                            <button type="button" wire:click="$set('color', '{{ $preset }}')" class="h-7 w-7 rounded-full ring-2 ring-offset-2 transition {{ strtolower($color) === strtolower($preset) ? 'ring-slate-400' : 'ring-transparent hover:ring-slate-200' }}" style="background: {{ $preset }}" aria-label="{{ $preset }}"></button>
                        @endforeach
                    </div>
                    <x-input-error for="color" class="mt-2" />
                </div>

                <label class="inline-flex items-center gap-2">
                    <input type="checkbox" wire:model="is_active" class="rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                    <span class="text-sm text-slate-700">{{ __('Active') }}</span>
                </label>
                <x-input-error for="is_active" class="mt-2" />
            </div>
        </x-slot>

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