/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import { use, useState } from 'react';
import { motion } from 'framer-motion';
import { toast } from 'sonner';
import {
  ArrowLeft,
  Clock,
  Package,
  CheckCircle2,
  XCircle,
  RefreshCw,
  CreditCard,
  MapPin,
  Truck,
  User,
  StickyNote,
  Copy,
  ChevronDown,
  ExternalLink,
  Upload,
} from 'lucide-react';
import Link from 'next/link';
import { useOrderDetail } from '@/hooks/useOrder';
import {
  usePaymentStatus,
  useRetryPayment,
  useUploadPaymentProof,
} from '@/hooks/usePayment';
import { formatIDR, formatDate, cn } from '@/lib/utils';
import { Order } from '@/types';

import Image from 'next/image';
// ── Payment config ─────────────────────────────────────────────────────
const PAYMENT_METHOD_LABELS: Record<string, string> = {
  qris: 'QRIS',
  manual_qris: 'QRIS',
  virtual_account: 'Virtual Account',
  bank_transfer: 'Transfer Bank',
  ewallet: 'E-Wallet',
  retail_outlet: 'Retail Outlet',
  credit_card: 'Kartu Kredit',
  cod: 'COD (Bayar di Tempat)',
  flat: 'Flat (Testing)',
};

type PaymentStatusKey =
  | 'waiting'
  | 'pending'
  | 'awaiting_verification'
  | 'paid'
  | 'failed'
  | 'rejected'
  | 'expired';

const PAYMENT_STATUS_CONFIG: Record<
  PaymentStatusKey,
  {
    label: string;
    icon: React.ElementType;
    iconColor: string;
    badgeBg: string;
    badgeText: string;
    glowColor: string;
    accentColor: string;
  }
> = {
  waiting: {
    label: 'Menunggu Pembayaran',
    icon: Clock,
    iconColor: 'text-amber-400',
    badgeBg: 'bg-amber-500/10 border-amber-500/20',
    badgeText: 'text-amber-400',
    glowColor: 'rgba(245,158,11,0.15)',
    accentColor: '#fbbf24',
  },
  pending: {
    label: 'Menunggu Konfirmasi',
    icon: Clock,
    iconColor: 'text-amber-400',
    badgeBg: 'bg-amber-500/10 border-amber-500/20',
    badgeText: 'text-amber-400',
    glowColor: 'rgba(245,158,11,0.15)',
    accentColor: '#fbbf24',
  },
  paid: {
    label: 'Sudah Dibayar',
    icon: CheckCircle2,
    iconColor: 'text-emerald-400',
    badgeBg: 'bg-emerald-500/10 border-emerald-500/20',
    badgeText: 'text-emerald-400',
    glowColor: 'rgba(52,211,153,0.15)',
    accentColor: '#34d399',
  },
  failed: {
    label: 'Pembayaran Gagal',
    icon: XCircle,
    iconColor: 'text-rose-400',
    badgeBg: 'bg-rose-500/10 border-rose-500/20',
    badgeText: 'text-rose-400',
    glowColor: 'rgba(251,113,133,0.15)',
    accentColor: '#fb7185',
  },
  expired: {
    label: 'Pembayaran Kadaluarsa',
    icon: XCircle,
    iconColor: 'text-gray-400',
    badgeBg: 'bg-white/5 border-white/10',
    badgeText: 'text-gray-400',
    glowColor: 'rgba(255,255,255,0.05)',
    accentColor: '#9ca3af',
  },
  awaiting_verification: {
    label: 'Menunggu Verifikasi',
    icon: Clock,
    iconColor: 'text-blue-400',
    badgeBg: 'bg-blue-500/10 border-blue-500/20',
    badgeText: 'text-blue-400',
    glowColor: 'rgba(59,130,246,0.15)',
    accentColor: '#60a5fa',
  },
  rejected: {
    label: 'Bukti Ditolak',
    icon: XCircle,
    iconColor: 'text-rose-400',
    badgeBg: 'bg-rose-500/10 border-rose-500/20',
    badgeText: 'text-rose-400',
    glowColor: 'rgba(251,113,133,0.15)',
    accentColor: '#fb7185',
  },
};

const ORDER_STATUS_CONFIG: Record<
  Order['status'],
  {
    label: string;
    badgeStyle: string;
  }
