@extends('layouts.app')

@section('title', $team['name'] . ' Profile')

@section('content')
<div class="container-fluid px-0 py-0" data-reveal>
    <!-- Team Cover -->
    <div class="position-relative" style="height: 280px; overflow: hidden; background: linear-gradient(135deg, #161820 0%, #090B0F 100%);">
        <img src="{{ asset('assets/images/generated/heroes/hero-arena.webp') }}" alt="Cover" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.35;">
        <div class="position-absolute" style="inset: 0; background: linear-gradient(to top, var(--arena-bg) 0%, transparent 100%);"></div>
    </div>

    <!-- Header Overlay Details -->
    <div class="container-fluid px-4" style="margin-top: -80px; position: relative; z-index: var(--z-raised);">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end gap-3 mb-4">
            <!-- Left Info -->
            <div class="d-flex flex-column flex-md-row align-items-md-end gap-3">
                <div class="position-relative">
                    <img src="{{ asset($team['logo']) }}" alt="{{ $team['name'] }}"
                         style="width: 96px; height: 96px; border-radius: var(--r-lg); object-fit: contain; border: 4px solid var(--arena-bg); background: var(--arena-surface-03); padding: 8px;"
                         onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22><rect width=%2296%22 height=%2296%22 rx=%2216%22 fill=%22%231D2030%22/></svg>'">
                </div>
                <div>
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <h1 class="display-md mb-0 text-white" style="line-height: 1.1;">{{ $team['name'] }}</h1>
                        <span class="badge-arena badge-muted" style="font-size: 0.6rem; font-weight: 800;">[{{ $team['tag'] }}]</span>
                        @if($team['verified'])
                            <i class="bi bi-patch-check-fill text-info" style="font-size: 1.125rem;" title="Verified Org"></i>
                        @endif
                    </div>
                    <p class="text-muted fs-sm mb-0">
                        {{ $team['flag'] }} {{ $team['region'] }} Region ·
                        <span class="text-white">Founded {{ \Carbon\Carbon::parse($team['founded'])->format('Y') }}</span>
                    </p>
                </div>
            </div>

            <!-- Right Buttons -->
            <div class="d-flex gap-2">
                @if($team['looking_for_players'])
                    <a href="/preview/recruitment?team={{ $team['slug'] }}" class="btn-arena btn-primary btn-sm">
                        <i class="bi bi-person-plus"></i> Join Roster
                    </a>
                @endif
                <button class="btn-arena btn-secondary btn-sm"><i class="bi bi-shield"></i> Challenge Team</button>
            </div>
        </div>

        <!-- Custom Tabs -->
        <div class="tabs-arena mb-4" data-tabs="team-tabs">
            <button class="tab-btn active" data-tab="team-overview">Roster</button>
            <button class="tab-btn" data-tab="team-stats">Stats & History</button>
        </div>

        <!-- Tab Panes -->
        <div class="row g-4 mb-5">
            <!-- Main Content Pane -->
            <div class="col-lg-8">
                <!-- Roster Tab -->
                <div class="tab-pane active" id="team-overview">
                    <div class="card-arena p-4 mb-4">
                        <span class="card-title">Active Roster</span>
                        <div class="d-flex flex-column gap-3">
                            @foreach($team['roster'] as $player)
                            <div class="p-3 d-flex align-items-center justify-content-between" style="background: var(--arena-surface-02); border-radius: var(--r-lg); border: 1px solid var(--arena-border);">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="{{ asset($player['avatar']) }}" alt="{{ $player['username'] }}"
                                         style="width: 44px; height: 44px; border-radius: var(--r-full); object-fit: cover;"
                                         onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2244%22 height=%2244%22><rect width=%2244%22 height=%2244%22 rx=%2222%22 fill=%22%231D2030%22/></svg>'">
                                    <div>
                                        <a href="/preview/players/{{ strtolower($player['username']) }}" class="text-decoration-none text-white fw-700 fs-sm">
                                            {{ $player['username'] }}
                                        </a>
                                        <div class="fs-xs text-muted">Role: <span class="text-white">{{ $player['role'] }}</span></div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    @if($player['is_captain'])
                                        <span class="badge-arena badge-warm" style="font-size: 0.55rem;">CAPTAIN</span>
                                    @endif
                                    <a href="/preview/players/{{ strtolower($player['username']) }}" class="btn-arena btn-ghost btn-xs">View</a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Stats & History Tab -->
                <div class="tab-pane" id="team-stats">
                    <div class="card-arena p-4">
                        <span class="card-title">Performance Records</span>
                        <div class="row g-3 text-center mb-4">
                            <div class="col-4">
                                <div class="p-3" style="background: var(--arena-surface-02); border-radius: var(--r-lg);">
                                    <div class="display-md mb-0 text-white">{{ $team['stats']['wins'] }}</div>
                                    <div class="text-label mt-1">Wins</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="p-3" style="background: var(--arena-surface-02); border-radius: var(--r-lg);">
                                    <div class="display-md mb-0 text-white">{{ $team['stats']['losses'] }}</div>
                                    <div class="text-label mt-1">Losses</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="p-3" style="background: var(--arena-surface-02); border-radius: var(--r-lg);">
                                    <div class="display-md mb-0 text-white">{{ $team['stats']['tournaments_won'] }}</div>
                                    <div class="text-label mt-1">Championships</div>
                                </div>
                            </div>
                        </div>

                        <!-- Progress indicator -->
                        <div class="mb-4">
                            <div class="d-flex justify-content-between mb-2 fs-sm">
                                <span class="text-white fw-600">Overall Win Rate</span>
                                <span class="text-success fw-700">{{ $team['stats']['win_rate'] }}%</span>
                            </div>
                            <div class="progress" style="background: var(--arena-surface-03); height: 8px; border-radius: var(--r-full);">
                                <div class="progress-bar-arena bg-success" data-progress="{{ $team['stats']['win_rate'] }}" style="width: 0%; height: 100%; border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease-out-expo);"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar Info -->
            <div class="col-lg-4">
                <!-- Org card -->
                <div class="card-arena p-4 mb-4">
                    <span class="card-title">Organization Details</span>
                    <div class="d-flex flex-column gap-3 fs-sm text-white">
                        <div class="d-flex justify-content-between border-bottom pb-2" style="border-color: var(--arena-border) !important;">
                            <span class="text-muted">Parent Org</span>
                            <span class="fw-600">{{ $team['organization'] ?? 'Independent Team' }}</span>
                        </div>
                        <div class="d-flex justify-content-between border-bottom pb-2" style="border-color: var(--arena-border) !important;">
                            <span class="text-muted">Origin Country</span>
                            <span class="fw-600">{{ $team['country_name'] }}</span>
                        </div>
                        <div class="d-flex justify-content-between" style="border-color: var(--arena-border) !important;">
                            <span class="text-muted">Rank Rating</span>
                            <span class="fw-700 text-info">{{ number_format($team['stats']['points']) }} RP</span>
                        </div>
                    </div>
                </div>

                <!-- Bio -->
                <div class="card-arena p-4 mb-4">
                    <span class="card-title">About Team</span>
                    <p class="text-muted fs-sm mb-0" style="line-height: 1.6;">
                        {{ $team['bio'] }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
