@extends('layouts.app')

@section('header')
    <div class="row g-2 align-items-center">
        <div class="col">
            <div class="page-pretitle">Administration</div>
            <h2 class="page-title">Users</h2>
            <div class="text-secondary mt-1">
                Company: <span class="fw-semibold">{{ $activeCompany?->name ?? 'None' }}</span>
            </div>
        </div>
        <div class="col-auto ms-auto d-flex gap-2 align-items-end">
            {{-- Its own GET form so it can't submit any of the modals on this
                 page. `tab` rides along because the tab links are fragments and
                 never touch the query string. --}}
            <form method="GET" action="{{ route('admin.users.index') }}">
                <input type="hidden" name="tab" value="{{ $tab }}">
                <x-employee-status-filter :selected="$status" class="form-select-sm" />
            </form>
            {{-- Workspace is a per-company add-on; without it there is nothing to sync. --}}
            @if ($workspaceEnabled)
                <form method="POST" action="{{ route('admin.users.sync-workspace') }}"
                      onsubmit="return confirm('Copy all workspace users into this company as workspace-sourced accounts?')">
                    @csrf
                    <button class="btn btn-outline-primary">
                        <i class="ti ti-refresh me-1"></i> Sync Workspace Users
                    </button>
                </form>
            @endif
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#user-create">
                <i class="ti ti-plus me-1"></i> New User
            </button>
        </div>
    </div>
@endsection

