<template>
	<private-view title="Customer Manager">
		<template #navigation>
			<v-list nav>
				<v-list-item @click="openCreateCompany" 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="Neue Firma anlegen" />
					</v-list-item-content>
				</v-list-item>

				<v-divider />

				<v-list-item
					v-for="company in companies"
					:key="company.id"
					:active="selectedCompany?.id === company.id"
					class="company-item"
					clickable
					@click="selectCompany(company)"
				>
					<v-list-item-icon><v-icon name="business" /></v-list-item-icon>
					<v-list-item-content>
						<v-text-overflow :text="company.name" />
					</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">
			<div v-if="!selectedCompany" class="empty-state">
				<v-info title="Firmen auswählen" icon="business" center>
					Wähle eine Firma in der Navigation aus oder
					<v-button x-small @click="openCreateCompany">erstelle eine neue Firma</v-button>.
				</v-info>
			</div>

			<template v-else>
				<header class="header">
					<div class="header-left">
						<h1 class="title">{{ selectedCompany.name }}</h1>
						<p class="subtitle">{{ employees.length }} Kunden-Mitarbeiter</p>
					</div>
					<div class="header-right">
						<v-button secondary rounded icon v-tooltip.bottom="'Firma bearbeiten'" @click="openEditCompany">
							<v-icon name="edit" />
						</v-button>
						<v-button primary @click="openCreateEmployee">
							Mitarbeiter hinzufügen
						</v-button>
					</div>
				</header>

				<v-table
					:headers="tableHeaders"
					:items="employees"
					:loading="loading"
					class="clickable-table"
					fixed-header
					@click:row="onRowClick"
				>
					<template #[`item.name`]="{ item }">
						<div class="user-cell">
							<v-avatar :name="item.first_name" x-small />
							<span class="user-name">{{ item.first_name }} {{ item.last_name }}</span>
						</div>
					</template>

					<template #[`item.last_invited`]="{ item }">
						<span v-if="item.last_invited" class="status-date">
							{{ formatDate(item.last_invited) }}
						</span>
						<v-chip v-else x-small>Noch nie</v-chip>
					</template>
				</v-table>
			</template>
		</div>

		<!-- Drawer: Company Form -->
		<v-drawer
			v-model="drawerCompanyActive"
			:title="isEditingCompany ? 'Firma bearbeiten' : 'Neue Firma anlegen'"
			icon="business"
			@cancel="drawerCompanyActive = false"
		>
			<div v-if="drawerCompanyActive" class="drawer-content">
                <div class="form-section">
                    <div class="field">
                        <span class="label">Firmenname</span>
                        <v-input v-model="companyForm.name" placeholder="z.B. KLZ Cables" autofocus />
                    </div>
                </div>
				
				<div class="drawer-actions">
					<v-button primary block :loading="saving" @click="saveCompany">Speichern</v-button>
				</div>
			</div>
		</v-drawer>

		<!-- Drawer: Employee Form -->
		<v-drawer
			v-model="drawerEmployeeActive"
			:title="isEditingEmployee ? 'Mitarbeiter bearbeiten' : 'Neuen Mitarbeiter anlegen'"
			icon="person"
			@cancel="drawerEmployeeActive = false"
		>
			<div v-if="drawerEmployeeActive" class="drawer-content">
                <div class="form-section">
                    <div class="field">
                        <span class="label">Vorname</span>
                        <v-input v-model="employeeForm.first_name" placeholder="Vorname" autofocus />
                    </div>

                    <div class="field">
                        <span class="label">Nachname</span>
                        <v-input v-model="employeeForm.last_name" placeholder="Nachname" />
                    </div>

                    <div class="field">
                        <span class="label">E-Mail</span>
                        <v-input v-model="employeeForm.email" placeholder="E-Mail Adresse" type="email" />
                    </div>

                    <v-divider v-if="isEditingEmployee" />

                    <div v-if="isEditingEmployee" class="field">
                        <span class="label">Temporäres Passwort</span>
                        <v-input v-model="employeeForm.temporary_password" readonly class="password-input" />
                        <p class="field-note">Wird beim Senden der Zugangsdaten automatisch generiert.</p>
                    </div>
                </div>

				<div class="drawer-actions">
					<v-button primary block :loading="saving" @click="saveEmployee">Daten speichern</v-button>
					
					<template v-if="isEditingEmployee">
						<v-divider />
						<v-button
							v-tooltip.bottom="'Generiert PW, speichert es und sendet E-Mail'"
							secondary
							block
							:loading="invitingId === employeeForm.id"
							@click="inviteUser(employeeForm)"
						>
							<v-icon name="send" left /> Zugangsdaten senden
						</v-button>
					</template>
				</div>
			</div>
		</v-drawer>
	</private-view>
</template>

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

const api = useApi();

const companies = ref<any[]>([]);
const selectedCompany = ref<any>(null);
const employees = ref<any[]>([]);
const loading = ref(false);
const saving = ref(false);
const invitingId = ref<string | null>(null);
const notice = ref<{ type: string; message: string } | null>(null);

// Forms State
const drawerCompanyActive = ref(false);
const isEditingCompany = ref(false);
const companyForm = ref({ id: '', name: '' });

const drawerEmployeeActive = ref(false);
const isEditingEmployee = ref(false);
const employeeForm = ref({ 
    id: '', 
    first_name: '', 
    last_name: '', 
    email: '', 
    temporary_password: '' 
});

const tableHeaders = [
	{ text: 'Name', value: 'name', sortable: true },
	{ text: 'E-Mail', value: 'email', sortable: true },
	{ text: 'Zuletzt eingeladen', value: 'last_invited', sortable: true }
];

