<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center gap-2">
            <i class="fas fa-stethoscope"></i>
            <span>{{ __('Review Analisis AI') }}</span>
        </div>
    </x-slot>

    @push('styles')
    <style>
        /* ── Info Row ── */
        .info-row {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid #f1f5f9;
        }
        .dark .info-row { border-bottom-color: #1e293b; }
        .info-row:last-child { border-bottom: none; }

        .info-label {
            font-size: 0.6875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #94a3b8;
        }
        .dark .info-label { color: #64748b; }

        .info-value {
            font-size: 0.9rem;
            font-weight: 500;
            color: #0f172a;
        }
        .dark .info-value { color: #e2e8f0; }

        /* ── AI Content Blocks ── */
        .ai-block {
            border-radius: 0.75rem;
            padding: 1rem 1.25rem;
            font-size: 0.875rem;
            line-height: 1.65;
            white-space: pre-wrap;
        }
        .ai-block-default {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #334155;
        }
        .dark .ai-block-default {
            background: #0f172a;
            border-color: #334155;
            color: #cbd5e1;
        }
        .ai-block-blue {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1e40af;
        }
        .dark .ai-block-blue {
            background: rgba(30,64,175,0.12);
            border-color: #1e40af;
            color: #93c5fd;
        }
        .ai-block-yellow {
            background: #fefce8;
            border-left: 4px solid #eab308;
            border-top: 1px solid #fef08a;
            border-right: 1px solid #fef08a;
            border-bottom: 1px solid #fef08a;
            color: #78350f;
        }
        .dark .ai-block-yellow {
            background: rgba(202,138,4,0.10);
            border-left-color: #eab308;
            border-top-color: rgba(202,138,4,0.25);
            border-right-color: rgba(202,138,4,0.25);
            border-bottom-color: rgba(202,138,4,0.25);
            color: #fde68a;
        }

        /* ── Form Textarea ── */
        .kkd-textarea {
            width: 100%;
            padding: 0.625rem 0.875rem;
            border-radius: 0.5rem;
            border: 1px solid #cbd5e1;
            background: #ffffff;
            color: #0f172a;
            font-size: 0.875rem;
            resize: vertical;
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .dark .kkd-textarea {
            background: #0f172a;
            border-color: #475569;
            color: #f1f5f9;
        }
        .kkd-textarea::placeholder { color: #94a3b8; }
        .dark .kkd-textarea::placeholder { color: #64748b; }
        .kkd-textarea:focus {
            border-color: #14b8a6;
            box-shadow: 0 0 0 3px rgba(20,184,166,0.2);
        }

        /* ── Section Header inside card ── */
        .card-section-title {
            font-size: 0.875rem;
            font-weight: 700;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }
        .dark .card-section-title { color: #94a3b8; }

        /* ── Sticky sidebar on large screens ── */
        @media (min-width: 768px) {
            .sticky-sidebar { position: sticky; top: 1.5rem; }
        }
    </style>
    @endpush

    <div class="py-6 sm:py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            {{-- ── Back link ── --}}
            <div class="mb-5">
                <a href="{{ route('dokter.review.index') }}"
                   class="inline-flex items-center gap-2 text-sm font-medium
                          text-teal-600 hover:text-teal-700
                          dark:text-teal-400 dark:hover:text-teal-300
                          transition-colors">
                    <i class="fas fa-arrow-left text-xs"></i>
                    Kembali ke Daftar Analisis
                </a>
            </div>

            {{-- ── Page Title Row ── --}}
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
                <div>
                    <h2 class="section-title text-xl">Review Analisis AI</h2>
                    <p class="section-subtitle mt-0.5">
                        Pasien: <strong class="text-slate-700 dark:text-slate-300">{{ $analisis->pasien->nama_lengkap }}</strong>
                        &middot; {{ $analisis->waktu_analisis->format('d M Y, H:i') }}
                    </p>
                </div>

                {{-- Status badge --}}
                @if($analisis->status_analisis == 'BERHASIL')
                    <span class="self-start sm:self-auto inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold
                                 bg-teal-100 dark:bg-teal-900/30
                                 text-teal-700 dark:text-teal-300
                                 border border-teal-200 dark:border-teal-800">
                        <i class="fas fa-robot text-xs"></i> Analisis Berhasil
                    </span>
                @else
                    <span class="self-start sm:self-auto inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold
                                 bg-red-100 dark:bg-red-900/30
                                 text-red-700 dark:text-red-300
                                 border border-red-200 dark:border-red-800">
                        <i class="fas fa-exclamation-circle text-xs"></i> {{ $analisis->status_analisis ?? 'Error' }}
                    </span>
                @endif
            </div>

            {{-- ── Main Grid ── --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

                {{-- ════════════════════════════
                     LEFT: Pasien & Pemeriksaan
                ════════════════════════════ --}}
                <div class="md:col-span-1 space-y-5 sticky-sidebar">

                    {{-- Informasi Pasien --}}
                    <div class="kkd-card">
                        <div class="card-section-title">
                            <span class="w-6 h-6 rounded-md bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-user text-teal-600 dark:text-teal-400" style="font-size:0.65rem"></i>
                            </span>
                            Informasi Pasien
                        </div>

                        <div class="info-row">
                            <span class="info-label">Nama Lengkap</span>
                            <span class="info-value">{{ $analisis->pasien->nama_lengkap }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">No. Rekam Medis</span>
                            <span class="info-value font-mono text-sm">{{ $analisis->pasien->no_rekam_medis }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Usia</span>
                            <span class="info-value">{{ $analisis->pasien->usia }} tahun</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Jenis Kelamin</span>
                            <span class="info-value">
                                @if($analisis->pasien->jenis_kelamin == 'L')
                                    <span class="inline-flex items-center gap-1">
                                        <i class="fas fa-mars text-blue-400 text-xs"></i> Laki-laki
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1">
                                        <i class="fas fa-venus text-pink-400 text-xs"></i> Perempuan
                                    </span>
                                @endif
                            </span>
                        </div>
                    </div>

                    {{-- Data Pemeriksaan --}}
                    @if($analisis->pemeriksaanKesehatan)
                    <div class="kkd-card">
                        <div class="card-section-title">
                            <span class="w-6 h-6 rounded-md bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-thermometer-half text-indigo-600 dark:text-indigo-400" style="font-size:0.65rem"></i>
                            </span>
                            Data Pemeriksaan
                        </div>

                        <div class="info-row">
                            <span class="info-label">Suhu Tubuh</span>
                            <span class="info-value">
                                {{ $analisis->pemeriksaanKesehatan->suhu_tubuh }}°C
                            </span>
                        </div>

                        <div class="info-row">
                            <span class="info-label">Kategori Suhu</span>
                            <span class="info-value">
                                @if($analisis->pemeriksaanKesehatan->kategori_suhu == 'NORMAL')
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold
                                                 bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300
                                                 border border-teal-200 dark:border-teal-800">
                                        <i class="fas fa-check text-xs"></i> Normal
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold
                                                 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300
                                                 border border-red-200 dark:border-red-800">
                                        <i class="fas fa-fire text-xs"></i>
                                        {{ str_replace('_', ' ', $analisis->pemeriksaanKesehatan->kategori_suhu) }}
                                    </span>
                                @endif
                            </span>
                        </div>

                        <div class="info-row">
                            <span class="info-label">Keluhan Utama</span>
                            <span class="info-value">
                                {{ $analisis->pemeriksaanKesehatan->keluhan_utama ?? $analisis->pemeriksaanKesehatan->keluhan ?? '-' }}
                            </span>
                        </div>

                        @if($analisis->pemeriksaanKesehatan->detak_jantung)
                        <div class="info-row">
                            <span class="info-label">Detak Jantung</span>
                            <span class="info-value">{{ $analisis->pemeriksaanKesehatan->detak_jantung }} BPM</span>
                        </div>
                        @endif

                        @if($analisis->pemeriksaanKesehatan->saturasi_oksigen)
                        <div class="info-row">
                            <span class="info-label">Saturasi O₂</span>
                            <span class="info-value">{{ $analisis->pemeriksaanKesehatan->saturasi_oksigen }}%</span>
                        </div>
                        @endif
                    </div>
                    @endif

                    {{-- AI Meta Info --}}
                    @if($analisis->model_ai)
                    <div class="kkd-card py-3">
                        <p class="text-xs text-slate-400 dark:text-slate-500 space-y-0.5">
                            <span class="block">
                                <i class="fas fa-microchip mr-1"></i>
                                Model: <span class="font-mono">{{ $analisis->model_ai }}</span>
                            </span>
                            @if($analisis->total_tokens)
                            <span class="block">
                                <i class="fas fa-coins mr-1"></i>
                                {{ number_format($analisis->total_tokens) }} tokens
                            </span>
                            @endif
                            @if($analisis->waktu_analisis)
                            <span class="block">
                                <i class="fas fa-clock mr-1"></i>
                                {{ $analisis->waktu_analisis->format('d/m/Y H:i') }}
                            </span>
                            @endif
                        </p>
                    </div>
                    @endif

                </div>
                {{-- /left col --}}

                {{-- ════════════════════════════
                     RIGHT: Analisis AI + Form
                ════════════════════════════ --}}
                <div class="md:col-span-2 space-y-5">

                    {{-- ── Analisis AI Card ── --}}
                    <div class="kkd-card">
                        <div class="card-section-title mb-4">
                            <span class="w-6 h-6 rounded-md bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-robot text-violet-600 dark:text-violet-400" style="font-size:0.65rem"></i>
                            </span>
                            Hasil Analisis AI
                        </div>

                        {{-- Status Error --}}
                        @if($analisis->status_analisis && $analisis->status_analisis !== 'BERHASIL')
                        <div class="mb-4 flex items-start gap-3 p-3 rounded-lg
                                    bg-red-50 dark:bg-red-900/20
                                    border border-red-200 dark:border-red-800">
                            <i class="fas fa-exclamation-circle text-red-500 flex-shrink-0 mt-0.5"></i>
                            <div class="text-sm text-red-700 dark:text-red-300">
                                <strong>Status Analisis:</strong> {{ $analisis->status_analisis }}
                                @if($analisis->error_message)
                                    <br><span class="text-xs opacity-75">{{ $analisis->error_message }}</span>
                                @endif
                            </div>
                        </div>
                        @endif

                        {{-- Tingkat Keparahan & Rekomendasi (2 col) --}}
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-5">

                            {{-- Tingkat Keparahan --}}
                            <div>
                                <p class="info-label mb-1.5">Tingkat Keparahan</p>
                                @php $keparahan = $analisis->tingkat_keparahan_ai ?? 'RINGAN'; @endphp
                                @if(in_array($keparahan, ['BERAT', 'SANGAT_BERAT']))
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold
                                                 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300
                                                 border border-red-200 dark:border-red-800">
                                        <i class="fas fa-skull-crossbones text-xs"></i>
                                        {{ str_replace('_', ' ', $keparahan) }}
                                    </span>
                                @elseif($keparahan == 'SEDANG')
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold
                                                 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300
                                                 border border-yellow-200 dark:border-yellow-800">
                                        <i class="fas fa-exclamation-circle text-xs"></i> Sedang
                                    </span>
                                @elseif($keparahan == 'RINGAN')
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold
                                                 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300
                                                 border border-blue-200 dark:border-blue-800">
                                        <i class="fas fa-info-circle text-xs"></i> Ringan
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold
                                                 bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300
                                                 border border-teal-200 dark:border-teal-800">
                                        <i class="fas fa-heart text-xs"></i> Normal
                                    </span>
                                @endif
                            </div>

                            {{-- Rekomendasi --}}
                            <div>
                                <p class="info-label mb-1.5">Rekomendasi Tindakan</p>
                                @php
                                    $rekomendasiMap = [
                                        'ISTIRAHAT'          => ['label' => 'Istirahat di Rumah',    'color' => 'bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300 border-teal-200 dark:border-teal-800', 'icon' => 'fa-home'],
                                        'MINUM_OBAT_BEBAS'   => ['label' => 'Minum Obat Bebas',      'color' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800', 'icon' => 'fa-pills'],
                                        'KONSULTASI_DOKTER'  => ['label' => 'Konsultasi Dokter',     'color' => 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800', 'icon' => 'fa-user-md'],
                                        'PERIKSA_SEGERA'     => ['label' => 'Periksa Segera',        'color' => 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-800', 'icon' => 'fa-running'],
                                        'IGD_DARURAT'        => ['label' => 'IGD / Darurat',         'color' => 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800', 'icon' => 'fa-ambulance'],
                                    ];
                                    $rek = $rekomendasiMap[$analisis->rekomendasi_ai] ?? [
                                        'label' => $analisis->rekomendasi_ai ?? '-',
                                        'color' => 'bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
                                        'icon'  => 'fa-question-circle',
                                    ];
                                @endphp
                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold
                                             border {{ $rek['color'] }}">
                                    <i class="fas {{ $rek['icon'] }} text-xs"></i>
                                    {{ $rek['label'] }}
                                </span>
                            </div>

                        </div>

                        {{-- Penjelasan Kondisi --}}
                        <div class="mb-4">
                            <p class="info-label mb-2">
                                <i class="fas fa-file-medical-alt mr-1"></i>
                                Penjelasan Kondisi
                            </p>
                            @if($analisis->penjelasan_kondisi)
                                <div class="ai-block ai-block-default">{{ $analisis->penjelasan_kondisi }}</div>
                            @else
                                <p class="text-sm text-slate-400 dark:text-slate-500 italic">Belum ada penjelasan dari AI.</p>
                            @endif
                        </div>

                        {{-- Saran Umum --}}
                        @if($analisis->saran_umum)
                        <div class="mb-4">
                            <p class="info-label mb-2">
                                <i class="fas fa-hand-holding-heart mr-1"></i>
                                Saran Perawatan Mandiri
                            </p>
                            <div class="ai-block ai-block-blue">{{ $analisis->saran_umum }}</div>
                        </div>
                        @endif

                        {{-- Kapan ke Dokter --}}
                        @if($analisis->kapan_harus_ke_dokter)
                        <div class="mb-4">
                            <p class="info-label mb-2">
                                <i class="fas fa-calendar-plus mr-1"></i>
                                Kapan Harus ke Dokter
                            </p>
                            <div class="ai-block ai-block-yellow">{{ $analisis->kapan_harus_ke_dokter }}</div>
                        </div>
                        @endif

                        {{-- Konsultasi Setelah dari Dokter --}}
                        @if($analisis->konsultasi_setelah_dokter)
                        <div class="mb-4">
                            <p class="info-label mb-2">
                                <i class="fas fa-notes-medical mr-1"></i>
                                Konsultasi Setelah dari Dokter
                            </p>
                            <div class="ai-block ai-block-blue">{{ $analisis->konsultasi_setelah_dokter }}</div>
                        </div>
                        @endif

                        {{-- Solusi dari AI --}}
                        @if($analisis->solusi_dari_ai)
                        <div>
                            <p class="info-label mb-2">
                                <i class="fas fa-lightbulb mr-1"></i>
                                Solusi dari AI
                            </p>
                            <div class="ai-block ai-block-default" style="border-left: 4px solid #14b8a6;">{{ $analisis->solusi_dari_ai }}</div>
                        </div>
                        @endif

                    </div>
                    {{-- /Analisis AI Card --}}

                    {{-- ── Review Dokter Card ── --}}
                    <div class="kkd-card">
                        <div class="card-section-title mb-5">
                            <span class="w-6 h-6 rounded-md bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-stethoscope text-teal-600 dark:text-teal-400" style="font-size:0.6rem"></i>
                            </span>
                            Review Dokter
                        </div>

                        <form action="{{ route('dokter.review.store', $analisis->id) }}" method="POST" class="space-y-5">
                            @csrf

                            {{-- Diagnosis --}}
                            <div>
                                <label for="diagnosis_dokter"
                                       class="block text-sm font-semibold
                                              text-slate-700 dark:text-slate-300 mb-1.5">
                                    Diagnosis Dokter
                                    <span class="text-red-500 ml-0.5">*</span>
                                </label>
                                <textarea id="diagnosis_dokter"
                                          name="diagnosis_dokter"
                                          rows="3"
                                          required
                                          placeholder="Masukkan diagnosis Anda..."
                                          class="kkd-textarea">{{ old('diagnosis_dokter') }}</textarea>
                                @error('diagnosis_dokter')
                                    <p class="mt-1 text-xs text-red-500 dark:text-red-400">
                                        <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            {{-- Catatan --}}
                            <div>
                                <label for="catatan_dokter"
                                       class="block text-sm font-semibold
                                              text-slate-700 dark:text-slate-300 mb-1.5">
                                    Catatan Dokter
                                    <span class="text-xs font-normal text-slate-400 dark:text-slate-500 ml-1">(opsional)</span>
                                </label>
                                <textarea id="catatan_dokter"
                                          name="catatan_dokter"
                                          rows="3"
                                          placeholder="Tambahkan catatan jika diperlukan..."
                                          class="kkd-textarea">{{ old('catatan_dokter') }}</textarea>
                            </div>

                            {{-- Resep / Tindakan --}}
                            <div>
                                <label for="resep_dokter"
                                       class="block text-sm font-semibold
                                              text-slate-700 dark:text-slate-300 mb-1.5">
                                    Resep / Tindakan yang Direkomendasikan
                                    <span class="text-xs font-normal text-slate-400 dark:text-slate-500 ml-1">(opsional)</span>
                                </label>
                                <textarea id="resep_dokter"
                                          name="resep_dokter"
                                          rows="4"
                                          placeholder="Masukkan resep atau tindakan yang direkomendasikan..."
                                          class="kkd-textarea">{{ old('resep_dokter') }}</textarea>
                            </div>

                            {{-- Divider --}}
                            <hr class="border-slate-100 dark:border-slate-700">

                            {{-- Action Buttons --}}
                            <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
                                <a href="{{ route('dokter.review.index') }}"
                                   class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg
                                          text-sm font-semibold
                                          bg-slate-100 hover:bg-slate-200
                                          dark:bg-slate-700 dark:hover:bg-slate-600
                                          text-slate-700 dark:text-slate-300
                                          transition-colors duration-150">
                                    <i class="fas fa-times text-xs"></i>
                                    Batal
                                </a>
                                <button type="submit"
                                        class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg
                                               text-sm font-semibold
                                               bg-teal-600 hover:bg-teal-700
                                               dark:bg-teal-500 dark:hover:bg-teal-600
                                               text-white
                                               shadow-sm hover:shadow-md
                                               transition-all duration-150">
                                    <i class="fas fa-save text-xs"></i>
                                    Simpan Review
                                </button>
                            </div>

                        </form>
                    </div>
                    {{-- /Review Form Card --}}

                </div>
                {{-- /right col --}}

            </div>
            {{-- /grid --}}

        </div>
    </div>

</x-app-layout>