@extends('layouts.user')

@section('title', 'Analysis History | Smart Dermatology')

@push('styles')
    <style>
        .history-card { border: 0; border-radius: 24px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); }
        .history-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 18px; }
        .history-stat { border: 0; border-radius: 20px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); height: 100%; }
        .history-empty { background: #fff0f3; border-radius: 20px; padding: 40px 24px; text-align: center; }
    </style>
@endpush

@section('content')
    <section class="hero-mini" style="height: 60vh; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: white;">
        <div class="container text-center animate__animated animate__fadeIn">
            <h1 class="display-3 fw-bold">Analysis <span style="color: var(--brand-pink);">History</span></h1>
            <p class="lead mb-4">Review your previous skin checks and saved AI results.</p>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="container">
            <div class="row g-4 mb-4">
                <div class="col-md-4">
                    <div class="card history-stat p-4">
                        <h6 class="text-muted">Total Checks</h6>
                        <h2 class="fw-bold">{{ $analyses->total() }}</h2>
                        <span class="small text-muted">Saved analysis records in your account</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card history-stat p-4">
                        <h6 class="text-muted">Latest Result</h6>
                        <h5 class="fw-bold text-capitalize mb-1">{{ $analyses->first() ? str_replace('_', ' ', $analyses->first()->disease) : 'No result yet' }}</h5>
                        <span class="small text-muted">{{ $analyses->first() ? number_format($analyses->first()->confidence * 100, 2).'%' : 'Upload an image to begin' }}</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card history-stat p-4 d-flex justify-content-between">
                        <div>
                            <h6 class="text-muted">Next Step</h6>
                            <p class="mb-0 text-muted">Run a fresh analysis whenever you need a new prediction.</p>
                        </div>
                        <div class="mt-3">
                            <a href="{{ route('checker') }}" class="btn btn-pink">New Analysis</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card history-card p-4">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
                    <div>
                        <h4 class="fw-bold mb-1">Saved Results</h4>
                        <p class="text-muted mb-0">A full timeline of your previous image analyses.</p>
                    </div>
                    <a href="{{ route('checker') }}" class="btn btn-outline-secondary rounded-pill">Analyze Another Image</a>
                </div>

                @if ($analyses->count())
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Image</th>
                                    <th>Filename</th>
                                    <th>Disease</th>
                                    <th>Confidence</th>
                                    <th>Checked At</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($analyses as $analysis)
                                    <tr>
                                        <td><img src="{{ asset($analysis->image_path) }}" alt="Analyzed image" class="history-thumb"></td>
                                        <td>{{ $analysis->original_filename }}</td>
                                        <td class="text-capitalize">{{ str_replace('_', ' ', $analysis->disease) }}</td>
                                        <td>{{ number_format($analysis->confidence * 100, 2) }}%</td>
                                        <td>{{ $analysis->created_at?->format('d M Y h:i A') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="history-empty">
                        <i class="fas fa-camera fa-3x mb-3" style="color: var(--brand-pink);"></i>
                        <h4 class="fw-bold mb-2">No history yet</h4>
                        <p class="text-muted mb-4">Your completed skin analyses will appear here once you upload an image on the checker page.</p>
                        <a href="{{ route('checker') }}" class="btn btn-pink">Start First Analysis</a>
                    </div>
                @endif

                @if ($analyses->hasPages())
                    <div class="mt-4">
                        {{ $analyses->links() }}
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection