@extends('admin.layouts.app')

@section('title', 'Market Intelligence')

@section('breadcrumb')
<a href="{{ route('admin.ai.index') }}">AI Intelligence</a>
<span class="separator">/</span>
<span>Market Intelligence</span>
@endsection

@section('content')
<div style="padding: 24px;" x-data="marketPage()">

    @include('admin.ai._tabs')

    {{-- Header --}}
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px;">
        <div>
            <h1 style="font-size:20px; font-weight:600; color:var(--vsc-text-active); margin-bottom:4px;">Market Intelligence</h1>
            <p style="font-size:13px; color:var(--vsc-text-secondary);">Trend analysis and AI-powered market insights</p>
        </div>
        <div style="display:flex; gap:8px;">
            <select class="form-control" style="width:180px;" onchange="window.location.href='?state_id='+this.value">
                <option value="">All States</option>
                @foreach($states as $state)
                    <option value="{{ $state->id }}" {{ $stateId == $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                @endforeach
            </select>
            <button class="btn btn-primary btn-sm" @click="generateTrends()" :disabled="generating">
                <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i>
                <span x-text="generating ? 'Generating...' : 'Generate Trends'"></span>
            </button>
        </div>
    </div>

    {{-- Stats --}}
    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:24px;">
        <div class="stat-card">
            <div class="stat-value">{{ number_format($stats['total_reports'] ?? 0) }}</div>
            <div class="stat-label">Total Reports</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ $stats['avg_score'] ?? 0 }}%</div>
            <div class="stat-label">Avg Score</div>
        </div>
        @foreach(($stats['by_project_type'] ?? []) as $type => $count)
        <div class="stat-card">
            <div class="stat-value">{{ $count }}</div>
            <div class="stat-label">{{ ucfirst($type) }}</div>
        </div>
        @endforeach
    </div>

    {{-- Top Zones --}}
    @if(count($stats['top_zones'] ?? []) > 0)
    <div class="data-card" style="margin-bottom:24px;">
        <div class="data-card-header">
            <h3>Top Zones by Report Count</h3>
        </div>
        <div class="data-card-body">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Zone</th>
                        <th>Type</th>
                        <th>Reports</th>
                        <th>Avg Score</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($stats['top_zones'] as $zone)
                    <tr>
                        <td>{{ $zone->zone?->name ?? 'Unknown' }}</td>
                        <td><span class="badge badge-info" style="font-size:10px;">{{ $zone->zone?->zone_type ?? '-' }}</span></td>
                        <td>{{ $zone->count }}</td>
                        <td>
                            <span style="color:{{ ($zone->avg_score ?? 0) >= 70 ? '#4ade80' : (($zone->avg_score ?? 0) >= 40 ? '#fbbf24' : '#f87171') }};">
                                {{ round($zone->avg_score ?? 0, 1) }}%
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    {{-- AI Analysis --}}
    <div class="data-card">
        <div class="data-card-header">
            <h3><i data-lucide="brain" style="width:16px;height:16px;"></i> AI Market Analysis</h3>
            <button class="btn btn-sm btn-outline" @click="analyze()" :disabled="analyzing">
                <span x-text="analyzing ? 'Analyzing...' : 'Run AI Analysis'"></span>
            </button>
        </div>
        <div class="data-card-body">
            <div x-show="!analysis" style="text-align:center; padding:32px; color:var(--vsc-text-tertiary);">
                <p>Click "Run AI Analysis" to get AI-powered market insights.</p>
            </div>

            <div x-show="analysis" style="display:flex; flex-direction:column; gap:16px;">
                {{-- Summary --}}
                <div x-show="analysis?.summary" style="padding:12px 16px; background:rgba(37,99,235,.06); border:1px solid rgba(37,99,235,.15); border-radius:8px;">
                    <div style="font-size:11px; text-transform:uppercase; color:var(--vsc-text-tertiary); margin-bottom:4px; font-weight:600;">Market Summary</div>
                    <p style="font-size:13px; color:var(--vsc-text-active); line-height:1.6;" x-text="analysis?.summary"></p>
                </div>

                {{-- High Potential Areas --}}
                <template x-if="analysis?.high_potential?.length > 0">
                    <div>
                        <h4 style="font-size:13px; font-weight:600; color:var(--vsc-text-active); margin-bottom:8px;">🎯 High-Potential Areas</h4>
                        <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px;">
                            <template x-for="hp in analysis.high_potential" :key="hp.area">
                                <div style="padding:10px 12px; background:rgba(34,197,94,.06); border:1px solid rgba(34,197,94,.15); border-radius:6px;">
                                    <div style="font-size:13px; font-weight:600; color:var(--vsc-text-active);" x-text="hp.area"></div>
                                    <div style="font-size:12px; color:var(--vsc-text-secondary); margin-top:2px;" x-text="hp.reason"></div>
                                    <div style="font-size:11px; color:#4ade80; margin-top:4px;">
                                        Score: <span x-text="hp.score"></span>/100
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>

                {{-- Insights --}}
                <template x-if="analysis?.insights?.length > 0">
                    <div>
                        <h4 style="font-size:13px; font-weight:600; color:var(--vsc-text-active); margin-bottom:8px;">💡 Key Insights</h4>
                        <template x-for="ins in analysis.insights" :key="ins.title">
                            <div style="padding:8px 12px; border-left:3px solid var(--vsc-accent); margin-bottom:6px;">
                                <div style="font-size:12px; font-weight:600; color:var(--vsc-text-active);" x-text="ins.title"></div>
                                <div style="font-size:12px; color:var(--vsc-text-secondary); margin-top:2px;" x-text="ins.detail"></div>
                            </div>
                        </template>
                    </div>
                </template>

                {{-- Recommendations --}}
                <template x-if="analysis?.recommendations?.length > 0">
                    <div>
                        <h4 style="font-size:13px; font-weight:600; color:var(--vsc-text-active); margin-bottom:8px;">📋 Recommendations</h4>
                        <template x-for="rec in analysis.recommendations" :key="rec.action">
                            <div style="display:flex; gap:8px; padding:8px 12px; background:rgba(234,179,8,.06); border:1px solid rgba(234,179,8,.1); border-radius:6px; margin-bottom:6px;">
                                <span class="badge" style="font-size:9px; flex-shrink:0;"
                                      :class="rec.priority === 'high' ? 'badge-danger' : (rec.priority === 'medium' ? 'badge-warning' : 'badge-info')"
                                      x-text="rec.priority?.toUpperCase()"></span>
                                <div>
                                    <div style="font-size:12px; font-weight:600; color:var(--vsc-text-active);" x-text="rec.action"></div>
                                    <div style="font-size:11px; color:var(--vsc-text-secondary); margin-top:2px;" x-text="rec.rationale"></div>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
function marketPage() {
    return {
        generating: false,
        analyzing: false,
        analysis: null,

        async generateTrends() {
            this.generating = true;
            try {
                const res = await fetch('{{ route("admin.ai.market.generate") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    }
                });
                const data = await res.json();
                alert(data.message || 'Trends generated.');
                window.location.reload();
            } catch(e) {
                alert('Error: ' + e.message);
            } finally {
                this.generating = false;
            }
        },

        async analyze() {
            this.analyzing = true;
            try {
                const stateId = '{{ $stateId ?? '' }}';
                const res = await fetch('{{ route("admin.ai.market.analyze") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ state_id: stateId || undefined })
                });
                this.analysis = await res.json();
            } catch(e) {
                alert('Error: ' + e.message);
            } finally {
                this.analyzing = false;
            }
        }
    }
}
</script>
@endpush