@extends('admin.layouts.app')

@section('title', __('admin.automations.title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.automations.title'))

@php
    use App\Models\Automation;

    /* Channel chip meta — small icon squares on each automation row. */
    $channelMeta = [
        'email' => [
            'label' => __('admin.automations.channels.email'),
            'fg' => '#1d4ed8', 'bg' => '#dbeafe',
            'svg' => '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/>',
        ],
        'sms' => [
            'label' => __('admin.automations.channels.sms'),
            'fg' => '#9a3412', 'bg' => '#fed7aa',
            'svg' => '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
        ],
        'whatsapp' => [
            'label' => __('admin.automations.channels.whatsapp'),
            'fg' => '#15803d', 'bg' => '#bbf7d0',
            'svg' => '<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/>',
        ],
        'notification' => [
            'label' => __('admin.automations.channels.notification'),
            'fg' => '#4338ca', 'bg' => '#e0e7ff',
            'svg' => '<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>',
        ],
    ];

    $triggerSvg = [
        'registered_booked_meeting' => '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="m9 16 2 2 4-4"/>',
        'registered_no_meeting'     => '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="10" y1="14" x2="14" y2="18"/><line x1="14" y1="14" x2="10" y2="18"/>',
        'meeting_reminder'          => '<circle cx="12" cy="12" r="9"/><polyline points="12 8 12 12 15 14"/>',
        'committee_reminder'        => '<circle cx="12" cy="12" r="9"/><polyline points="12 8 12 12 15 14"/>',
        'committee_created'         => '<path d="M12 5v14M5 12h14"/>',
        'demo_created'              => '<path d="M12 5v14M5 12h14"/>',
        'demo_reminder'             => '<circle cx="12" cy="12" r="9"/><polyline points="12 8 12 12 15 14"/>',
        // Check-circle — RSVP / attendance-confirmed semantic.
        'demo_confirmation'         => '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
    ];

    $audiences = [Automation::AUDIENCE_INVESTOR, Automation::AUDIENCE_STARTUP];

    /* All FOUR automation categories surface for BOTH audiences. The
       legacy `?type=new → reminder` coercion was removed when the
       startup audience grew its own Registrations / Creations options
       in 2026-06. A category that legitimately has zero rows for an
       audience renders an empty card rather than disappearing.
       `confirmation` was added 2026-06-18 to house the new
       attendance-RSVP triggers (demo_confirmation, future
       committee_confirmation, etc.). */
    $types = [
        'new' => [
            'svg'  => '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/>',
        ],
        'reminder' => [
            'svg'  => '<circle cx="12" cy="12" r="9"/><polyline points="12 8 12 12 15 14"/>',
        ],
        'creation' => [
            'svg'  => '<path d="M12 5v14M5 12h14"/>',
        ],
        'confirmation' => [
            // Check-circle — semantically tied to attendance/RSVP confirmation.
            'svg'  => '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
        ],
    ];

    $rows = ($automationsByAudience[$activeAudience] ?? collect());
    $rowsByType = $rows->groupBy('type');
    $activeRows = ($rowsByType[$activeType] ?? collect());
@endphp

@push('styles')
<style>
    /* ── Type tabs — verbatim from the Actions screen ── */
    .type-tabs {
        display: inline-flex;
        background: #f1f5f9;
        padding: 4px;
        border-radius: 999px;
        gap: 4px;
    }
    .type-tab {
        display: inline-flex; align-items: center; gap: 7px;
        padding: 6px 16px;
        border-radius: 999px;
        background: transparent;
        color: #64748b;
        border: 0;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        transition: all .15s;
    }
    .type-tab:hover { color: #334155; }
    .type-tab[aria-selected="true"] {
        background: #4f46e5;
        color: #fff;
        box-shadow: 0 1px 2px rgba(79,70,229,.2);
    }
    .type-tab svg { width: 15px; height: 15px; }

    /* ── Two-panel shell — verbatim from the Actions screen ── */
    .labels-shell {
        display: grid;
        grid-template-columns: minmax(280px, 360px) 1fr;
        gap: 16px;
        align-items: start;
        margin-top: 16px;
    }
    @media (max-width: 900px) { .labels-shell { grid-template-columns: 1fr; } }

    .panel {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
        overflow: hidden;
    }
    .panel-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid #e5e7eb;
    }
    .panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; }
    .panel-body { padding: 6px; }
    .panel-empty { padding: 32px 16px; text-align: center; color: #64748b; font-size: 13px; }

    .pill {
        display: inline-flex; align-items: center;
        padding: 2px 8px;
        background: #f1f5f9;
        color: #475569;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
    }
    .pill--ok  { background: #ecfdf5; color: #047857; }
    .pill--off { background: #fef2f2; color: #b91c1c; }

    /* ── Left list — type rows (mirrors the Actions label list) ── */
    .at-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
    .at-item {
        display: flex; align-items: center; gap: 11px;
        padding: 11px 12px;
        border-radius: 8px;
        text-decoration: none;
        color: inherit;
        border: 1px solid transparent;
        transition: background-color .12s, border-color .12s;
    }
    .at-item:hover { background: #f8fafc; }
    .at-item[aria-current="true"] { background: #eef2ff; border-color: #c7d2fe; }
    .at-item__icon {
        flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px;
        border-radius: 10px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        color: #64748b;
        transition: background-color .12s, color .12s, border-color .12s;
    }
    .at-item[aria-current="true"] .at-item__icon { background: #fff; border-color: #c7d2fe; color: #4f46e5; }
    .at-item__icon svg { width: 18px; height: 18px; }
    .at-item__main { flex: 1; min-width: 0; }
    .at-item__name { font-weight: 700; color: #0f172a; font-size: 14px; }
    .at-item__sub  { font-size: 11.5px; color: #94a3b8; margin-top: 2px; line-height: 1.5; }
    .at-item__meta { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
    .at-item__chevron { color: #cbd5e1; display: inline-flex; }
    .at-item[aria-current="true"] .at-item__chevron { color: #6366f1; }
    :where([dir="rtl"]) .at-item__chevron svg { transform: scaleX(-1); }
    .at-item__chevron svg { width: 16px; height: 16px; }

    /* ── Right panel — automation rows (mirrors the Actions options table) ── */
    .at-table { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
    .at-table__head {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto auto 20px;
        gap: 12px;
        align-items: center;
        padding: 10px 14px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        font-size: 12px; font-weight: 600; color: #475569;
    }
    .at-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto auto 20px;
        gap: 12px;
        align-items: center;
        padding: 13px 14px;
        border-bottom: 1px solid #f1f5f9;
        background: #fff;
        text-decoration: none;
        color: inherit;
        transition: background-color .12s;
    }
    .at-row:last-child { border-bottom: 0; }
    .at-row:hover { background: #fafbff; }
    .at-row__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        border-radius: 10px;
        background: #f8fafc;
        border: 1px solid #eef0f3;
        color: #64748b;
        transition: background-color .12s, color .12s, border-color .12s;
    }
    .at-row:hover .at-row__icon { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
    .at-row__icon svg { width: 18px; height: 18px; }
    .at-row__main { min-width: 0; }
    .at-row__name {
        font-weight: 700; font-size: 14px; color: #0f172a;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .at-row__meta {
        margin-top: 3px; font-size: 11.5px; color: #94a3b8;
        display: inline-flex; align-items: center; gap: 5px;
    }
    .at-row__meta svg { width: 12px; height: 12px; }

    .at-chans { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
    .at-chan {
        display: inline-flex; align-items: center; justify-content: center;
        width: 25px; height: 25px;
        border-radius: 7px;
        background: var(--cbg); color: var(--cfg);
    }
    .at-chan svg { width: 13px; height: 13px; }
    .at-chans__empty { font-size: 11.5px; color: #cbd5e1; font-weight: 600; font-style: italic; }

    .at-badge {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px; font-weight: 800;
        white-space: nowrap;
    }
    .at-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
    .at-badge--on  { color: #047857; background: #ecfdf5; }
    .at-badge--off { color: #64748b; background: #f1f5f9; }

    .at-row__chevron { color: #cbd5e1; display: inline-flex; transition: transform .12s, color .12s; }
    .at-row:hover .at-row__chevron { color: #6366f1; transform: translateX(2px); }
    :where([dir="rtl"]) .at-row__chevron svg { transform: scaleX(-1); }
    :where([dir="rtl"]) .at-row:hover .at-row__chevron { transform: translateX(-2px); }
    .at-row__chevron svg { width: 16px; height: 16px; }

    @media (max-width: 560px) {
        .at-table__head { display: none; }
        .at-row {
            grid-template-columns: 40px 1fr auto;
            grid-template-areas: "icon main badge" "icon chans chans";
            row-gap: 8px;
        }
        .at-row__icon  { grid-area: icon; }
        .at-row__main  { grid-area: main; }
        .at-row .at-badge { grid-area: badge; }
        .at-row__chans-cell { grid-area: chans; }
        .at-row__chevron { display: none; }
        .type-tabs { width: 100%; }
        .type-tab  { flex: 1; justify-content: center; }
    }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="__('admin.automations.title')"
        :subtitle="__('admin.automations.subtitle')" />

    @include('admin.partials.flash')

    {{-- ── Audience tabs (Investors / Startups) ── --}}
    <div class="type-tabs" role="tablist" aria-label="{{ __('admin.automations.audience_aria') }}">
        @foreach ($audiences as $audience)
            <a class="type-tab"
               role="tab"
               aria-selected="{{ $activeAudience === $audience ? 'true' : 'false' }}"
               href="{{ route('admin.automations.index', ['audience' => $audience, 'type' => $activeType]) }}">
                @if ($audience === Automation::AUDIENCE_INVESTOR)
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                @else
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>
                @endif
                {{ __('admin.automations.audiences.' . $audience) }}
            </a>
        @endforeach
    </div>

    <div class="labels-shell">
        {{-- ══ Left: automation types ══ --}}
        <div class="panel">
            <div class="panel-head">
                <h3>{{ __('admin.automations.types_panel') }}</h3>
                <span class="pill">{{ count($types) }}</span>
            </div>
            <div class="panel-body">
                <ul class="at-list">
                    @foreach ($types as $typeKey => $type)
                        @php
                            $typeRows = $rowsByType[$typeKey] ?? collect();
                            $enabledCount = $typeRows->where('enabled', true)->count();
                        @endphp
                        <li>
                            <a class="at-item"
                               aria-current="{{ $activeType === $typeKey ? 'true' : 'false' }}"
                               href="{{ route('admin.automations.index', ['audience' => $activeAudience, 'type' => $typeKey]) }}">
                                <span class="at-item__icon" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $type['svg'] !!}</svg>
                                </span>
                                <div class="at-item__main">
                                    <div class="at-item__name">{{ __('admin.automations.types.' . $typeKey) }}</div>
                                    <div class="at-item__sub">{{ __('admin.automations.types.' . $typeKey . '_hint') }}</div>
                                </div>
                                <div class="at-item__meta">
                                    @if ($enabledCount > 0)
                                        <span class="pill pill--ok">{{ $enabledCount }} {{ __('admin.automations.enabled') }}</span>
                                    @endif
                                    <span class="pill">{{ $typeRows->count() }}</span>
                                    <span class="at-item__chevron" aria-hidden="true">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                                    </span>
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        {{-- ══ Right: automations of the selected type ══ --}}
        <div class="panel">
            <div class="panel-head">
                <h3>{{ __('admin.automations.types.' . $activeType) }}</h3>
                <span class="pill">{{ $activeRows->count() }}</span>
            </div>
            <div class="panel-body">
                @if ($activeRows->isEmpty())
                    <div class="panel-empty">{{ __('admin.automations.empty_section') }}</div>
                @else
                    <div class="at-table">
                        <div class="at-table__head">
                            <span></span>
                            <span>{{ __('admin.automations.col_automation') }}</span>
                            <span>{{ __('admin.automations.col_channels') }}</span>
                            <span>{{ __('admin.fields.status') }}</span>
                            <span></span>
                        </div>
                        @foreach ($activeRows as $automation)
                            @php $channels = collect($automation->channels ?: []); @endphp
                            <a class="at-row" href="{{ route('admin.automations.edit', $automation) }}">
                                <span class="at-row__icon" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $triggerSvg[$automation->trigger_key] ?? $triggerSvg['meeting_reminder'] !!}</svg>
                                </span>
                                <div class="at-row__main">
                                    @php
                                        // Meeting-reminder label is audience-specific: investors get
                                        // "Investor Interview Reminder", startups get the startup variant.
                                        $triggerLabelKey = $automation->trigger_key === 'meeting_reminder'
                                            ? 'admin.automations.triggers.meeting_reminder_' . $automation->audience
                                            : 'admin.automations.triggers.' . $automation->trigger_key;
                                    @endphp
                                    <div class="at-row__name">{{ __($triggerLabelKey) }}</div>
                                    <div class="at-row__meta">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4z"/></svg>
                                        {{ __('admin.automations.dispatch_count', ['count' => $automation->dispatches_count]) }}
                                    </div>
                                </div>
                                <div class="at-row__chans-cell">
                                    @if ($channels->isEmpty())
                                        <span class="at-chans__empty">{{ __('admin.automations.no_channels') }}</span>
                                    @else
                                        <div class="at-chans">
                                            @foreach ($channels as $channel)
                                                @php $cm = $channelMeta[$channel] ?? null; @endphp
                                                @if ($cm)
                                                    <span class="at-chan" title="{{ $cm['label'] }}"
                                                          style="--cbg: {{ $cm['bg'] }}; --cfg: {{ $cm['fg'] }};">
                                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $cm['svg'] !!}</svg>
                                                    </span>
                                                @endif
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                                <span class="at-badge {{ $automation->enabled ? 'at-badge--on' : 'at-badge--off' }}">
                                    <span class="at-badge__dot" aria-hidden="true"></span>
                                    {{ $automation->enabled ? __('admin.automations.enabled') : __('admin.automations.disabled') }}
                                </span>
                                <span class="at-row__chevron" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                                </span>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection