package views

import (
	"whereismymoney/internal/models"
	"fmt"
)

templ Accounts(userName string, bankAccounts []models.BankAccount, depots []models.Depot) {
	@Layout("Konten & Depots - WhereIsMyMoney") {
		@Navigation(userName)
		
		<!-- Main Content -->
		<div class="min-h-screen bg-gray-50">
			<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
				<div class="px-4 py-6 sm:px-0">
					<!-- Page Header -->
					<div class="mb-8">
						<h1 class="text-3xl font-bold text-gray-900">Konten & Depots</h1>
						<p class="mt-2 text-gray-600">Verwalte deine Bankkonten und Wertpapierdepots</p>
					</div>

					<!-- Action Buttons -->
					<div class="mb-6 flex flex-wrap gap-4">
						<button 
							onclick="showModal('bankAccountModal')" 
							class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2">
							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
							</svg>
							Bankkonto hinzufügen
						</button>
						<button 
							onclick="showModal('depotModal')" 
							class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2">
							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
							</svg>
							Depot hinzufügen
						</button>
					</div>

					<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
						<!-- Bankkonten Section -->
						<div>
							<h2 class="text-xl font-semibold text-gray-900 mb-4">Bankkonten</h2>
							if len(bankAccounts) == 0 {
								<div class="bg-white rounded-lg shadow p-6 text-center">
									<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
									</svg>
									<h3 class="mt-4 text-lg font-medium text-gray-900">Keine Bankkonten</h3>
									<p class="mt-2 text-gray-500">Füge dein erstes Bankkonto hinzu, um zu beginnen.</p>
								</div>
							} else {
								<div class="space-y-4">
									for _, account := range bankAccounts {
										<div class="bg-white rounded-lg shadow p-6">
											<div class="flex justify-between items-start">
												<div>
													<h3 class="text-lg font-medium text-gray-900">{ account.Name }</h3>
													<p class="text-sm text-gray-500">{ account.Bank }</p>
													<p class="text-sm text-gray-500 capitalize">{ account.AccountType }</p>
													if account.IBAN != "" {
														<p class="text-sm text-gray-400 mt-1">{ account.IBAN }</p>
													}
												</div>
												<div class="text-right">
													<p class="text-2xl font-bold text-gray-900">
														{ fmt.Sprintf("%.2f", account.Balance) } €
													</p>
													<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
														Aktiv
													</span>
												</div>
											</div>
											<div class="mt-4 flex justify-end space-x-2">
												<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
													Bearbeiten
												</button>
												<button class="text-red-600 hover:text-red-800 text-sm font-medium">
													Löschen
												</button>
											</div>
										</div>
									}
								</div>
							}
						</div>

						<!-- Depots Section -->
						<div>
							<h2 class="text-xl font-semibold text-gray-900 mb-4">Depots</h2>
							if len(depots) == 0 {
								<div class="bg-white rounded-lg shadow p-6 text-center">
									<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
									</svg>
									<h3 class="mt-4 text-lg font-medium text-gray-900">Keine Depots</h3>
									<p class="mt-2 text-gray-500">Füge dein erstes Depot hinzu, um zu beginnen.</p>
								</div>
							} else {
								<div class="space-y-4">
									for _, depot := range depots {
										<div class="bg-white rounded-lg shadow p-6">
											<div class="flex justify-between items-start">
												<div>
													<h3 class="text-lg font-medium text-gray-900">{ depot.Name }</h3>
													<p class="text-sm text-gray-500">{ depot.Broker }</p>
													if depot.DepotNumber != "" {
														<p class="text-sm text-gray-400 mt-1">Depot: { depot.DepotNumber }</p>
													}
												</div>
												<div class="text-right">
													<p class="text-2xl font-bold text-gray-900">
														{ fmt.Sprintf("%.2f", depot.TotalValue) } €
													</p>
													<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
														Aktiv
													</span>
												</div>
											</div>
											<div class="mt-4 flex justify-end space-x-2">
												<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
													Bearbeiten
												</button>
												<button class="text-red-600 hover:text-red-800 text-sm font-medium">
													Löschen
												</button>
											</div>
										</div>
									}
								</div>
							}
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Bank Account Modal -->
		<div id="bankAccountModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
			<div class="flex items-center justify-center min-h-screen px-4">
				<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
					<div class="px-6 py-4 border-b border-gray-200">
						<h3 class="text-lg font-medium text-gray-900">Bankkonto hinzufügen</h3>
					</div>
					<form action="/accounts/bank" method="POST" class="px-6 py-4">
						<div class="space-y-4">
							<div>
								<label for="bank-name" class="block text-sm font-medium text-gray-700">Kontoname</label>
								<input type="text" id="bank-name" name="name" required 
									   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
									   placeholder="z.B. Hauptkonto">
							</div>
							<div>
								<label for="bank-bank-name" class="block text-sm font-medium text-gray-700">Bankname</label>
								<input type="text" id="bank-bank-name" name="bank_name" required 
									   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
									   placeholder="z.B. Sparkasse">
							</div>
							<div>
								<label for="bank-account-type" class="block text-sm font-medium text-gray-700">Kontotyp</label>
								<select id="bank-account-type" name="account_type" required 
										class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
									<option value="">Wähle einen Typ</option>
									<option value="checking">Girokonto</option>
									<option value="savings">Sparkonto</option>
									<option value="credit">Kreditkonto</option>
								</select>
							</div>
							<div>
								<label for="bank-iban" class="block text-sm font-medium text-gray-700">IBAN (optional)</label>
								<input type="text" id="bank-iban" name="iban" 
									   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
									   placeholder="DE89 3704 0044 0532 0130 00">
							</div>
							<div>
								<label for="bank-balance" class="block text-sm font-medium text-gray-700">Aktueller Kontostand</label>
								<input type="number" id="bank-balance" name="balance" step="0.01" 
									   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
									   placeholder="0.00">
							</div>
						</div>
						<div class="mt-6 flex justify-end space-x-3">
							<button type="button" onclick="hideModal('bankAccountModal')" 
									class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-md">
								Abbrechen
							</button>
							<button type="submit" 
									class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
								Hinzufügen
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- Depot Modal -->
		<div id="depotModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
			<div class="flex items-center justify-center min-h-screen px-4">
				<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
					<div class="px-6 py-4 border-b border-gray-200">
						<h3 class="text-lg font-medium text-gray-900">Depot hinzufügen</h3>
					</div>
					<form action="/accounts/depot" method="POST" class="px-6 py-4">
						<div class="space-y-4">
							<div>
								<label for="depot-name" class="block text-sm font-medium text-gray-700">Depotname</label>
								<input type="text" id="depot-name" name="name" required 
									   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
									   placeholder="z.B. Hauptdepot">
							</div>
							<div>
								<label for="depot-broker-name" class="block text-sm font-medium text-gray-700">Broker</label>
								<input type="text" id="depot-broker-name" name="broker_name" required 
									   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
									   placeholder="z.B. Trade Republic">
							</div>
							<div>
								<label for="depot-number" class="block text-sm font-medium text-gray-700">Depotnummer (optional)</label>
								<input type="text" id="depot-number" name="depot_number" 
									   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
									   placeholder="123456789">
							</div>
							<div>
								<label for="depot-value" class="block text-sm font-medium text-gray-700">Aktueller Gesamtwert</label>
								<input type="number" id="depot-value" name="total_value" step="0.01" 
									   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
									   placeholder="0.00">
							</div>
						</div>
						<div class="mt-6 flex justify-end space-x-3">
							<button type="button" onclick="hideModal('depotModal')" 
									class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-md">
								Abbrechen
							</button>
							<button type="submit" 
									class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md">
								Hinzufügen
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<script>
			function showModal(modalId) {
				document.getElementById(modalId).classList.remove('hidden');
			}

			function hideModal(modalId) {
				document.getElementById(modalId).classList.add('hidden');
			}

			// Close modal when clicking outside
			document.addEventListener('click', function(event) {
				if (event.target.classList.contains('bg-opacity-50')) {
					event.target.classList.add('hidden');
				}
			});
		</script>
	}
}