> = {
  pending: {
    label: 'Menunggu',
    badgeStyle: 'bg-amber-500/10 text-amber-400 border-amber-500/20',
  },
  confirmed: {
    label: 'Dikonfirmasi',
    badgeStyle: 'bg-cyan-500/10 text-cyan-400 border-cyan-500/20',
  },
  processing: {
    label: 'Diproses',
    badgeStyle: 'bg-blue-500/10 text-blue-400 border-blue-500/20',
  },
  shipped: {
    label: 'Dikirim',
    badgeStyle: 'bg-violet-500/10 text-violet-400 border-violet-500/20',
  },
  delivered: {
    label: 'Terkirim',
    badgeStyle: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
  },
  completed: {
    label: 'Selesai',
    badgeStyle: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
  },
  cancelled: {
    label: 'Dibatalkan',
    badgeStyle: 'bg-rose-500/10 text-rose-400 border-rose-500/20',
  },
  refunded: {
    label: 'Dikembalikan',
    badgeStyle: 'bg-fuchsia-500/10 text-fuchsia-400 border-fuchsia-500/20',
  },
};

// ── Shared UI Components ───────────────────────────────────────────────
function GlassCard({
  children,
  className,
  delay = 0,
  glowColor,
  id,
}: {
  children: React.ReactNode;
  className?: string;
  delay?: number;
  glowColor?: string;
  id?: string;
}) {
  return (
    <motion.div
      id={id}
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay, duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
      className={cn(
        'relative bg-white/60 backdrop-blur-xl border border-gray-200 rounded-3xl overflow-hidden shadow-sm',
        className
      )}
    >
      {glowColor && (
        <div
          className="absolute top-0 left-0 w-full h-32 opacity-20 pointer-events-none"
          style={{
            background: `radial-gradient(ellipse at top center, ${glowColor} 0%, transparent 70%)`,
          }}
        />
      )}
      {children}
    </motion.div>
  );
}

function SectionHeader({
  icon: Icon,
  label,
}: {
  icon: React.ElementType;
  label: string;
}) {
  return (
    <div className="flex items-center gap-3 px-6 sm:px-8 py-5 border-b border-gray-200/50 bg-white/40">
      <div className="p-2 bg-yellow-50 border border-yellow-200 rounded-xl shadow-sm">
        <Icon className="w-4 h-4 text-yellow-600" />
      </div>
      <span className="text-sm font-bold text-gray-900 tracking-wide">
        {label}
      </span>
    </div>
  );
}

function CopyButton({ text }: { text: string }) {
  const [copied, setCopied] = useState(false);
  const handleCopy = () => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };
  return (
    <button
      onClick={handleCopy}
      className={cn(
        'flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-[10px] font-bold uppercase tracking-widest transition-all',
        copied
          ? 'bg-emerald-50 border-emerald-200 text-emerald-600'
          : 'bg-white border-gray-200 text-gray-600 hover:text-gray-900 hover:bg-gray-50'
      )}
    >
      {copied ? (
        <CheckCircle2 className="w-3.5 h-3.5" />
      ) : (
        <Copy className="w-3.5 h-3.5" />
      )}
      {copied ? 'Disalin' : 'Salin'}
    </button>
  );
}

