@extends('layouts.app')

@section('title', 'Hasil Diagnosa')
@section('page-title', 'Hasil Diagnosa')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <!-- HEADER -->
    <div id="tour-result-header" class="bg-white p-6 rounded-2xl border text-center">
        <h2 class="text-2xl font-bold text-green-800">
            Diagnosa Selesai
        </h2>
        <p class="text-sm text-gray-500">
            {{ now()->format('d F Y, H:i') }} WIB
        </p>
    </div>

    <!-- INFO TANAMAN -->
    <div class="bg-white p-6 rounded-2xl border">
        <h3 class="font-bold mb-3">Informasi Tanaman</h3>
        <p><strong>Nama:</strong> {{ $diagnosis->plant_name }}</p>
    </div>

    <!-- GEJALA -->
    <div id="tour-result-gejala" class="bg-white p-6 rounded-2xl border">
        <h3 class="font-bold mb-3">
            Gejala yang Dilaporkan ({{ count($diagnosis->symptoms ?? []) }} gejala)
        </h3>
        <ul class="space-y-2">
            @foreach($diagnosis->symptoms ?? [] as $kode => $data)
                @php
                    $cfVal = $data['cf'];
                    if ($cfVal == 0.0) {
                        $cfColor = '#6b7280'; $cfBg = '#f3f4f6';
                    } elseif ($cfVal <= 0.2) {
                        $cfColor = '#991b1b'; $cfBg = '#fee2e2';
                    } elseif ($cfVal <= 0.4) {
                        $cfColor = '#92400e'; $cfBg = '#fef3c7';
                    } elseif ($cfVal <= 0.6) {
                        $cfColor = '#1d4ed8'; $cfBg = '#dbeafe';
                    } else {
                        $cfColor = '#2d6a4f'; $cfBg = '#d8f3dc';
                    }
                @endphp
                <li>
                    ✔ {{ $kode }} - {{ $data['nama'] }}
                    <span style="display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
                        font-size:11px;font-weight:600;background:{{ $cfBg }};color:{{ $cfColor }};">
                        {{ number_format($cfVal, 1) }}
                    </span>
                </li>
            @endforeach
        </ul>
    </div>

    <!-- HASIL -->
    <div id="tour-result-penyakit" class="bg-white p-6 rounded-2xl border">
        <h3 class="font-bold mb-3">Hasil Diagnosa</h3>
        <p><strong>Penyakit:</strong> {{ $diagnosis->disease_name }}</p>

        @php
            $conf    = $diagnosis->confidence;
            $confVal = $conf / 100;
            if ($confVal <= 0.20) {
                $label = 'Tidak Terdeteksi'; $labelColor = '#6b7280'; $labelBg = '#f3f4f6';
            } elseif ($confVal <= 0.40) {
                $label = 'Rendah'; $labelColor = '#991b1b'; $labelBg = '#fee2e2';
            } elseif ($confVal <= 0.60) {
                $label = 'Sedang'; $labelColor = '#92400e'; $labelBg = '#fef3c7';
            } elseif ($confVal <= 0.80) {
                $label = 'Tinggi'; $labelColor = '#1d4ed8'; $labelBg = '#dbeafe';
            } else {
                $label = 'Sangat Tinggi'; $labelColor = '#2d6a4f'; $labelBg = '#d8f3dc';
            }
        @endphp
        <p>
            <strong>Kepercayaan:</strong> {{ $conf }}%
            <span style="display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;
                font-size:12px;font-weight:600;background:{{ $labelBg }};color:{{ $labelColor }};">
                {{ $label }}
            </span>
        </p>

        <div class="mt-4">
            <h4 class="font-bold mb-2">Penanganan:</h4>
            @php $treatments = explode(';', $diagnosis->treatment); @endphp
            <ol class="list-decimal ml-5 space-y-1">
                @foreach($treatments as $item)
                    @if(trim($item) != '')
                        <li>{{ trim($item) }}</li>
                    @endif
                @endforeach
            </ol>

            <div id="tour-result-catatan" class="mt-4 p-3 rounded-lg bg-yellow-50 border text-sm text-yellow-800">
                <strong>Catatan:</strong><br>
                Hasil diagnosa ini bersifat awal. Untuk penanganan yang lebih tepat dan akurat,
                disarankan untuk berkonsultasi langsung dengan ahli tanaman atau penyuluh pertanian.
            </div>
        </div>
    </div>

    <!-- DEBUG SEMENTARA — hapus setelah selesai debug 
    @isset($debugInfo)
    <div class="bg-gray-900 text-green-300 p-4 rounded-2xl text-xs font-mono overflow-x-auto">
        <p class="text-yellow-400 font-bold mb-3">🔍 gambaran perhitungan manual — Langkah Perhitungan CF (hapus setelah selesai)</p>
        @foreach($debugInfo as $item)
            <div class="mb-4 border-b border-gray-700 pb-3">
                <p class="text-white font-bold">{{ $item['nama'] }} → {{ $item['persentase'] }}%</p>
                @if(isset($item['steps']))
                    <table class="mt-1 w-full text-xs">
                        <tr class="text-gray-400">
                            <th class="text-left pr-4">Gejala</th>
                            <th class="text-left pr-4">CF Pakar</th>
                            <th class="text-left pr-4">CF User</th>
                            <th class="text-left pr-4">CF Komb</th>
                            <th class="text-left">CF Akumulasi</th>
                        </tr>
                        @foreach($item['steps'] as $step)
                        <tr>
                            <td class="pr-4">{{ $step['gejala'] }}</td>
                            <td class="pr-4">{{ $step['cf_pakar'] }}</td>
                            <td class="pr-4">{{ $step['cf_user'] }}</td>
                            <td class="pr-4">{{ $step['cf_komb'] }}</td>
                            <td>{{ $step['cf_akum'] }}</td>
                        </tr>
                        @endforeach
                    </table>
                @endif
            </div>
        @endforeach
    </div>
    @endisset -->

    <!-- ACTION -->
    <div id="tour-result-action" class="flex gap-4">
        <a href="{{ route('diagnosis.create') }}"
           class="flex-1 text-center py-3 rounded-full text-white bg-green-800">
            + Diagnosa Baru
        </a>
        <a href="{{ route('history') }}"
           class="flex-1 text-center py-3 rounded-full border">
            Lihat Riwayat
        </a>
    </div>

