@extends('setting.nav')

@section('title', 'Settings')

@php
    // Human labels for the numeric flags stored on the users row.
    $isAdminUser = $user->auth_id == 0;
    $isGoogle = $user->account_type == 0;
    $usesServiceAccount = $user->is_service_account == 1;
    $connected = $user->is_login == '0';

    $roleLabel = $isAdminUser ? 'Administrator' : ($user->is_department_head == 1 ? 'Department head' : 'Member');

    $accessLabel = match ((string) $user->user_level) {
        '2' => 'Full access',
        '1' => 'Limited access',
        default => 'Sign-in disabled',
    };

    $fullName = trim(($user->fname ?? '') . ' ' . ($user->lname ?? ''));
    $imapAvailable = function_exists('imap_open');
@endphp

@section('styles')
    <style>
        /* Account identity strip that sits above the tabs. */
        .set-id {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 18px;
            background: var(--emi-surface);
            border: 1px solid var(--emi-line);
            border-radius: var(--emi-radius-lg);
            box-shadow: var(--emi-shadow);
            margin-bottom: 18px;
        }

        .set-id__avatar {
            flex: 0 0 auto;
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: var(--emi-accent-soft);
            color: var(--emi-accent);
            display: grid;
            place-items: center;
            font-size: 1.25rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .set-id__main {
            min-width: 0;
        }

        .set-id__name {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--emi-ink);
        }

        .set-id__mail {
            font-size: .8125rem;
            color: var(--emi-muted);
            word-break: break-all;
        }

        .set-id__pills {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
        }

        .set-id__aside {
            margin-left: auto;
            flex: 0 0 auto;
            text-align: right;
        }

        /* Read-only fact list used by the Mailbox and Workspace panels. */
        .set-facts {
            display: grid;
            grid-template-columns: minmax(0, auto) minmax(0, 1fr);
            gap: 10px 20px;
            margin: 0;
            font-size: .8125rem;
        }

        .set-facts dt {
            color: var(--emi-muted);
            font-weight: 500;
        }

        .set-facts dd {
            margin: 0;
            color: var(--emi-ink);
            font-weight: 500;
            word-break: break-word;
        }

        .set-hint {
            font-size: .75rem;
            color: var(--emi-muted);
            margin: 6px 0 0;
        }

        .set-tabs {
            margin-bottom: 18px;
        }

        /* Cross-links out to the pages that own the other settings. */
        .set-links {
            display: grid;
            gap: 8px;
        }

        .set-links a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid var(--emi-line);
            border-radius: var(--emi-radius);
            font-size: .8125rem;
            font-weight: 500;
            color: var(--emi-body);
            text-decoration: none;
            background: var(--emi-surface);
        }

        .set-links a:hover {
            border-color: #d0d5dd;
            background: var(--emi-surface-2);
            color: var(--emi-ink);
        }

        .set-links i {
            color: var(--emi-accent);
        }

        .set-links a .bi-chevron-right {
            margin-left: auto;
            color: var(--emi-muted);
            font-size: .75rem;
        }

        .set-reveal {
            position: relative;
        }

        .set-reveal .form-control {
            padding-right: 40px;
        }

        .set-reveal button {
            position: absolute;
            top: 50%;
            right: 6px;
            transform: translateY(-50%);
            border: 0;
            background: transparent;
            color: var(--emi-muted);
            padding: 4px 6px;
            line-height: 1;
            border-radius: 6px;
        }

        .set-reveal button:hover {
            color: var(--emi-ink);
            background: var(--emi-surface-2);
        }

        .set-history {
            display: grid;
            gap: 10px;
        }

        .set-history__row {
            padding: 10px 12px;
            border: 1px solid var(--emi-line);
            border-radius: var(--emi-radius);
            background: var(--emi-surface-2);
            font-size: .8125rem;
        }

        .set-history__meta {
            font-size: .6875rem;
            color: var(--emi-muted);
            text-transform: uppercase;
            letter-spacing: .04em;
            margin-bottom: 4px;
        }

        .set-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        @media (max-width: 640px) {

            /* Let the status badge sit under the name rather than squeezing it. */
            .set-id {
                flex-wrap: wrap;
            }

            .set-id__aside {
                margin-left: 0;
                text-align: left;
                width: 100%;
            }

            /* Labels above values once there is no room for two columns. */
            .set-facts {
                grid-template-columns: 1fr;
                gap: 2px;
            }

            .set-facts dd {
                margin-bottom: 10px;
            }

            /* The tab strip scrolls sideways instead of stacking into a wall. */
            .set-tabs {
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
            }

            .set-tabs .nav-link {
                white-space: nowrap;
            }
        }
    </style>