async function fetchCompanies() {
	const res = await api.get('/items/companies', {
		params: {
			fields: ['id', 'name'],
			sort: 'name',
		},
	});
	companies.value = res.data.data;
}

async function selectCompany(company: any) {
	selectedCompany.value = company;
	loading.value = true;
	try {
		const res = await api.get('/items/client_users', {
			params: {
				filter: { company: { _eq: company.id } },
				fields: ['*'],
				sort: 'first_name',
			},
		});
		employees.value = res.data.data;
	} finally {
		loading.value = false;
	}
}

// Company Actions
function openCreateCompany() {
	isEditingCompany.value = false;
	companyForm.value = { id: '', name: '' };
	drawerCompanyActive.value = true;
}

async function openEditCompany() {
	if (!selectedCompany.value) return;
    companyForm.value = { 
        id: selectedCompany.value.id, 
        name: selectedCompany.value.name 
    };
	isEditingCompany.value = true;
    await nextTick();
	drawerCompanyActive.value = true;
}

async function saveCompany() {
	if (!companyForm.value.name) return;
	saving.value = true;
	try {
		if (isEditingCompany.value) {
			await api.patch(`/items/companies/${companyForm.value.id}`, { name: companyForm.value.name });
			notice.value = { type: 'success', message: 'Firma aktualisiert!' };
		} else {
			await api.post('/items/companies', { name: companyForm.value.name });
			notice.value = { type: 'success', message: 'Firma angelegt!' };
		}
		drawerCompanyActive.value = false;
		await fetchCompanies();
		if (selectedCompany.value?.id === companyForm.value.id) {
			selectedCompany.value.name = companyForm.value.name;
		}
	} catch (e: any) {
		notice.value = { type: 'danger', message: e.message };
	} finally {
		saving.value = false;
	}
}

// Employee Actions
function openCreateEmployee() {
	isEditingEmployee.value = false;
	employeeForm.value = { id: '', first_name: '', last_name: '', email: '', temporary_password: '' };
	drawerEmployeeActive.value = true;
}

async function openEditEmployee(item: any) {
    employeeForm.value = {
        id: item.id || '',
        first_name: item.first_name || '',
        last_name: item.last_name || '',
        email: item.email || '',
        temporary_password: item.temporary_password || ''
    };
	isEditingEmployee.value = true;
    await nextTick();
	drawerEmployeeActive.value = true;
}

async function saveEmployee() {
	if (!employeeForm.value.email || !selectedCompany.value) return;
	saving.value = true;
	try {
		if (isEditingEmployee.value) {
			await api.patch(`/items/client_users/${employeeForm.value.id}`, {
				first_name: employeeForm.value.first_name,
				last_name: employeeForm.value.last_name,
				email: employeeForm.value.email
			});
			notice.value = { type: 'success', message: 'Mitarbeiter aktualisiert!' };
		} else {
			await api.post('/items/client_users', {
				first_name: employeeForm.value.first_name,
				last_name: employeeForm.value.last_name,
				email: employeeForm.value.email,
				company: selectedCompany.value.id
			});
			notice.value = { type: 'success', message: 'Mitarbeiter angelegt!' };
		}
		drawerEmployeeActive.value = false;
		await selectCompany(selectedCompany.value);
	} catch (e: any) {
		notice.value = { type: 'danger', message: e.message };
	} finally {
		saving.value = false;
	}
}

async function inviteUser(user: any) {
	invitingId.value = user.id;
	try {
		await api.post(`/flows/trigger/33443f6b-cec7-4668-9607-f33ea674d501`, [user.id]);
		notice.value = { type: 'success', message: `Zugangsdaten für ${user.first_name} versendet. 📧` };
		await selectCompany(selectedCompany.value);
		if (drawerEmployeeActive.value && employeeForm.value.id === user.id) {
			const updated = employees.value.find(e => e.id === user.id);
			if (updated) {
                employeeForm.value.temporary_password = updated.temporary_password;
            }
		}
	} catch (e: any) {
		notice.value = { type: 'danger', message: `Fehler: ${e.message}` };
	} finally {
		invitingId.value = null;
	}
}

function onRowClick(event: any) {
	const item = event?.item || event;
	if (item && item.id) {
		openEditEmployee(item);
	}
}

function formatDate(dateStr: string) {
	return new Date(dateStr).toLocaleString('de-DE', {
		day: '2-digit', month: '2-digit', year: 'numeric',
		hour: '2-digit', minute: '2-digit'
	});
}

onMounted(() => {
	fetchCompanies();
});
</script>

<style scoped>
.content-wrapper { padding: 32px; height: 100%; display: flex; flex-direction: column; }
.company-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; }
.subtitle { color: var(--theme--foreground-subdued); font-size: 14px; }
.empty-state { height: 100%; display: flex; align-items: center; justify-content: center; }
.user-cell { display: flex; align-items: center; gap: 12px; }
.user-name { font-weight: 600; }
.status-date { 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; }
.field { display: flex; flex-direction: column; gap: 8px; }
.label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--theme--foreground-subdued); letter-spacing: 0.5px; }
.field-note { font-size: 11px; color: var(--theme--foreground-subdued); margin-top: 4px; }
.drawer-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.password-input :deep(textarea) {
	font-family: var(--family-monospace);
	font-weight: 800;
	color: var(--theme--primary) !important;
	background: var(--theme--background-subdued) !important;
}

.clickable-table :deep(tbody tr) { cursor: pointer; transition: background-color 0.2s ease; }
.clickable-table :deep(tbody tr:hover) { background-color: var(--theme--background-subdued) !important; }
:deep(.v-list-item) { cursor: pointer !important; }
</style>
