package templates

import "portfolio-tracker/internal/web/templates/components"
import "portfolio-tracker/internal/model"

templ PortfolioContent(username string) {
	<div class="container-fluid mt-4">
		<div class="page-header">
			<div class="row g-2 align-items-center">
				<div class="col">
					<h2 class="page-title">Portfolio</h2>
					<div class="page-subtitle">Verwalten Sie Ihre Investitionen</div>
				</div>
				<div class="col-auto ms-auto d-print-none">
					<div class="btn-list">
						<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTransactionModal">
							<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
								<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
								<path d="M12 5l0 14" />
								<path d="M5 12l14 0" />
							</svg>
							Transaktion hinzufügen
						</button>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<!-- Portfolio Overview -->
			<div class="col-md-8">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">Portfolio-Übersicht</h3>
					</div>
					<div class="card-body">
						<div class="table-responsive">
							<table class="table table-vcenter">
								<thead>
									<tr>
										<th>Wertpapier</th>
										<th>Anzahl</th>
										<th>Kurs</th>
										<th>Wert</th>
										<th>+/-</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td colspan="6" class="text-center text-muted">
											Keine Positionen vorhanden. Fügen Sie Ihre erste Transaktion hinzu.
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

			<!-- Portfolio Summary -->
			<div class="col-md-4">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">Zusammenfassung</h3>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-12">
								<div class="mb-3">
									<div class="text-muted">Gesamtwert</div>
									<div class="h2 mb-0">€0,00</div>
								</div>
								<div class="mb-3">
									<div class="text-muted">Gewinn/Verlust</div>
									<div class="h3 mb-0 text-success">€0,00</div>
								</div>
								<div class="mb-3">
									<div class="text-muted">Rendite</div>
									<div class="h3 mb-0 text-success">0,00%</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="card mt-3">
					<div class="card-header">
						<h3 class="card-title">Letzte Transaktionen</h3>
					</div>
					<div class="card-body">
						<div class="text-center text-muted py-3">
							Keine Transaktionen vorhanden
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Add Transaction Modal -->
	<div class="modal modal-blur fade" id="addTransactionModal" tabindex="-1" aria-labelledby="addTransactionModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="addTransactionModalLabel">Transaktion hinzufügen</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
				</div>
				<form method="post" action="/portfolio/transaction">
					<div class="modal-body">
						<div class="mb-3">
							<label for="transaction-type" class="form-label">Typ</label>
							<select class="form-select" id="transaction-type" name="type" required>
								<option value="">Wählen Sie einen Typ</option>
								<option value="BUY">Kauf</option>
								<option value="SELL">Verkauf</option>
								<option value="DIVIDEND">Dividende</option>
							</select>
						</div>
						<div class="mb-3">
							<label for="transaction-stock" class="form-label">Wertpapier</label>
							<input type="text" class="form-control" id="transaction-stock" name="stock" placeholder="z.B. AAPL" required>
						</div>
						<div class="mb-3">
							<label for="transaction-amount" class="form-label">Anzahl</label>
							<input type="number" class="form-control" id="transaction-amount" name="amount" step="0.01" min="0" required>
						</div>
						<div class="mb-3">
							<label for="transaction-price" class="form-label">Preis</label>
							<input type="number" class="form-control" id="transaction-price" name="price" step="0.01" min="0" required>
						</div>
						<div class="mb-3">
							<label for="transaction-date" class="form-label">Datum</label>
							<input type="date" class="form-control" id="transaction-date" name="date" required>
						</div>
						<div class="mb-3">
							<label for="transaction-note" class="form-label">Notiz (optional)</label>
							<textarea class="form-control" id="transaction-note" name="note" rows="2"></textarea>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
						<button type="submit" class="btn btn-primary">Speichern</button>
					</div>
				</form>
			</div>
		</div>
	</div>
}

templ Portfolio(authenticated bool, username string, portfolios []model.Portfolio) {
	@components.PageLayout(authenticated, username, "Portfolio", PortfolioContent(username), portfolios)
}