@extends('layouts.app', [
    'title' => 'Teams | VejalNai',
    'topbarTitle' => 'Teams',
    'topbarSubtitle' => 'Create human support roles, privileges, and AI monitoring access',
])

@section('content')
    <section class="page">
        <div class="section-header">
            <div>
                <h1>Teams</h1>
                <p class="muted" style="margin: 0;">Manage human users, role presets, and AI monitoring privileges in one table.</p>
            </div>
            <a class="button secondary" href="{{ route('conversations.index') }}">Open inbox</a>
        </div>

        @if (session('status'))
            <div class="flash">{{ session('status') }}</div>
        @endif

        @if ($errors->any())
            <div class="flash" style="background: var(--red-soft); border-color: #ffc4ce; color: #b42337;">
                Please review the highlighted team row.
            </div>
        @endif

        <div class="grid" style="margin-bottom: 16px;">
            <article class="card metric-card">
                <span class="metric-label">Team members</span>
                <strong class="metric-value">{{ $memberships->count() }}</strong>
                <span class="muted">Human users in {{ $organization->name }}</span>
            </article>
            <article class="card metric-card">
                <span class="metric-label">Human handoffs</span>
                <strong class="metric-value">{{ $pendingHumanCount }}</strong>
                <span class="muted">Complex conversations waiting</span>
            </article>
            <article class="card metric-card">
                <span class="metric-label">AI monitored today</span>
                <strong class="metric-value">{{ $botMessagesToday }}</strong>
                <span class="muted">Bot conversation threads with replies</span>
            </article>
        </div>

        <section class="panel">
            <div class="panel-header">
                <div>
                    <h2>Team access matrix</h2>
                    <span class="muted">Add, update, or remove human users without leaving the table.</span>
                </div>
                <span class="badge info">{{ $memberships->where('role', 'agent')->count() }} agents</span>
            </div>

            <div class="table-wrap">
                <table class="team-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Role</th>
                            <th>Status</th>
                            <th>Privileges</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="background: #fcfdff;">
                            <td>
                                <form id="add-team-member" method="POST" action="{{ route('teams.store') }}">
                                    @csrf
                                </form>
                                <div class="team-user-cell">
                                    <input class="form-control" form="add-team-member" name="name" value="{{ old('name') }}" placeholder="Full name" required>
                                    <input class="form-control" form="add-team-member" type="email" name="email" value="{{ old('email') }}" placeholder="email@example.com" required>
                                    <input class="form-control" form="add-team-member" type="password" name="password" autocomplete="new-password" placeholder="Initial password">
                                </div>
                            </td>
                            <td>
                                <select class="form-control" form="add-team-member" name="role" required>
                                    @foreach ($roles as $role => $label)
                                        <option value="{{ $role }}" @selected(old('role', 'agent') === $role)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <span class="badge warning">New member</span>
                                <span class="field-hint">Password required for new emails.</span>
                            </td>
                            <td>
                                <div class="team-privileges">
                                    @foreach ($privileges as $key => $label)
                                        <label class="team-privilege">
                                            <input form="add-team-member" type="checkbox" name="privileges[]" value="{{ $key }}" @checked(in_array($key, old('privileges', $roleDefaults['agent']), true))>
                                            <span>{{ $label }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </td>
                            <td>
                                <div class="team-actions">
                                    <button class="button" form="add-team-member" type="submit" @disabled(! $canManageTeam)>Add</button>
                                </div>
                            </td>
                        </tr>

                        @foreach ($memberships as $membership)
                            <tr>
                                <td>
                                    <form id="update-member-{{ $membership->id }}" method="POST" action="{{ route('teams.update', $membership) }}">
                                        @csrf
                                        @method('PUT')
                                    </form>
                                    <div class="team-user-cell">
                                        <strong>{{ $membership->user->name }}</strong>
                                        <span class="muted">{{ $membership->user->email }}</span>
                                    </div>
                                </td>
                                <td>
                                    <select class="form-control" form="update-member-{{ $membership->id }}" name="role" @disabled(! $canManageTeam)>
                                        @foreach ($roles as $role => $label)
                                            <option value="{{ $role }}" @selected($membership->role === $role)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <span @class(['badge', 'info' => $membership->role === 'owner', 'warning' => $membership->role === 'observer'])>
                                        {{ $roles[$membership->role] ?? ucfirst($membership->role) }}
                                    </span>
                                    <span class="field-hint">{{ $membership->last_active_at?->diffForHumans() ?? 'Not tracked yet' }}</span>
                                </td>
                                <td>
                                    <div class="team-privileges">
                                        @foreach ($privileges as $key => $label)
                                            <label class="team-privilege">
                                                <input form="update-member-{{ $membership->id }}" type="checkbox" name="privileges[]" value="{{ $key }}" @checked(in_array($key, $membership->privileges ?? [], true)) @disabled(! $canManageTeam)>
                                                <span>{{ $label }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                </td>
                                <td>
                                    <div class="team-actions">
                                        @if ($canManageTeam && auth()->id() !== $membership->user_id)
                                            <form id="remove-member-{{ $membership->id }}" method="POST" action="{{ route('teams.destroy', $membership) }}">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                            <button class="button secondary" form="remove-member-{{ $membership->id }}" type="submit">Remove</button>
                                        @endif
                                        <button class="button" form="update-member-{{ $membership->id }}" type="submit" @disabled(! $canManageTeam)>Save</button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>
    </section>
@endsection
