<template>
	<private-view title="Acquisition Manager">
		<template #navigation>
			<v-list nav>
				<v-list-item @click="showAddLead = true" clickable>
					<v-list-item-icon><v-icon name="add" color="var(--theme--primary)" /></v-list-item-icon>
					<v-list-item-content>
						<v-text-overflow text="Neuen Lead anlegen" />
					</v-list-item-content>
				</v-list-item>

				<v-divider />

				<v-list-item
					v-for="lead in leads"
					:key="lead.id"
					:active="selectedLeadId === lead.id"
					class="lead-item"
					clickable
					@click="selectLead(lead.id)"
				>
					<v-list-item-icon>
						<v-icon :name="getStatusIcon(lead.status)" :color="getStatusColor(lead.status)" />
					</v-list-item-icon>
					<v-list-item-content>
						<v-text-overflow :text="getCompanyName(lead)" />
					</v-list-item-content>
				</v-list-item>
			</v-list>
		</template>

		<template #title-outer:after>
			<v-notice v-if="notice" :type="notice.type" @close="notice = null" dismissible>
				{{ notice.message }}
			</v-notice>
		</template>

		<div class="content-wrapper">
			<v-notice type="success" style="margin-bottom: 16px;">
				DEBUG: Module Version 1.1.0 - Native Build - {{ new Date().toISOString() }}
			</v-notice>

			<div v-if="!selectedLead" class="empty-state">
				<v-info title="Lead auswählen" icon="auto_awesome" center>
					Wähle einen Lead in der Navigation aus oder
					<v-button x-small @click="showAddLead = true">registriere einen neuen Lead</v-button>.
				</v-info>
			</div>

			<template v-else>
				<header class="header">
					<div class="header-left">
						<h1 class="title">{{ getCompanyName(selectedLead) }}</h1>
						<p class="subtitle">
							<v-icon name="language" x-small />
							<a :href="selectedLead.website_url" target="_blank" class="url-link">
								{{ selectedLead.website_url.replace(/^https?:\/\//, '') }}
							</a>
							&middot; Status: {{ selectedLead.status.toUpperCase() }}
						</p>
					</div>
					<div class="header-right">
						<v-button 
							v-if="selectedLead.status === 'new'" 
							secondary 
							:loading="loadingAudit" 
							@click="runAudit"
						>
							<v-icon name="settings_suggest" left />
							Audit starten
						</v-button>

						<template v-if="selectedLead.status === 'audit_ready'">
							<v-button secondary :loading="loadingEmail" @click="sendAuditEmail">
								<v-icon name="mail" left />
								Audit E-Mail
							</v-button>
							<v-button :loading="loadingPdf" @click="generatePdf">
								<v-icon name="picture_as_pdf" left />
								PDF Erstellen
							</v-button>
						</template>

						<v-button v-if="selectedLead.audit_pdf_path" secondary icon v-tooltip.bottom="'PDF öffnen'" @click="openPdf">
							<v-icon name="open_in_new" />
						</v-button>
						
						<v-button 
							v-if="selectedLead.audit_pdf_path" 
							primary
							:loading="loadingEmail"
							@click="sendEstimateEmail"
						>
							<v-icon name="send" left />
							Angebot senden
						</v-button>
					</div>
				</header>

				<div class="sections">
					<div class="main-info">
						<div class="form-grid">
							<div class="field">
								<span class="label">Kontaktperson</span>
								<div v-if="selectedLead.contact_person" class="value person-link" @click="goToPerson(selectedLead.contact_person)">
									{{ getPersonName(selectedLead.contact_person) }}
								</div>
								<div v-else class="value text-subdued">Keine Person verknüpft</div>
							</div>
							<div class="field">
								<span class="label">E-Mail (Legacy)</span>
								<div class="value">{{ selectedLead.contact_email || '—' }}</div>
							</div>
							<div class="field full">
								<span class="label">Briefing / Fokus</span>
								<div class="value text-block">{{ selectedLead.briefing || 'Kein Briefing hinterlegt.' }}</div>
							</div>
						</div>
					</div>

					<v-divider />

					<div v-if="selectedLead.ai_state" class="ai-observations">
						<h3 class="section-title">AI Observations & Estimation</h3>
						
						<div class="metrics">
							<v-info label="Projekt-Modus" :value="selectedLead.ai_state.projectType || 'Unbekannt'" />
							<v-info label="Seitenanzahl" :value="selectedLead.ai_state.sitemap?.length || '0'" />
						</div>

						<v-table
							v-if="selectedLead.ai_state.sitemap"
							:headers="[ { text: 'Seite', value: 'title' }, { text: 'URL', value: 'url' } ]"
							:items="selectedLead.ai_state.sitemap"
							class="observation-table"
						>
							<template #[`item.title`]="{ item }">
								<span class="page-title">{{ item.title }}</span>
							</template>
							<template #[`item.url`]="{ item }">
								<span class="page-url">{{ item.url }}</span>
							</template>
						</v-table>
					</div>
				</div>
			</template>
		</div>

		<!-- Drawer: New Lead -->
		<v-drawer
			v-model="showAddLead"
			title="Neuen Lead registrieren"
			icon="person_add"
			@cancel="showAddLead = false"
		>
			<div class="drawer-content">
				<div class="form-section">
					<div class="field">
						<span class="label">Organisation / Firma (Zentral)</span>
						<v-select
							v-model="newLead.company"
							:items="companyOptions"
							placeholder="Bestehende Firma auswählen..."
						/>
					</div>
					<div class="field">
						<span class="label">Organisation / Firma (Legacy / Neu)</span>
						<v-input v-model="newLead.company_name" placeholder="z.B. Schmidt GmbH" autofocus />
					</div>
					<div class="field">
						<span class="label">Website URL</span>
						<v-input v-model="newLead.website_url" placeholder="https://..." />
					</div>
					<div class="field">
						<span class="label">Ansprechpartner</span>
						<v-input v-model="newLead.contact_name" placeholder="Vorname Nachname" />
					</div>
					<div class="field">
						<span class="label">E-Mail Adresse</span>
						<v-input v-model="newLead.contact_email" placeholder="email@beispiel.de" type="email" />
					</div>
					<div class="field">
						<span class="label">Briefing / Fokus</span>
						<v-textarea v-model="newLead.briefing" placeholder="Besonderheiten für das Audit..." />
					</div>
					<div class="field">
						<span class="label">Kontaktperson (Optional)</span>
						<v-select
							v-model="newLead.contact_person"
							:items="peopleOptions"
							placeholder="Person auswählen..."
						/>
					</div>
				</div>

				<div class="drawer-actions">
					<v-button primary block :loading="savingLead" @click="saveLead">Lead speichern</v-button>
				</div>
			</div>
		</v-drawer>
	</private-view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useApi } from '@directus/extensions-sdk';

const api = useApi();
const leads = ref<any[]>([]);
const selectedLeadId = ref<string | null>(null);
const loadingAudit = ref(false);
const loadingPdf = ref(false);
const loadingEmail = ref(false);
const showAddLead = ref(false);
const savingLead = ref(false);
const notice = ref<{ type: string; message: string } | null>(null);

const newLead = ref({
	company_name: '', // Legacy
	company: null,
	website_url: '',
	contact_name: '', // Legacy
	contact_email: '', // Legacy
	contact_person: null,
	briefing: '',
	status: 'new'
});

const companies = ref<any[]>([]);
const people = ref<any[]>([]);

const companyOptions = computed(() => 
	companies.value.map(c => ({
		text: c.name,
		value: c.id
	}))
);

const peopleOptions = computed(() => 
	people.value.map(p => ({
		text: `${p.first_name} ${p.last_name}`,
		value: p.id
	}))
);

function getCompanyName(lead: any) {
	if (lead.company) {
		return typeof lead.company === 'object' ? lead.company.name : (companies.value.find(c => c.id === lead.company)?.name || lead.company_name);
	}
	return lead.company_name;
}

function getPersonName(id: string | any) {
	if (!id) return '';
	if (typeof id === 'object') return `${id.first_name} ${id.last_name}`;
	const person = people.value.find(p => p.id === id);
	return person ? `${person.first_name} ${person.last_name}` : id;
}

function goToPerson(id: string) {
	// Logic to navigate to people manager or open details
	notice.value = { type: 'info', message: `Navigiere zu Person: ${id}` };
}

const selectedLead = computed(() => leads.value.find(l => l.id === selectedLeadId.value));

onMounted(fetchData);

async function fetchData() {
	const [leadsResp, peopleResp, companiesResp] = await Promise.all([
		api.get('/items/leads', { 
			params: { 
				sort: '-date_created',
				fields: '*.*'
			} 
		}),
		api.get('/items/people', { params: { sort: 'last_name' } }),
		api.get('/items/companies', { params: { sort: 'name' } })
	]);
	leads.value = leadsResp.data.data;
	people.value = peopleResp.data.data;
	companies.value = companiesResp.data.data;
	
	if (!selectedLeadId.value && leads.value.length > 0) {
		selectedLeadId.value = leads.value[0].id;
	}
}

async function fetchLeads() {
	await fetchData();
}

function selectLead(id: string) {
	selectedLeadId.value = id;
}

async function runAudit() {
	if (!selectedLeadId.value) return;
	loadingAudit.value = true;
	try {
		await api.post(`/acquisition/audit/${selectedLeadId.value}`);
		notice.value = { type: 'success', message: 'Audit erfolgreich gestartet!' };
		await fetchLeads();
	} catch (e: any) {
		notice.value = { type: 'danger', message: `Fehler beim Audit: ${e.message}` };
	} finally {
		loadingAudit.value = false;
	}
}

async function sendAuditEmail() {
	if (!selectedLeadId.value) return;
	loadingEmail.value = true;
	try {
		await api.post(`/acquisition/audit-email/${selectedLeadId.value}`);
		notice.value = { type: 'success', message: 'Audit E-Mail versendet!' };
		await fetchLeads();
	} catch (e: any) {
		notice.value = { type: 'danger', message: `Fehler beim Versenden: ${e.message}` };
	} finally {
		loadingEmail.value = false;
	}
}

async function generatePdf() {
	if (!selectedLeadId.value) return;
	loadingPdf.value = true;
	try {
		await api.post(`/acquisition/estimate/${selectedLeadId.value}`);
		notice.value = { type: 'success', message: 'Angebot (PDF) wurde generiert!' };
		await fetchLeads();
	} catch (e: any) {
		notice.value = { type: 'danger', message: `Fehler bei PDF Generierung: ${e.message}` };
	} finally {
		loadingPdf.value = false;
	}
}

async function sendEstimateEmail() {
	if (!selectedLeadId.value) return;
	loadingEmail.value = true;
	try {
		await api.post(`/acquisition/estimate-email/${selectedLeadId.value}`);
		notice.value = { type: 'success', message: 'Angebot erfolgreich versendet!' };
		await fetchLeads();
	} catch (e: any) {
		notice.value = { type: 'danger', message: `Fehler beim Versenden: ${e.message}` };
	} finally {
		loadingEmail.value = false;
	}
}

function openPdf() {
	if (!selectedLead.value?.audit_pdf_path) return;
	window.open(`${window.location.origin}/assets/${selectedLead.value.audit_pdf_path}`, '_blank');
}

async function saveLead() {
	if (!newLead.value.company_name && !newLead.value.company) {
		notice.value = { type: 'danger', message: 'Firma oder Firmenname erforderlich.' };
		return;
	}
	savingLead.value = true;
	try {
		const payload = {
			id: crypto.randomUUID(),
			...newLead.value
		};
		await api.post('/items/leads', payload);
		notice.value = { type: 'success', message: 'Lead erfolgreich registriert!' };
		showAddLead.value = false;
		await fetchLeads();
		selectedLeadId.value = payload.id;
		newLead.value = { 
			company_name: '', 
			company: null,
			website_url: '', 
			contact_name: '', 
			contact_email: '', 
			contact_person: null,
			briefing: '', 
			status: 'new' 
		};
	} catch (e: any) {
		notice.value = { type: 'danger', message: `Fehler beim Speichern: ${e.message}` };
	} finally {
		savingLead.value = false;
	}
}

function getStatusIcon(status: string) {
	switch(status) {
		case 'new': return 'fiber_new';
		case 'auditing': return 'hourglass_empty';
		case 'audit_ready': return 'check_circle';
		case 'contacted': return 'mail_outline';
		default: return 'help_outline';
	}
}

function getStatusColor(status: string) {
	switch(status) {
		case 'new': return 'var(--theme--primary)';
		case 'auditing': return 'var(--theme--warning)';
		case 'audit_ready': return 'var(--theme--success)';
		case 'contacted': return 'var(--theme--secondary)';
		default: return 'var(--theme--foreground-subdued)';
	}
}
</script>

<style scoped>
.content-wrapper { padding: 32px; height: 100%; display: flex; flex-direction: column; overflow-y: auto; }
.lead-item { cursor: pointer; }
.header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; }
.header-right { display: flex; gap: 12px; }
.title { font-size: 24px; font-weight: 800; margin-bottom: 4px; color: var(--theme--foreground); }
.subtitle { color: var(--theme--foreground-subdued); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.url-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.url-link:hover { border-bottom-color: currentColor; }
.empty-state { height: 100%; display: flex; align-items: center; justify-content: center; }

.sections { display: flex; flex-direction: column; gap: 32px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: span 2; }
.label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--theme--foreground-subdued); letter-spacing: 0.5px; }
.value { font-size: 15px; color: var(--theme--foreground); }
.text-block { line-height: 1.6; white-space: pre-wrap; background: var(--theme--background-subdued); padding: 16px; border-radius: 8px; }

.ai-observations { display: flex; flex-direction: column; gap: 16px; }
.section-title { font-size: 16px; font-weight: 700; color: var(--theme--foreground); margin-bottom: 8px; }
.metrics { display: flex; gap: 32px; margin-bottom: 16px; }

.observation-table { border: 1px solid var(--theme--border); border-radius: 8px; overflow: hidden; }
.page-title { font-weight: 600; }
.page-url { font-family: var(--family-monospace); font-size: 12px; color: var(--theme--foreground-subdued); }

.drawer-content { padding: 24px; display: flex; flex-direction: column; gap: 32px; }
.form-section { display: flex; flex-direction: column; gap: 20px; }
.drawer-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }

:deep(.v-list-item) { cursor: pointer !important; }
</style>
