package templates

import "dealroom/internal/model"
import "fmt"

type AnalyticsStats struct {
	DealCount     int
	FileCount     int
	RequestCount  int
	CompletionPct int
}

func completionWidth(pct int) templ.Attributes {
	return templ.Attributes{"style": fmt.Sprintf("width: %d%%", pct)}
}

templ AnalyticsPage(profile *model.Profile, stats *AnalyticsStats, deals []*model.Deal, selectedDealID string) {
	@Layout(profile, "analytics") {
		<div class="space-y-5">
			<div class="flex items-center justify-between">
				<div>
					<h1 class="text-2xl font-bold">Analytics</h1>
					<p class="text-sm text-gray-500 mt-1">Key metrics and insights across your deal portfolio.</p>
				</div>
				<div>
					<select onchange="window.location.href='/analytics?deal_id='+this.value" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-100 focus:border-teal-500 focus:outline-none">
						<option value="">All Deals</option>
						for _, deal := range deals {
							<option value={ deal.ID } selected?={ deal.ID == selectedDealID }>{ deal.Name }</option>
						}
					</select>
				</div>
			</div>

			<div class="grid grid-cols-4 gap-4">
				<div class="bg-gray-900 rounded-lg border border-gray-800 p-6">
					<div class="text-xs text-gray-500 uppercase tracking-wider mb-2">Active Deals</div>
					<div class="text-3xl font-bold text-teal-400">{ fmt.Sprintf("%d", stats.DealCount) }</div>
				</div>
				<div class="bg-gray-900 rounded-lg border border-gray-800 p-6">
					<div class="text-xs text-gray-500 uppercase tracking-wider mb-2">Total Documents</div>
					<div class="text-3xl font-bold text-blue-400">{ fmt.Sprintf("%d", stats.FileCount) }</div>
				</div>
				<div class="bg-gray-900 rounded-lg border border-gray-800 p-6">
					<div class="text-xs text-gray-500 uppercase tracking-wider mb-2">Diligence Requests</div>
					<div class="text-3xl font-bold text-amber-400">{ fmt.Sprintf("%d", stats.RequestCount) }</div>
				</div>
				<div class="bg-gray-900 rounded-lg border border-gray-800 p-6">
					<div class="text-xs text-gray-500 uppercase tracking-wider mb-2">Request Completion</div>
					<div class="text-3xl font-bold text-green-400">{ fmt.Sprintf("%d%%", stats.CompletionPct) }</div>
					<div class="mt-3 w-full bg-gray-800 rounded-full h-2">
						<div class="bg-green-500 h-2 rounded-full" { completionWidth(stats.CompletionPct)... }> </div>
					</div>
				</div>
			</div>

			<!-- Buyer Activity -->
			if selectedDealID != "" {
				<div class="bg-gray-900 rounded-lg border border-gray-800 p-6">
					<h2 class="text-sm font-semibold mb-4">Buyer Activity</h2>
					<div hx-get={ fmt.Sprintf("/analytics/buyers?deal_id=%s", selectedDealID) } hx-trigger="load" hx-swap="innerHTML">
						<p class="text-sm text-gray-500">Loading buyer activity...</p>
					</div>
				</div>
			}

			<!-- Completion by Status -->
			<div class="bg-gray-900 rounded-lg border border-gray-800 p-6">
				<h2 class="text-sm font-semibold mb-4">Request Status Breakdown</h2>
				<div class="grid grid-cols-4 gap-4">
					<div class="text-center">
						<div class="text-2xl mb-1">✅</div>
						<div class="text-sm font-medium text-green-400">Fulfilled</div>
						<div class="text-xs text-gray-500 mt-1">Items fully addressed</div>
					</div>
					<div class="text-center">
						<div class="text-2xl mb-1">⚠️</div>
						<div class="text-sm font-medium text-amber-400">Partial</div>
						<div class="text-xs text-gray-500 mt-1">Partially completed</div>
					</div>
					<div class="text-center">
						<div class="text-2xl mb-1">🔴</div>
						<div class="text-sm font-medium text-red-400">Missing</div>
						<div class="text-xs text-gray-500 mt-1">Not yet provided</div>
					</div>
					<div class="text-center">
						<div class="text-2xl mb-1">➖</div>
						<div class="text-sm font-medium text-gray-400">N/A</div>
						<div class="text-xs text-gray-500 mt-1">Not applicable</div>
					</div>
				</div>
			</div>
		</div>
	}
}