@extends('layouts.app')
@section('title', $project->name . ' · Cavendral Beta')
@section('content')
<div class="space-y-6">
    <a href="{{ route('projects.index') }}" class="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-accent-blue-bright)]">← Voltar para projetos</a>

    <header class="flex items-start gap-4">
        <div class="w-16 h-16 rounded bg-[var(--color-bg-secondary)] border border-[var(--color-border-default)] flex items-center justify-center font-mono font-bold text-xl text-[var(--color-accent-blue-bright)]">
            {{ strtoupper(substr($project->name, 0, 3)) }}
        </div>
        <div class="flex-1">
            <h1 class="text-2xl font-bold">{{ $project->name }}</h1>
            <p class="text-sm text-[var(--color-text-muted)]">v{{ $project->current_version ?? '—' }} · {{ $project->status }}</p>
        </div>
    </header>

    <p class="text-[var(--color-text-secondary)] leading-relaxed">{{ $project->description }}</p>

    @if($invitation && $invitation->expires_at)
    <div class="bg-[var(--color-warning)]/10 border-l-4 border-[var(--color-warning)] p-3 text-sm rounded-r">
        ⚠ Seu acesso expira em {{ $invitation->expires_at->diffForHumans() }} ({{ $invitation->expires_at->format('d/m/Y') }}).
    </div>
    @endif

    <section>
        <h2 class="text-sm uppercase tracking-wider text-[var(--color-text-muted)] mb-3">Changelog recente</h2>
        <div class="space-y-2">
            @forelse($recentChangelogs as $changelog)
            <div class="bg-[var(--color-bg-secondary)] border border-[var(--color-border-muted)] rounded p-3">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-mono font-bold text-[var(--color-accent-blue-bright)]">v{{ $changelog->version }}</span>
                    <span class="text-xs text-[var(--color-text-muted)]">{{ $changelog->published_at?->diffForHumans() }}</span>
                </div>
                <ul class="space-y-1 text-sm">
                    @foreach($changelog->entries as $entry)
                    <li class="flex gap-2">
                        <span class="text-[var(--color-text-muted)] font-mono">
                            {{ match($entry->category) {
                                'added' => '+',
                                'changed' => '!',
                                'fixed' => '*',
                                'removed' => '-',
                                'deprecated' => '!',
                            } }}
                        </span>
                        <span class="flex-1">{{ $entry->description }}</span>
                    </li>
                    @endforeach
                </ul>
            </div>
            @empty
            <p class="text-sm text-[var(--color-text-muted)]">Nenhum changelog publicado.</p>
            @endforelse
        </div>
    </section>

    <section>
        <h2 class="text-sm uppercase tracking-wider text-[var(--color-text-muted)] mb-3">Meus feedbacks neste projeto ({{ $myFeedbacks->count() }})</h2>
        <div class="bg-[var(--color-bg-secondary)] border border-[var(--color-border-muted)] rounded divide-y divide-[var(--color-border-muted)]">
            @forelse($myFeedbacks as $feedback)
            <div class="p-3 flex items-center justify-between">
                <div>
                    <div class="font-semibold">{{ $feedback->title }}</div>
                    <div class="text-xs text-[var(--color-text-muted)]">[{{ $feedback->type }}] · status: {{ $feedback->status }} · {{ $feedback->created_at->diffForHumans() }}</div>
                </div>
                <a href="{{ route('feedback.show', $feedback) }}" class="text-sm text-[var(--color-accent-blue-bright)] hover:underline">Ver →</a>
            </div>
            @empty
            <div class="p-3 text-sm text-[var(--color-text-muted)]">Nenhum feedback enviado ainda.</div>
            @endforelse
        </div>
    </section>

    <section class="bg-[var(--color-bg-secondary)] border border-[var(--color-accent-blue)]/40 rounded p-6 text-center">
        <h2 class="font-bold mb-3">Encontrou um problema? Tem uma sugestão?</h2>
        <div class="flex gap-2 justify-center">
            <a href="{{ route('feedback.create', $project->slug) }}" class="px-4 py-2 bg-[var(--color-accent-blue)] text-white rounded font-bold hover:bg-[var(--color-accent-blue-bright)] transition">
                Enviar Feedback
            </a>
            <a href="{{ route('feedback.create', $project->slug) }}?type=bug" class="px-4 py-2 border border-[var(--color-danger)] text-[var(--color-danger)] rounded hover:bg-[var(--color-danger)]/10 transition">Reportar Erro</a>
            <a href="{{ route('feedback.create', $project->slug) }}?type=suggestion" class="px-4 py-2 border border-[var(--color-border-default)] hover:bg-[var(--color-bg-tertiary)] rounded transition">Sugestão</a>
        </div>
    </section>
</div>
@endsection