'use client';
import { nombreMedioPago } from '../seguimiento/TrackingSection';

import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { storeImageSrc } from '@/lib/storeImage';

const GeoMap = dynamic(() => import('../checkout/GeoMap'), { ssr: false });
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import HourglassEmptyRoundedIcon from '@mui/icons-material/HourglassEmptyRounded';
import Inventory2RoundedIcon from '@mui/icons-material/Inventory2Rounded';
import LocalShippingRoundedIcon from '@mui/icons-material/LocalShippingRounded';
import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
import PendingRoundedIcon from '@mui/icons-material/PendingRounded';
import ReceiptRoundedIcon from '@mui/icons-material/ReceiptRounded';
import SaveRoundedIcon from '@mui/icons-material/SaveRounded';
import ShoppingBagRoundedIcon from '@mui/icons-material/ShoppingBagRounded';
import UserRoundedIcon from '@mui/icons-material/PersonRounded';
import {
	OrderBody,
	OrderDelivery,
	OrderItemsList,
	OrderItemsTable,
	OrderItemThumb,
	OrderMeta,
	OrderMetaItem,
	OrderStatusBanner,
	OrderStatusLabel,
	OrderTimeline,
	OrderTotals,
} from '../seguimiento/styles';
import type { useStoreAuth } from '../../useStoreAuth';
import {
	SectionBackBtn,
	AccountAvatar,
	AccountHeader,
	AccountHeaderInfo,
	AccountPanel,
	AccountTab,
	AccountTabs,
	AccountWrap,
	EmptyOrders,
	LogoutBtn,
	OrderDetailDialog,
	OrderDetailPanel,
	OrderHistoryBadge,
	OrdersTable,
	OrdersTableWrap,
	PaginationRow,
	ProfileField,
	ProfileGrid,
	ProfileSaveRow,
	SaveBtn,
	SavedMsg,
} from './styles';

const PAGE_SIZE = 10;

const STATUS_ICON: Record<string, React.ElementType> = {
	pendiente_pago: HourglassEmptyRoundedIcon,
	pago_confirmado: PendingRoundedIcon,
	en_verificacion: PendingRoundedIcon,
	verificado: CheckCircleRoundedIcon,
	preparando: Inventory2RoundedIcon,
	empaquetado: Inventory2RoundedIcon,
	listo_retiro: Inventory2RoundedIcon,
	listo_despacho: Inventory2RoundedIcon,
	en_camino: LocalShippingRoundedIcon,
	retirado: CheckCircleRoundedIcon,
	pagado: PendingRoundedIcon,
	en_preparacion: Inventory2RoundedIcon,
	enviado: LocalShippingRoundedIcon,
	entregado: CheckCircleRoundedIcon,
	cancelado: CancelRoundedIcon,
};

type OrderItem = {
	id?: string;
	name: string;
	sku?: string;
	quantity: number;
	unitPrice: number;
	lineTotal: number;
	imageUrl?: string;
	price?: number;
};

type Order = {
	id: string;
	codigo: string;
	estado: string;
	metodo_pago: string;
	customer_snapshot: { name?: string; email?: string; phone?: string } | null;
	delivery_snapshot: {
		type?: 'delivery' | 'pickup';
		address?: string;
		nroCasa?: string;
		ciudad?: string;
		distrito?: string;
		departamento?: string;
		lat?: number | null;
		lng?: number | null;
		methodName?: string;
	} | null;
	items_snapshot: OrderItem[];
	totals_snapshot: {
		total: number;
		subtotal: number;
		deliveryCost?: number;
		delivery?: number;
		paymentMethodName?: string;
	};
	created_at: string;
	comentarios_cliente?: string | null;
	eventos?: {
		tipo: string;
		estadoAnterior: string | null;
		estadoNuevo: string | null;
		fecha: string;
	}[];
};

function formatGs(value: number) {
	return `Gs. ${Number(value).toLocaleString('es-PY')}`;
}

function formatDateTime(iso: string) {
	try {
		return new Date(iso).toLocaleString('es-PY', {
			day: '2-digit',
			month: 'short',
			hour: '2-digit',
			minute: '2-digit',
		});
	} catch {
		return iso;
	}
}

function formatDate(iso: string) {
	try {
		return new Date(iso).toLocaleDateString('es-PY', {
			day: '2-digit',
			month: 'short',
			year: 'numeric',
		});
	} catch {
		return iso;
	}
}

function initials(name: string) {
	return name
		.split(' ')
		.slice(0, 2)
		.map((w) => w[0]?.toUpperCase() ?? '')
		.join('');
}

type Props = {
	storeAuth: ReturnType<typeof useStoreAuth>;
	token: string | null;
	onClose: () => void;
	onLogout: () => void;
	onOpenTracking?: (code: string) => void;
};

export default function AccountSection({ storeAuth, token, onClose, onLogout }: Props) {
	const { cliente, updateProfile, loading } = storeAuth;
	const [tab, setTab] = useState<'profile' | 'orders'>('profile');
	const [nombre, setNombre] = useState(cliente?.nombre ?? '');
	const [telefono, setTelefono] = useState(cliente?.telefono ?? '');
	const [saved, setSaved] = useState(false);
	const [saveError, setSaveError] = useState<string | null>(null);
	const [orders, setOrders] = useState<Order[]>([]);
	const [loadingOrders, setLoadingOrders] = useState(false);
	const [page, setPage] = useState(0);
	const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);

	useEffect(() => {
		setNombre(cliente?.nombre ?? '');
		setTelefono(cliente?.telefono ?? '');
	}, [cliente]);

	useEffect(() => {
		if (tab !== 'orders' || !token) return;
		setLoadingOrders(true);
		fetch('/api/store/auth/orders', {
			headers: { Authorization: `Bearer ${token}` },
		})
			.then((r) => (r.ok ? r.json() : { orders: [] }))
			.then((data: { orders: Order[] }) => setOrders(data.orders ?? []))
			.catch(() => setOrders([]))
			.finally(() => setLoadingOrders(false));
	}, [tab, token]);

	useEffect(() => {
		if (!selectedOrder) return;
		const prev = document.body.style.overflow;
		document.body.style.overflow = 'hidden';
		return () => {
			document.body.style.overflow = prev;
		};
	}, [selectedOrder]);

	const handleSave = async () => {
		setSaveError(null);
		setSaved(false);
		try {
			await updateProfile({
				nombre: nombre.trim() || undefined,
				telefono: telefono.trim() || undefined,
			});
			setSaved(true);
			setTimeout(() => setSaved(false), 3000);
		} catch (e: unknown) {
			setSaveError(e instanceof Error ? e.message : 'Error al guardar');
		}
	};

	if (!cliente) return null;

	const totalPages = Math.ceil(orders.length / PAGE_SIZE);
	const pageOrders = orders.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);

	return (
		<AccountWrap>
			<div>
				<SectionBackBtn type="button" onClick={onClose}>
					<ArrowBackRoundedIcon fontSize="small" />
					Volver
				</SectionBackBtn>
			</div>

			<AccountHeader>
				<AccountAvatar>{initials(cliente.nombre)}</AccountAvatar>
				<AccountHeaderInfo>
					<strong>{cliente.nombre}</strong>
					<span>{cliente.email}</span>
				</AccountHeaderInfo>
				<LogoutBtn type="button" onClick={onLogout}>
					<LogoutRoundedIcon fontSize="small" />
					Cerrar sesión
				</LogoutBtn>
			</AccountHeader>

			<AccountTabs>
				<AccountTab $active={tab === 'profile'} type="button" onClick={() => setTab('profile')}>
					<UserRoundedIcon style={{ fontSize: 16 }} />
					Mi Perfil
				</AccountTab>
				<AccountTab
					$active={tab === 'orders'}
					type="button"
					onClick={() => {
						setTab('orders');
						setPage(0);
					}}
				>
					<ReceiptRoundedIcon style={{ fontSize: 16 }} />
					Mis Pedidos
				</AccountTab>
			</AccountTabs>

			{tab === 'profile' && (
				<AccountPanel>
					<ProfileGrid>
						<ProfileField style={{ gridColumn: '1 / -1' }}>
							<label>Email</label>
							<input type="email" value={cliente.email} readOnly />
						</ProfileField>
						<ProfileField>
							<label>Nombre completo</label>
							<input type="text" value={nombre} onChange={(e) => setNombre(e.target.value)} placeholder="Tu nombre" />
						</ProfileField>
						<ProfileField>
							<label>Teléfono</label>
							<input type="tel" value={telefono} onChange={(e) => setTelefono(e.target.value)} placeholder="Ej: 0981 123 456" />
						</ProfileField>
					</ProfileGrid>
					<ProfileSaveRow>
						<SaveBtn type="button" onClick={handleSave} disabled={loading}>
							<SaveRoundedIcon style={{ fontSize: 16 }} />
							{loading ? 'Guardando…' : 'Guardar cambios'}
						</SaveBtn>
						{saved && (
							<SavedMsg>
								<CheckCircleRoundedIcon style={{ fontSize: 16 }} />
								Guardado
							</SavedMsg>
						)}
						{saveError && (
							<span
								style={{
									fontSize: 13,
									fontWeight: 700,
									color: 'var(--store-danger)',
								}}
							>
								{saveError}
							</span>
						)}
					</ProfileSaveRow>
				</AccountPanel>
			)}

			{tab === 'orders' && (
				<AccountPanel style={{ padding: 0, overflow: 'hidden' }}>
					{loadingOrders ? (
						<p
							style={{
								margin: '24px 28px',
								fontSize: 14,
								fontWeight: 700,
								color: 'var(--store-muted)',
							}}
						>
							Cargando pedidos…
						</p>
					) : orders.length === 0 ? (
						<EmptyOrders>
							<ShoppingBagRoundedIcon />
							<h3>Sin pedidos aún</h3>
							<p>Cuando realices un pedido, aparecerá aquí.</p>
						</EmptyOrders>
					) : (
						<>
							<OrdersTableWrap>
								<OrdersTable>
									<thead>
										<tr>
											<th>Código</th>
											<th>Fecha</th>
											<th>Estado</th>
											<th>Productos</th>
											<th className="num">Total</th>
											<th />
										</tr>
									</thead>
									<tbody>
										{pageOrders.map((order) => {
											const items = Array.isArray(order.items_snapshot) ? order.items_snapshot : [];
											const total = order.totals_snapshot?.total ?? 0;
											const summary = items.length === 1 ? '1 producto' : `${items.length} productos`;
											return (
												<tr key={order.id}>
													<td className="code-cell">{order.codigo}</td>
													<td className="date-cell">{formatDate(order.created_at)}</td>
													<td>
														<OrderHistoryBadge $estado={order.estado}>{OrderStatusLabel[order.estado] ?? order.estado}</OrderHistoryBadge>
													</td>
													<td className="summary-cell">{summary}</td>
													<td className="num total-cell">{formatGs(total)}</td>
													<td className="action-cell">
														<button type="button" className="ver-btn" onClick={() => setSelectedOrder(order)}>
															Ver detalle
														</button>
													</td>
												</tr>
											);
										})}
									</tbody>
								</OrdersTable>
							</OrdersTableWrap>

							{totalPages > 1 && (
								<PaginationRow>
									<button type="button" disabled={page === 0} onClick={() => setPage((p) => p - 1)}>
										<ChevronLeftRoundedIcon fontSize="small" />
									</button>
									<span>
										Página {page + 1} de {totalPages}
									</span>
									<button type="button" disabled={page >= totalPages - 1} onClick={() => setPage((p) => p + 1)}>
										<ChevronRightRoundedIcon fontSize="small" />
									</button>
								</PaginationRow>
							)}
						</>
					)}
				</AccountPanel>
			)}

			{selectedOrder &&
				(() => {
					const StatusIcon = STATUS_ICON[selectedOrder.estado] ?? PendingRoundedIcon;
					const delivery = selectedOrder.delivery_snapshot;
					const customer = selectedOrder.customer_snapshot;
					const items = Array.isArray(selectedOrder.items_snapshot) ? selectedOrder.items_snapshot : [];
					const deliveryCost = selectedOrder.totals_snapshot.deliveryCost ?? selectedOrder.totals_snapshot.delivery ?? 0;

					return (
						<OrderDetailDialog
							onClick={(e) => {
								if (e.target === e.currentTarget) setSelectedOrder(null);
							}}
						>
							<OrderDetailPanel>
								<OrderStatusBanner $estado={selectedOrder.estado}>
									<StatusIcon />
									{OrderStatusLabel[selectedOrder.estado] ?? selectedOrder.estado}
									<button
										type="button"
										aria-label="Cerrar"
										onClick={() => setSelectedOrder(null)}
										style={{
											marginLeft: 'auto',
											background: 'none',
											border: 'none',
											cursor: 'pointer',
											color: 'inherit',
											display: 'flex',
											padding: 4,
											borderRadius: 8,
											opacity: 0.8,
										}}
									>
										<CloseRoundedIcon fontSize="small" />
									</button>
								</OrderStatusBanner>

								<OrderBody>
									<OrderMeta>
										<OrderMetaItem>
											<label>Código de pedido</label>
											<span>{selectedOrder.codigo}</span>
										</OrderMetaItem>
										<OrderMetaItem>
											<label>Fecha</label>
											<span>{formatDate(selectedOrder.created_at)}</span>
										</OrderMetaItem>
										<OrderMetaItem>
											<label>Método de pago</label>
											<span style={{ textTransform: 'capitalize' }}>
												{nombreMedioPago(selectedOrder.metodo_pago, selectedOrder.totals_snapshot?.paymentMethodName)}
											</span>
										</OrderMetaItem>
										{customer?.name && (
											<OrderMetaItem>
												<label>Cliente</label>
												<span>{customer.name}</span>
											</OrderMetaItem>
										)}
									</OrderMeta>

									{items.length > 0 && (
										<OrderItemsList>
											<h4>Productos ({items.length})</h4>
											<OrderItemsTable>
												<thead>
													<tr>
														<th style={{ width: 56, paddingLeft: 0 }} />
														<th>Producto</th>
														<th style={{ textAlign: 'center' }}>Cant.</th>
														<th className="num">P. Unit.</th>
														<th className="num">Subtotal</th>
													</tr>
												</thead>
												<tbody>
													{items.map((item, i) => {
														const unitPrice = item.unitPrice ?? item.price ?? 0;
														const lineTotal = item.lineTotal ?? unitPrice * item.quantity;
														return (
															<tr key={i}>
																<td className="img-cell">
																	<OrderItemThumb>
																		<img src={storeImageSrc(item.imageUrl, item.name)} alt={item.name} />
																	</OrderItemThumb>
																</td>
																<td className="name-cell">
																	{item.name}
																	{item.sku && (
																		<span
																			style={{
																				display: 'block',
																				fontSize: 11,
																				fontWeight: 600,
																				color: 'var(--store-muted)',
																			}}
																		>
																			Cód. {item.sku}
																		</span>
																	)}
																</td>
																<td className="qty-cell">× {item.quantity}</td>
																<td className="unit-cell">{formatGs(unitPrice)}</td>
																<td className="subtotal-cell">{formatGs(lineTotal)}</td>
															</tr>
														);
													})}
												</tbody>
											</OrderItemsTable>
										</OrderItemsList>
									)}

									{(delivery?.address || delivery?.ciudad) && (
										<OrderDelivery>
											<h4>{delivery.type === 'pickup' ? 'Retiro en local' : 'Dirección de entrega'}</h4>
											{/* El checkout guarda nro de casa, distrito y coordenadas; antes se
											    mostraba solo calle/ciudad/departamento. */}
											<p>
												{[
													delivery.address,
													delivery.nroCasa && delivery.nroCasa !== '0' ? `Nro. ${delivery.nroCasa}` : null,
													delivery.distrito,
													delivery.ciudad,
													delivery.departamento,
												]
													.filter(Boolean)
													.join(', ')}
											</p>
											{delivery.methodName && (
												<p style={{ marginTop: 4, fontWeight: 600, color: 'var(--store-muted)', fontSize: 12 }}>
													{delivery.methodName}
												</p>
											)}
											{/* El mapa se ve acá mismo; antes era un link que sacaba al comprador
											    de la tienda. Google Maps queda como opción para navegar hasta ahí. */}
											{delivery.lat != null && delivery.lng != null && (
												<div style={{ display: 'grid', gap: 6, marginTop: 8 }}>
													<GeoMap lat={Number(delivery.lat)} lng={Number(delivery.lng)} height={180} readOnly />
													<a
														href={`https://www.google.com/maps/search/?api=1&query=${delivery.lat},${delivery.lng}`}
														target="_blank"
														rel="noreferrer"
														style={{ justifySelf: 'start', background: 'transparent', fontSize: 12, fontWeight: 700, color: 'var(--store-primary)' }}
													>
														Abrir en Google Maps
													</a>
												</div>
											)}
										</OrderDelivery>
									)}

									{selectedOrder.comentarios_cliente && (
										<OrderDelivery>
											<h4>Tus indicaciones</h4>
											<p style={{ fontWeight: 500, whiteSpace: 'pre-wrap' }}>
												{selectedOrder.comentarios_cliente}
											</p>
										</OrderDelivery>
									)}

									{!!selectedOrder.eventos?.length && (
										<OrderTimeline>
											<h4>Historial del pedido</h4>
											<ol>
												{selectedOrder.eventos.map((ev, i) => (
													<li key={i}>
														<strong>
															{ev.tipo === 'creacion'
																? 'Pedido recibido'
																: ev.tipo === 'incidencia'
																	? 'Incidencia registrada'
																	: (ev.estadoNuevo && OrderStatusLabel[ev.estadoNuevo]) ??
																		ev.estadoNuevo ??
																		'Actualización'}
														</strong>
														<span>{formatDateTime(ev.fecha)}</span>
													</li>
												))}
											</ol>
										</OrderTimeline>
									)}

									<OrderTotals>
										<div className="row">
											<span>Subtotal</span>
											<span>{formatGs(selectedOrder.totals_snapshot.subtotal)}</span>
										</div>
										{deliveryCost > 0 && (
											<div className="row">
												<span>Envío</span>
												<span>{formatGs(deliveryCost)}</span>
											</div>
										)}
										<div className="row total">
											<span>Total</span>
											<span>{formatGs(selectedOrder.totals_snapshot.total)}</span>
										</div>
									</OrderTotals>
								</OrderBody>
							</OrderDetailPanel>
						</OrderDetailDialog>
					);
				})()}
		</AccountWrap>
	);
}