@extends('layouts.researcher')

@section('title', 'Dashboard Overview')

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

    <!-- Flash Notifications -->
    @if(session('success'))
        <div class="p-4 bg-emerald-500/10 border border-emerald-500/30 rounded-xl text-emerald-400 text-sm flex items-center justify-between">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-emerald-400" 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>
                <span>{{ session('success') }}</span>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="p-4 bg-rose-500/10 border border-rose-500/30 rounded-xl text-rose-400 text-sm flex items-center justify-between">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <span>{{ session('error') }}</span>
            </div>
        </div>
    @endif

    <!-- Dynamic KYC Alert Banner -->
    @php
        $kycStatus = Auth::user()->kyc_status ?? 'unsubmitted';
    @endphp

    @if($kycStatus === 'unsubmitted')
        <div class="bg-amber-950/40 border border-amber-500/30 rounded-2xl p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4 shadow-sm">
            <div class="flex items-start gap-4">
                <div class="p-2 bg-amber-500/10 rounded-lg shrink-0">
                    <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                </div>
                <div>
                    <h3 class="text-sm font-bold text-amber-400">Action Required: Verify Your Identity</h3>
                    <p class="text-xs text-slate-300 mt-1">You must complete KYC verification to publish surveys and access researcher features.</p>
                </div>
            </div>
            <a href="{{ route('researcher.profile.kyc') }}" class="shrink-0 px-6 py-3 bg-amber-500 hover:bg-amber-400 text-amber-950 text-xs font-extrabold rounded-xl transition shadow-lg shadow-amber-900/20 whitespace-nowrap text-center uppercase tracking-wider">
                Complete KYC Now
            </a>
        </div>
    @elseif($kycStatus === 'pending')
        <div class="bg-blue-950/40 border border-blue-500/30 rounded-2xl p-5 flex items-start gap-4 shadow-sm">
            <div class="p-2 bg-blue-500/10 rounded-lg shrink-0">
                <svg class="w-6 h-6 text-blue-400 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div>
                <h3 class="text-sm font-bold text-blue-400">Verification Pending</h3>
                <p class="text-xs text-slate-300 mt-1">Your identity verification is currently under review by our admin team. This usually takes less than 24 hours.</p>
            </div>
        </div>
    @elseif($kycStatus === 'rejected')
        <div class="bg-rose-950/40 border border-rose-500/30 rounded-2xl p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4 shadow-sm">
            <div class="flex items-start gap-4">
                <div class="p-2 bg-rose-500/10 rounded-lg shrink-0">
                    <svg class="w-6 h-6 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div>
                    <h3 class="text-sm font-bold text-rose-400">Verification Rejected</h3>
                    <p class="text-xs text-slate-300 mt-1">Your KYC submission was rejected. Please review the requirements and submit again to unlock your account.</p>
                </div>
            </div>
            <a href="{{ route('researcher.profile.kyc') }}" class="shrink-0 px-6 py-3 bg-rose-500 hover:bg-rose-400 text-rose-950 text-xs font-extrabold rounded-xl transition shadow-lg shadow-rose-900/20 whitespace-nowrap text-center uppercase tracking-wider">
                Resubmit KYC
            </a>
        </div>
    @endif

    <!-- Header Banner -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mt-2">
        <div>
            <h1 class="text-2xl font-bold text-white">Welcome back, {{ Auth::user()->name }}!</h1>
            <p class="text-sm text-slate-400 mt-1">Here is a summary of your active research projects and wallet analytics.</p>
        </div>
        <div class="flex flex-wrap items-center gap-3">
            <button onclick="document.getElementById('depositModal').classList.remove('hidden')" 
                    class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg font-medium text-sm transition shadow-lg shadow-emerald-600/20 flex items-center gap-2">
                <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="M12 4v16m8-8H4"/></svg>
                Deposit Funds
            </button>

            <!-- New Analytics Button -->
            <a href="{{ Route::has('researcher.analytics.index') ? route('researcher.analytics.index') : '#' }}" 
               class="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg font-medium text-sm transition shadow-lg shadow-indigo-500/20 flex items-center gap-2">
                <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                Analytics
            </a>

            <a href="{{ route('researcher.surveys.create') }}" 
               class="px-4 py-2.5 bg-[#008DDA] hover:bg-blue-600 text-white rounded-lg font-medium text-sm transition shadow-lg shadow-blue-500/20 flex items-center gap-2">
                <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="M12 4v16m8-8H4"/></svg>
                New Survey
            </a>
        </div>
    </div>

    <!-- Wallet Highlight Banner -->
    <div class="bg-gradient-to-r from-[#1E3E62] to-[#0B192C] border border-slate-700/60 rounded-2xl p-6 shadow-md flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div class="flex items-center gap-4">
            <div class="p-4 bg-[#008DDA]/10 border border-[#008DDA]/20 rounded-2xl text-[#008DDA]">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a1 1 0 11-2 0 1 1 0 012 0z"/></svg>
            </div>
            <div>
                <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Available Escrow Wallet</span>
                <div class="text-3xl font-extrabold text-white mt-1">
                    GH₵ {{ number_format($wallet->balance ?? Auth::user()->wallet_balance ?? 0.00, 2) }}
                </div>
                <p class="text-xs text-slate-400 mt-0.5">Funds are automatically locked in escrow when publishing new studies.</p>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button onclick="document.getElementById('depositModal').classList.remove('hidden')" 
                    class="px-4 py-2 bg-[#008DDA] hover:bg-blue-600 text-white font-medium text-sm rounded-xl transition shadow-md shadow-blue-500/20 text-center w-full md:w-auto">
                + Add Funds
            </button>
            <a href="{{ route('researcher.wallet.index') }}" 
               class="px-4 py-2 bg-slate-800/80 hover:bg-slate-700 text-slate-300 font-medium text-sm rounded-xl border border-slate-700 transition text-center w-full md:w-auto">
                View Ledger
            </a>
        </div>
    </div>

    <!-- Stat Cards Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Surveys -->
        <div class="bg-slate-900 border border-slate-800 rounded-xl p-6 shadow-sm">
            <div class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Total Surveys</div>
            <div class="text-3xl font-extrabold text-white mt-3">{{ $totalSurveys ?? 0 }}</div>
        </div>

        <!-- Active Surveys -->
        <div class="bg-slate-900 border border-slate-800 rounded-xl p-6 shadow-sm">
            <div class="text-xs font-semibold text-emerald-400 uppercase tracking-wider">Active</div>
            <div class="text-3xl font-extrabold text-emerald-400 mt-3">{{ $activeSurveys ?? 0 }}</div>
        </div>

        <!-- Draft Surveys -->
        <div class="bg-slate-900 border border-slate-800 rounded-xl p-6 shadow-sm">
            <div class="text-xs font-semibold text-amber-400 uppercase tracking-wider">Drafts</div>
            <div class="text-3xl font-extrabold text-amber-400 mt-3">{{ $draftSurveys ?? 0 }}</div>
        </div>

        <!-- Closed/Completed Surveys -->
        <div class="bg-slate-900 border border-slate-800 rounded-xl p-6 shadow-sm">
            <div class="text-xs font-semibold text-indigo-400 uppercase tracking-wider">Completed</div>
            <div class="text-3xl font-extrabold text-indigo-400 mt-3">{{ $completedSurveys ?? 0 }}</div>
        </div>
    </div>

    <!-- Recent Surveys Section -->
    <div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-sm">
        <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between">
            <h3 class="text-base font-semibold text-slate-200">Recent Surveys</h3>
            <a href="{{ route('researcher.surveys.index') }}" class="text-xs font-medium text-[#008DDA] hover:text-blue-400">View All →</a>
        </div>

        <div class="divide-y divide-slate-800">
            @forelse($recentSurveys ?? [] as $survey)
                <div class="px-6 py-4 flex items-center justify-between hover:bg-slate-800/50 transition">
                    <div>
                        <a href="{{ route('researcher.surveys.show', $survey) }}" class="text-sm font-semibold text-white hover:text-[#008DDA] transition">
                            {{ $survey->title }}
                        </a>
                        <div class="text-xs text-slate-500 mt-1 flex items-center gap-3">
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ $survey->status === 'active' ? 'bg-emerald-950 text-emerald-400 border border-emerald-800' : 'bg-slate-800 text-slate-400' }}">
                                {{ ucfirst($survey->status) }}
                            </span>
                            <span>Created {{ $survey->created_at->diffForHumans() }}</span>
                        </div>
                    </div>
                    <div class="text-right text-xs">
                        <span class="text-slate-300 font-semibold text-sm">{{ $survey->responses_count ?? 0 }}</span>
                        <span class="text-slate-500"> responses</span>
                    </div>
                </div>
            @empty
                <div class="px-6 py-12 text-center text-slate-500 text-sm">
                    No surveys created yet. Click "New Survey" to get started.
                </div>
            @endforelse
        </div>
    </div>