@endsection

@section('content')

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle-fill me-1"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-octagon-fill me-1"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- Who you are signed in as. Repeated on every tab so the context never leaves. --}}
    <div class="set-id">
        <span class="set-id__avatar">{{ mb_substr($fullName !== '' ? $fullName : $user->email, 0, 1) }}</span>

        <div class="set-id__main">
            <h2 class="set-id__name">{{ $fullName !== '' ? $fullName : 'Name not set' }}</h2>
            <div class="set-id__mail">{{ $user->email }}</div>

            <div class="set-id__pills">
                <span class="emi-pill emi-pill--violet">{{ $roleLabel }}</span>
                <span class="emi-pill emi-pill--blue">
                    {{ $isGoogle ? 'Google Workspace' : 'Microsoft 365' }}
                </span>
                <span class="emi-pill emi-pill--slate">{{ $accessLabel }}</span>
                @if ($department)
                    <span class="emi-pill emi-pill--slate">{{ $department->department_name }}</span>
                @endif
            </div>
        </div>

        <div class="set-id__aside">
            <span class="emi-pill {{ $connected ? 'emi-pill--green' : 'emi-pill--red' }}" id="setConnBadge">
                {{ $connected ? 'Mailbox connected' : 'Mailbox needs attention' }}
            </span>
            <p class="set-hint">Member since {{ optional($user->created_at)->format('d M Y') ?? '—' }}</p>
        </div>
    </div>

    <ul class="nav nav-tabs set-tabs" id="settingsTabs" role="tablist">
        @foreach ([
        'profile' => ['Profile', 'bi-person'],
        'security' => ['Security', 'bi-shield-lock'],
        'mailbox' => ['Mailbox & sync', 'bi-envelope-at'],
        'ai' => ['AI & keywords', 'bi-stars'],
        'workspace' => ['Workspace', 'bi-building'],
    ] as $tab => $meta)
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $activeTab === $tab ? 'active' : '' }}" id="tab-{{ $tab }}"
                    data-bs-toggle="tab" data-bs-target="#pane-{{ $tab }}" type="button" role="tab"
                    aria-controls="pane-{{ $tab }}" aria-selected="{{ $activeTab === $tab ? 'true' : 'false' }}">
                    <i class="bi {{ $meta[1] }} me-1"></i>{{ $meta[0] }}
                </button>
            </li>
        @endforeach
    </ul>

    <div class="tab-content">

        {{-- ---------------------------------------------------------------- Profile --}}
        <div class="tab-pane fade {{ $activeTab === 'profile' ? 'show active' : '' }}" id="pane-profile" role="tabpanel"
            aria-labelledby="tab-profile" tabindex="0">
            <div class="emi-grid emi-grid--2-1 emi-grid--top">

                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">Profile details</span>
                        <span class="emi-panel__hint">Shown next to your activity across the app</span>
                    </div>
                    <div class="emi-panel__body">
                        <form action="{{ route('settings.profile') }}" method="POST" novalidate>
                            @csrf
                            {{-- Brings the user back to this panel if validation sends them back. --}}
                            <input type="hidden" name="active_tab" value="profile">

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="fname" class="form-label">First name</label>
                                    <input type="text" class="form-control @error('fname') is-invalid @enderror"
                                        id="fname" name="fname" maxlength="60"
                                        value="{{ old('fname', $user->fname) }}" placeholder="e.g. Ami">
                                    @error('fname')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="lname" class="form-label">Last name</label>
                                    <input type="text" class="form-control @error('lname') is-invalid @enderror"
                                        id="lname" name="lname" maxlength="60"
                                        value="{{ old('lname', $user->lname) }}" placeholder="e.g. Mehta">
                                    @error('lname')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="contact" class="form-label">Contact number</label>
                                    <input type="tel" class="form-control @error('contact') is-invalid @enderror"
                                        id="contact" name="contact" maxlength="20"
                                        value="{{ old('contact', $user->contact) }}" placeholder="+91 98765 43210">
                                    @error('contact')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <p class="set-hint">Used when a teammate needs to reach you about an escalated mail.
                                    </p>
                                </div>

                                <div class="col-md-6">
                                    <label for="profile-email" class="form-label">Email address</label>
                                    <input type="email" class="form-control" id="profile-email"
                                        value="{{ $user->email }}" readonly>
                                    <p class="set-hint">
                                        This is the mailbox every stored message is filed under, so it cannot be changed
                                        here.
                                    </p>
                                </div>
                            </div>

                            <div class="set-actions mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check2 me-1"></i>Save changes
                                </button>
                                <a href="{{ route('settings') }}" class="btn btn-secondary">Discard</a>
                            </div>
                        </form>
                    </div>
                </section>

                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">Account</span>
                    </div>
                    <div class="emi-panel__body">
                        <dl class="set-facts">
                            <dt>Role</dt>
                            <dd>{{ $roleLabel }}</dd>

                            <dt>Access</dt>
                            <dd>{{ $accessLabel }}</dd>

                            <dt>Department</dt>
                            <dd>{{ $department->department_name ?? ($user->group_lable ?: 'Not assigned') }}</dd>

                            <dt>Provider</dt>
                            <dd>{{ $isGoogle ? 'Google Workspace' : 'Microsoft 365' }}</dd>

                            <dt>Account ID</dt>
                            <dd>#{{ $user->id }}</dd>

                            <dt>Created</dt>
                            <dd>{{ optional($user->created_at)->format('d M Y, H:i') ?? '—' }}</dd>
                        </dl>

                        <p class="set-hint mt-3">
                            Role, access level and department are set by an administrator. Ask yours if any of these look
                            wrong.
                        </p>
                    </div>
                </section>
            </div>
        </div>

        {{-- --------------------------------------------------------------- Security --}}
        <div class="tab-pane fade {{ $activeTab === 'security' ? 'show active' : '' }}" id="pane-security"
            role="tabpanel" aria-labelledby="tab-security" tabindex="0">
            <div class="emi-grid emi-grid--2-1 emi-grid--top">

                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">Change sign-in password</span>
                        <span class="emi-panel__hint">The password you use on the login screen</span>
                    </div>
                    <div class="emi-panel__body">
                        <form action="{{ route('settings.password') }}" method="POST" novalidate>
                            @csrf
                            <input type="hidden" name="active_tab" value="security">

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="current_password" class="form-label">Current password</label>
                                    <div class="set-reveal">
                                        <input type="password"
                                            class="form-control @error('current_password') is-invalid @enderror"
                                            id="current_password" name="current_password" autocomplete="current-password"
                                            required>
                                        <button type="button" data-reveal="#current_password"
                                            aria-label="Show password"><i class="bi bi-eye"></i></button>
                                    </div>
                                    @error('current_password')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6"></div>

                                <div class="col-md-6">
                                    <label for="password" class="form-label">New password</label>
                                    <div class="set-reveal">
                                        <input type="password"
                                            class="form-control @error('password') is-invalid @enderror" id="password"
                                            name="password" autocomplete="new-password" minlength="6" required>
                                        <button type="button" data-reveal="#password" aria-label="Show password"><i
                                                class="bi bi-eye"></i></button>
                                    </div>
                                    @error('password')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <p class="set-hint">At least 6 characters.</p>
                                </div>

                                <div class="col-md-6">
                                    <label for="password_confirmation" class="form-label">Confirm new password</label>
                                    <div class="set-reveal">
                                        <input type="password" class="form-control" id="password_confirmation"
                                            name="password_confirmation" autocomplete="new-password" minlength="6"
                                            required>
                                        <button type="button" data-reveal="#password_confirmation"
                                            aria-label="Show password"><i class="bi bi-eye"></i></button>
                                    </div>
                                </div>
                            </div>

                            <div class="set-actions mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-shield-check me-1"></i>Update password
                                </button>
                            </div>
                        </form>
                    </div>
                </section>

                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">How sign-in works</span>
                    </div>
                    <div class="emi-panel__body">
                        <dl class="set-facts">
                            <dt>Two-step</dt>
                            <dd>One-time code by email, always on</dd>

                            <dt>Code validity</dt>
                            <dd>5 minutes</dd>

                            <dt>Codes sent to</dt>
                            <dd>{{ $user->email }}</dd>
                        </dl>

                        <p class="set-hint mt-3">
                            Every sign-in sends a six-digit code to this mailbox, so a password on its own is not enough
                            to get in.
                        </p>

                        <hr class="my-3">

                        <div class="set-links">
                            <a href="{{ route('password.request') }}">
                                <i class="bi bi-key"></i> Forgot password flow
                                <i class="bi bi-chevron-right"></i>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        {{-- ---------------------------------------------------------- Mailbox & sync --}}
        <div class="tab-pane fade {{ $activeTab === 'mailbox' ? 'show active' : '' }}" id="pane-mailbox" role="tabpanel"
            aria-labelledby="tab-mailbox" tabindex="0">
            <div class="emi-grid emi-grid--2-1 emi-grid--top">

                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">Mailbox connection</span>
                        <span class="emi-panel__hint">How EmailInsightAI reads this mailbox</span>
                    </div>
                    <div class="emi-panel__body">
                        <dl class="set-facts">
                            <dt>Mailbox</dt>
                            <dd>{{ $user->email }}</dd>

                            <dt>Provider</dt>
                            <dd>
                                @if ($isGoogle)
                                    <i class="fa-brands fa-google me-1"></i>Google Workspace
                                @else
                                    <i class="fa-brands fa-microsoft me-1"></i>Microsoft 365
                                @endif
                            </dd>

                            <dt>Sync method</dt>
                            <dd>
                                {{ $usesServiceAccount ? ($isGoogle ? 'Workspace service account' : 'Microsoft Graph app token') : 'IMAP with app password' }}
                            </dd>

                            <dt>Last known state</dt>
                            <dd>
                                <span class="emi-pill {{ $connected ? 'emi-pill--green' : 'emi-pill--red' }}">
                                    {{ $connected ? 'Connected' : 'Not connected' }}
                                </span>
                            </dd>
                        </dl>

                        <div class="set-actions mt-4">
                            <button type="button" class="btn btn-secondary" id="setTestConn">
                                <i class="bi bi-plug me-1"></i>Test connection now
                            </button>
                            <span class="set-hint" id="setTestConnNote" style="margin-top:0;"></span>
                        </div>

                        <p class="set-hint mt-3">
                            The test asks your provider for a token on this mailbox — the same check the dashboard runs
                            when it loads.
                        </p>
                    </div>
                </section>

                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">Fetch preferences</span>
                    </div>
                    <div class="emi-panel__body">
                        <div class="set-links">
                            <a href="{{ route('set_email') }}">
                                <i class="bi bi-sliders"></i> Important senders
                                <i class="bi bi-chevron-right"></i>
                            </a>
                            <a href="{{ route('domain') }}">
                                <i class="bi bi-globe2"></i> Trusted domain
                                <i class="bi bi-chevron-right"></i>
                            </a>
                            <a href="{{ route('mail.info') }}">
                                <i class="bi bi-inbox"></i> Open inbox
                                <i class="bi bi-chevron-right"></i>
                            </a>
                        </div>

                        <p class="set-hint mt-3">
                            Which senders count as important, and which domain is treated as internal, live on their own
                            pages.
                        </p>
                    </div>
                </section>
            </div>

            @if ($isGoogle)
                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">Gmail app password</span>
                        <span class="emi-panel__hint">Only needed for IMAP fetching</span>
                    </div>
                    <div class="emi-panel__body">
                        @if ($usesServiceAccount)
                            <div class="alert alert-info" role="alert">
                                <i class="bi bi-info-circle-fill me-1"></i>
                                This mailbox syncs through the workspace service account, so an app password is not
                                required. Setting one only affects the IMAP fallback.
                            </div>
                        @endif

                        @unless ($imapAvailable)
                            <div class="alert alert-warning" role="alert">
                                <i class="bi bi-exclamation-triangle-fill me-1"></i>
                                The PHP IMAP extension is not enabled on this server, so a new app password will be
                                stored without being checked against Gmail first.
                            </div>
                        @endunless

                        <form action="{{ route('settings.appPassword') }}" method="POST" novalidate>
                            @csrf
                            <input type="hidden" name="active_tab" value="mailbox">

                            <div class="row g-3 align-items-end">
                                <div class="col-md-6">
                                    <label for="app_email" class="form-label">New app password</label>
                                    <div class="set-reveal">
                                        <input type="password"
                                            class="form-control @error('app_email') is-invalid @enderror" id="app_email"
                                            name="app_email" maxlength="100" autocomplete="off"
                                            placeholder="16-character app password">
                                        <button type="button" data-reveal="#app_email"
                                            aria-label="Show app password"><i class="bi bi-eye"></i></button>
                                    </div>
                                    @error('app_email')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <p class="set-hint">Spaces are ignored, so you can paste it exactly as Google shows
                                        it.</p>
                                </div>

                                <div class="col-md-6">
                                    <div class="set-actions">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-save me-1"></i>Save app password
                                        </button>
                                        <a href="https://myaccount.google.com/apppasswords" target="_blank"
                                            rel="noopener" class="btn btn-secondary">
                                            Generate in Google <i class="bi bi-box-arrow-up-right ms-1"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <p class="set-hint mt-3">
                            The stored password is never displayed again. Saving a new one replaces it and clears the
                            connection warning.
                        </p>
                    </div>
                </section>
            @endif
        </div>

        {{-- ------------------------------------------------------------ AI settings --}}
        <div class="tab-pane fade {{ $activeTab === 'ai' ? 'show active' : '' }}" id="pane-ai" role="tabpanel"
            aria-labelledby="tab-ai" tabindex="0">
            <div class="emi-grid emi-grid--2-1 emi-grid--top">

                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">AI instructions</span>
                        <span class="emi-panel__hint">Business context for AI-written replies</span>
                    </div>
                    <div class="emi-panel__body">
                        {{--
                            Be accurate about reach. The prompt is read by
                            MailController::generateReplyDraft() and prepended to the
                            reply-draft request. The sentiment/category/action-required
                            classifier does NOT read it: its live call sites pass no
                            prompt, and the prompt text it does send is hardcoded.
                        --}}
                        <div class="alert alert-info" role="alert">
                            <i class="bi bi-info-circle-fill me-1"></i>
                            This prompt is used when the AI drafts a reply for you. It does not currently change how
                            mail is sorted into positive/negative or sales/AMC — that classifier runs on fixed rules.
                        </div>

                        <form action="{{ route('settings.ai') }}" method="POST" novalidate>
                            @csrf
                            <input type="hidden" name="active_tab" value="ai">

                            <div class="mb-3">
                                <label for="ai_prompt" class="form-label">Prompt</label>
                                <textarea class="form-control @error('ai_prompt') is-invalid @enderror" id="ai_prompt" name="ai_prompt" rows="4"
                                    maxlength="200" placeholder="e.g. Treat any mail mentioning a purchase order as sales and mark it action required.">{{ old('ai_prompt', $prompt->ai_prompt ?? '') }}</textarea>
                                @error('ai_prompt')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <p class="set-hint">Up to 200 characters. Plain instructions work best.</p>
                            </div>

                            <div class="mb-3">
                                <label for="keywords" class="form-label">Priority keywords</label>
                                <input type="text" class="form-control @error('keywords') is-invalid @enderror"
                                    id="keywords" name="keywords" maxlength="25"
                                    value="{{ old('keywords', $prompt->keywords ?? '') }}"
                                    placeholder="quote, renewal, amc">
                                @error('keywords')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <p class="set-hint">
                                    Up to 25 characters — a short comma-separated list. Stored and read by the inbox
                                    counters and the daily summary, though nothing displays it on screen yet.
                                </p>
                            </div>

                            <div class="set-actions">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-stars me-1"></i>Publish prompt
                                </button>
                                <span class="set-hint" style="margin-top:0;">
                                    Filling in either field is enough.
                                </span>
                            </div>
                        </form>
                    </div>
                </section>

                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">Active &amp; previous</span>
                    </div>
                    <div class="emi-panel__body">
                        @if ($prompt)
                            <div class="set-history__row" style="background:var(--emi-accent-soft);border-color:#d3ddfb;">
                                <div class="set-history__meta">In use since
                                    {{ optional($prompt->created_at)->format('d M Y') }}</div>
                                {{ $prompt->ai_prompt ?: '— no prompt text —' }}
                                @if ($prompt->keywords)
                                    <div class="mt-2"><span
                                            class="emi-pill emi-pill--blue">{{ $prompt->keywords }}</span></div>
                                @endif
                            </div>
                        @else
                            <p class="set-hint" style="margin-top:0;">
                                No prompt published yet — the classifier is running on its built-in rules.
                            </p>
                        @endif

                        @if ($promptHistory->isNotEmpty())
                            <hr class="my-3">
                            <div class="set-history">
                                @foreach ($promptHistory as $past)
                                    <div class="set-history__row">
                                        <div class="set-history__meta">Replaced ·
                                            {{ optional($past->created_at)->format('d M Y') }}</div>
                                        {{ \Illuminate\Support\Str::limit($past->ai_prompt ?: $past->keywords, 90) }}
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </section>
            </div>
        </div>

        {{-- -------------------------------------------------------------- Workspace --}}
        <div class="tab-pane fade {{ $activeTab === 'workspace' ? 'show active' : '' }}" id="pane-workspace"
            role="tabpanel" aria-labelledby="tab-workspace" tabindex="0">
            <div class="emi-grid emi-grid--2-1 emi-grid--top">

                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">Workspace configuration</span>
                    </div>
                    <div class="emi-panel__body">
                        <dl class="set-facts">
                            <dt>Internal domain</dt>
                            <dd>
                                {{ $domain->domain_name ?? 'Not set' }}
                                <a href="{{ route('domain') }}" class="emi-panel__link"
                                    style="margin-left:8px;">Change</a>
                            </dd>

                            <dt>Your department</dt>
                            <dd>{{ $department->department_name ?? ($user->group_lable ?: 'Not assigned') }}</dd>

                            <dt>Department head</dt>
                            <dd>{{ $user->is_department_head == 1 ? 'Yes — you lead this department' : 'No' }}</dd>

                            <dt>Managed by</dt>
                            <dd>{{ $isAdminUser ? 'This is an administrator account' : 'Administrator #' . $user->auth_id }}
                            </dd>
                        </dl>

                        <p class="set-hint mt-3">
                            The internal domain decides which senders are treated as colleagues rather than outside
                            contacts.
                        </p>
                    </div>
                </section>

                <section class="emi-panel">
                    <div class="emi-panel__head">
                        <span class="emi-panel__title">Manage</span>
                    </div>
                    <div class="emi-panel__body">
                        <div class="set-links">
                            <a href="{{ route('employee') }}">
                                <i class="bi bi-people"></i> Employees
                                <i class="bi bi-chevron-right"></i>
                            </a>

                            @if ($isAdminUser)
                                <a href="{{ route('departments.index') }}">
                                    <i class="bi bi-diagram-3"></i> Departments
                                    <i class="bi bi-chevron-right"></i>
                                </a>
                                <a href="{{ route('assign.department') }}">
                                    <i class="bi bi-person-plus"></i> Assign department
                                    <i class="bi bi-chevron-right"></i>
                                </a>
                                <a href="{{ route('showGroup') }}">
                                    <i class="bi bi-list-ul"></i> Department list
                                    <i class="bi bi-chevron-right"></i>
                                </a>
                                <a href="{{ route('add.route') }}">
                                    <i class="bi bi-plus-circle"></i> Add email account
                                    <i class="bi bi-chevron-right"></i>
                                </a>
                            @endif
                        </div>

                        @unless ($isAdminUser)
                            <p class="set-hint mt-3">
                                Department and account management is available to administrators.
                            </p>
                        @endunless

                        <hr class="my-3">

                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-outline-danger w-100">
                                <i class="bi bi-box-arrow-right me-1"></i>Sign out
                            </button>
                        </form>
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // --- Tabs -------------------------------------------------------
            // The server picks the tab after a redirect; a hash wins over that so
            // a reload or a bookmarked #mailbox lands where the user expects.
            var tabs = document.getElementById('settingsTabs');

            if (window.location.hash) {
                var wanted = tabs.querySelector('[data-bs-target="#pane-' + window.location.hash.slice(1) + '"]');
                if (wanted) new bootstrap.Tab(wanted).show();
            }

            tabs.addEventListener('shown.bs.tab', function(event) {
                var pane = event.target.getAttribute('data-bs-target') || '';
                // replaceState, not the hash directly, so switching tabs does not
                // push entries onto the back button or jump the scroll position.
                history.replaceState(null, '', pane.replace('#pane-', '#'));
            });

            // --- Password reveal toggles ------------------------------------
            document.querySelectorAll('[data-reveal]').forEach(function(button) {
                button.addEventListener('click', function() {
                    var field = document.querySelector(button.dataset.reveal);
                    if (!field) return;

                    var hidden = field.type === 'password';
                    field.type = hidden ? 'text' : 'password';
                    button.querySelector('i').className = hidden ? 'bi bi-eye-slash' : 'bi bi-eye';
                    button.setAttribute('aria-label', hidden ? 'Hide password' : 'Show password');
                });
            });

            // --- Connection test -------------------------------------------
            var testButton = document.getElementById('setTestConn');

            if (testButton) {
                testButton.addEventListener('click', function() {
                    var note = document.getElementById('setTestConnNote');
                    var badge = document.getElementById('setConnBadge');

                    testButton.disabled = true;
                    testButton.innerHTML =
                        '<span class="spinner-border spinner-border-sm me-1"></span>Testing…';
                    note.textContent = '';

                    fetch('{{ route('settings.connectionTest') }}', {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(function(response) {
                            if (!response.ok) throw new Error('HTTP ' + response.status);
                            return response.json();
                        })
                        .then(function(data) {
                            emiToast(data.message, {
                                type: data.ok ? 'success' : 'error',
                                title: data.ok ? 'Mailbox reachable' : 'Connection failed',
                                timeout: data.ok ? 4500 : 9000
                            });

                            note.textContent = data.ok ? 'Checked just now — all good.' :
                                'Checked just now — see the message above.';

                            badge.className = 'emi-pill ' + (data.ok ? 'emi-pill--green' :
                                'emi-pill--red');
                            badge.textContent = data.ok ? 'Mailbox connected' :
                                'Mailbox needs attention';
                        })
                        .catch(function(error) {
                            emiToast('The connection test could not be run: ' + error.message, {
                                type: 'error',
                                title: 'Test failed'
                            });
                        })
                        .finally(function() {
                            testButton.disabled = false;
                            testButton.innerHTML = '<i class="bi bi-plug me-1"></i>Test connection now';
                        });
                });
            }
        });
    </script>
@endsection