@section('content')
{{-- Workspace and native accounts are separate tabs (Obvizio's users pattern):
     they're managed differently, so the old "Source" column is gone — the
     active tab already says which kind you're looking at. --}}
<div class="card wl-card">
    <div class="card-header wl-header">
        <ul class="nav nav-pills wl-tabs" role="tablist">
            @if ($showWorkspaceTab)
                <li class="nav-item">
                    <a href="#tab-workspace" class="nav-link {{ $tab === 'workspace' ? 'active' : '' }}"
                       data-bs-toggle="tab" role="tab">
                        <i class="ti ti-plug-connected"></i>
                        <span>Workspace</span>
                        <span class="wl-tab-count">{{ $workspaceUsers->count() }}</span>
                    </a>
                </li>
            @endif
            <li class="nav-item">
                <a href="#tab-native" class="nav-link {{ $tab === 'native' ? 'active' : '' }}"
                   data-bs-toggle="tab" role="tab">
                    <i class="ti ti-user"></i>
                    <span>Native</span>
                    <span class="wl-tab-count">{{ $nativeUsers->count() }}</span>
                </a>
            </li>
        </ul>
    </div>

    @if ($showWorkspaceTab && ! $workspaceEnabled)
        {{-- One wrapper child: Tabler's .alert is a flex row, so loose inline
             nodes would each become their own column. --}}
        <div class="alert alert-warning m-3 mb-0" role="alert">
            <div>
                <i class="ti ti-plug-connected-x me-1"></i>
                The Workspace add-on is <strong>off</strong> for {{ $activeCompany?->name }}, but
                {{ $workspaceUsers->count() }} mirrored {{ \Illuminate\Support\Str::plural('account', $workspaceUsers->count()) }}
                {{ $workspaceUsers->count() === 1 ? 'is' : 'are' }} still here. They behave as native
                accounts (single Default Task, no task feed) until the add-on is turned back on.
            </div>
        </div>
    @endif

    <div class="tab-content">
        @if ($showWorkspaceTab)
            <div class="tab-pane {{ $tab === 'workspace' ? 'active show' : '' }}" id="tab-workspace" role="tabpanel">
                @include('admin.users._table', ['rows' => $workspaceUsers, 'kind' => 'workspace'])
            </div>
        @endif
        <div class="tab-pane {{ $tab === 'native' ? 'active show' : '' }}" id="tab-native" role="tabpanel">
            @include('admin.users._table', ['rows' => $nativeUsers, 'kind' => 'native'])
        </div>
    </div>
</div>

{{-- Edit modals — rendered OUTSIDE the table (a modal isn't valid markup
     inside <tbody>; the browser would foster-parent it and break layout). --}}
@foreach ($users as $user)
    @php $ukey = "user-edit-{$user->id}"; $uErr = old('form_key') === $ukey; @endphp
    <div class="modal modal-blur fade" id="{{ $ukey }}" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content js-modal-form" method="POST" action="{{ route('admin.users.update', $user) }}" novalidate>
                @csrf @method('PUT')
                <input type="hidden" name="form_key" value="{{ $ukey }}">
                <div class="modal-header">
                    <h5 class="modal-title">Edit user</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label required">Name</label>
                        <input name="name" maxlength="255" required
                               class="form-control @if($uErr && $errors->has('name')) is-invalid @endif"
                               value="{{ $uErr ? old('name', $user->name) : $user->name }}">
                        <div class="invalid-feedback">{{ $uErr && $errors->has('name') ? $errors->first('name') : 'Please enter a name.' }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label required">Email</label>
                        <input name="email" type="email" maxlength="255" required
                               class="form-control @if($uErr && $errors->has('email')) is-invalid @endif"
                               value="{{ $uErr ? old('email', $user->email) : $user->email }}">
                        <div class="invalid-feedback">{{ $uErr && $errors->has('email') ? $errors->first('email') : 'Enter a valid email address.' }}</div>
                    </div>
                    @if (auth()->user()->isSuperAdmin())
                        <div class="mb-3">
                            <label class="form-label">Company</label>
                            <select name="company_id" class="form-select">
                                @foreach ($companies as $company)
                                    <option value="{{ $company->id }}" @selected(($uErr ? old('company_id', $user->company_id) : $user->company_id) == $company->id)>
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    <div class="mb-3">
                        <label class="form-label">Role</label>
                        <select name="role_id" class="form-select">
                            <option value="">— None —</option>
                            @foreach ($roles as $role)
                                <option value="{{ $role->id }}" @selected($uErr ? old('role_id') == $role->id : $user->roles->contains($role->id))>
                                    {{ $role->label ?? $role->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @unless ($user->source === 'workspace')
                        <div class="mb-3">
                            <label class="form-label">New password</label>
                            <input name="password" type="password" minlength="8" autocomplete="new-password" placeholder="Leave blank to keep current"
                                   class="form-control @if($uErr && $errors->has('password')) is-invalid @endif">
                            <div class="invalid-feedback">{{ $uErr && $errors->has('password') ? $errors->first('password') : 'At least 8 characters.' }}</div>
                        </div>
                    @else
                        <div class="alert alert-info">Workspace-sourced — password is managed in the workspace.</div>
                    @endunless
                    @if ($user->isSuperAdmin())
                        <div class="alert alert-purple mb-0">
                            <i class="ti ti-shield-lock me-1"></i> Super Admin — full access to all companies. Cannot be changed.
                        </div>
                    @else
                        <label class="form-check">
                            <input type="hidden" name="is_admin" value="0">
                            <input class="form-check-input" type="checkbox" name="is_admin" value="1"
                                   {{ ($uErr ? old('is_admin') : $user->is_admin) ? 'checked' : '' }}>
                            <span class="form-check-label">Admin (web portal access)</span>
                        </label>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
@endforeach

{{-- Create modal --}}
@php $ucErr = old('form_key') === 'user-create'; @endphp
<div class="modal modal-blur fade" id="user-create" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content js-modal-form" method="POST" action="{{ route('admin.users.store') }}" novalidate>
            @csrf
            <input type="hidden" name="form_key" value="user-create">
            <div class="modal-header">
                <h5 class="modal-title">New user</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-secondary">
                    Added to <span class="fw-semibold">{{ $activeCompany?->name ?? 'no company' }}</span> as a native account.
                </p>
                <div class="mb-3">
                    <label class="form-label required">Name</label>
                    <input name="name" maxlength="255" required
                           class="form-control @if($ucErr && $errors->has('name')) is-invalid @endif"
                           value="{{ $ucErr ? old('name') : '' }}">
                    <div class="invalid-feedback">{{ $ucErr && $errors->has('name') ? $errors->first('name') : 'Please enter a name.' }}</div>
                </div>
                <div class="mb-3">
                    <label class="form-label required">Email</label>
                    <input name="email" type="email" maxlength="255" required
                           class="form-control @if($ucErr && $errors->has('email')) is-invalid @endif"
                           value="{{ $ucErr ? old('email') : '' }}">
                    <div class="invalid-feedback">{{ $ucErr && $errors->has('email') ? $errors->first('email') : 'Enter a valid email address.' }}</div>
                </div>
                <div class="mb-3">
                    <label class="form-label required">Password</label>
                    <input name="password" type="password" minlength="8" required autocomplete="new-password"
                           class="form-control @if($ucErr && $errors->has('password')) is-invalid @endif">
                    <div class="invalid-feedback">{{ $ucErr && $errors->has('password') ? $errors->first('password') : 'At least 8 characters.' }}</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Role</label>
                    <select name="role_id" class="form-select">
                        <option value="">— None —</option>
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}" @selected($ucErr && old('role_id') == $role->id)>{{ $role->label ?? $role->name }}</option>
                        @endforeach
                    </select>
                </div>
                <label class="form-check">
                    <input type="hidden" name="is_admin" value="0">
                    <input class="form-check-input" type="checkbox" name="is_admin" value="1" {{ $ucErr && old('is_admin') ? 'checked' : '' }}>
                    <span class="form-check-label">Admin (web portal access)</span>
                </label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Create user</button>
            </div>
        </form>
    </div>
</div>

@include('admin.partials.modal-form-ux')

{{-- ── Tasks diagnostic ──────────────────────────────────────────────────────
     Side-by-side: what this employee's desktop was last handed vs what the
     workspace has right now. Read-only. --}}
<div class="modal modal-blur fade" id="user-tasks" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="ut-title">Tasks</h5>
                    <div class="text-secondary" style="font-size:.8125rem;" id="ut-sub"></div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="ut-body">
                <div class="text-center text-secondary py-4">Loading…</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- Keep the chosen tab in the URL so a reload / back-button (and the
     redirect after create-edit-delete) lands on the same list. --}}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // ── Tasks diagnostic modal ──────────────────────────────────────────
        const utModalEl = document.getElementById('user-tasks');
        const utBody = document.getElementById('ut-body');
        const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));

        const badge = { fresh: 'bg-green-lt', stale: 'bg-yellow-lt', cold: 'bg-red-lt' };

        const list = (rows, empty) => rows.length
            ? '<ul class="list-unstyled mb-0">' + rows.map((t) =>
                `<li class="mb-1"><code>#${t.id}</code> ${esc(t.title)}</li>`).join('') + '</ul>'
            : `<div class="text-secondary">${empty}</div>`;

        const column = (heading, g, empty) => `
            <div class="col-6">
                <div class="text-uppercase text-secondary mb-2" style="font-size:.65rem;letter-spacing:.06em;">${heading}</div>
                <div class="mb-3">
                    <div class="fw-semibold mb-1"><i class="ti ti-player-play text-blue me-1"></i>In progress</div>
                    ${list(g.in_progress, '— none —')}
                </div>
                <div>
                    <div class="fw-semibold mb-1"><i class="ti ti-inbox me-1"></i>Assigned (${g.assigned.length})</div>
                    ${list(g.assigned, empty)}
                </div>
            </div>`;

        const render = (d) => {
            const snap = d.snapshot;
            const sub = snap
                ? `<span class="badge ${badge[snap.freshness]}">synced ${esc(snap.synced_human)}</span>`
                  + (snap.app_version ? ` · v${esc(snap.app_version)}` : '')
                  + (snap.device_id ? ` · ${esc(snap.device_id)}` : '')
                : '<span class="badge bg-red-lt">never synced</span> — this desktop has not fetched tasks yet';
            document.getElementById('ut-sub').innerHTML = sub;

            if (!snap) {
                utBody.innerHTML = `<div class="alert alert-warning mb-3">No snapshot yet — the app has never
                    fetched a task list for this user, so there is nothing to compare against.</div>
                    <div class="row">${column('WORKSPACE NOW (live)', d.live.grouped, '— none —')}</div>`;
                return;
            }

            const df = d.diff;
            // NOTE: Tabler's `.alert` is `display: flex; flex-direction: row`, so
            // every child becomes a flex item — inline <code>/<strong>/text got
            // laid out as separate columns. Keep alert content in ONE wrapper.
            let banner = '<div class="alert alert-success mb-3"><div>'
                + '<i class="ti ti-check me-1"></i>In sync — what this employee sees still matches the workspace.'
                + '</div></div>';
            if (df.diverged) {
                const bits = [];
                if (df.in_progress_moved) {
                    bits.push(df.seen_running
                        ? `they see <code>#${df.seen_running}</code> as running, workspace says `
                          + (df.live_running ? `<code>#${df.live_running}</code>` : '<strong>nothing</strong>')
                        : `workspace now has <code>#${df.live_running}</code> running, their app shows none`);
                }
                if (df.removed.length) bits.push(`${df.removed.length} task(s) left their list`);
                if (df.added.length)   bits.push(`${df.added.length} new task(s) assigned`);
                if (df.changed.length) bits.push(`${df.changed.length} status change(s)`);
                banner = `<div class="alert alert-warning mb-3"><div>
                    <i class="ti ti-alert-triangle me-1"></i><strong>Diverged</strong> — ${bits.join(' · ')}.
                    Their app corrects itself on the next refresh.</div></div>`;
            }

            let details = '';
            if (df.removed.length || df.changed.length || df.added.length) {
                const row = (icon, cls, text) => `<div class="${cls}"><i class="ti ${icon} me-1"></i>${text}</div>`;
                details = '<hr><div class="text-uppercase text-secondary mb-2" style="font-size:.65rem;letter-spacing:.06em;">Since they synced</div>'
                    + df.removed.map((t) => row('ti-arrow-right', 'text-orange', `<code>#${t.id}</code> ${esc(t.title)} — left the list (was ${esc(t.was)})`)).join('')
                    + df.changed.map((t) => row('ti-refresh', 'text-yellow', `<code>#${t.id}</code> ${esc(t.title)} — ${esc(t.was)} → ${esc(t.now)}`)).join('')
                    + df.added.map((t) => row('ti-plus', 'text-green', `<code>#${t.id}</code> ${esc(t.title)} — newly assigned`)).join('');
            }

            utBody.innerHTML = banner
                + `<div class="row">
                     ${column(`THEIR DESKTOP (synced ${esc(snap.synced_human)})`, snap.grouped, '— none —')}
                     ${column('WORKSPACE NOW (live)', d.live.grouped, '— none —')}
                   </div>` + details;
        };

        // Bootstrap opens the modal itself (data-bs-toggle on the button); we just
        // load the right user's data when it opens. `relatedTarget` is the button
        // that triggered it, which is how we know which row.
        utModalEl?.addEventListener('show.bs.modal', async (event) => {
            const btn = event.relatedTarget;
            if (!btn) return;

            document.getElementById('ut-title').textContent = 'Tasks — ' + btn.dataset.name;
            document.getElementById('ut-sub').textContent = '';
            utBody.innerHTML = '<div class="text-center text-secondary py-4">Loading…</div>';

            try {
                const r = await fetch(btn.dataset.url, { headers: { Accept: 'application/json' } });
                const j = await r.json();
                if (!j.success) throw new Error(j.message || 'Could not load.');
                render(j.data);
            } catch (e) {
                utBody.innerHTML = `<div class="alert alert-danger mb-0">${esc(e.message)}</div>`;
            }
        });

        document.querySelectorAll('.wl-tabs [data-bs-toggle="tab"]').forEach((el) => {
            el.addEventListener('shown.bs.tab', (e) => {
                const tab = e.target.getAttribute('href').replace('#tab-', '');
                const url = new URL(window.location);
                url.searchParams.set('tab', tab);
                history.replaceState(null, '', url);
            });
        });
    });
