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

    <header>
        <div class="flex items-center gap-2 mb-2">
            <span class="px-2 py-0.5 rounded text-xs font-mono bg-[var(--color-danger)]/20 text-[var(--color-danger)]">{{ $feedback->type }}</span>
            <span class="px-2 py-0.5 rounded text-xs uppercase {{ $feedback->status === 'resolved' ? 'bg-[var(--color-success)]/20 text-[var(--color-success)]' : 'bg-[var(--color-text-muted)]/20' }}">{{ $feedback->status }}</span>
            <span class="px-2 py-0.5 rounded text-xs bg-[var(--color-bg-tertiary)]">{{ $feedback->priority }}</span>
        </div>
        <h1 class="text-2xl font-bold">{{ $feedback->title }}</h1>
        <div class="text-xs text-[var(--color-text-muted)] mt-1">
            {{ $feedback->project->name }} · Por {{ $feedback->user->full_name }} ({{ $feedback->user->email }}) · {{ $feedback->submitted_at?->format('d/m/Y H:i') }} UTC
        </div>
    </header>

    <section class="bg-[var(--color-bg-secondary)] border border-[var(--color-border-muted)] rounded p-4">
        <pre class="whitespace-pre-wrap text-sm font-mono">{{ $feedback->description }}</pre>
    </section>

    @if($feedback->attachments->isNotEmpty())
    <section>
        <h2 class="text-sm uppercase tracking-wider text-[var(--color-text-muted)] mb-2">Anexos</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
            @foreach($feedback->attachments as $att)
            <a href="/storage/feedback/{{ $att->file_path }}" target="_blank" class="block bg-[var(--color-bg-secondary)] border border-[var(--color-border-muted)] rounded p-2 hover:border-[var(--color-border-default)] transition">
                <div class="text-xs font-mono text-[var(--color-accent-blue-bright)]">{{ $att->mime_type }}</div>
                <div class="text-xs text-[var(--color-text-muted)]">{{ number_format($att->size_bytes / 1024, 1) }} KB</div>
            </a>
            @endforeach
        </div>
    </section>
    @endif

    <section>
        <h2 class="text-sm uppercase tracking-wider text-[var(--color-text-muted)] mb-3">Respostas ({{ $feedback->response_count }})</h2>
        <div class="space-y-2">
            @foreach($feedback->responses as $response)
            <div class="bg-[var(--color-bg-secondary)] border-l-4 {{ $response->is_internal ? 'border-[var(--color-warning)]' : 'border-[var(--color-accent-blue)]' }} p-3 rounded-r">
                <div class="text-xs text-[var(--color-text-muted)] mb-1">
                    {{ $response->user->full_name }} · {{ $response->created_at->diffForHumans() }}
                    @if($response->is_internal) <span class="ml-2 text-[var(--color-warning)]">[INTERNO]</span> @endif
                </div>
                <div class="text-sm whitespace-pre-wrap">{{ $response->body }}</div>
            </div>
            @endforeach
        </div>

        @can('respond', $feedback)
        <form method="POST" action="{{ route('feedback.respond', $feedback) }}" class="mt-4 space-y-2">
            @csrf
            <textarea name="body" required minlength="20" maxlength="3000" rows="4"
                      class="w-full px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border-default)] rounded text-sm focus:border-[var(--color-accent-blue)] focus:ring-2 focus:ring-[var(--color-accent-blue-bright)]/40 outline-none"
                      placeholder="Escreva uma resposta... (mín 20 chars)"></textarea>
            <div class="flex items-center gap-2">
                <label class="text-xs flex items-center gap-1">
                    <input type="checkbox" name="is_internal"> Resposta interna (não visível ao testador)
                </label>
                <button type="submit" class="ml-auto px-4 py-1.5 bg-[var(--color-accent-blue)] text-white rounded text-sm font-bold hover:bg-[var(--color-accent-blue-bright)] transition">Responder</button>
            </div>
        </form>
        @endcan
    </section>

    @can('changeStatus', $feedback)
    <section class="bg-[var(--color-bg-secondary)] border border-[var(--color-border-muted)] rounded p-4">
        <h2 class="text-sm uppercase tracking-wider text-[var(--color-text-muted)] mb-3">Moderação</h2>
        <form method="POST" action="{{ route('feedback.status', $feedback) }}" class="flex flex-wrap gap-2 items-end">
            @csrf
            @method('PATCH')
            <div>
                <label class="block text-xs text-[var(--color-text-muted)] mb-1">Novo status</label>
                <select name="status" class="px-3 py-2 bg-[var(--color-bg-tertiary)] border border-[var(--color-border-default)] rounded text-sm">
                    @foreach(['triaging', 'in_progress', 'resolved', 'closed', 'reopened'] as $s)
                    <option value="{{ $s }}" {{ $feedback->status === $s ? 'selected' : '' }}>{{ $s }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex-1">
                <label class="block text-xs text-[var(--color-text-muted)] mb-1">Resposta (opcional, ≥20 chars)</label>
                <input type="text" name="body" class="w-full px-3 py-2 bg-[var(--color-bg-tertiary)] border border-[var(--color-border-default)] rounded text-sm">
            </div>
            <button type="submit" class="px-4 py-2 bg-[var(--color-accent-blue)] text-white rounded text-sm font-bold hover:bg-[var(--color-accent-blue-bright)] transition">Aplicar</button>
        </form>
    </section>
    @endcan
</div>
@endsection