@extends('layouts.app')

@section('title', 'DEWA Gram Udhyog • Dashboard')

@section('content')
<div class="space-y-6">

    <!-- Business Header Profile Card -->
    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex items-center space-x-4">
                <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-[#008069] to-teal-500 flex items-center justify-center text-white font-black text-xl shadow">
                    DG
                </div>
                <div>
                    <div class="flex items-center space-x-2">
                        <h2 class="text-xl font-bold text-slate-900">{{ $account->business_name ?? 'DEWA Gram Udhyog Pvt Ltd' }}</h2>
                        <span class="bg-emerald-100 text-emerald-800 text-xs px-2.5 py-0.5 rounded-full font-semibold border border-emerald-200 flex items-center gap-1">
                            <i class="fa-solid fa-circle-check text-emerald-600"></i> Meta Verified
                        </span>
                    </div>
                    <p class="text-xs text-slate-500 mt-0.5">
                        GSTIN: <span class="font-mono font-medium">{{ $account->gst_number ?? '06AAJCD0975H1ZK' }}</span> • 
                        Mobile: <span class="font-medium">{{ $account->mobile_number ?? '+919461321162' }}</span> • 
                        Email: <span class="font-medium">{{ $account->email ?? 'contact@sdadigital.in' }}</span>
                    </p>
                    <p class="text-xs text-slate-400 mt-0.5">
                        <i class="fa-solid fa-location-dot text-slate-400 mr-1"></i>{{ $account->address ?? 'Gali No 4, Uttam Nagar Loharu Road, Bhiwani 127021 HR' }}
                    </p>
                </div>
            </div>

            <!-- Meta Connection Pill & Quick Action -->
            <div class="flex flex-wrap items-center gap-2">
                <div class="bg-slate-50 border border-slate-200 px-3 py-1.5 rounded-xl text-xs font-medium text-slate-700">
                    <span class="text-slate-400">WABA ID:</span> <span class="font-mono">{{ $account->meta_waba_id ?? '1378746380406848' }}</span>
                </div>
                <a href="{{ route('consumer.campaigns') }}" class="bg-[#008069] hover:bg-[#075E54] text-white px-4 py-2 rounded-xl text-xs font-bold transition flex items-center gap-1.5 shadow">
                    <i class="fa-solid fa-plus"></i> New Campaign
                </a>
            </div>
        </div>

        <!-- WhatsApp Daily Quota Progress -->
        <div class="mt-6 pt-5 border-t border-slate-100">
            <div class="flex items-center justify-between text-xs mb-1.5">
                <span class="font-semibold text-slate-600">
                    <i class="fa-brands fa-whatsapp text-emerald-600 mr-1"></i> Daily Meta WhatsApp Cloud Tier 2 Quota
                </span>
                <span class="font-bold text-[#008069]">
                    {{ number_format($account->quota_used ?? 18450) }} / {{ number_format($account->quota_limit ?? 100000) }} Messages Used
                </span>
            </div>
            @php
                $used = $account->quota_used ?? 18450;
                $limit = $account->quota_limit ?? 100000;
                $pct = min(100, round(($used / $limit) * 100));
            @endphp
            <div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
                <div class="bg-gradient-to-r from-[#008069] to-emerald-400 h-2.5 rounded-full" style="width: {{ $pct }}%"></div>
            </div>
        </div>
    </div>

    <!-- Analytics Stat Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Card 1 -->
        <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center justify-between">
            <div>
                <p class="text-xs font-medium text-slate-500 uppercase tracking-wider">Eligible Audience</p>
                <h3 class="text-2xl font-black text-slate-900 mt-1">{{ number_format($eligibleContacts) }}</h3>
                <p class="text-[11px] text-emerald-600 font-semibold mt-1">
                    <i class="fa-solid fa-circle-check"></i> 100% Opt-in Consent Verified
                </p>
            </div>
            <div class="w-12 h-12 rounded-xl bg-emerald-50 text-[#008069] flex items-center justify-center text-xl">
                <i class="fa-solid fa-users-viewfinder"></i>
            </div>
        </div>

        <!-- Card 2 -->
        <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center justify-between">
            <div>
                <p class="text-xs font-medium text-slate-500 uppercase tracking-wider">Campaign Messages</p>
                <h3 class="text-2xl font-black text-slate-900 mt-1">{{ number_format($totalSent) }}</h3>
                <p class="text-[11px] text-slate-500 font-medium mt-1">
                    Delivered: <span class="font-bold text-slate-700">{{ number_format($totalDelivered) }}</span>
                </p>
            </div>
            <div class="w-12 h-12 rounded-xl bg-sky-50 text-sky-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-paper-plane"></i>
            </div>
        </div>

        <!-- Card 3 -->
        <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center justify-between">
            <div>
                <p class="text-xs font-medium text-slate-500 uppercase tracking-wider">Meta Delivery Rate</p>
                <h3 class="text-2xl font-black text-emerald-600 mt-1">{{ $deliveryRate }}%</h3>
                <p class="text-[11px] text-slate-500 font-medium mt-1">
                    High Quality Rating (Green)
                </p>
            </div>
            <div class="w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-chart-line"></i>
            </div>
        </div>

        <!-- Card 4 -->
        <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center justify-between">
            <div>
                <p class="text-xs font-medium text-slate-500 uppercase tracking-wider">CRM Pipeline</p>
                <h3 class="text-2xl font-black text-slate-900 mt-1">₹{{ number_format($pipelineValue) }}</h3>
                <p class="text-[11px] text-slate-500 font-medium mt-1">
                    {{ $leadsCount }} Active Customer Inquiries
                </p>
            </div>
            <div class="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-indian-rupee-sign"></i>
            </div>
        </div>
    </div>

    <!-- Quick Navigation Hub -->
    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200">
        <h3 class="font-bold text-slate-900 text-sm mb-4">Quick Management Shortcuts</h3>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
            <a href="{{ route('consumer.contacts') }}" class="p-4 rounded-xl bg-slate-50 hover:bg-emerald-50/50 border border-slate-200 hover:border-emerald-300 transition text-center group">
                <i class="fa-solid fa-users text-2xl text-[#008069] mb-2 group-hover:scale-110 transition"></i>
                <p class="text-xs font-bold text-slate-800">Manage Contacts</p>
                <p class="text-[10px] text-slate-400">Mrs Bimla & 4 others</p>
            </a>

            <a href="{{ route('consumer.campaigns') }}" class="p-4 rounded-xl bg-slate-50 hover:bg-emerald-50/50 border border-slate-200 hover:border-emerald-300 transition text-center group">
                <i class="fa-solid fa-paper-plane text-2xl text-[#008069] mb-2 group-hover:scale-110 transition"></i>
                <p class="text-xs font-bold text-slate-800">Campaign Wizard</p>
                <p class="text-[10px] text-slate-400">Bulk Meta broadcast</p>
            </a>

            <a href="{{ route('consumer.leads') }}" class="p-4 rounded-xl bg-slate-50 hover:bg-emerald-50/50 border border-slate-200 hover:border-emerald-300 transition text-center group">
                <i class="fa-solid fa-funnel-dollar text-2xl text-[#008069] mb-2 group-hover:scale-110 transition"></i>
                <p class="text-xs font-bold text-slate-800">Leads CRM</p>
                <p class="text-[10px] text-slate-400">Track inquiries</p>
            </a>

            <a href="{{ route('consumer.inbox') }}" class="p-4 rounded-xl bg-slate-50 hover:bg-emerald-50/50 border border-slate-200 hover:border-emerald-300 transition text-center group">
                <i class="fa-brands fa-whatsapp text-2xl text-[#008069] mb-2 group-hover:scale-110 transition"></i>
                <p class="text-xs font-bold text-slate-800">WhatsApp Inbox</p>
                <p class="text-[10px] text-slate-400">Live 2-way chat</p>
            </a>

            <a href="{{ route('admin.dashboard') }}" class="p-4 rounded-xl bg-slate-50 hover:bg-emerald-50/50 border border-slate-200 hover:border-emerald-300 transition text-center group">
                <i class="fa-solid fa-shield-halved text-2xl text-sky-600 mb-2 group-hover:scale-110 transition"></i>
                <p class="text-xs font-bold text-slate-800">Admin Review</p>
                <p class="text-[10px] text-slate-400">Consent governance</p>
            </a>

            <a href="{{ route('superadmin.dashboard') }}" class="p-4 rounded-xl bg-slate-50 hover:bg-emerald-50/50 border border-slate-200 hover:border-emerald-300 transition text-center group">
                <i class="fa-solid fa-sliders text-2xl text-amber-600 mb-2 group-hover:scale-110 transition"></i>
                <p class="text-xs font-bold text-slate-800">Super Admin</p>
                <p class="text-[10px] text-slate-400">Meta WABA config</p>
            </a>
        </div>
    </div>

    <!-- Recent Broadcast Campaigns -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <h3 class="font-bold text-slate-900 text-sm">Recent WhatsApp Marketing Campaigns</h3>
            <a href="{{ route('consumer.campaigns') }}" class="text-xs text-[#008069] font-bold hover:underline">View All &rarr;</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-600">
                <thead class="bg-slate-50 text-slate-400 uppercase font-bold text-[10px] tracking-wider border-b border-slate-100">
                    <tr>
                        <th class="py-3 px-4">Campaign Title</th>
                        <th class="py-3 px-4">Template</th>
                        <th class="py-3 px-4">Audience</th>
                        <th class="py-3 px-4">Status</th>
                        <th class="py-3 px-4">Delivery Rate</th>
                        <th class="py-3 px-4">Scheduled</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($campaigns as $camp)
                    <tr class="hover:bg-slate-50 transition">
                        <td class="py-3 px-4 font-bold text-slate-900">{{ $camp->title }}</td>
                        <td class="py-3 px-4 font-mono">{{ $camp->template_name }}</td>
                        <td class="py-3 px-4">{{ $camp->target_categories }}</td>
                        <td class="py-3 px-4">
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-bold {{ $camp->status === 'COMPLETED' ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800' }}">
                                {{ $camp->status }}
                            </span>
                        </td>
                        <td class="py-3 px-4">
                            <span class="font-bold text-slate-800">{{ $camp->delivered_count }}</span> / {{ $camp->sent_count }}
                        </td>
                        <td class="py-3 px-4 text-slate-400">{{ $camp->created_at->diffForHumans() }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="py-6 text-center text-slate-400">No campaigns launched yet. Click "New Campaign" to create one.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection