package templates

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

templ ContactsPage(profile *model.Profile, contacts []*model.Contact, deals []*model.Deal, selectedDealID string) {
	@Layout(profile, "contacts") {
		<div class="space-y-5">
			<div class="flex items-center justify-between">
				<div>
					<h1 class="text-2xl font-bold">Contacts</h1>
					<p class="text-sm text-gray-500 mt-1">{ fmt.Sprintf("%d contacts", len(contacts)) } across all deal rooms.</p>
				</div>
				<div class="flex items-center gap-3">
					<select onchange="window.location.href='/contacts?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>
					<button class="h-9 px-4 rounded-lg bg-teal-500 text-white text-sm font-medium flex items-center gap-1.5 hover:bg-teal-600 transition">
						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
						Add Contact
					</button>
				</div>
			</div>

			<div class="bg-gray-900 rounded-lg border border-gray-800">
				<table class="w-full">
					<thead>
						<tr class="border-b border-gray-800">
							<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
							<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
							<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
							<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider w-20">Type</th>
							<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Deals</th>
							<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Tags</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-gray-800/50">
						for _, contact := range contacts {
							<tr class="hover:bg-gray-800/30 transition group">
								<td class="px-4 py-3">
									<div class="flex items-center gap-2.5">
										<div class="w-8 h-8 rounded-full bg-teal-500/10 flex items-center justify-center text-xs font-bold text-teal-400">
											{ contactInitials(contact.FullName) }
										</div>
										<div>
											<span class="text-sm font-medium group-hover:text-teal-400 transition">{ contact.FullName }</span>
											<p class="text-xs text-gray-500">{ contact.Title }</p>
										</div>
									</div>
								</td>
								<td class="px-4 py-3 text-sm text-gray-400">{ contact.Company }</td>
								<td class="px-4 py-3 text-xs text-gray-500 font-mono">{ contact.Email }</td>
								<td class="px-4 py-3">@ContactTypeBadge(contact.ContactType)</td>
								<td class="px-4 py-3">
									<div class="flex gap-1 flex-wrap">
										for _, dn := range contact.DealNames {
											<span class="text-xs px-1.5 py-0.5 rounded bg-teal-500/10 text-teal-400">{ dn }</span>
										}
									</div>
								</td>
								<td class="px-4 py-3">
									<div class="flex gap-1">
										for _, tag := range splitTags(contact.Tags) {
											if tag != "" {
												<span class="text-xs px-1.5 py-0.5 rounded bg-gray-800 text-gray-400">{ tag }</span>
											}
										}
									</div>
								</td>
							</tr>
						}
					</tbody>
				</table>
			</div>
		</div>
	}
}

func contactInitials(name string) string {
	parts := strings.Fields(name)
	if len(parts) >= 2 {
		return string(parts[0][0]) + string(parts[len(parts)-1][0])
	}
	if len(name) > 0 {
		return string(name[0])
	}
	return "?"
}

func splitTags(tags string) []string {
	return strings.Split(tags, ",")
}