@extends('layouts.client')

@section('title', 'Dashboard')

@section('content')
    <!-- Header -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-10">
        <div>
            <h1 class="text-3xl md:text-4xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-violet-600">
                Visão Geral
            </h1>
            <p class="text-slate-500 mt-2 text-lg font-medium">
                Bem-vindo de volta, {{ auth()->user()->name }}. 👋
            </p>
        </div>
        <div>
             <a href="/generate" class="group relative inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl shadow-lg shadow-indigo-200 transition-all hover:-translate-y-1">
                <i class="ph-bold ph-plus-circle text-xl"></i>
                <span>Novo Conteúdo</span>
            </a>
        </div>
    </div>

    <!-- Metrics Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
        
        <!-- Card 1 -->
        <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow group">
            <div class="flex justify-between items-start mb-4">
                <div class="p-3 bg-indigo-50 text-indigo-600 rounded-xl group-hover:scale-110 transition-transform">
                    <i class="ph-duotone ph-article text-2xl"></i>
                </div>
            </div>
            <div>
                <span class="text-4xl font-bold text-slate-900 tracking-tight">{{ auth()->user()->generatedContents()->whereMonth('created_at', now()->month)->count() }}</span>
                <span class="block text-sm font-bold text-slate-400 uppercase tracking-wider mt-1">Artigos/Mês</span>
            </div>
        </div>

        <!-- Card 2 -->
        <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow group">
            <div class="flex justify-between items-start mb-4">
                <div class="p-3 bg-emerald-50 text-emerald-600 rounded-xl group-hover:scale-110 transition-transform">
                    <i class="ph-duotone ph-globe text-2xl"></i>
                </div>
            </div>
            <div>
                <span class="text-4xl font-bold text-slate-900 tracking-tight">{{ auth()->user()->connectedSites()->count() }}</span>
                <span class="block text-sm font-bold text-slate-400 uppercase tracking-wider mt-1">Sites Ativos</span>
            </div>
        </div>

        <!-- Card 3 -->
        <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow group">
            <div class="flex justify-between items-start mb-4">
                <div class="p-3 bg-amber-50 text-amber-600 rounded-xl group-hover:scale-110 transition-transform">
                    <i class="ph-duotone ph-coins text-2xl"></i>
                </div>
            </div>
            <div>
                 @php
                     $totalWords = auth()->user()->generatedContents()
                         ->where('status', 'published')
                         ->get()
                         ->sum(function ($c) {
                             return str_word_count(strip_tags($c->content ?? ''));
                         });
                     $formattedWords = $totalWords >= 1000 ? number_format($totalWords / 1000, 1) . 'k' : $totalWords;
                 @endphp
                 <span class="text-4xl font-bold text-slate-900 tracking-tight">{{ $formattedWords }}</span>
                 <span class="block text-sm font-bold text-slate-400 uppercase tracking-wider mt-1">Palavras Publicadas</span>
            </div>
        </div>

        <!-- Card 4 (Upgrade) -->
        <a href="{{ route('settings.subscription') }}" class="relative bg-slate-900 p-6 rounded-2xl border border-slate-800 shadow-xl overflow-hidden group cursor-pointer">
            <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <i class="ph-fill ph-crown text-8xl text-white -mt-4 -mr-4 transform rotate-12"></i>
            </div>
            <div class="relative z-10 h-full flex flex-col justify-between">
                <div>
                    <span class="inline-block px-2 py-1 rounded bg-white/10 text-white text-[10px] font-bold uppercase border border-white/5 mb-3">Pro Plan</span>
                    <h3 class="text-xl font-bold text-white leading-tight">Faça Upgrade<br>agora mesmo.</h3>
                </div>
                <div class="flex items-center gap-2 text-indigo-300 font-bold text-sm mt-4 group-hover:text-white transition-colors">
                    Ver Planos <i class="ph-bold ph-arrow-right"></i>
                </div>
            </div>
        </a>
    </div>

    <!-- Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Main Area -->
        <div class="lg:col-span-2 space-y-8">
            
            <!-- Quick Actions -->
            <div class="bg-white rounded-2xl border border-slate-100 shadow-sm p-8">
                <h3 class="text-lg font-bold text-slate-900 mb-6 flex items-center gap-2">
                    <i class="ph-duotone ph-lightning text-indigo-500"></i> Ações Rápidas
                </h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <a href="/bulk-generate" class="flex flex-col items-center justify-center gap-3 p-6 bg-slate-50 hover:bg-white hover:shadow-lg hover:shadow-indigo-100/50 hover:scale-105 border border-transparent hover:border-indigo-100 rounded-2xl transition-all duration-300 group">
                        <i class="ph-duotone ph-stack text-3xl text-slate-400 group-hover:text-indigo-600 transition-colors"></i>
                        <span class="font-bold text-sm text-slate-600 group-hover:text-slate-900">Bulk Mode</span>
                    </a>
                    <a href="/keyword-research" class="flex flex-col items-center justify-center gap-3 p-6 bg-slate-50 hover:bg-white hover:shadow-lg hover:shadow-emerald-100/50 hover:scale-105 border border-transparent hover:border-emerald-100 rounded-2xl transition-all duration-300 group">
                        <i class="ph-duotone ph-magnifying-glass text-3xl text-slate-400 group-hover:text-emerald-600 transition-colors"></i>
                        <span class="font-bold text-sm text-slate-600 group-hover:text-slate-900">Keywords</span>
                    </a>
                    <a href="/content-clusters" class="flex flex-col items-center justify-center gap-3 p-6 bg-slate-50 hover:bg-white hover:shadow-lg hover:shadow-amber-100/50 hover:scale-105 border border-transparent hover:border-amber-100 rounded-2xl transition-all duration-300 group">
                        <i class="ph-duotone ph-tree-structure text-3xl text-slate-400 group-hover:text-amber-600 transition-colors"></i>
                        <span class="font-bold text-sm text-slate-600 group-hover:text-slate-900">Clusters</span>
                    </a>
                    <a href="/youtube-to-article" class="flex flex-col items-center justify-center gap-3 p-6 bg-slate-50 hover:bg-white hover:shadow-lg hover:shadow-red-100/50 hover:scale-105 border border-transparent hover:border-red-100 rounded-2xl transition-all duration-300 group">
                        <i class="ph-duotone ph-youtube-logo text-3xl text-slate-400 group-hover:text-red-600 transition-colors"></i>
                        <span class="font-bold text-sm text-slate-600 group-hover:text-slate-900">Video 2 Post</span>
                    </a>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
                <div class="px-8 py-6 border-b border-slate-50 flex justify-between items-center">
                    <h3 class="text-lg font-bold text-slate-900">Histórico Recente</h3>
                    <a href="{{ route('content.history') }}" class="text-xs font-bold text-indigo-600 hover:text-indigo-800 uppercase tracking-wide">Ver tudo</a>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <tbody class="divide-y divide-slate-50">
                            @forelse(auth()->user()->generatedContents()->latest()->take(5)->get() as $content)
                            <tr onclick="window.location='{{ route('content.editor', $content->id) }}'" class="hover:bg-slate-50 transition-colors group cursor-pointer">
                                <td class="px-8 py-5">
                                    <div class="flex items-center gap-4">
                                        <div class="w-10 h-10 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center">
                                            <i class="ph-bold ph-file-text text-lg"></i>
                                        </div>
                                        <div>
                                            <p class="font-bold text-slate-900 line-clamp-1 group-hover:text-indigo-600 transition-colors">{{ $content->title }}</p>
                                            <p class="text-xs text-slate-500 mt-1">{{ $content->created_at->format('d M, Y') }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <div class="flex items-center gap-2">
                                        <i class="ph-duotone ph-globe text-slate-400"></i>
                                        <span class="text-sm font-medium text-slate-600">{{ $content->connectedSite->name ?? 'Local' }}</span>
                                    </div>
                                </td>
                                <td class="px-8 py-5 text-right">
                                    @php
                                        $statusClass = match($content->status) {
                                            'published' => 'bg-emerald-100 text-emerald-700 border-emerald-200',
                                            'scheduled' => 'bg-indigo-100 text-indigo-700 border-indigo-200',
                                            'draft' => 'bg-slate-100 text-slate-600 border-slate-200',
                                            default => 'bg-gray-100 text-gray-600 border-gray-200'
                                        };
                                    @endphp
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold border {{ $statusClass }}">
                                        {{ ucfirst($content->status) }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="px-8 py-12 text-center text-slate-400">
                                    <div class="flex flex-col items-center">
                                        <i class="ph-duotone ph-ghost text-4xl mb-2 opacity-50"></i>
                                        <p>Nenhum conteúdo recente.</p>
                                        <a href="/generate" class="mt-4 text-sm font-bold text-indigo-600 hover:text-indigo-800">Criar primeiro post →</a>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

        <!-- Sidebar Widgets -->
        <div class="lg:col-span-1 space-y-6">
            
            <!-- Usage Widget -->
            <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm relative overflow-hidden">
                <h3 class="font-bold text-slate-900 mb-6">Uso do Plano</h3>
                
                @php
                    $percent = $limits['articles']['max'] > 0 ? ($limits['articles']['current'] / $limits['articles']['max']) * 100 : 0;
                    $strokeDashoffset = 440 - (440 * $percent) / 100;
                @endphp

                <div class="flex items-center justify-center mb-8">
                     <div class="relative w-40 h-40">
                        <svg class="w-full h-full transform -rotate-90">
                            <circle cx="80" cy="80" r="70" stroke="currentColor" stroke-width="12" fill="transparent" class="text-slate-100" />
                            <circle cx="80" cy="80" r="70" stroke="currentColor" stroke-width="12" fill="transparent" stroke-dasharray="440" stroke-dashoffset="{{ $strokeDashoffset }}" class="text-indigo-600 rounded-full transition-all duration-1000 ease-out" />
                        </svg>
                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                            <span class="text-3xl font-extrabold text-slate-900">{{ round($percent) }}%</span>
                            <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Usado</span>
                        </div>
                    </div>
                </div>

                <div class="space-y-4">
                    <div class="flex justify-between text-sm border-b border-slate-50 pb-3">
                        <span class="text-slate-500 font-medium">Artigos</span>
                        <span class="font-bold text-slate-900">{{ $limits['articles']['current'] }} / {{ $limits['articles']['max'] }}</span>
                    </div>
                     <div class="flex justify-between text-sm border-b border-slate-50 pb-3">
                        <span class="text-slate-500 font-medium">Conexões WP</span>
                        <span class="font-bold text-slate-900">{{ $limits['sites']['current'] }} / {{ $limits['sites']['max'] }}</span>
                    </div>
                </div>

                <button class="mt-6 w-full py-3 bg-slate-50 hover:bg-slate-100 text-slate-700 text-sm font-bold rounded-xl transition-colors">
                    Gerenciar Assinatura
                </button>
            </div>

            <!-- Help Widget -->
            <div class="bg-gradient-to-br from-indigo-600 to-violet-700 rounded-2xl p-8 text-white text-center shadow-lg shadow-indigo-200">
                <i class="ph-duotone ph-lifebuoy text-5xl mb-4 text-white/90"></i>
                <h3 class="font-bold text-lg mb-2">Precisa de ajuda?</h3>
                <p class="text-indigo-100 text-sm mb-6">Confira nossos tutoriais ou entre em contato com o suporte.</p>
                <button class="w-full py-3 bg-white text-indigo-700 text-sm font-bold rounded-xl shadow-md hover:shadow-lg hover:bg-indigo-50 transition-all">
                    Acessar Suporte
                </button>
            </div>

        </div>

    </div>
@endsection