@extends('layouts.app')
@section('title', $submission->title)
@section('content')
@php
    $analysis = $submission->latestAnalysis;
    $hasShared = in_array($submission->status, [
        \App\Models\FileSubmission::STATUS_SENT,
        \App\Models\FileSubmission::STATUS_OPENED,
        \App\Models\FileSubmission::STATUS_EVALUATED_GOOD,
        \App\Models\FileSubmission::STATUS_EVALUATED_BAD,
        \App\Models\FileSubmission::STATUS_EVALUATED_UPDATE,
    ], true);
    $hasEvaluated = in_array($submission->status, [
        \App\Models\FileSubmission::STATUS_EVALUATED_GOOD,
        \App\Models\FileSubmission::STATUS_EVALUATED_BAD,
        \App\Models\FileSubmission::STATUS_EVALUATED_UPDATE,
    ], true);
    $canEvaluate = $analysis
        && $analysis->status === \App\Models\FileAnalysis::STATUS_DONE
        && in_array($submission->status, [\App\Models\FileSubmission::STATUS_SENT, \App\Models\FileSubmission::STATUS_OPENED], true);

    // timeline
    $steps = [
        ['key' => 'submitted', 'label' => __('Submitted'),  'at' => $submission->created_at,    'done' => true],
        ['key' => 'seen',      'label' => __('Seen'),       'at' => $submission->seen_at,       'done' => (bool) $submission->seen_at],
        ['key' => 'analysing', 'label' => __('Analysing'),  'at' => null,                        'done' => $analysis !== null],
        ['key' => 'ready',     'label' => __('Ready'),      'at' => $analysis?->finished_at,    'done' => $analysis && $analysis->status === \App\Models\FileAnalysis::STATUS_DONE],
        ['key' => 'sent',      'label' => __('Sent'),       'at' => $submission->sent_at,       'done' => (bool) $submission->sent_at],
        ['key' => 'opened',    'label' => __('Opened'),     'at' => $submission->opened_at,     'done' => (bool) $submission->opened_at],
        ['key' => 'evaluated', 'label' => __('Evaluated'),  'at' => $submission->evaluated_at,  'done' => (bool) $submission->evaluated_at],
    ];

    $ext = strtolower($submission->extension ?? '');
    $extColor = match ($ext) {
        'pdf'           => 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300',
        'xlsx','xls','csv' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
        'docx','doc','txt' => 'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300',
        default         => 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',
    };
@endphp

{{-- HERO --}}
<div class="card mb-6 sm:mb-8">
    <div class="px-4 sm:px-6 py-5 flex flex-col sm:flex-row gap-4 sm:items-center">
        <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-2xl flex items-center justify-center text-xs font-bold uppercase shrink-0 {{ $extColor }}">
            {{ $ext ?: '?' }}
        </div>
        <div class="min-w-0 flex-1">
            <a href="{{ route('client.submissions.index') }}" class="text-xs text-slate-500 hover:text-brand-600 inline-flex items-center gap-1 mb-1">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                {{ __('My submissions') }}
            </a>
            <h1 class="text-lg sm:text-2xl font-semibold truncate">{{ $submission->title }}</h1>
            <div class="flex flex-wrap items-center gap-2 mt-1.5 text-xs text-slate-500">
                <span class="font-mono truncate max-w-[18rem]">{{ $submission->original_name }}</span>
                <span aria-hidden="true">·</span>
                <span>{{ $submission->humanSize() }}</span>
                <span aria-hidden="true">·</span>
                <span>{{ $submission->created_at?->diffForHumans() }}</span>
            </div>
        </div>
        <div class="flex items-center gap-2 shrink-0">
            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium {{ $submission->statusBadgeClass() }}">{{ $submission->statusLabel() }}</span>
            <a href="{{ route('client.submissions.download', $submission) }}" class="btn-secondary text-xs inline-flex items-center gap-1.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg>
                {{ __('Download') }}
            </a>
        </div>
    </div>

    {{-- Timeline strip --}}
    <div class="border-t border-slate-200/70 dark:border-slate-800 px-4 sm:px-6 py-4 overflow-x-auto">
        <ol class="flex items-center gap-3 sm:gap-4 min-w-max">
            @foreach($steps as $i => $step)
                <li class="flex items-center gap-2 sm:gap-3">
                    <div class="flex flex-col items-center gap-1">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-semibold transition
                                    {{ $step['done']
                                        ? 'bg-emerald-500 text-white'
                                        : 'bg-slate-100 dark:bg-slate-800 text-slate-400 dark:text-slate-500 border border-slate-200 dark:border-slate-700' }}">
                            @if($step['done'])
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                            @else
                                {{ $i + 1 }}
                            @endif
                        </div>
                        <div class="text-[10px] sm:text-[11px] font-medium {{ $step['done'] ? 'text-slate-700 dark:text-slate-200' : 'text-slate-400' }} whitespace-nowrap">
                            {{ $step['label'] }}
                        </div>
                    </div>
                    @if(!$loop->last)
                        <div class="h-px w-6 sm:w-10 {{ $step['done'] ? 'bg-emerald-300 dark:bg-emerald-700' : 'bg-slate-200 dark:bg-slate-700' }}"></div>
                    @endif
                </li>
            @endforeach
        </ol>
    </div>
</div>

<div class="grid lg:grid-cols-3 gap-4 sm:gap-6">

    {{-- LEFT — main column --}}
    <div class="lg:col-span-2 space-y-4 sm:space-y-6">

        @if(!$hasShared)
            {{-- Awaiting analysis state --}}
            <div class="card-pad">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-xl bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 flex items-center justify-center shrink-0">
                        <svg class="w-5 h-5 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 2m6-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <div class="min-w-0">
                        <h2 class="font-semibold text-base">{{ __('Analysis in progress') }}</h2>
                        <p class="text-sm text-slate-500 mt-1">
                            {{ __('Your team is reviewing this file. You\'ll be notified by email when the analysis is ready.') }}
                        </p>
                    </div>
                </div>
            </div>

            @if($submission->note)
                <div class="card-pad">
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 flex items-center justify-center shrink-0">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h8M8 8h6m4 12a4 4 0 004-4V8a4 4 0 00-4-4H6a4 4 0 00-4 4v8a4 4 0 004 4h6l4 4z"/></svg>
                        </div>
                        <div class="min-w-0">
                            <h3 class="text-sm font-semibold mb-1">{{ __('Your note') }}</h3>
                            <p class="text-sm text-slate-700 dark:text-slate-200 whitespace-pre-line">{{ $submission->note }}</p>
                        </div>
                    </div>
                </div>
            @endif
        @else
            {{-- Analysis result --}}
            <div class="card overflow-hidden">
                <div class="px-4 sm:px-6 py-4 border-b border-slate-200/70 dark:border-slate-800 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                    <div class="min-w-0">
                        <div class="text-[11px] uppercase tracking-wide text-slate-500">{{ __('Analysis type') }}</div>
                        <h2 class="font-semibold text-base sm:text-lg flex items-center gap-2">
                            <x-icon name="sparkles" class="w-4 h-4 text-brand-600"/>
                            {{ $analysis->typeLabel() }}
                        </h2>
                    </div>
                    <div class="flex items-center gap-2 flex-wrap">
                        @if($analysis->status === \App\Models\FileAnalysis::STATUS_DONE)
                            <a href="{{ route('client.submissions.report', [$submission, 'pdf']) }}"
                               class="btn-secondary text-xs inline-flex items-center gap-1.5"
                               title="{{ __('Download PDF') }}">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg>
                                PDF
                            </a>
                            <a href="{{ route('client.submissions.report', [$submission, 'docx']) }}"
                               class="btn-secondary text-xs inline-flex items-center gap-1.5"
                               title="{{ __('Download Word') }}">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg>
                                Word
                            </a>
                            <a href="{{ route('client.submissions.report', [$submission, 'xlsx']) }}"
                               class="btn-secondary text-xs inline-flex items-center gap-1.5"
                               title="{{ __('Download Excel') }}">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg>
                                Excel
                            </a>
                        @endif
                        @if($analysis->finished_at)
                            <span class="text-xs text-slate-500">{{ $analysis->finished_at->diffForHumans() }}</span>
                        @endif
                    </div>
                </div>
                @if($analysis->summary)
                    <div class="px-4 sm:px-6 py-4 text-sm leading-relaxed text-slate-700 dark:text-slate-200">
                        {{ $analysis->summary }}
                    </div>
                @endif
            </div>

            @if(!empty($analysis->kpis))
                <div class="card-pad">
                    <h3 class="font-semibold mb-3 flex items-center gap-2">
                        <x-icon name="chart" class="w-4 h-4 text-brand-600"/>
                        {{ __('Key indicators') }}
                    </h3>
                    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
                        @foreach($analysis->kpis as $kpi)
                            <div class="p-3 rounded-xl border border-slate-200/70 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/40">
                                <div class="text-xs text-slate-500 truncate">{{ $kpi['label'] ?? '' }}</div>
                                <div class="font-semibold text-lg leading-tight">
                                    {{ $kpi['value'] ?? '' }}<span class="text-xs text-slate-400 ms-1">{{ $kpi['unit'] ?? '' }}</span>
                                </div>
                                @if(!empty($kpi['comment']))
                                    <div class="text-xs text-slate-500 mt-1 line-clamp-2">{{ $kpi['comment'] }}</div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            @if($analysis->explanation_html)
                <div class="card-pad">
                    <h3 class="font-semibold mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        {{ __('Detailed explanation') }}
                    </h3>
                    <div class="prose prose-sm dark:prose-invert max-w-none">{!! $analysis->explanation_html !!}</div>
                </div>
            @endif
        @endif
    </div>

    {{-- RIGHT — sidebar --}}
    <aside class="space-y-4 sm:space-y-6">
        @if($canEvaluate)
            <form method="POST" action="{{ route('client.submissions.evaluate', $submission) }}"
                  x-data="{ choice: '' }" class="card-pad space-y-3">
                @csrf
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 flex items-center justify-center">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H4v-9m7-9l1 4 4-2v6m-7-7v7m-3 0h3"/></svg>
                    </div>
                    <div>
                        <h3 class="font-semibold text-sm">{{ __('Your feedback') }}</h3>
                        <p class="text-xs text-slate-500">{{ __('Help your team know if this analysis hit the mark.') }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-1.5">
                    <label class="cursor-pointer">
                        <input type="radio" name="evaluation" value="good" x-model="choice" required class="sr-only peer">
                        <div class="text-center p-2.5 rounded-lg border border-slate-200/70 dark:border-slate-800 peer-checked:border-emerald-500 peer-checked:bg-emerald-50 dark:peer-checked:bg-emerald-900/20 transition">
                            <div class="text-lg leading-none mb-0.5">👍</div>
                            <div class="text-[11px] font-medium text-slate-700 dark:text-slate-300">{{ __('Looks good') }}</div>
                        </div>
                    </label>
                    <label class="cursor-pointer">
                        <input type="radio" name="evaluation" value="needs_update" x-model="choice" class="sr-only peer">
                        <div class="text-center p-2.5 rounded-lg border border-slate-200/70 dark:border-slate-800 peer-checked:border-amber-500 peer-checked:bg-amber-50 dark:peer-checked:bg-amber-900/20 transition">
                            <div class="text-lg leading-none mb-0.5">🔁</div>
                            <div class="text-[11px] font-medium text-slate-700 dark:text-slate-300">{{ __('Needs update') }}</div>
                        </div>
                    </label>
                    <label class="cursor-pointer">
                        <input type="radio" name="evaluation" value="bad" x-model="choice" class="sr-only peer">
                        <div class="text-center p-2.5 rounded-lg border border-slate-200/70 dark:border-slate-800 peer-checked:border-rose-500 peer-checked:bg-rose-50 dark:peer-checked:bg-rose-900/20 transition">
                            <div class="text-lg leading-none mb-0.5">👎</div>
                            <div class="text-[11px] font-medium text-slate-700 dark:text-slate-300">{{ __('Not relevant') }}</div>
                        </div>
                    </label>
                </div>

                <textarea name="comment" rows="3" class="form-input text-sm w-full"
                          placeholder="{{ __('Optional comment') }}"></textarea>

                <button class="btn-primary w-full inline-flex items-center justify-center gap-2"
                        :disabled="!choice"
                        :class="!choice ? 'opacity-60 cursor-not-allowed' : ''">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    {{ __('Send feedback') }}
                </button>
            </form>
        @elseif($hasEvaluated)
            <div class="card-pad">
                <div class="flex items-center gap-2 mb-2">
                    <div class="w-8 h-8 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 flex items-center justify-center">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                    </div>
                    <h3 class="font-semibold text-sm">{{ __('Your feedback') }}</h3>
                </div>
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $submission->statusBadgeClass() }}">{{ $submission->statusLabel() }}</span>
                @if($submission->evaluation_comment)
                    <p class="mt-3 text-sm text-slate-600 dark:text-slate-300 italic border-s-2 border-slate-200 dark:border-slate-700 ps-3">"{{ $submission->evaluation_comment }}"</p>
                @endif
            </div>
        @endif

        {{-- Submission timeline metadata --}}
        <div class="card-pad">
            <h3 class="font-semibold text-sm mb-3 flex items-center gap-2">
                <x-icon name="clock" class="w-4 h-4 text-slate-400"/>
                {{ __('Submission details') }}
            </h3>
            <dl class="text-xs space-y-2">
                <div class="flex justify-between gap-3">
                    <dt class="text-slate-500">{{ __('Uploaded') }}</dt>
                    <dd class="text-slate-700 dark:text-slate-200">{{ $submission->created_at?->format('Y-m-d H:i') }}</dd>
                </div>
                @if($submission->seen_at)
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Seen') }}</dt>
                        <dd class="text-slate-700 dark:text-slate-200">{{ $submission->seen_at->format('Y-m-d H:i') }}</dd>
                    </div>
                @endif
                @if($submission->sent_at)
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Sent') }}</dt>
                        <dd class="text-slate-700 dark:text-slate-200">{{ $submission->sent_at->format('Y-m-d H:i') }}</dd>
                    </div>
                @endif
                @if($submission->opened_at)
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Opened') }}</dt>
                        <dd class="text-slate-700 dark:text-slate-200">{{ $submission->opened_at->format('Y-m-d H:i') }}</dd>
                    </div>
                @endif
                @if($submission->evaluated_at)
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Evaluated') }}</dt>
                        <dd class="text-slate-700 dark:text-slate-200">{{ $submission->evaluated_at->format('Y-m-d H:i') }}</dd>
                    </div>
                @endif
            </dl>
        </div>
    </aside>
</div>
@endsection