<template>
	<MintelManagerLayout
		title="Acquisition Manager"
		:item-title="getCompanyName(selectedLead) || 'Lead wählen'"
		:is-empty="!selectedLead"
		empty-title="Lead auswählen"
		empty-icon="auto_awesome"
		:notice="notice"
		@close-notice="notice = null"
	>
		<template #navigation>
			<v-list nav>
				<v-list-item @click="openCreateDrawer" 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="nav-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 #subtitle>
			<template v-if="selectedLead">
				<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() }}
			</template>
		</template>

		<template #actions>
			<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>
		</template>

		<template #empty-state>
			Wähle einen Lead in der Navigation aus oder
			<v-button x-small @click="openCreateDrawer">registriere einen neuen Lead</v-button>.
		</template>

		<div v-if="selectedLead" 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 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">
					<MintelStatCard label="Projekt-Modus" :value="selectedLead.ai_state.projectType || 'Unbekannt'" icon="category" />
					<MintelStatCard label="Seitenanzahl" :value="selectedLead.ai_state.sitemap?.length || '0'" icon="description" />
				</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>

		<!-- Drawer: New Lead -->
		<v-drawer
			v-model="drawerActive"
			title="Neuen Lead registrieren"
			icon="person_add"
			@cancel="drawerActive = false"
		>
			<div class="drawer-content">
				<div class="form-section">
					<div class="field">
						<span class="label">Organisation / Firma (Zentral)</span>
						<MintelSelect
							v-model="newLead.company"
							:items="companyOptions"
							placeholder="Bestehende Firma auswählen..."
							allow-add
							@add="openQuickAdd('company')"
						/>
					</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">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>
						<MintelSelect
							v-model="newLead.contact_person"
							:items="peopleOptions"
							placeholder="Person auswählen..."
							allow-add
							@add="openQuickAdd('person')"
						/>
					</div>
				</div>

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

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

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 drawerActive = ref(false);
const savingLead = ref(false);
const notice = ref<{ type: string; message: string } | null>(null);

const newLead = ref({
	company: null,
	website_url: '',
	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) return '';
	if (lead.company) {
		return typeof lead.company === 'object' ? lead.company.name : (companies.value.find(c => c.id === lead.company)?.name || 'Unbekannte Firma');
	}
	return 'Unbekannte Organisation';
}

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) {
	notice.value = { type: 'info', message: `Navigiere zu Person: ${id}` };
}

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

async function fetchData() {
	try {
		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;
		}
	} catch (e: any) {
		console.error('Fetch error:', e);
	}
}

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

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

function openCreateDrawer() {
	newLead.value = { 
		company: null,
		website_url: '', 
		contact_person: null,
		briefing: '', 
		status: 'new' 
	};
	drawerActive.value = true;
}

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) {
		notice.value = { type: 'danger', message: 'Organisation 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!' };
		drawerActive.value = false;
		await fetchLeads();
		selectedLeadId.value = payload.id;
	} catch (e: any) {
		notice.value = { type: 'danger', message: `Fehler beim Speichern: ${e.message}` };
	} finally {
		savingLead.value = false;
	}
}

function openQuickAdd(type: string) {
	notice.value = { type: 'info', message: `${type === 'company' ? 'Firma' : 'Person'} im jeweiligen Manager anlegen.` };
}

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)';
	}
}

onMounted(fetchData);
</script>

<style scoped>
.url-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.url-link:hover { border-bottom-color: currentColor; }

.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: 24px; 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; }
</style>