</div>

<script>
const resultTourSteps = [
    {
        title: 'Hasil Diagnosa Kamu! 🎉',
        desc: 'Ini adalah hasil analisa dari gejala yang kamu masukkan. Mari kita lihat satu per satu.',
        targetSel: null,
    },
    {
        title: 'Gejala yang Dilaporkan',
        desc: 'Di sini tampil semua gejala yang kamu pilih tadi beserta nilai <b>CF (Certainty Factor)</b> — yaitu tingkat keyakinanmu.',
        targetSel: '#tour-result-gejala',
    },
    {
        title: 'Nama Penyakit & Penanganan',
        desc: 'Ini hasil diagnosa utama: nama penyakit, tingkat kepercayaan model, dan <b>langkah penanganannya</b>.',
        targetSel: '#tour-result-penyakit',
    },
    {
        title: 'Catatan Penting',
        desc: 'Hasil ini bersifat <b>awal</b>. Tetap konsultasikan dengan ahli pertanian untuk penanganan yang lebih tepat ya!',
        targetSel: '#tour-result-catatan',
    },
    {
        title: 'Langkah Selanjutnya',
        desc: 'Kamu bisa langsung <b>Diagnosa Baru</b> atau melihat semua riwayat diagnosamu.',
        targetSel: '#tour-result-action',
    },
];

let _rStep = 0;
const _rGet    = id   => document.getElementById(id);
const _rTarget = step => step.targetSel ? document.querySelector(step.targetSel) : null;

function _rStart() {
    _rStep = 0;
    ['_rt_hl','_rt_tip','_rt_dim'].forEach(id => {
        if (!_rGet(id)) {
            const d = document.createElement('div');
            d.id = id;
            document.body.appendChild(d);
        }
    });
    _rRender();
}

