@php
    $tz = config('app.display_timezone');
    $tabMeta = ['' => ['label' => __('All'), 'icon' => 'queue-list']] + [
        'competitor_profile' => ['label' => __('Competitor profiles'), 'icon' => 'trophy'],
        'note' => ['label' => __('Research notes'), 'icon' => 'beaker'],
        'sector' => ['label' => __('Sector insight'), 'icon' => 'building-office'],
        'market' => ['label' => __('Market insight'), 'icon' => 'chart-bar'],
    ];
    $kindColor = ['competitor_profile' => 'rose', 'note' => 'indigo', 'sector' => 'sky', 'market' => 'violet'];
    $hasFilters = trim($q) !== '' || $sector !== '' || $organisationFilter;
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Research')">
            @if ($canCreate)
                <x-button type="button" wire:click="create">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New note') }}
                </x-button>
            @endif
        </x-page-header>

        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($tabMeta as $key => $meta)
                <button type="button" wire:click="switchTab('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $kind === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ $meta['label'] }}
                    <span class="rounded-full bg-slate-100 px-1.5 text-[11px] tabular-nums text-slate-500">{{ $key === '' ? $total : ($counts[$key] ?? 0) }}</span>
                </button>
            @endforeach
        </div>

        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ $tabMeta[$kind]['label'] }}</h2>
                    <p class="text-xs text-slate-400">
                        {{ __('Everyone on the team can read every note.') }}
                        @if ($organisationFilter)
                            · {{ $organisationFilter->name }}
                            <button type="button" wire:click="$set('organisation', null)" class="ms-1 text-indigo-600 hover:text-indigo-800">{{ __('Show all') }}</button>
                        @endif
                    </p>
                </div>
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <div class="relative max-w-xs flex-1">
                        <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="q" placeholder="{{ __('Search notes, competitors, tags…') }}"
                            class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                    </div>
                    <select wire:model.live="sector" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All sectors') }}</option>
                        @foreach ($sectors as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <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">{{ __('Note') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Kind') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('About') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Written by') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Updated') }}</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 ($notes as $note)
                            <tr wire:key="note-{{ $note->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    <button type="button" wire:click="view({{ $note->id }})" class="text-left font-medium text-slate-900 hover:text-indigo-600">{{ $note->title }}</button>
                                    @if ($note->body)
                                        <p class="mt-0.5 text-xs text-slate-500">{{ \Illuminate\Support\Str::limit($note->body, 140) }}</p>
                                    @endif
                                    @if ($note->tags)
                                        <div class="mt-1 flex flex-wrap gap-1">
                                            @foreach ($note->tags as $tag)
                                                <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-600">{{ $tag }}</span>
                                            @endforeach
                                        </div>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$kindColor[$note->kind] ?? 'slate'">{{ __(\App\Models\Crm\ResearchNote::KINDS[$note->kind] ?? $note->kind) }}</x-badge>
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    @if ($note->competitor_name)
                                        <span class="block font-medium text-slate-800">{{ $note->competitor_name }}</span>
                                    @endif
                                    @if ($note->customer)
                                        <a href="{{ route('crm.organisations.show', $note->customer) }}" wire:navigate class="block text-indigo-600 hover:text-indigo-800">{{ $note->customer->name }}</a>
                                    @endif
                                    @if ($note->sector)
                                        <span class="block text-xs text-slate-400">{{ $sectors[$note->sector] ?? $note->sector }}</span>
                                    @endif
                                    @if (! $note->competitor_name && ! $note->customer && ! $note->sector)
                                        <span class="text-slate-400">{{ __('General') }}</span>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $note->author?->name ?? __('A former member') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $note->updated_at?->copy()->timezone($tz)->format('j M Y') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        <button type="button" wire:click="view({{ $note->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Open') }}</button>
                                        @can('update', $note)
                                            <button type="button" wire:click="edit({{ $note->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                        @endcan
                                        @can('delete', $note)
                                            <button type="button" wire:click="delete({{ $note->id }})" wire:confirm="{{ __('Delete this note? It can be restored from Recently Deleted.') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12">
                                    @if ($hasFilters)
                                        <x-empty-state icon="magnifying-glass" :title="__('No notes match')" :message="__('Try fewer words, or clear the sector filter.')" class="border-0 bg-transparent py-0" />
                                    @else
                                        <x-empty-state icon="beaker" :title="__('Nothing written down yet')" :message="__('Record what you learn about a sector, a market or a competitor, so the next person starts from it.')" class="border-0 bg-transparent py-0" />
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($notes->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $notes->links() }}
                </div>
            @endif
        </x-card>
    </div>

    {{-- One note, read --}}
    <x-dialog-modal wire:model.live="showView" maxWidth="3xl">
        <x-slot name="title">
            @if ($viewing)
                <div class="flex flex-wrap items-center gap-2">
                    <span>{{ $viewing->title }}</span>
                    <x-badge :color="$kindColor[$viewing->kind] ?? 'slate'">{{ __(\App\Models\Crm\ResearchNote::KINDS[$viewing->kind] ?? $viewing->kind) }}</x-badge>
                </div>
            @endif
        </x-slot>
        <x-slot name="content">
            @if ($viewing)
                <div class="space-y-4">
                    <p class="text-xs text-slate-400">
                        {{ __('Written by :name, last updated :when', ['name' => $viewing->author?->name ?? __('a former member'), 'when' => $viewing->updated_at?->copy()->timezone($tz)->format('j M Y, H:i')]) }}
                        @if ($viewing->customer)
                            · <a href="{{ route('crm.organisations.show', $viewing->customer) }}" wire:navigate class="text-indigo-600 hover:text-indigo-800">{{ $viewing->customer->name }}</a>
                        @endif
                        @if ($viewing->sector)
                            · {{ $sectors[$viewing->sector] ?? $viewing->sector }}
                        @endif
                    </p>

                    @if ($viewing->body)
                        <div class="whitespace-pre-line text-sm text-slate-700">{{ $viewing->body }}</div>
                    @else
                        <p class="text-sm text-slate-400">{{ __('No text yet.') }}</p>
                    @endif

                    @if ($viewing->source_url)
                        <a href="{{ $viewing->source_url }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 hover:text-indigo-800">
                            <x-icon name="link" class="h-3.5 w-3.5" /> {{ __('Source') }}
                        </a>
                    @endif

                    @if ($viewing->kind === 'competitor_profile')
                        <div class="rounded-xl border border-slate-200 p-4">
                            <h3 class="text-sm font-semibold text-slate-900">{{ __('Where :name has come up', ['name' => $viewing->competitor_name]) }}</h3>
                            @if ($mentions['opportunities']->isEmpty() && $mentions['meetings']->isEmpty())
                                <p class="mt-1 text-xs text-slate-500">{{ __('Not named on any opportunity or tagged in any meeting note yet.') }}</p>
                            @else
                                <ul class="mt-2 space-y-1.5 text-sm">
                                    @foreach ($mentions['opportunities'] as $opportunity)
                                        <li wire:key="mention-opp-{{ $opportunity->id }}" class="flex flex-wrap items-center gap-2">
                                            <x-icon name="flag" class="h-3.5 w-3.5 text-slate-400" />
                                            <a href="{{ route('crm.opportunities.show', $opportunity) }}" wire:navigate class="text-indigo-600 hover:text-indigo-800">{{ $opportunity->title }}</a>
                                            <span class="text-xs text-slate-400">{{ $opportunity->customer?->name }} · {{ __(\App\Models\Opportunity::STAGES[$opportunity->stage] ?? $opportunity->stage) }}</span>
                                        </li>
                                    @endforeach
                                    @foreach ($mentions['meetings'] as $meeting)
                                        <li wire:key="mention-meeting-{{ $meeting->id }}" class="flex flex-wrap items-center gap-2">
                                            <x-icon name="chat-bubble-left-right" class="h-3.5 w-3.5 text-slate-400" />
                                            <a href="{{ route('crm.meetings.show', $meeting) }}" wire:navigate class="text-indigo-600 hover:text-indigo-800">{{ $meeting->title ?: __('Meeting note') }}</a>
                                            <span class="text-xs text-slate-400">{{ $meeting->held_at?->copy()->timezone($tz)->format('j M Y') }}</span>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        </div>
                    @endif

                    <livewire:crm.attachments record-type="research-note" :record-id="$viewing->id" :key="'research-files-'.$viewing->id" />
                </div>
            @endif
        </x-slot>
        <x-slot name="footer">
            @if ($viewing)
                @can('update', $viewing)
                    <x-secondary-button type="button" wire:click="edit({{ $viewing->id }})">{{ __('Edit') }}</x-secondary-button>
                @endcan
            @endif
            <x-secondary-button type="button" wire:click="closeView">{{ __('Close') }}</x-secondary-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Add or edit --}}
    <x-dialog-modal wire:model.live="showForm" maxWidth="2xl">
        <x-slot name="title">{{ $editingId ? __('Edit research note') : __('New research note') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="form-kind" value="{{ __('Kind') }}" />
                    <select id="form-kind" wire:model.live="form.kind" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach (\App\Models\Crm\ResearchNote::KINDS as $value => $label)
                            <option value="{{ $value }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="form.kind" class="mt-2" />
                </div>
                @if (($form['kind'] ?? '') === 'competitor_profile')
                    <div>
                        <x-label for="form-competitor" value="{{ __('Competitor') }}" />
                        <x-input id="form-competitor" type="text" class="mt-1 block w-full" wire:model="form.competitor_name" placeholder="{{ __('The competitor\'s name, as people write it on opportunities') }}" />
                        <x-input-error for="form.competitor_name" class="mt-2" />
                    </div>
                @else
                    <div>
                        <x-label for="form-sector" value="{{ __('Sector') }}" />
                        <select id="form-sector" wire:model="form.sector" 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="">{{ __('Not about one sector') }}</option>
                            @foreach ($sectors as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="form.sector" class="mt-2" />
                    </div>
                @endif
                <div class="sm:col-span-2">
                    <x-label for="form-title" value="{{ __('Title') }}" />
                    <x-input id="form-title" type="text" class="mt-1 block w-full" wire:model="form.title" />
                    <x-input-error for="form.title" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="form-body" value="{{ __('What we know') }}" />
                    <textarea id="form-body" rows="7" wire:model="form.body" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                        placeholder="{{ ($form['kind'] ?? '') === 'competitor_profile' ? __('What they sell, their prices, who they supply, where they are strong and weak, how we win against them.') : __('What was learned, where from, and what it means for us.') }}"></textarea>
                    <x-input-error for="form.body" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="form-org" value="{{ __('About an organisation (optional)') }}" />
                    @if ($pickedOrganisation)
                        <div class="mt-1 flex items-center justify-between gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm">
                            <span class="font-medium text-slate-800">{{ $pickedOrganisation->name }}</span>
                            <button type="button" wire:click="pickOrganisation(null)" class="text-xs font-medium text-rose-600 hover:text-rose-800">{{ __('Remove') }}</button>
                        </div>
                    @else
                        <x-input id="form-org" type="text" class="mt-1 block w-full" wire:model.live.debounce.300ms="orgSearch" placeholder="{{ __('Type two letters of the name…') }}" />
                        @if ($organisationMatches->isNotEmpty())
                            <ul class="mt-1 divide-y divide-slate-100 rounded-xl border border-slate-200 bg-white text-sm shadow-sm">
                                @foreach ($organisationMatches as $match)
                                    <li wire:key="org-match-{{ $match->id }}">
                                        <button type="button" wire:click="pickOrganisation({{ $match->id }})" class="block w-full px-3 py-2 text-left hover:bg-slate-50">{{ $match->name }}</button>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    @endif
                </div>
                <div>
                    <x-label for="form-tags" value="{{ __('Tags') }}" />
                    <x-input id="form-tags" type="text" class="mt-1 block w-full" wire:model="form.tags" placeholder="{{ __('Separated by commas') }}" />
                    <x-input-error for="form.tags" class="mt-2" />
                </div>
                <div>
                    <x-label for="form-source" value="{{ __('Source link') }}" />
                    <x-input id="form-source" type="url" class="mt-1 block w-full" wire:model="form.source_url" placeholder="https://" />
                    <x-input-error for="form.source_url" class="mt-2" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button type="button" wire:click="$set('showForm', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button type="button" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">{{ __('Save') }}</span>
                <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>