</script>
@endsection

@push('styles')
<style>
    /* Tab pills — same visual language as Obvizio's Users list. */
    .wl-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: .625rem; padding-bottom: .625rem; }
    .wl-tabs { gap: .25rem; margin: 0; }
    .wl-tabs .nav-link {
        display: inline-flex; align-items: center; gap: .5rem;
        border: 0; background: transparent; cursor: pointer;
        font-weight: 600; font-size: .875rem;
        color: var(--tblr-secondary);
        padding: .5rem .875rem; border-radius: var(--tblr-border-radius);
        transition: background-color .15s ease, color .15s ease;
    }
    .wl-tabs .nav-link:hover { background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); }
    .wl-tabs .nav-link.active { background: var(--tblr-primary); color: #fff; }
    .wl-tabs .nav-link i { font-size: 1.05rem; }
    .wl-tab-count {
        display: inline-block; min-width: 1.5rem; text-align: center;
        padding: .0625rem .375rem; border-radius: 999px;
        font-size: .75rem; font-weight: 700;
        background: rgba(var(--tblr-body-color-rgb), .08);
    }
    .wl-tabs .nav-link.active .wl-tab-count { background: rgba(255, 255, 255, .25); }
</style>
@endpush

@push('scripts')
<script>
// Bulk invite selection. Each tab has its own checkbox set and its own footer
// form, keyed by `kind` — so ticking people on the Workspace tab can't send the
// Native tab's form, and vice versa.
(function () {
    document.querySelectorAll('[data-invite-submit]').forEach((button) => {
        const kind  = button.dataset.inviteSubmit;
        const boxes = [...document.querySelectorAll(`[data-invite-row="${kind}"]`)];
        const all   = document.querySelector(`[data-invite-all="${kind}"]`);
        const count = document.querySelector(`[data-invite-count="${kind}"]`);

        const sync = () => {
            const picked = boxes.filter((b) => b.checked).length;

            button.disabled = picked === 0;
            count.textContent = picked === 0
                ? 'No one selected'
                : `${picked} selected`;

            if (all) {
                all.checked = picked > 0 && picked === boxes.length;
                // Some-but-not-all reads as a dash rather than a tick, so the
                // header box never claims the whole page is selected.
                all.indeterminate = picked > 0 && picked < boxes.length;
            }
        };

        boxes.forEach((b) => b.addEventListener('change', sync));
        all?.addEventListener('change', () => {
            boxes.forEach((b) => { b.checked = all.checked; });
            sync();
        });

        button.form.addEventListener('submit', (e) => {
            const picked = boxes.filter((b) => b.checked).length;
            if (!confirm(`Send the Worklance download invite to ${picked} ${picked === 1 ? 'person' : 'people'}?`)) {
                e.preventDefault();
                return;
            }
            // Sends go out one SMTP connection at a time, so a large batch is
            // not instant — stop an impatient second click doubling the mail.
            button.disabled = true;
            button.innerHTML = '<i class="ti ti-loader me-1"></i>Sending…';
        });

        sync();
    });
})();
</script>
@endpush