</div>

<!-- Deposit Modal Component -->
<div id="depositModal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center hidden">
    <div class="bg-slate-900 rounded-2xl max-w-md w-full p-6 shadow-2xl border border-slate-800 relative">
        <div class="flex items-center justify-between pb-4 border-b border-slate-800">
            <h3 class="font-bold text-white text-base">Deposit Funds to Escrow Wallet</h3>
            <button onclick="document.getElementById('depositModal').classList.add('hidden')" class="text-slate-400 hover:text-white text-xl font-bold">&times;</button>
        </div>

        <form action="{{ route('researcher.deposit.initialize') }}" method="POST" class="mt-6 space-y-4">
            @csrf
            <div>
                <label for="amount" class="block text-xs font-bold uppercase text-slate-300 mb-2">
                    Enter Amount (GHS)
                </label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-xs font-bold text-slate-400">GHS</span>
                    <input type="number" name="amount" id="amount" min="5" step="1" required 
                           class="w-full pl-14 pr-4 py-3 rounded-xl border border-slate-700 bg-slate-950 text-white font-bold text-base focus:ring-2 focus:ring-[#008DDA] focus:border-transparent outline-none" 
                           placeholder="100.00">
                </div>
                <p class="text-[11px] text-slate-400 mt-2">Instant funding via Mobile Money (MTN, Telecel, AT) or Bank Card.</p>
            </div>

            <div class="pt-2 flex justify-end space-x-3">
                <button type="button" onclick="document.getElementById('depositModal').classList.add('hidden')" 
                        class="px-4 py-2.5 rounded-xl text-xs font-semibold text-slate-400 hover:bg-slate-800 hover:text-white transition">
                    Cancel
                </button>
                <button type="submit" 
                        class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-[#008DDA] hover:bg-blue-600 shadow-md transition">
                    Proceed to Payment
                </button>
            </div>
        </form>
    </div>
</div>
@endsection