<?= $this->extend('layouts/dashboard') ?>

<?= $this->section('content') ?>
<?php
$roleLabels = [
    'owner' => lang('Backoffice.owner'),
    'admin' => lang('Backoffice.admin'),
    'manager' => lang('Backoffice.manager'),
    'member' => lang('Backoffice.member'),
    'viewer' => lang('Backoffice.viewer'),
    'auditor' => lang('Backoffice.auditor'),
];
$roleStyles = [
    'owner' => 'border-amber-400/20 bg-amber-400/10 text-amber-100',
    'admin' => 'border-cyan-400/20 bg-cyan-400/10 text-cyan-100',
    'manager' => 'border-violet-400/20 bg-violet-400/10 text-violet-100',
    'member' => 'border-emerald-400/20 bg-emerald-400/10 text-emerald-100',
    'viewer' => 'border-slate-400/20 bg-slate-400/10 text-slate-200',
    'auditor' => 'border-rose-400/20 bg-rose-400/10 text-rose-100',
];
$activeMembers = array_values(array_filter($members, static fn ($member) => ($member['status'] ?? '') === 'active'));
$recentLogins = array_values(array_filter($members, static fn ($member) => ! empty($member['last_login_at'])));
$managers = array_values(array_filter($members, static fn ($member) => in_array($member['role'] ?? '', ['owner', 'admin', 'manager'], true)));
?>
<section class="grid gap-4 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
    <article class="overflow-hidden rounded-[30px] border border-white/10 bg-gradient-to-br from-cyan-500/15 via-slate-900 to-emerald-500/10 p-6 shadow-glow">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div class="max-w-2xl">
                <div class="inline-flex rounded-full border border-cyan-400/30 bg-cyan-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-cyan-100"><?= esc(lang('Backoffice.teamWorkspace')) ?></div>
                <h1 class="mt-4 text-3xl font-semibold tracking-tight text-white sm:text-4xl"><?= esc(lang('Backoffice.teamHeading')) ?></h1>
                <p class="mt-4 max-w-xl text-sm leading-7 text-slate-300"><?= esc(lang('Backoffice.teamIntro')) ?></p>
            </div>
            <div class="flex flex-wrap gap-3">
                <a href="<?= site_url('account') ?>" class="inline-flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 px-5 py-3 text-sm font-medium text-slate-100 transition hover:bg-white/10"><?= esc(lang('Backoffice.myAccount')) ?></a>
                <?php if ($canManageTeam): ?>
                    <a href="<?= site_url('team/new') ?>" class="inline-flex items-center justify-center rounded-2xl bg-gradient-to-r from-emerald-400 to-cyan-400 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:opacity-90"><?= esc(lang('Backoffice.newMember')) ?></a>
                <?php endif; ?>
            </div>
        </div>
    </article>
    <article class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <div class="text-xs uppercase tracking-[0.24em] text-slate-400"><?= esc(lang('Backoffice.teamPulse')) ?></div>
        <div class="mt-4 grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
            <div class="rounded-2xl border border-white/10 bg-slate-950/60 p-4"><div class="text-sm text-slate-400"><?= esc(lang('Backoffice.totalMembers')) ?></div><div class="mt-2 text-3xl font-semibold text-white"><?= count($members) ?></div></div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-sm text-slate-400"><?= esc(lang('Backoffice.activeMembers')) ?></div><div class="mt-2 text-2xl font-semibold text-emerald-200"><?= count($activeMembers) ?></div></div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-sm text-slate-400"><?= esc(lang('Backoffice.leadership')) ?></div><div class="mt-2 text-2xl font-semibold text-cyan-200"><?= count($managers) ?></div></div>
        </div>
    </article>
</section>
<section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <article class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur"><div class="text-xs uppercase tracking-[0.22em] text-slate-400"><?= esc(lang('Backoffice.ownersAdmins')) ?></div><div class="mt-4 text-4xl font-semibold tracking-tight text-white"><?= count(array_filter($members, static fn ($member) => in_array($member['role'] ?? '', ['owner', 'admin'], true))) ?></div></article>
    <article class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur"><div class="text-xs uppercase tracking-[0.22em] text-slate-400"><?= esc(lang('Backoffice.managers')) ?></div><div class="mt-4 text-4xl font-semibold tracking-tight text-white"><?= count(array_filter($members, static fn ($member) => ($member['role'] ?? '') === 'manager')) ?></div></article>
    <article class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur"><div class="text-xs uppercase tracking-[0.22em] text-slate-400"><?= esc(lang('Backoffice.viewersAuditors')) ?></div><div class="mt-4 text-4xl font-semibold tracking-tight text-white"><?= count(array_filter($members, static fn ($member) => in_array($member['role'] ?? '', ['viewer', 'auditor'], true))) ?></div></article>
    <article class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur"><div class="text-xs uppercase tracking-[0.22em] text-slate-400"><?= esc(lang('Backoffice.recentLogins')) ?></div><div class="mt-4 text-4xl font-semibold tracking-tight text-white"><?= count($recentLogins) ?></div></article>
</section>
<?php if ($members === []): ?>
<section class="rounded-[30px] border border-dashed border-white/10 bg-white/5 p-10 text-center backdrop-blur"><div class="mx-auto max-w-xl"><div class="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl border border-white/10 bg-slate-900/60 text-2xl text-cyan-200">+</div><h2 class="mt-5 text-2xl font-semibold text-white"><?= esc(lang('Backoffice.noTeam')) ?></h2><p class="mt-3 text-sm leading-7 text-slate-400"><?= esc(lang('Backoffice.noTeamIntro')) ?></p><?php if ($canManageTeam): ?><a href="<?= site_url('team/new') ?>" class="mt-6 inline-flex items-center justify-center rounded-2xl bg-gradient-to-r from-emerald-400 to-cyan-400 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:opacity-90"><?= esc(lang('Backoffice.addFirstMember')) ?></a><?php endif; ?></div></section>
<?php else: ?>
<section class="grid gap-4 xl:grid-cols-[minmax(0,1fr)_340px]">
<div class="overflow-hidden rounded-[30px] border border-white/10 bg-white/5 backdrop-blur"><div class="border-b border-white/10 px-6 py-5"><h2 class="text-xl font-semibold text-white"><?= esc(lang('Backoffice.roster')) ?></h2><p class="mt-1 text-sm text-slate-400"><?= esc(lang('Backoffice.rosterIntro')) ?></p></div><div class="divide-y divide-white/5"><?php foreach ($members as $member): ?><?php $initials = strtoupper(substr((string) $member['name'], 0, 2)); $isCurrentUser = ! empty($authUser) && (int) ($authUser['id'] ?? 0) === (int) ($member['user_id'] ?? 0); $role = $member['role'] ?? 'member'; $roleStyle = $roleStyles[$role] ?? $roleStyles['member']; ?><article class="flex flex-col gap-4 px-6 py-5 transition hover:bg-white/5 md:flex-row md:items-center md:justify-between"><div class="flex items-center gap-4"><div class="flex h-14 w-14 items-center justify-center rounded-3xl bg-gradient-to-br from-emerald-400 to-cyan-400 text-sm font-bold text-slate-950"><?= esc($initials) ?></div><div><div class="flex flex-wrap items-center gap-2"><h3 class="text-lg font-semibold text-white"><?= esc($member['name']) ?></h3><?php if ($isCurrentUser): ?><span class="inline-flex rounded-full border border-cyan-400/20 bg-cyan-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-cyan-100"><?= esc(lang('Backoffice.you')) ?></span><?php endif; ?></div><p class="mt-1 text-sm text-slate-400"><?= esc($member['email']) ?></p><div class="mt-3 flex flex-wrap gap-2"><span class="inline-flex rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] <?= $roleStyle ?>"><?= esc($roleLabels[$role] ?? ucfirst($role)) ?></span><span class="inline-flex rounded-full border border-white/10 bg-slate-900/60 px-3 py-1 text-xs font-medium uppercase tracking-[0.16em] text-slate-300"><?= esc($member['status']) ?></span></div></div></div><div class="w-full max-w-[420px] space-y-3"><div class="grid gap-3 text-sm text-slate-300 sm:grid-cols-2"><div class="rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3"><div class="text-[11px] uppercase tracking-[0.18em] text-slate-500"><?= esc(lang('Backoffice.joined')) ?></div><div class="mt-1 font-medium text-white"><?= esc($member['joined_at'] ? date('d/m/Y', strtotime((string) $member['joined_at'])) : '-') ?></div></div><div class="rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3"><div class="text-[11px] uppercase tracking-[0.18em] text-slate-500"><?= esc(lang('Backoffice.lastLogin')) ?></div><div class="mt-1 font-medium text-white"><?= esc($member['last_login_at'] ? date('d/m/Y H:i', strtotime((string) $member['last_login_at'])) : lang('Backoffice.never')) ?></div></div></div><div class="flex flex-wrap gap-2"><?php if ($isCurrentUser): ?><a href="<?= site_url('account') ?>" class="inline-flex items-center justify-center rounded-2xl border border-cyan-400/20 bg-cyan-400/10 px-4 py-2 text-sm font-semibold text-cyan-100 transition hover:bg-cyan-400/20"><?= esc(lang('Backoffice.editAccount')) ?></a><?php endif; ?><?php if ($canManageTeam): ?><a href="<?= site_url('team/' . $member['id'] . '/edit') ?>" class="inline-flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-slate-100 transition hover:bg-white/10"><?= esc(lang('Backoffice.editMember')) ?></a><?php if (! $isCurrentUser): ?><form method="post" action="<?= site_url('team/' . $member['id'] . '/delete') ?>" onsubmit="return confirm('<?= esc(lang('Backoffice.removeMemberConfirm'), 'js') ?>');"><?= csrf_field() ?><button type="submit" class="inline-flex items-center justify-center rounded-2xl border border-rose-400/20 bg-rose-400/10 px-4 py-2 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/20"><?= esc(lang('Backoffice.remove')) ?></button></form><?php endif; ?><?php endif; ?></div></div></article><?php endforeach; ?></div></div>
<aside class="space-y-4"><section class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur"><h2 class="text-lg font-semibold text-white"><?= esc(lang('Backoffice.guidance')) ?></h2><div class="mt-4 space-y-3"><div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4"><div class="text-sm font-semibold text-white"><?= esc(lang('Backoffice.teamGuideOwnerTitle')) ?></div><p class="mt-2 text-sm leading-6 text-slate-400"><?= esc(lang('Backoffice.teamGuideOwnerBody')) ?></p></div><div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4"><div class="text-sm font-semibold text-white"><?= esc(lang('Backoffice.teamGuideManagerTitle')) ?></div><p class="mt-2 text-sm leading-6 text-slate-400"><?= esc(lang('Backoffice.teamGuideManagerBody')) ?></p></div><div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4"><div class="text-sm font-semibold text-white"><?= esc(lang('Backoffice.teamGuideViewerTitle')) ?></div><p class="mt-2 text-sm leading-6 text-slate-400"><?= esc(lang('Backoffice.teamGuideViewerBody')) ?></p></div></div></section><section class="rounded-[30px] border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-6 backdrop-blur"><h2 class="text-lg font-semibold text-white"><?= esc(lang('Backoffice.nextStep')) ?></h2><p class="mt-3 text-sm leading-6 text-slate-400"><?= esc(lang('Backoffice.nextStepIntro')) ?></p><div class="mt-5 flex flex-wrap gap-3"><a href="<?= site_url('account') ?>" class="inline-flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 px-5 py-3 text-sm font-medium text-slate-200 transition hover:bg-white/10"><?= esc(lang('Backoffice.manageMyAccount')) ?></a><?php if ($canManageTeam): ?><a href="<?= site_url('team/new') ?>" class="inline-flex items-center justify-center rounded-2xl bg-gradient-to-r from-emerald-400 to-cyan-400 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:opacity-90"><?= esc(lang('Backoffice.inviteMember')) ?></a><?php endif; ?></div></section></aside>
</section>
<?php endif; ?>
<?= $this->endSection() ?>