function PaymentInstructions({
  method,
  provider,
  pdfUrl,
}: {
  method?: string;
  provider?: string;
  pdfUrl?: string;
}) {
  if (pdfUrl) {
    return (
      <div className="mt-6 pt-6 border-t border-gray-200/50">
        <h4 className="text-sm font-bold text-gray-900 mb-3">
          Tata Cara Pembayaran
        </h4>
        <a
          href={pdfUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-2 text-sm text-yellow-600 hover:text-yellow-700 font-medium bg-yellow-50 px-4 py-2 rounded-xl transition-colors"
        >
          <ExternalLink className="w-4 h-4" />
          Lihat Instruksi Pembayaran
        </a>
      </div>
    );
  }

  let instructions: string[] = [];

  if (method === 'qris') {
    instructions = [
      'Buka aplikasi e-wallet atau mobile banking yang mendukung QRIS.',
      'Pilih menu Scan QR.',
      'Scan QR Code yang ditampilkan di atas.',
      'Periksa detail nama merchant dan nominal pembayaran.',
      'Masukkan PIN Anda untuk menyelesaikan pembayaran.',
    ];
  } else if (method === 'retail_outlet') {
    instructions = [
      `Kunjungi gerai ${provider ? provider.toUpperCase() : 'mitra ritel'} terdekat.`,
      'Beritahu kasir Anda ingin melakukan pembayaran transaksi online.',
      'Tunjukkan Kode Pembayaran kepada kasir.',
      'Lakukan pembayaran sesuai dengan total tagihan.',
      'Simpan struk pembayaran sebagai bukti yang sah.',
    ];
  } else if (method === 'ewallet') {
    instructions = [
      'Buka aplikasi e-wallet Anda.',
      'Periksa notifikasi atau menu pembayaran tertunda.',
      'Periksa kembali nominal tagihan.',
      'Masukkan PIN e-wallet untuk menyelesaikan pembayaran.',
    ];
  } else if (method === 'virtual_account' || method === 'bank_transfer') {
    const bankName = provider ? provider.toUpperCase() : 'Bank';
    instructions = [
      `Login ke aplikasi mobile banking atau ATM ${bankName}.`,
      `Pilih menu Transfer > Virtual Account ${bankName}.`,
      'Masukkan Nomor Virtual Account di atas.',
      'Pastikan nama merchant dan nominal tagihan sudah sesuai.',
      'Selesaikan pembayaran dengan memasukkan PIN/Password transaksi Anda.',
    ];
  } else if (method === 'manual_qris') {
    instructions = [
      'Buka aplikasi e-wallet atau mobile banking yang mendukung QRIS.',
      'Pilih menu Scan QR dan scan gambar QRIS di atas.',
      'Masukkan **Total Transfer** dengan benar (termasuk kode unik 3 digit).',
      'Selesaikan pembayaran dan simpan bukti transfer.',
      'Upload bukti transfer pada form yang disediakan di halaman ini. Silakan upload bukti transfer yang tidak blur.',
      'Tunggu admin kami untuk memverifikasi pembayaran Anda (Maks 1x24 Jam).',
    ];
  } else {
    return null;
  }

  return (
    <div className="mt-6 pt-6 border-t border-gray-200/50">
      <h4 className="text-sm font-bold text-gray-900 mb-4">
        Tata Cara Pembayaran
      </h4>
      <ol className="space-y-4 relative before:absolute before:inset-y-0 before:left-3 before:w-0.5 before:bg-gray-100 pl-10">
        {instructions.map((step, index) => (
          <li key={index} className="relative text-sm text-gray-600">
            <span className="absolute -left-10 w-6 h-6 rounded-full bg-yellow-50 text-yellow-600 font-bold text-xs flex items-center justify-center border border-yellow-200 z-10">
              {index + 1}
            </span>
            {step}
          </li>
        ))}
      </ol>
    </div>
  );
}

// ── Page ───────────────────────────────────────────────────────────────
interface Props {
  params: Promise<{ orderNumber: string }>;
}

export default function OrderDetailPage({ params }: Props) {
  const { orderNumber } = use(params);
  const { data: order, isLoading } = useOrderDetail(orderNumber);
  const { data: payment } = usePaymentStatus(order?.id ?? '');
  const retryPayment = useRetryPayment();
  const uploadProof = useUploadPaymentProof();

  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);

  // Handle file change
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
      if (file.size > 5 * 1024 * 1024) {
        toast.error('Ukuran file maksimal 5MB');
        return;
      }
      setSelectedFile(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreviewUrl(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleCancelProof = () => {
    setSelectedFile(null);
    setPreviewUrl(null);
  };

  const handleSubmitProof = () => {
    if (selectedFile) {
      uploadProof.mutate(
        { orderNumber, file: selectedFile },
        {
          onSuccess: () => {
            setSelectedFile(null);
            setPreviewUrl(null);
          },
        }
      );
    }
  };

  // ── Loading ──────────────────────────────────────────────────────────
  if (isLoading) {
    return (
      <div className="max-w-3xl mx-auto space-y-6 pt-8 relative z-10">
        {[1, 2, 3].map((i) => (
          <div
            key={i}
            className="bg-white/40 border border-gray-200 rounded-3xl animate-pulse"
            style={{ height: i === 1 ? 140 : i === 2 ? 240 : 300 }}
          />
        ))}
      </div>
    );
  }

  // ── Not found ────────────────────────────────────────────────────────
  if (!order) {
    return (
      <div className="max-w-3xl mx-auto text-center py-24 relative z-10">
        <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
          <Package className="w-10 h-10 text-gray-400" />
        </div>
        <h2 className="font-black text-gray-900 text-2xl tracking-tight mb-2">
          Pesanan Tidak Ditemukan
        </h2>
        <p className="text-gray-500 text-sm mb-6">
          Pesanan yang Anda cari mungkin salah atau telah dihapus.
        </p>
        <Link
          href="/dashboard/user/orders"
          className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-yellow-400 text-gray-900 font-bold text-sm transition-all hover:bg-yellow-500 shadow-sm"
        >
          <ArrowLeft className="w-4 h-4" /> Kembali ke Daftar Pesanan
        </Link>
      </div>
    );
  }

  const paymentStatus = (payment?.status ??
    order.payment?.status ??
    'waiting') as PaymentStatusKey;
  const paymentCfg =
    PAYMENT_STATUS_CONFIG[paymentStatus] ?? PAYMENT_STATUS_CONFIG.waiting;
  const orderCfg = ORDER_STATUS_CONFIG[order.status];
  const canRetry = paymentStatus === 'failed' || paymentStatus === 'expired';
  const PayIcon = paymentCfg.icon;

  return (
    <div className="min-h-screen text-gray-900 relative overflow-hidden pb-20">
      <div className="relative z-10 max-w-4xl mx-auto space-y-6 pt-10 sm:pt-16">
        {/* ── Breadcrumb & Header ── */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 relative z-20"
        >
          <div className="absolute top-0 right-10 pointer-events-none hidden md:block z-0">
            {}
            <Image
              src="/mascots/capt-yodi.avif"
              alt="Captain Yodi Pointing"
              className="w-32 h-32 object-contain"
              width={500}
              height={500}
            />
          </div>
          <div className="relative z-10">
            <Link
              href="/dashboard/user/orders"
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-md border border-gray-200 text-xs font-bold text-gray-500 hover:bg-yellow-50 hover:border-yellow-200 hover:text-yellow-600 transition-all mb-4 group shadow-sm"
            >
              <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />{' '}
              Kembali
            </Link>
            <h2 className="text-3xl font-black text-gray-900 tracking-tight leading-none mb-2">
              Detail <span className="text-yellow-500">Pesanan</span>
            </h2>
            <div className="flex items-center gap-3">
              <p className="text-xs font-bold font-mono text-gray-500 uppercase tracking-widest bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-md">
                {order.order_number}
              </p>
              <div
                className={cn(
                  'flex items-center gap-1.5 px-3 py-1 border rounded-full',
                  orderCfg.badgeStyle
                )}
              >
                <span className="w-1.5 h-1.5 rounded-full bg-current" />
                <span className="text-[10px] font-bold uppercase tracking-widest">
                  {orderCfg.label}
                </span>
              </div>
            </div>
          </div>
        </motion.div>

        {/* ── Payment Status Banner ── */}
        <GlassCard delay={0.05} glowColor={paymentCfg.accentColor}>
          <div className="relative flex flex-col sm:flex-row sm:items-center justify-between gap-5 p-6 sm:p-8">
            <div className="flex items-center gap-4">
              <div
                className={cn(
                  'w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 border bg-white backdrop-blur-md shadow-sm',
                  paymentCfg.badgeBg
                )}
              >
                <PayIcon className={cn('w-6 h-6', paymentCfg.iconColor)} />
              </div>
              <div>
                <p
                  className={cn(
                    'text-lg font-black tracking-wide mb-1',
                    paymentCfg.iconColor
                  )}
                >
                  {paymentCfg.label}
                </p>
                {/* Update: Munculkan waktu kedaluwarsa untuk 'waiting' dan 'pending' */}
                {payment?.expired_at &&
                  (paymentStatus === 'pending' ||
                    paymentStatus === 'waiting') && (
                    <p className="text-xs font-medium text-gray-500">
                      Selesaikan sebelum{' '}
                      <strong className="text-gray-900">
                        {formatDate(payment.expired_at, {
                          day: 'numeric',
                          month: 'short',
                          hour: '2-digit',
                          minute: '2-digit',
                        })}
                      </strong>
                    </p>
                  )}
                {paymentStatus === 'paid' && (
                  <p className="text-xs font-medium text-gray-500">
                    Terima kasih, pembayaran Anda telah kami terima.
                  </p>
                )}
              </div>
            </div>

            {/* Points Earned Badge */}
            {order.points_earned && order.points_earned > 0 && (
              <div
                className={cn(
                  'flex items-center gap-2 px-4 py-2.5 rounded-xl border shrink-0',
                  paymentStatus === 'paid'
                    ? 'bg-yellow-50 border-yellow-200'
                    : 'bg-white/60 border-gray-200'
                )}
              >
                <span className="text-lg">⭐</span>
                <div>
                  <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest leading-none">
                    {paymentStatus === 'paid'
                      ? 'Poin Diterima'
                      : 'Poin yang didapatkan'}
                  </p>
                  <p className="text-sm font-black text-yellow-600 leading-none mt-0.5">
                    +{order.points_earned} Poin
                  </p>
                </div>
              </div>
            )}

            {/* ── CTA Buttons (Highlight) ── */}
            <div className="flex flex-wrap items-center gap-3 w-full sm:w-auto mt-2 sm:mt-0">
              {/* Update: Munculkan tombol bayar untuk 'waiting' ATAU 'pending' */}
              {(paymentStatus === 'pending' || paymentStatus === 'waiting') &&
                (order.payment?.payment_url ? (
                  <a
                    href={order.payment.payment_url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-full sm:w-auto flex items-center justify-center gap-2 px-6 py-3.5 bg-yellow-400 hover:bg-yellow-500 text-gray-900 rounded-xl font-bold text-sm tracking-wide transition-all shadow-sm animate-pulse hover:animate-none"
                  >
                    Bayar Sekarang <ExternalLink className="w-4 h-4" />
                  </a>
                ) : (
                  <a
                    href="#info-transfer"
                    className="w-full sm:w-auto flex items-center justify-center gap-2 px-6 py-3.5 bg-yellow-400 hover:bg-yellow-500 text-gray-900 rounded-xl font-bold text-sm tracking-wide transition-all shadow-sm animate-pulse hover:animate-none"
                  >
                    Lihat Cara Bayar <ChevronDown className="w-4 h-4" />
                  </a>
                ))}
              {canRetry && payment?.expired_at && (
                <button
                  onClick={() =>
                    retryPayment.mutate({
                      orderNumber: order.order_number,
                      payload: {
                        payment_method:
                          order.payment_method ?? 'virtual_account',
                        payment_provider: order.payment_provider,
                      },
                    })
                  }
                  disabled={retryPayment.isPending}
                  className="w-full sm:w-auto flex items-center justify-center gap-2 px-6 py-3.5 border-2 border-yellow-200 hover:border-yellow-400 hover:bg-yellow-50 text-yellow-600 rounded-xl font-bold text-sm transition-all disabled:opacity-50"
                >
                  <RefreshCw
                    className={cn(
                      'w-4 h-4',
                      retryPayment.isPending && 'animate-spin'
                    )}
                  />
                  {retryPayment.isPending ? 'Memproses...' : 'Coba Bayar Ulang'}
                </button>
              )}
            </div>
          </div>
        </GlassCard>

        {/* ── Payment Info (VA / pending / waiting / manual QRIS) ── */}
        {payment &&
          (paymentStatus === 'pending' ||
            paymentStatus === 'waiting' ||
            paymentStatus === 'awaiting_verification' ||
            paymentStatus === 'rejected') && (
            <GlassCard delay={0.08} id="info-transfer">
              <SectionHeader icon={CreditCard} label="Informasi Pembayaran" />
              <div className="p-6 sm:p-8 space-y-4 text-sm">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 p-4 bg-gray-50 rounded-2xl border border-gray-200">
                  <span className="font-medium text-gray-500">
                    Total Tagihan
                  </span>
                  <span className="text-2xl font-black text-yellow-600">
                    {formatIDR(
                      payment.manual_qris_transfer_amount ??
                        order.payment?.amount ??
                        order.total
                    )}
                  </span>
                </div>
                {payment.manual_qris_unique_code && (
                  <div className="flex items-center justify-between border-b border-gray-200/50 pb-4 px-2">
                    <span className="font-medium text-gray-500">Kode Unik</span>
                    <span className="font-bold text-gray-900">
                      +{payment.manual_qris_unique_code}
                    </span>
                  </div>
                )}
                <div className="flex items-center justify-between border-b border-gray-200/50 pb-4 px-2">
                  <span className="font-medium text-gray-500">Metode</span>
                  <span className="font-bold text-gray-900">
                    {PAYMENT_METHOD_LABELS[order.payment?.method ?? ''] ??
                      order.payment?.method ??
                      '-'}
                  </span>
                </div>
                {payment.bank_code && (
                  <div className="flex items-center justify-between border-b border-gray-200/50 pb-4 px-2">
                    <span className="font-medium text-gray-500">
                      Bank Tujuan
                    </span>
                    <span className="font-bold text-gray-900 uppercase">
                      {payment.bank_code}
                    </span>
                  </div>
                )}
                {payment.virtual_account_number && (
                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-2 pt-2">
                    <span className="font-medium text-gray-500">
                      No. Virtual Account
                    </span>
                    <div className="flex items-center gap-3">
                      <span className="font-mono font-black text-lg text-gray-900 tracking-widest">
                        {payment.virtual_account_number}
                      </span>
                      <CopyButton text={payment.virtual_account_number} />
                    </div>
                  </div>
                )}
                {payment.payment_code && !payment.virtual_account_number && (
                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-2 pt-2">
                    <span className="font-medium text-gray-500">
                      Kode Pembayaran
                    </span>
                    <div className="flex items-center gap-3">
                      <span className="font-mono font-black text-lg text-gray-900 tracking-widest">
                        {payment.payment_code}
                      </span>
                      <CopyButton text={payment.payment_code} />
                    </div>
                  </div>
                )}
                {(payment.qr_string || payment.manual_qris_qr_image) && (
                  <div className="flex flex-col items-center gap-3 px-2 pt-4">
                    <span className="font-medium text-gray-500">
                      Scan QR Code
                    </span>
                    <Image
                      src={payment.qr_string || payment.manual_qris_qr_image!}
                      alt="QR Code"
                      width={250}
                      height={250}
                      unoptimized={true}
                      className="w-48 h-48 sm:w-64 sm:h-64 object-contain border border-gray-200 rounded-xl"
                    />
                  </div>
                )}
                <PaymentInstructions
                  method={order.payment?.method}
                  provider={
                    order.payment?.provider ??
                    payment.bank_code ??
                    (payment.instructions as any)?.retailer ??
                    (payment.instructions as any)?.provider
                  }
                  pdfUrl={(order.payment?.gateway_metadata as any)?.pdf_url}
                />

                {/* ── Form Upload Bukti (Manual QRIS) ── */}
                {order.payment?.method === 'manual_qris' &&
                  (paymentStatus === 'waiting' ||
                    paymentStatus === 'rejected') && (
                    <div className="mt-6 pt-6 border-t border-gray-200/50">
                      {paymentStatus === 'rejected' &&
                        payment.manual_qris_rejection_reason && (
                          <div className="mb-4 p-4 bg-rose-50 border border-rose-200 rounded-xl">
                            <p className="text-sm font-bold text-rose-700 mb-1">
                              Bukti Pembayaran Ditolak
                            </p>
                            <p className="text-sm text-rose-600">
                              Alasan: {payment.manual_qris_rejection_reason}
                            </p>
                            <p className="text-xs text-rose-500 mt-2">
                              Silakan unggah kembali bukti transfer yang benar.
                            </p>
                          </div>
                        )}

                      <h4 className="text-sm font-bold text-gray-900 mb-2">
                        Upload Bukti Transfer
                      </h4>
                      <p className="text-xs text-gray-500 mb-4">
                        Format JPG, PNG, WEBP (Maks 5MB)
                      </p>

                      {!selectedFile ? (
                        <div className="relative group">
                          <input
                            type="file"
                            accept="image/*"
                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10 disabled:cursor-not-allowed"
                            onChange={handleFileChange}
                            disabled={uploadProof.isPending}
                          />
                          <div
                            className={cn(
                              'w-full flex flex-col items-center justify-center gap-2 p-6 border-2 border-dashed rounded-2xl transition-all',
                              uploadProof.isPending
                                ? 'bg-gray-50 border-gray-300'
                                : 'bg-white border-yellow-300 group-hover:border-yellow-500 group-hover:bg-yellow-50'
                            )}
                          >
                            <div className="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
                              <Upload className="w-5 h-5 group-hover:-translate-y-1 transition-transform" />
                            </div>
                            <span className="text-sm font-bold text-gray-700">
                              Klik atau Drop file di sini
                            </span>
                          </div>
                        </div>
                      ) : (
                        <div className="flex flex-col gap-4 mt-2">
                          <div className="flex items-center gap-4 p-4 border border-gray-200 rounded-xl bg-gray-50">
                            {previewUrl ? (
                              <img
                                src={previewUrl}
                                alt="Preview"
                                className="w-16 h-16 object-cover rounded-lg border border-gray-200"
                              />
                            ) : (
                              <div className="w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center border border-gray-300">
                                <StickyNote className="w-6 h-6 text-gray-400" />
                              </div>
                            )}
                            <div className="flex-1 min-w-0">
                              <p className="text-sm font-bold text-gray-900 truncate">
                                {selectedFile.name}
                              </p>
                              <p className="text-xs text-gray-500">
                                {(selectedFile.size / 1024 / 1024).toFixed(2)}{' '}
                                MB
                              </p>
                            </div>
                            <button
                              type="button"
                              onClick={handleCancelProof}
                              disabled={uploadProof.isPending}
                              className="p-2 text-gray-400 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-colors disabled:opacity-50"
                            >
                              <XCircle className="w-5 h-5" />
                            </button>
                          </div>

                          <button
                            onClick={handleSubmitProof}
                            disabled={uploadProof.isPending}
                            className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-yellow-400 hover:bg-yellow-500 text-gray-900 rounded-xl font-bold text-sm transition-all disabled:opacity-50 shadow-sm"
                          >
                            {uploadProof.isPending ? (
                              <>
                                <RefreshCw className="w-4 h-4 animate-spin" />
                                Mengunggah...
                              </>
                            ) : (
                              'Kirim Bukti Transfer'
                            )}
                          </button>
                        </div>
                      )}
                    </div>
                  )}

                {/* Info Menunggu Verifikasi */}
                {order.payment?.method === 'manual_qris' &&
                  paymentStatus === 'awaiting_verification' && (
                    <div className="mt-6 pt-6 border-t border-gray-200/50">
                      <div className="p-4 bg-blue-50 border border-blue-200 rounded-xl flex items-start gap-3">
                        <CheckCircle2 className="w-5 h-5 text-blue-500 shrink-0 mt-0.5" />
                        <div>
                          <p className="text-sm font-bold text-blue-700">
                            Bukti Transfer Terkirim
                          </p>
                          <p className="text-sm text-blue-600 mt-1">
                            Admin kami sedang memverifikasi pembayaran Anda.
                            Mohon tunggu maksimal 1x24 jam.
                          </p>
                        </div>
                      </div>
                    </div>
                  )}
              </div>
            </GlassCard>
          )}

        <div className="grid lg:grid-cols-3 gap-6">
          {/* ── Left Column: Items ── */}
          <div className="lg:col-span-2 space-y-6">
            <GlassCard delay={0.1}>
              <SectionHeader icon={Package} label="Daftar Produk" />
              <div className="divide-y divide-gray-200/50 p-2">
                {(order.items ?? []).map((item) => (
                  <div
                    key={item.id}
                    className="flex items-center gap-4 p-4 rounded-2xl hover:bg-gray-50 transition-colors"
                  >
                    <div className="w-16 h-16 rounded-xl bg-white border border-gray-200 flex items-center justify-center shrink-0 overflow-hidden shadow-sm">
                      {item.image_url ? (
                        <Image
                          src={item.image_url}
                          alt="product"
                          className="w-full h-full object-cover"
                          width={500}
                          height={500}
                        />
                      ) : (
                        <Package className="w-6 h-6 text-gray-400" />
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-bold text-gray-900 tracking-wide truncate">
                        {item.variant?.product?.name ?? 'Produk Garam'}
                      </p>
                      <p className="text-[11px] font-medium text-gray-500 mt-0.5">
                        Varian: {item.variant?.name}{' '}
                        <span className="font-bold text-gray-900 ml-1">
                          × {item.quantity}
                        </span>
                      </p>
                    </div>
                    <span className="text-sm font-black text-gray-900 shrink-0">
                      {formatIDR(item.subtotal)}
                    </span>
                  </div>
                ))}
              </div>

              <div className="border-t border-gray-200/50 bg-gray-50/50 p-6 sm:p-8 space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium text-gray-500">
                    Subtotal Produk
                  </span>
                  <span className="text-sm font-bold text-gray-900">
                    {formatIDR(order.subtotal ?? 0)}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium text-gray-500">
                    Ongkos Kirim
                  </span>
                  <span className="text-sm font-bold text-gray-900">
                    {formatIDR(order.shipping_cost ?? order.shipping_fee ?? 0)}
                  </span>
                </div>
                {(order.discount ?? 0) > 0 && (
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-medium text-gray-500">
                      Diskon
                    </span>
                    <span className="text-sm font-bold text-emerald-600">
                      – {formatIDR(order.discount ?? 0)}
                    </span>
                  </div>
                )}
                {payment?.manual_qris_unique_code && (
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-medium text-gray-500">
                      Kode Unik
                    </span>
                    <span className="text-sm font-bold text-gray-900">
                      +{payment.manual_qris_unique_code}
                    </span>
                  </div>
                )}
                <div className="h-px bg-gray-200 my-3" />
                <div className="flex items-center justify-between">
                  <span className="text-sm font-bold text-gray-700">
                    Total Keseluruhan
                  </span>
                  <span className="text-xl font-black text-yellow-600">
                    {formatIDR(
                      Number(order.total) +
                        Number(payment?.manual_qris_unique_code || 0)
                    )}
                  </span>
                </div>

                {/* Points Earned Row */}
                {order.points_earned != null && order.points_earned > 0 && (
                  <div className="flex items-center justify-between mt-3 pt-3 border-t border-dashed border-yellow-200">
                    <span className="text-xs font-bold text-yellow-600 flex items-center gap-1.5">
                      ⭐{' '}
                      {paymentStatus === 'paid'
                        ? 'Poin Diterima'
                        : 'Poin yang didapatkan'}
                    </span>
                    <span className="text-sm font-black text-yellow-600">
                      +{order.points_earned} Poin
                    </span>
                  </div>
                )}
              </div>
            </GlassCard>
          </div>

          {/* ── Right Column: Shipping Info ── */}
          <div className="space-y-6">
            <GlassCard delay={0.15}>
              <SectionHeader icon={MapPin} label="Informasi Pengiriman" />
              <div className="p-6 sm:p-8 space-y-6">
                <div>
                  <div className="flex items-center gap-2 mb-2">
                    <User className="w-4 h-4 text-yellow-600" />
                    <span className="text-xs font-bold text-gray-500 tracking-wide">
                      Penerima
                    </span>
                  </div>
                  <p className="text-sm font-bold text-gray-900">
                    {order.shipping_address?.recipient_name}
                  </p>
                  <p className="text-xs text-gray-500 mt-1">{order.phone}</p>
                </div>

                <div>
                  <div className="flex items-center gap-2 mb-2">
                    <MapPin className="w-4 h-4 text-yellow-600" />
                    <span className="text-xs font-bold text-gray-500 tracking-wide">
                      Alamat
                    </span>
                  </div>
                  <p className="text-sm font-medium text-gray-900 leading-relaxed">
                    {order.shipping_address?.address},{' '}
                    {order.shipping_address?.village},{' '}
                    {order.shipping_address?.district},{' '}
                    {order.shipping_address?.city},{' '}
                    {order.shipping_address?.province}{' '}
                    {order.shipping_address?.postal_code}
                  </p>
                </div>

                <div>
                  <div className="flex items-center gap-2 mb-2">
                    <Truck className="w-4 h-4 text-yellow-600" />
                    <span className="text-xs font-bold text-gray-500 tracking-wide">
                      Layanan Kurir
                    </span>
                  </div>
                  <p className="text-sm font-bold text-gray-900 uppercase">
                    {order.shipping_courier}{' '}
                    <span className="text-gray-500 font-medium capitalize">
                      — {order.shipping_service}
                    </span>
                  </p>
                </div>

                {order.customer_notes && (
                  <div className="pt-4 border-t border-gray-200/50">
                    <div className="flex items-center gap-2 mb-2">
                      <StickyNote className="w-4 h-4 text-yellow-600" />
                      <span className="text-xs font-bold text-gray-500 tracking-wide">
                        Catatan Pesanan
                      </span>
                    </div>
                    <p className="text-sm font-medium text-gray-700 bg-gray-50 p-3 rounded-xl border border-gray-200">
                      {order.customer_notes}
                    </p>
                  </div>
                )}
              </div>
            </GlassCard>
          </div>
        </div>

        {/* ── Footer timestamp ── */}
        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.3 }}
          className="text-xs font-medium text-gray-500 text-center pt-8"
        >
          Dibuat pada{' '}
          {formatDate(order.created_at, {
            day: 'numeric',
            month: 'long',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
          })}
        </motion.p>
      </div>
    </div>
  );
}