// app/order-confirmation/OrderConfirmationContent.js
"use client";
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";
import { CheckCircle, XCircle, Clock } from "lucide-react";

export default function OrderConfirmationContent() {
	const searchParams = useSearchParams();

	const [order, setOrder] = useState(null);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		const fetchOrderStatus = async () => {
			const orderId = searchParams.get("orderId") || localStorage.getItem("lastOrderId");

			if (!orderId) {
				setLoading(false);
				return;
			}

			try {
				const response = await fetch(`/api/orders/${orderId}`);
				if (response.ok) {
					const data = await response.json();
					setOrder(data.order);

					localStorage.removeItem("lastOrderId");
					localStorage.removeItem("cartProducts");
				}
			} catch (error) {
				console.error("Error fetching order:", error);
			} finally {
				setLoading(false);
			}
		};

		fetchOrderStatus();
	}, [searchParams]);

	if (loading) {
		return (
			<div className="container my-5">
				<div className="text-center">
					<div className="spinner-border" role="status">
						<span className="visually-hidden">Se încarcă...</span>
					</div>
					<p className="mt-3">Se verifică statusul comenzii...</p>
				</div>
			</div>
		);
	}

	if (!order) {
		return (
			<div className="container my-5">
				<div className="text-center">
					<XCircle size={64} className="text-danger mb-3" />
					<h2>Comandă negăsită</h2>
					<p>Nu am putut găsi informațiile despre comandă.</p>
					<Link href="/" className="tf-btn btn-fill animate-hover-btn radius-3 mt-3">
						Înapoi la magazin
					</Link>
				</div>
			</div>
		);
	}

	const getStatusIcon = () => {
		switch (order.status) {
			case "paid":
				return <CheckCircle size={64} className="text-success mb-3" />;
			case "cancelled":
				return <XCircle size={64} className="text-danger mb-3" />;
			default:
				return <Clock size={64} className="text-warning mb-3" />;
		}
	};

	const getStatusMessage = () => {
		switch (order.status) {
			case "paid":
				return {
					title: "Plată confirmată!",
					message: "Comanda ta a fost plasată cu succes și plata a fost procesată.",
					color: "success",
				};
			case "cancelled":
				return {
					title: "Plată anulată",
					message: "Plata a fost anulată. Dacă este o eroare, te rugăm să încerci din nou.",
					color: "danger",
				};
			default:
				return {
					title: "Plată în așteptare",
					message: "Comanda ta este în procesare. Vei primi un email de confirmare în curând.",
					color: "warning",
				};
		}
	};

	const statusInfo = getStatusMessage();

	return (
		<section className="flat-spacing-11">
			<div className="container">
				<div className="row justify-content-center">
					<div className="col-lg-8">
						<div className="text-center mb-5">
							{getStatusIcon()}
							<h1 className={`text-${statusInfo.color}`}>{statusInfo.title}</h1>
							<p className="lead">{statusInfo.message}</p>
						</div>

						<div className="card shadow-sm">
							<div className="card-body p-4">
								<h5 className="card-title mb-4">Detalii comandă</h5>

								<div className="row mb-3">
									<div className="col-6">
										<strong>Număr comandă:</strong>
									</div>
									<div className="col-6 text-end">#{order.id}</div>
								</div>

								<div className="row mb-3">
									<div className="col-6">
										<strong>Status:</strong>
									</div>
									<div className="col-6 text-end">
										<span className={`badge bg-${statusInfo.color}`}>
											{order.status === "paid"
												? "Plătit"
												: order.status === "cancelled"
												? "Anulat"
												: "În așteptare"}
										</span>
									</div>
								</div>

								<div className="row mb-3">
									<div className="col-6">
										<strong>Total:</strong>
									</div>
									<div className="col-6 text-end">
										{order.total_amount} {order.currency}
									</div>
								</div>

								{(order.pf_email || order.pj_email) && (
									<div className="row mb-3">
										<div className="col-6">
											<strong>Email:</strong>
										</div>
										<div className="col-6 text-end">
											{order.pf_email || order.pj_email}
										</div>
									</div>
								)}

								<hr className="my-4" />

								<div className="d-grid gap-2">
									<Link
										href="/shop-default"
										className="tf-btn btn-fill animate-hover-btn radius-3 justify-content-center">
										Continuă cumpărăturile
									</Link>

									{order.status === "paid" && (
										<Link
											href="/contul-meu/orders"
											className="tf-btn btn-outline-primary animate-hover-btn radius-3 justify-content-center">
											Vezi toate comenzile
										</Link>
									)}
								</div>
							</div>
						</div>

						{order.status === "paid" && (
							<div className="alert alert-info mt-4" role="alert">
								<strong>📧 Verifică emailul!</strong> Am trimis o confirmare a comenzii
								la adresa ta de email.
							</div>
						)}
					</div>
				</div>
			</div>
		</section>
	);
}
