"use client";

import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { motion } from "framer-motion";
import { CheckCircle2 } from "lucide-react";
import { Button } from "@/components/ui/Button";
import { StatusPill } from "@/components/ui/StatusPill";
import { GlassCard } from "@/components/ui/GlassCard";
import { fetchOrderByNumber } from "@/lib/data/orders";
import { Order } from "@/lib/types";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

function OrderSubmittedContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { t } = useTranslation();
  const orderId = searchParams.get("orderId");
  const [order, setOrder] = useState<Order | null>(null);

  useEffect(() => {
    if (!orderId) return;
    let active = true;
    fetchOrderByNumber(orderId).then((result) => active && setOrder(result));
    return () => {
      active = false;
    };
  }, [orderId]);

  return (
    <div className="flex flex-1 flex-col items-center justify-center gap-8 px-6 pb-safe pt-safe text-center">
      <motion.div
        initial={{ scale: 0, rotate: -20 }}
        animate={{ scale: 1, rotate: 0 }}
        transition={{ type: "spring", stiffness: 260, damping: 16 }}
        className="flex h-24 w-24 items-center justify-center rounded-full bg-teal/15"
      >
        <CheckCircle2 size={48} strokeWidth={1.8} className="text-teal" />
      </motion.div>

      <div>
        <h1 className="font-display text-2xl font-semibold tracking-tight">
          {t("orderSubmitted.title")}
        </h1>
        <p className="mt-2 text-sm text-muted">
          {t("orderSubmitted.subtitle")}
        </p>
      </div>

      <StatusPill status="pending" />

      {orderId && (
        <GlassCard className="w-full text-left">
          <div className="flex items-center justify-between">
            <span className="text-xs text-muted">{t("orderSubmitted.orderReference")}</span>
            <span className="tnum font-mono text-sm font-semibold">{orderId}</span>
          </div>
          {order && (
            <div className="mt-3 flex items-center justify-between border-t border-black/5 pt-3 dark:border-white/5">
              <span className="text-xs text-muted">{t("orderSubmitted.package")}</span>
              <span className="text-sm font-semibold">{order.packageName}</span>
            </div>
          )}
        </GlassCard>
      )}

      <div className="flex w-full flex-col gap-3">
        <Button size="lg" fullWidth onClick={() => orderId && router.push(`/orders/${orderId}`)}>
          {t("orderSubmitted.trackOrder")}
        </Button>
        <Button size="lg" variant="secondary" fullWidth onClick={() => router.push("/home")}>
          {t("orderSubmitted.backToHome")}
        </Button>
      </div>
    </div>
  );
}

export default function OrderSubmittedPage() {
  return (
    <Suspense fallback={null}>
      <OrderSubmittedContent />
    </Suspense>
  );
}