<?php

/**
 * Super Admin — Crew Accounts Management View
 */

/** @var array $crews */
/** @var array $errors */
/** @var array $old */

$errors = $errors ?? [];
$old = $old ?? [];

?>

<div class="max-w-6xl mx-auto space-y-6">

    <!-- Header Section -->
    <div>
        <h1 class="page-h1">
            <span class="page-header-icon">
                <i class="fa-solid fa-users-gear"></i>
            </span>
            Crew Accounts Management
        </h1>
        <p class="page-subtitle">Create crew accounts and view their assigned workspace metrics.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
        
        <!-- Left: Form to Create Crew -->
        <div class="card p-0 bg-white border border-slate-150 rounded-2xl shadow-sm overflow-hidden">
            <div class="bg-slate-50 px-5 py-3 border-b border-slate-150">
                <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider">Create Crew Account</h3>
            </div>
            
            <form action="<?= url('/app/admin/crews/create') ?>" method="POST" class="p-5 space-y-4">
                <?= csrf_field() ?>

                <div class="form-group space-y-1">
                    <label for="display_name" class="text-xxs font-bold text-slate-650">Display Name</label>
                    <input type="text" name="display_name" id="display_name" value="<?= escape_html($old['display_name'] ?? '') ?>" placeholder="e.g. Alex Operator" class="form-input text-xs w-full rounded-xl <?= isset($errors['display_name']) ? 'is-invalid' : '' ?>">
                    <?php if (isset($errors['display_name'])): ?>
                        <p class="text-[10px] text-rose-600 font-semibold"><?= escape_html($errors['display_name']) ?></p>
                    <?php endif; ?>
                </div>

                <div class="form-group space-y-1">
                    <label for="username" class="text-xxs font-bold text-slate-650">Username</label>
                    <input type="text" name="username" id="username" value="<?= escape_html($old['username'] ?? '') ?>" placeholder="e.g. alexcrew" class="form-input text-xs w-full rounded-xl <?= isset($errors['username']) ? 'is-invalid' : '' ?>">
                    <?php if (isset($errors['username'])): ?>
                        <p class="text-[10px] text-rose-600 font-semibold"><?= escape_html($errors['username']) ?></p>
                    <?php endif; ?>
                </div>

                <div class="form-group space-y-1">
                    <label for="email" class="text-xxs font-bold text-slate-650">Email Address</label>
                    <input type="email" name="email" id="email" value="<?= escape_html($old['email'] ?? '') ?>" placeholder="e.g. crew@inveetaire.local" class="form-input text-xs w-full rounded-xl <?= isset($errors['email']) ? 'is-invalid' : '' ?>">
                    <?php if (isset($errors['email'])): ?>
                        <p class="text-[10px] text-rose-600 font-semibold"><?= escape_html($errors['email']) ?></p>
                    <?php endif; ?>
                </div>

                <div class="form-group space-y-1">
                    <label for="password" class="text-xxs font-bold text-slate-650">Password</label>
                    <input type="password" name="password" id="password" placeholder="••••••••••••" class="form-input text-xs w-full rounded-xl <?= isset($errors['password']) ? 'is-invalid' : '' ?>">
                    <?php if (isset($errors['password'])): ?>
                        <p class="text-[10px] text-rose-600 font-semibold"><?= escape_html($errors['password']) ?></p>
                    <?php endif; ?>
                </div>

                <button type="submit" class="w-full btn btn-primary text-xs font-bold py-2 rounded-xl flex items-center justify-center gap-1">
                    <i class="fa-solid fa-user-plus text-[10px]"></i> Create Crew Account
                </button>
            </form>
        </div>

        <!-- Right: Crew List Table -->
        <div class="lg:col-span-2 bg-white border border-slate-150 rounded-2xl shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse text-xxs">
                    <thead>
                        <tr class="bg-slate-50 border-b border-slate-150 text-slate-400 font-bold uppercase tracking-wider text-[10px]">
                            <th class="py-3 px-4">Display Name</th>
                            <th class="py-3 px-4">Username</th>
                            <th class="py-3 px-4">Email</th>
                            <th class="py-3 px-4">Assigned Workspaces</th>
                            <th class="py-3 px-4">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-slate-650">
                        <?php if (empty($crews)): ?>
                            <tr>
                                <td colspan="5" class="py-8">
                                    <div class="empty-state-elegant border-none bg-transparent shadow-none py-6">
                                        <div class="empty-state-icon text-2xl"><i class="fa-solid fa-users-slash"></i></div>
                                        <h3 class="empty-state-title">No crew accounts</h3>
                                        <p class="empty-state-text">Create one on the left to get started.</p>
                                    </div>
                                </td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($crews as $cr): ?>
                                <tr class="hover:bg-slate-50/50 transition-colors">
                                    <td class="py-3.5 px-4 font-bold text-slate-800"><?= escape_html($cr['display_name'] ?: $cr['username']) ?></td>
                                    <td class="py-3.5 px-4 font-mono"><?= escape_html($cr['username']) ?></td>
                                    <td class="py-3.5 px-4 font-mono"><?= escape_html($cr['email']) ?></td>
                                    <td class="py-3.5 px-4">
                                        <span class="inline-flex items-center gap-1 font-bold px-2 py-0.5 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700">
                                            <i class="fa-solid fa-calendar-check text-[9px]"></i> <?= (int) $cr['workspace_count'] ?> Workspaces
                                        </span>
                                    </td>
                                    <td class="py-3.5 px-4">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold uppercase <?= $cr['is_active'] ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' ?>">
                                            <?= $cr['is_active'] ? 'Active' : 'Inactive' ?>
                                        </span>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

</div>
