<script lang="ts">
	import { page } from '$app/stores';
	import { quotations, clients } from '$lib/stores';
	import Button from '$lib/components/Button.svelte';
	import { generateQuotationPDF } from '$lib/pdf';

	$: quotation = $quotations.find((q) => q.id === $page.params.id);
	$: client = quotation ? $clients.find((c) => c.id === quotation!.clientId) : undefined;

	function downloadPDF() {
		if (quotation) {
			generateQuotationPDF(quotation, client);
		}
	}
</script>

<div class="space-y-6">
	{#if quotation}
		<div class="overflow-hidden bg-white shadow sm:rounded-lg">
			<div class="flex items-center justify-between px-4 py-5 sm:px-6">
				<div>
					<h3 class="text-lg leading-6 font-medium text-gray-900">Detalles de la Cotización</h3>
					<p class="mt-1 max-w-2xl text-sm text-gray-500">ID: {quotation.id}</p>
				</div>
				<div class="flex gap-2">
					<a href="/quotations">
						<Button variant="secondary">Volver</Button>
					</a>
					<Button onClick={downloadPDF}>Descargar PDF</Button>
				</div>
			</div>
			<div class="border-t border-gray-200 px-4 py-5 sm:p-0">
				<dl class="sm:divide-y sm:divide-gray-200">
					<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
						<dt class="text-sm font-medium text-gray-500">Cliente</dt>
						<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">{quotation.clientName}</dd>
					</div>
					<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
						<dt class="text-sm font-medium text-gray-500">Fecha</dt>
						<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
							{new Date(quotation.date).toLocaleDateString()}
						</dd>
					</div>
					<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
						<dt class="text-sm font-medium text-gray-500">Monto Total</dt>
						<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
							${quotation.total.toFixed(2)}
						</dd>
					</div>
					{#if quotation.footer}
						<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
							<dt class="text-sm font-medium text-gray-500">Notas</dt>
							<dd class="mt-1 text-sm whitespace-pre-wrap text-gray-900 sm:col-span-2 sm:mt-0">
								{quotation.footer}
							</dd>
						</div>
					{/if}
					<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
						<dt class="text-sm font-medium text-gray-500">Ítems</dt>
						<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
							<ul role="list" class="divide-y divide-gray-200 rounded-md border border-gray-200">
								{#each quotation.items as item}
									<li class="flex items-center justify-between py-3 pr-4 pl-3 text-sm">
										<div class="flex w-0 flex-1 items-center">
											<span class="ml-2 w-0 flex-1 truncate"
												>{item.productName} (x{item.quantity})</span
											>
										</div>
										<div class="ml-4 flex-shrink-0">
											<span class="font-medium text-gray-900"
												>${(item.price * item.quantity).toFixed(2)}</span
											>
										</div>
									</li>
								{/each}
							</ul>
						</dd>
					</div>
				</dl>
			</div>
		</div>
	{:else}
		<div class="py-12 text-center">
			<h3 class="mt-2 text-sm font-medium text-gray-900">Cotización no encontrada</h3>
			<div class="mt-6">
				<a href="/quotations">
					<Button>Volver a Cotizaciones</Button>
				</a>
			</div>
		</div>
	{/if}
</div>
