@extends('layouts.app')

@push('page-css')
    @vite(['resources/css/tools/dashboard.css'])
@endpush

@section('content')
<div class="dashboard">
    {{-- Welcome Header --}}
    <div class="dashboard-header">
        <h1>Welcome, {{ auth()->user()->name }}</h1>
        <p class="dashboard-subtitle">{{ $tenant->company_name ?? 'EstiFlow' }} Estimator Tools</p>
    </div>

    {{-- Quick Actions --}}
    <div class="dashboard-actions">
        <a href="{{ route('estimator') }}" class="dashboard-action-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            New Calculation
        </a>
        <a href="{{ route('projects') }}" class="dashboard-action-btn dashboard-action-secondary">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
            View Projects
        </a>
    </div>

    {{-- Stats Row --}}
    <div class="stats-row">
        <div class="stat-card">
            <div class="stat-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
            </div>
            <div class="stat-content">
                <span class="stat-value">{{ $recentCalculations->count() }}</span>
                <span class="stat-label">Recent Calculations</span>
            </div>
        </div>
        <a href="{{ route('projects') }}" class="stat-card stat-card-link">
            <div class="stat-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
            </div>
            <div class="stat-content">
                <span class="stat-value">{{ $projectCount }}</span>
                <span class="stat-label">Saved Projects</span>
            </div>
        </a>
        <div class="stat-card">
            <div class="stat-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            </div>
            <div class="stat-content">
                <span class="stat-value">{{ $monthlyCalculations }}</span>
                <span class="stat-label">This Month</span>
            </div>
        </div>
    </div>

    {{-- Pinned / Favourite Tools (populated by JS) --}}
    <div id="pinnedToolsSection" style="display:none;">
        <h2 class="section-title">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px;margin-right:6px;color:var(--brand-primary,#4CAF50)"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
            Favourites
        </h2>
        <div id="pinnedToolsGrid" class="tools-grid"></div>
    </div>

    {{-- Tools Grid --}}
    <h2 class="section-title">Tools</h2>
    <div class="tools-grid">
        @foreach($tools as $tool)
        <a href="{{ route($tool['route']) }}" class="tool-card" data-route="{{ $tool['route'] }}">
            <div class="tool-card-icon">
                @switch($tool['icon'])
                    @case('deck')
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="6" width="22" height="12" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/><line x1="1" y1="14" x2="23" y2="14"/><line x1="6" y1="6" x2="6" y2="18"/><line x1="12" y1="6" x2="12" y2="18"/><line x1="18" y1="6" x2="18" y2="18"/></svg>
                        @break
                    @case('area')
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
                        @break
                    @case('pricing')
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                        @break
                    @case('joist')
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="20" x2="22" y2="20"/><line x1="4" y1="20" x2="4" y2="8"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="20" y1="20" x2="20" y2="8"/><line x1="2" y1="8" x2="22" y2="8"/></svg>
                        @break
                    @case('cabinet')
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="2" y1="12" x2="22" y2="12"/><circle cx="8" cy="8" r="1"/><circle cx="16" cy="8" r="1"/><circle cx="8" cy="16" r="1"/><circle cx="16" cy="16" r="1"/></svg>
                        @break
                    @case('balustrade')
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="4" x2="22" y2="4"/><line x1="2" y1="20" x2="22" y2="20"/><line x1="4" y1="4" x2="4" y2="20"/><line x1="8" y1="4" x2="8" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="16" y1="4" x2="16" y2="20"/><line x1="20" y1="4" x2="20" y2="20"/></svg>
                        @break
                    @case('spindle')
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="4" x2="22" y2="4"/><line x1="2" y1="20" x2="22" y2="20"/><line x1="6" y1="4" x2="6" y2="20"/><line x1="10" y1="4" x2="10" y2="20"/><line x1="14" y1="4" x2="14" y2="20"/><line x1="18" y1="4" x2="18" y2="20"/><path d="M2 8 L6 8 M6 8 L10 8 M10 8 L14 8" stroke-dasharray="2 2"/></svg>
                        @break
                @endswitch
            </div>
            <div class="tool-card-content">
                <h3>{{ $tool['name'] }}</h3>
                <p>{{ $tool['description'] }}</p>
            </div>
        </a>
        @endforeach
    </div>

    {{-- Analytics --}}
    <h2 class="section-title">Analytics</h2>
    <div class="analytics-row">
        <div class="analytics-card" style="flex:2;">
            <h3 class="analytics-card-title">Usage (Last 30 Days)</h3>
            <div class="analytics-chart-wrap">
                <canvas id="usageChart"></canvas>
            </div>
            @if(empty($analyticsData['dailyUsage']))
                <div class="analytics-placeholder">No usage data yet</div>
            @endif
        </div>
        <div class="analytics-card" style="flex:1;">
            <h3 class="analytics-card-title">Calculator Types</h3>
            <div class="analytics-chart-wrap analytics-chart-doughnut">
                <canvas id="typeChart"></canvas>
            </div>
            @if(empty($analyticsData['typeBreakdown']))
                <div class="analytics-placeholder">No data yet</div>
            @endif
        </div>
    </div>

    {{-- Recent Calculations --}}
    <h2 class="section-title">Recent Calculations</h2>
    @if($recentCalculations->isNotEmpty())
    <div class="recent-calculations">
        @foreach($recentCalculations as $calc)
        <div class="calc-item">
            <div class="calc-item-left">
                @php
                    $calcType = $calc->calculator_type ?? 'deck';
                    $typeColors = [
                        'deck' => '#4CAF50',
                        'cabinet' => '#2196F3',
                        'balustrade' => '#FF9800',
                        'area' => '#9C27B0',
                        'pricing' => '#F44336',
                        'joist' => '#00BCD4',
                    ];
                    $iconColor = $typeColors[$calcType] ?? '#4CAF50';
                @endphp
                <span class="calc-type-icon" style="background: {{ $iconColor }}20; color: {{ $iconColor }};">
                    @switch($calcType)
                        @case('cabinet')
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
                            @break
                        @case('balustrade')
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="2" y1="4" x2="22" y2="4"/><line x1="2" y1="20" x2="22" y2="20"/><line x1="8" y1="4" x2="8" y2="20"/><line x1="16" y1="4" x2="16" y2="20"/></svg>
                            @break
                        @default
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="22" height="12" rx="2"/><line x1="1" y1="12" x2="23" y2="12"/></svg>
                    @endswitch
                </span>
                <span class="calc-type-badge" style="background: {{ $iconColor }}18; color: {{ $iconColor }};">{{ ucfirst(str_replace('_', ' ', $calcType)) }}</span>
            </div>
            <div class="calc-item-right">
                @if(config('features.pdf_export'))
                <a href="{{ route('pdf.calculation', $calc) }}" class="calc-pdf-link" title="Download PDF">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    PDF
                </a>
                @endif
                <span class="calc-time">{{ $calc->created_at->diffForHumans() }}</span>
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="empty-state">
        <div class="empty-state-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
        </div>
        <h3>No calculations yet</h3>
        <p>Get started by running your first deck estimate.</p>
        <a href="{{ route('estimator') }}" class="dashboard-action-btn" style="display:inline-flex;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Start Estimator
        </a>
    </div>
    @endif
</div>

<script>
    window.ANALYTICS_DATA = @json($analyticsData);
</script>
@endsection

@push('page-scripts')
    @vite(['resources/js/tools/dashboard.js', 'resources/js/tools/analytics-chart.js'])
@endpush