import React, { useEffect, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { CheckCircle2, ArrowRight } from 'lucide-react';
import { formatINR } from '../../utils/formatCurrency';
import api from '../../api/axios';

const OrderConfirmationPage = () => {
  const { id } = useParams();
  const [order, setOrder] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.get(`/orders/${id}`)
      .then((res) => setOrder(res.data.data))
      .catch((err) => console.error(err))
      .finally(() => setLoading(false));
  }, [id]);

  if (loading || !order) {
    return <div className="max-w-7xl mx-auto px-4 py-20 text-center text-slate-500">Retrieving Order Receipt...</div>;
  }

  return (
    <div className="max-w-3xl mx-auto px-4 py-16 text-center space-y-8 bg-slate-50 text-slate-900">
      <div className="w-20 h-20 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mx-auto border border-emerald-200 shadow-sm">
        <CheckCircle2 className="w-10 h-10" />
      </div>

      <div className="space-y-2">
        <span className="text-xs font-bold text-amber-600 uppercase tracking-widest">Order Confirmed & Placed in India</span>
        <h1 className="text-3xl font-extrabold text-slate-900 font-serif">Thank You for Your Order!</h1>
        <p className="text-xs text-slate-500">Order Number: <strong className="text-slate-900 font-mono">{order.orderNumber}</strong></p>
      </div>

      {/* Summary Box */}
      <div className="bg-white border border-slate-200 rounded-3xl p-6 text-left space-y-4 shadow-sm">
        <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wider border-b border-slate-100 pb-3">Purchased Items</h3>
        <div className="space-y-3">
          {order.orderItems.map((item, idx) => (
            <div key={idx} className="flex items-center justify-between text-xs">
              <div className="flex items-center gap-3">
                <img src={item.image} alt="" className="w-12 h-12 object-cover rounded-lg border border-slate-200" />
                <div>
                  <div className="font-bold text-slate-900">{item.name}</div>
                  <div className="text-slate-500">Qty: {item.quantity} {item.variantColor && `| ${item.variantColor}`}</div>
                </div>
              </div>
              <div className="font-bold text-amber-700">{formatINR(item.price * item.quantity)}</div>
            </div>
          ))}
        </div>

        <div className="border-t border-slate-100 pt-4 flex justify-between text-sm font-bold text-slate-900">
          <span>Total Paid</span>
          <span className="text-amber-700">{formatINR(order.totalAmount)}</span>
        </div>
      </div>

      <div className="flex justify-center gap-4">
        <Link
          to={`/track-order/${order._id}`}
          className="py-3.5 px-8 bg-amber-500 hover:bg-amber-600 text-white font-bold rounded-2xl text-xs flex items-center gap-2 shadow-sm"
        >
          Track Live Delivery Timeline <ArrowRight className="w-4 h-4" />
        </Link>
        <Link
          to="/shop"
          className="py-3.5 px-8 bg-white hover:bg-slate-50 text-slate-800 font-bold rounded-2xl text-xs border border-slate-200 shadow-sm"
        >
          Continue Shopping
        </Link>
      </div>
    </div>
  );
};

export default OrderConfirmationPage;