function _rRender() {
    const step   = resultTourSteps[_rStep];
    const total  = resultTourSteps.length;
    const hl     = _rGet('_rt_hl');
    const tip    = _rGet('_rt_tip');
    const dim    = _rGet('_rt_dim');
    const target = _rTarget(step);

    dim.style.cssText = 'position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,0.52);pointer-events:auto;';

    tip.style.opacity = '0';
    hl.style.opacity  = '0';
    hl.style.display  = 'block';

    const dots = Array.from({length: total}, (_, i) =>
        `<span style="display:inline-block;width:${i===_rStep?16:6}px;height:6px;
         border-radius:3px;background:${i===_rStep?'#2d6a4f':'#d1d5db'};
         transition:all .3s;margin-right:4px;"></span>`
    ).join('');

    tip.innerHTML = `
        <div style="font-size:11px;color:#2d6a4f;font-weight:700;text-transform:uppercase;
            letter-spacing:.8px;margin-bottom:6px;">Langkah ${_rStep+1} dari ${total}</div>
        <div style="font-size:15px;font-weight:700;color:#1a3a2a;margin-bottom:8px;
            font-family:'Playfair Display',serif;">${step.title}</div>
        <div style="font-size:13px;color:#5a7a67;line-height:1.65;margin-bottom:18px;">${step.desc}</div>
        <div style="display:flex;align-items:center;justify-content:space-between;">
            <div>${dots}</div>
            <div style="display:flex;gap:10px;align-items:center;">
                <button onclick="_rEnd()"
                    style="background:none;border:none;font-size:12px;color:#9ca3af;cursor:pointer;padding:4px;">
                    Lewati
                </button>
                <button onclick="_rNext()"
                    style="background:#2d6a4f;color:#fff;border:none;padding:9px 18px;
                    border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;">
                    ${_rStep === total-1 ? 'Mengerti! ✓' : 'Lanjut →'}
                </button>
            </div>
        </div>`;

    tip.style.cssText = `
        position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
        z-index:99999;background:#fff;border-radius:16px;
        padding:22px 24px;width:290px;
        box-shadow:0 12px 40px rgba(0,0,0,0.18);
        font-family:inherit;pointer-events:auto;opacity:0;`;

    function _place() {
        if (!target) {
            hl.style.display = 'none';
            dim.style.background = 'rgba(0,0,0,0.52)';
            tip.style.opacity = '1';
            return;
        }

        const r   = target.getBoundingClientRect();
        const pad = 8;
        const vw  = window.innerWidth;
        const vh  = window.innerHeight;
        const TW  = 310;
        const TH  = 230;

        hl.style.cssText = `
            position:fixed;z-index:99992;pointer-events:none;
            top:${r.top - pad}px;left:${r.left - pad}px;
            width:${r.width + pad*2}px;height:${r.height + pad*2}px;
            border:2.5px solid #2d6a4f;border-radius:12px;
            box-shadow:0 0 0 9999px rgba(0,0,0,0.52);
            transition:all .3s ease;opacity:1;display:block;`;
        dim.style.background = 'transparent';

        let top, left;
        left = Math.max(16, Math.min(r.left, vw - TW - 16));

        if (r.top - TH - 16 >= 0) {
            top = r.top - TH - 12;
        } else if (r.bottom + TH + 16 <= vh) {
            top = r.bottom + 12;
        } else {
            top  = Math.max(16, (vh - TH) / 2);
            left = Math.max(16, (vw - TW) / 2);
        }

        tip.style.top       = top  + 'px';
        tip.style.left      = left + 'px';
        tip.style.transform = 'none';
        tip.style.opacity   = '1';
    }

    if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'center' });
        setTimeout(_place, 450);
    } else {
        _place();
    }
}

function _rNext() {
    _rStep++;
    if (_rStep >= resultTourSteps.length) { _rEnd(); return; }
    _rRender();
}

function _rEnd() {
    ['_rt_hl','_rt_tip','_rt_dim'].forEach(id => {
        const el = _rGet(id);
        if (el) el.remove();
    });
    localStorage.setItem('sipakartebu_result_tour_done', '1');
}

window.addEventListener('load', function () {
    if (!localStorage.getItem('sipakartebu_result_tour_done')) {
        setTimeout(_rStart, 800);
    }
});

function ulangiTourHasil() {
    localStorage.removeItem('sipakartebu_result_tour_done');
    _rStart();
}
</script>

@endsection