package components

import (
	"fmt"
	"portfolio-tracker/internal/model"
)

templ Navigation(authenticated bool, portfolios []model.Portfolio) {
	<aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
		<div class="container-fluid">
			<a class="navbar-brand" href="#">
				<span class="navbar-brand-text">Portfolio Tracker</span>
			</a>
			<div class="collapse navbar-collapse show">
				<ul class="navbar-nav pt-lg-3">
					<li class="nav-item">
						<a class="nav-link active" href="/">
							<span class="nav-link-icon">
								<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>
									<rect x="3" y="12" width="6" height="8" rx="1"></rect>
									<rect x="9" y="8" width="6" height="12" rx="1"></rect>
									<rect x="15" y="4" width="6" height="16" rx="1"></rect>
								</svg>
							</span>
							<span class="nav-link-title">Dashboard</span>
						</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="portfolioDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
							<span class="nav-link-icon">
								<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>
									<path d="M9 5H7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V7a2 2 0 0 0 -2 -2h-2"></path>
									<path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
									<path d="M9 12l2 2l4 -4"></path>
								</svg>
							</span>
							<span class="nav-link-title">Portfolio</span>
						</a>
						<ul class="dropdown-menu" aria-labelledby="portfolioDropdown">
							if len(portfolios) > 0 {
								for _, portfolio := range portfolios {
									<li><a class="dropdown-item" href={ templ.URL("/portfolio/" + templ.EscapeString(fmt.Sprintf("%d", portfolio.ID))) }>{ portfolio.Name }</a></li>
								}
								<li><hr class="dropdown-divider"/></li>
							} else {
								<li><span class="dropdown-item-text text-muted">Keine Portfolios vorhanden</span></li>
								<li><hr class="dropdown-divider"/></li>
							}
							<li>
								<a class="dropdown-item" href="/portfolio/new" data-bs-toggle="modal" data-bs-target="#createPortfolioModal">
									<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm me-2" 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>
										<path d="M12 5l0 14"></path>
										<path d="M5 12l14 0"></path>
									</svg>
									Neues Portfolio erstellen
								</a>
							</li>
						</ul>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">
							<span class="nav-link-icon">
								<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>
									<path d="M3 21l18 0"></path>
									<path d="M3 10l18 0"></path>
									<path d="M5 6l7 -3l7 3"></path>
									<path d="M4 10l0 11"></path>
									<path d="M20 10l0 11"></path>
									<path d="M8 14l0 3"></path>
									<path d="M12 14l0 3"></path>
									<path d="M16 14l0 3"></path>
								</svg>
							</span>
							<span class="nav-link-title">Wertpapiere</span>
						</a>
					</li>
					<!-- Weitere Menüpunkte hier -->
				</ul>
				<div id="login_buttons" class="mt-4" style="padding-left:10px; padding-bottom:10px;">
					if authenticated == true {
						<form method="post" action="/user/logout">
							<button type="submit" class="btn btn-danger w-100">Logout</button>
						</form>
					} else {
						<button type="button" class="btn btn-outline-primary w-100 mb-2" data-bs-toggle="modal" data-bs-target="#loginModal">Login</button>
						<button type="button" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#registerModal">Registrieren</button>
					}
				</div>
			</div>
		</div>
	</aside>
	<!-- Create Portfolio Modal -->
	<div class="modal modal-blur fade" id="createPortfolioModal" tabindex="-1" aria-labelledby="createPortfolioModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="createPortfolioModalLabel">Neues Portfolio erstellen</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
				</div>
				<form method="post" action="/portfolio/create">
					<div class="modal-body">
						<div class="mb-3">
							<label for="portfolio-name" class="form-label">Portfolio Name</label>
							<input type="text" class="form-control" id="portfolio-name" name="name" placeholder="z.B. Mein Hauptportfolio" required/>
						</div>
						<div class="mb-3">
							<label for="portfolio-currency" class="form-label">Basiswährung</label>
							<select class="form-select" id="portfolio-currency" name="base_currency" required>
								<option value="">Wählen Sie eine Währung</option>
								<option value="EUR">EUR - Euro</option>
								<option value="USD">USD - US Dollar</option>
								<option value="GBP">GBP - Britisches Pfund</option>
								<option value="CHF">CHF - Schweizer Franken</option>
								<option value="JPY">JPY - Japanischer Yen</option>
							</select>
						</div>
						<div class="mb-3">
							<label for="portfolio-description" class="form-label">Beschreibung (optional)</label>
							<textarea class="form-control" id="portfolio-description" name="description" rows="3" placeholder="Beschreibung des Portfolios..."></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">Portfolio erstellen</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- Login Modal -->
	<div class="modal modal-blur fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="loginModalLabel">Anmelden</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
				</div>
				<form method="post" action="/user/login">
					<div class="modal-body">
						<div class="mb-3">
							<label for="login-username" class="form-label">Benutzername</label>
							<input type="text" class="form-control" id="login-username" name="username" required/>
						</div>
						<div class="mb-3">
							<label for="login-password" class="form-label">Passwort</label>
							<input type="password" class="form-control" id="login-password" name="password" required/>
						</div>
					</div>
					<div class="modal-footer d-flex justify-content-between align-items-center">
						<a href="#" class="text-secondary small" data-bs-dismiss="modal" style="text-decoration:none;">Abbrechen</a>
						<button type="submit" class="btn btn-primary">Anmelden</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- Register Modal -->
	<div class="modal modal-blur fade" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="registerModalLabel">Registrieren</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
				</div>
				<form method="post" action="/user/register">
					<div class="modal-body">
						<div class="mb-3">
							<label for="register-username" class="form-label">Benutzername</label>
							<input type="text" class="form-control" id="register-username" name="username" required/>
						</div>
						<div class="mb-3">
							<label for="register-email" class="form-label">E-Mail</label>
							<input type="email" class="form-control" id="register-email" name="email" required/>
						</div>
						<div class="mb-3">
							<label for="register-password" class="form-label">Passwort</label>
							<input type="password" class="form-control" id="register-password" name="password" required/>
						</div>
					</div>
					<div class="modal-footer d-flex justify-content-between align-items-center">
						<a href="#" class="text-secondary small" data-bs-dismiss="modal" style="text-decoration:none;">Abbrechen</a>
						<button type="submit" class="btn btn-primary">Registrieren</button>
					</div>
				</form>
			</div>
		</div>
	</div>
}