'use client';

import Link from 'next/link';
import { use, useMemo, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  ArrowLeft,
  CheckCircle2,
  Loader2,
  PackageSearch,
  ShoppingCart,
  Truck,
  CreditCard,
  MapPin,
  Clock,
  XCircle,
  RotateCcw,
  ShieldCheck,
  ChevronDown,
  StickyNote,
  Package,
  MessageCircle,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  useAddOrderNote,
  useAdminOrder,
  useUpdateOrderStatus,
} from '@/hooks/useAdmin';
import { formatDate, formatIDR, cn } from '@/lib/utils';
import { OrderStatus } from '@/types';

// ── Status Config & Mapping ────────────────────────────────────────────
const STATUS_LABEL: Record<OrderStatus, string> = {
  pending: 'Menunggu Pembayaran',
  confirmed: 'Pembayaran Diterima',
  processing: 'Sedang Diproses',
  shipped: 'Dalam Pengiriman',
  delivered: 'Sudah Diterima',
  completed: 'Selesai',
  cancelled: 'Dibatalkan',
  refunded: 'Dikembalikan',
};

const ORDER_TRANSITIONS: Record<OrderStatus, OrderStatus[]> = {
  pending: ['confirmed', 'cancelled'],
  confirmed: ['processing', 'cancelled'],
  processing: ['shipped', 'cancelled'],
  shipped: ['delivered'],
  delivered: ['completed', 'refunded'],
  completed: [],
  cancelled: [],
  refunded: [],
};

const STATUS_CONFIG: Record<
  OrderStatus,
  {
    label: string;
    icon: React.ElementType;
    iconColor: string;
    badgeBg: string;
    badgeText: string;
    badgeBorder: string;
    dot: string;
    glowColor: string;
  }
> = {
  pending: {
    label: 'Menunggu',
    icon: Clock,
    iconColor: 'text-amber-400',
    badgeBg: 'bg-amber-500/10',
    badgeText: 'text-amber-400',
    badgeBorder: 'border-amber-500/20',
    dot: 'bg-amber-400',
    glowColor: 'rgba(245,158,11,0.15)',
  },
  confirmed: {
    label: 'Dikonfirmasi',
    icon: ShieldCheck,
    iconColor: 'text-cyan-400',
    badgeBg: 'bg-cyan-500/10',
    badgeText: 'text-cyan-400',
    badgeBorder: 'border-cyan-500/20',
    dot: 'bg-cyan-400',
    glowColor: 'rgba(6,182,212,0.15)',
  },
  processing: {
    label: 'Diproses',
    icon: Package,
    iconColor: 'text-blue-400',
    badgeBg: 'bg-blue-500/10',
    badgeText: 'text-blue-400',
    badgeBorder: 'border-blue-500/20',
    dot: 'bg-blue-400',
    glowColor: 'rgba(59,130,246,0.15)',
  },
  shipped: {
    label: 'Dikirim',
    icon: Truck,
    iconColor: 'text-violet-400',
    badgeBg: 'bg-violet-500/10',
    badgeText: 'text-violet-400',
    badgeBorder: 'border-violet-500/20',
    dot: 'bg-violet-400',
    glowColor: 'rgba(139,92,246,0.15)',
  },
  delivered: {
    label: 'Terkirim',
    icon: CheckCircle2,
    iconColor: 'text-emerald-400',
    badgeBg: 'bg-emerald-500/10',
    badgeText: 'text-emerald-400',
    badgeBorder: 'border-emerald-500/20',
    dot: 'bg-emerald-400',
    glowColor: 'rgba(52,211,153,0.15)',
  },
  completed: {
    label: 'Selesai',
    icon: CheckCircle2,
    iconColor: 'text-emerald-400',
    badgeBg: 'bg-emerald-500/10',
    badgeText: 'text-emerald-400',
    badgeBorder: 'border-emerald-500/20',
    dot: 'bg-emerald-400',
    glowColor: 'rgba(52,211,153,0.15)',
  },
  cancelled: {
    label: 'Dibatalkan',
    icon: XCircle,
    iconColor: 'text-rose-400',
    badgeBg: 'bg-rose-500/10',
    badgeText: 'text-rose-400',
    badgeBorder: 'border-rose-500/20',
    dot: 'bg-rose-400',
    glowColor: 'rgba(251,113,133,0.15)',
  },
  refunded: {
    label: 'Dikembalikan',
    icon: RotateCcw,
    iconColor: 'text-fuchsia-400',
    badgeBg: 'bg-fuchsia-500/10',
    badgeText: 'text-fuchsia-400',
    badgeBorder: 'border-fuchsia-500/20',
    dot: 'bg-fuchsia-400',
    glowColor: 'rgba(232,121,249,0.15)',
  },
};

const toNumber = (value: number | string | null | undefined): number =>
  Number(value ?? 0);

// ── Shared UI Components ───────────────────────────────────────────────
function StatusBadge({ status }: { status: OrderStatus }) {
  const cfg = STATUS_CONFIG[status] || STATUS_CONFIG.pending;
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest border rounded-full',
        cfg.badgeBg,
        cfg.badgeText,
        cfg.badgeBorder
      )}
    >
      <span className={cn('w-1.5 h-1.5 rounded-full animate-pulse', cfg.dot)} />
      {cfg.label}
    </span>
  );
}

function GlassCard({
  children,
  className,
  delay = 0,
  glowColor,
}: {
  children: React.ReactNode;
  className?: string;
  delay?: number;
  glowColor?: string;
}) {
  return (
    <motion.div
      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-50 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 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 DarkInput({
  className,
  ...props
}: React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <input
      className={cn(
        'w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-sm font-medium text-gray-900 placeholder:text-gray-400 focus:outline-none focus:border-yellow-400 focus:ring-1 focus:ring-yellow-400 transition-all shadow-sm disabled:opacity-50 disabled:cursor-not-allowed',
        className
      )}
      {...props}
    />
  );
}

function DarkTextarea({
  className,
  ...props
}: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
  return (
    <textarea
      className={cn(
        'w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-sm font-medium text-gray-900 placeholder:text-gray-400 focus:outline-none focus:border-yellow-400 focus:ring-1 focus:ring-yellow-400 transition-all resize-none shadow-sm disabled:opacity-50 disabled:cursor-not-allowed',
        className
      )}
      {...props}
    />
  );
}

function DarkSelect({
  className,
  children,
  ...props
}: React.SelectHTMLAttributes<HTMLSelectElement>) {
  return (
    <div className="relative bg-white border border-gray-200 rounded-xl focus-within:border-yellow-400 focus-within:ring-1 focus-within:ring-yellow-400 transition-all shadow-sm">
      <select
        className={cn(
          'w-full pl-4 pr-10 py-3.5 bg-transparent text-gray-900 text-sm font-medium focus:outline-none tracking-wide appearance-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
          '[&>option]:bg-white [&>option]:text-gray-900',
          className
        )}
        {...props}
      >
        {children}
      </select>
      <div className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
        <ChevronDown className="w-4 h-4 text-gray-400" />
      </div>
    </div>
  );
}

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

export default function AdminOrderDetailPage({ params }: Props) {
  const { orderNumber } = use(params);
  const { data: order, isLoading } = useAdminOrder(orderNumber);
  const updateStatus = useUpdateOrderStatus();
  const addOrderNote = useAddOrderNote();

  const [nextStatus, setNextStatus] = useState<OrderStatus | ''>('');
  const [statusNotes, setStatusNotes] = useState('');
  const [trackingNumber, setTrackingNumber] = useState('');
  const [adminNote, setAdminNote] = useState('');

  const transitionOptions = useMemo(() => {
    if (!order?.status) return [];
    return ORDER_TRANSITIONS[order.status].map((status) => ({
      value: status,
      label: STATUS_LABEL[status],
    }));
  }, [order?.status]);

  const isShippingTransition =
    order?.status === 'processing' && nextStatus === 'shipped';

  const handleUpdateStatus = () => {
    if (!order || !nextStatus) return;
    updateStatus.mutate(
      {
        id: order.id,
        status: nextStatus,
        notes: statusNotes.trim() || undefined,
        tracking_number: trackingNumber.trim() || undefined,
      },
      {
        onSuccess: () => {
          setNextStatus('');
          setStatusNotes('');
        },
      }
    );
  };

  const handleSaveNote = () => {
    if (!order || !adminNote.trim()) return;
    addOrderNote.mutate(
      { id: order.id, notes: adminNote.trim() },
      {
        onSuccess: () => setAdminNote(''),
      }
    );
  };

  // ── Loading ──────────────────────────────────────────────────────────
  if (isLoading) {
    return (
      <div className="max-w-6xl mx-auto space-y-6 pt-6 relative z-10">
        <div className="h-12 w-64 bg-white/60 border border-gray-200 rounded-xl animate-pulse shadow-sm" />
        <div className="grid lg:grid-cols-[1fr_380px] gap-6">
          <div className="h-[400px] w-full bg-white/60 border border-gray-200 rounded-3xl animate-pulse shadow-sm" />
          <div className="h-[600px] w-full bg-white/60 border border-gray-200 rounded-3xl animate-pulse shadow-sm" />
        </div>
      </div>
    );
  }

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

  const orderCfg = STATUS_CONFIG[order.status] ?? STATUS_CONFIG.pending;

  return (
    <div className="min-h-screen bg-transparent text-gray-900 relative overflow-hidden pb-24">
      {/* Background Glow Blobs */}
      <div className="fixed top-0 right-0 w-[500px] h-[500px] bg-yellow-400/10 rounded-full blur-[120px] pointer-events-none z-0" />
      <div className="fixed bottom-1/4 left-0 w-[400px] h-[400px] bg-yellow-400/10 rounded-full blur-[120px] pointer-events-none z-0" />

      <div className="relative z-10 max-w-6xl mx-auto space-y-6 pt-6 px-4 sm:px-6">
        {/* ── 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"
        >
          <div className="flex items-start gap-4">
            <Link
              href="/dashboard/admin/orders"
              className="p-3 rounded-xl bg-white/60 backdrop-blur-md border border-gray-200 text-gray-500 hover:text-gray-900 hover:bg-white transition-all mt-1 shrink-0 shadow-sm"
            >
              <ArrowLeft className="w-5 h-5" />
            </Link>
            <div>
              <h1 className="text-3xl font-black text-gray-900 tracking-tight leading-none mb-3">
                Kelola Pesanan
              </h1>
              <div className="flex items-center gap-3">
                <p className="text-xs font-mono font-bold 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>
            </div>
          </div>
          <div className="ml-14 sm:ml-0">
            <StatusBadge status={order.status} />
          </div>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-[1fr_400px] gap-6 items-start">
          {/* ── LEFT COLUMN ── */}
          <div className="space-y-6">
            {/* Action Status Form */}
            <GlassCard delay={0.05} glowColor={orderCfg.glowColor}>
              <SectionHeader icon={PackageSearch} label="Aksi Status Pesanan" />
              <div className="p-6 sm:p-8 space-y-5">
                {transitionOptions.length > 0 ? (
                  <>
                    {/* ── BANNER PERINGATAN JIKA BELUM DIBAYAR ── */}
                    {order.status === 'pending' && (
                      <div className="flex items-start gap-3 bg-amber-500/10 border border-amber-500/20 p-4 rounded-xl mb-4">
                        <Clock className="w-5 h-5 text-amber-400 shrink-0 mt-0.5" />
                        <p className="text-xs text-amber-400/90 leading-relaxed font-medium">
                          Pesanan ini belum dibayar. Anda tidak dapat
                          melanjutkan proses pesanan selain memilih untuk{' '}
                          <strong>Membatalkan</strong>.
                        </p>
                      </div>
                    )}

                    <div>
                      <label className="block text-xs font-bold text-gray-500 tracking-wide mb-2">
                        Update Status Ke
                      </label>
                      <DarkSelect
                        value={nextStatus}
                        onChange={(e) =>
                          setNextStatus(e.target.value as OrderStatus | '')
                        }
                      >
                        <option value="" disabled>
                          Pilih status berikutnya
                        </option>
                        {transitionOptions.map((opt) => {
                          // ── LOGIK DISABLED OPTION ──
                          // Jika pending, nonaktifkan semua opsi KECUALI 'cancelled'
                          const isDisabled =
                            order.status === 'pending' &&
                            opt.value !== 'cancelled';

                          return (
                            <option
                              key={opt.value}
                              value={opt.value}
                              disabled={isDisabled}
                            >
                              {opt.label}{' '}
                              {isDisabled ? '(Butuh Pembayaran)' : ''}
                            </option>
                          );
                        })}
                      </DarkSelect>
                    </div>

                    {/* ... (AnimatePresence untuk Nomor Resi tetap sama) ... */}
                    <AnimatePresence>
                      {isShippingTransition && (
                        <motion.div
                          initial={{ height: 0, opacity: 0 }}
                          animate={{ height: 'auto', opacity: 1 }}
                          exit={{ height: 0, opacity: 0 }}
                          className="overflow-hidden"
                        >
                          <label className="block text-xs font-bold text-gray-500 tracking-wide mb-2 mt-1">
                            Nomor Resi (Opsional)
                          </label>
                          <DarkInput
                            value={trackingNumber}
                            onChange={(e) => setTrackingNumber(e.target.value)}
                            placeholder="Masukkan nomor resi pengiriman"
                          />
                        </motion.div>
                      )}
                    </AnimatePresence>

                    <div>
                      <label className="block text-xs font-bold text-gray-500 tracking-wide mb-2">
                        Catatan Tambahan (Opsional)
                      </label>
                      <DarkTextarea
                        value={statusNotes}
                        onChange={(e) => setStatusNotes(e.target.value)}
                        placeholder="Catatan perubahan status untuk referensi..."
                        rows={3}
                      />
                    </div>

                    <button
                      onClick={handleUpdateStatus}
                      disabled={!nextStatus || updateStatus.isPending}
                      className="w-full py-4 rounded-xl bg-yellow-400 hover:bg-yellow-500 text-yellow-900 text-sm font-bold uppercase tracking-wider flex items-center justify-center gap-2 transition-all shadow-lg shadow-yellow-400/20 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      {updateStatus.isPending ? (
                        <Loader2 className="w-5 h-5 animate-spin" />
                      ) : (
                        <CheckCircle2 className="w-5 h-5" />
                      )}
                      Update Status Pesanan
                    </button>
                  </>
                ) : (
                  <div className="flex items-start gap-3 bg-emerald-50 border border-emerald-200 p-5 rounded-2xl shadow-sm">
                    {/* ... (Info Status Akhir Tetap Sama) ... */}
                    <CheckCircle2 className="w-5 h-5 text-emerald-600 shrink-0 mt-0.5" />
                    <div>
                      <p className="text-sm font-bold text-emerald-700">
                        Pesanan Selesai / Final
                      </p>
                      <p className="text-xs text-gray-600 mt-1 leading-relaxed">
                        Pesanan ini sudah berada pada status akhir dan tidak
                        memerlukan aksi perubahan status lagi.
                      </p>
                    </div>
                  </div>
                )}
              </div>
            </GlassCard>

            {/* Order Items */}
            <GlassCard delay={0.08}>
              <SectionHeader icon={ShoppingCart} label="Item Pesanan" />
              <div className="p-2 divide-y divide-gray-100">
                {order.items && order.items.length > 0 ? (
                  order.items.map((item) => (
                    <div
                      key={item.id}
                      className="flex items-center gap-4 p-4 rounded-2xl hover:bg-gray-50/50 transition-colors"
                    >
                      <div className="w-14 h-14 rounded-xl bg-gray-50 border border-gray-200 flex items-center justify-center shrink-0 shadow-sm">
                        <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.product_name ??
                            item.variant?.product?.name ??
                            'Produk Garam'}
                        </p>
                        <p className="text-[11px] font-medium text-gray-500 mt-0.5">
                          Varian:{' '}
                          {item.variant_name ?? item.variant?.name ?? '-'}{' '}
                          <span className="font-bold text-gray-900 ml-1">
                            × {item.quantity}
                          </span>
                        </p>
                        <p className="text-[10px] font-mono text-gray-500 mt-1">
                          SKU: {item.sku ?? '-'}
                        </p>
                      </div>
                      <span className="text-sm font-black text-yellow-600 shrink-0">
                        {formatIDR(toNumber(item.subtotal))}
                      </span>
                    </div>
                  ))
                ) : (
                  <p className="text-sm text-gray-500 p-6 text-center">
                    Tidak ada item dalam pesanan ini.
                  </p>
                )}
              </div>
            </GlassCard>

            {/* Timeline */}
            <GlassCard delay={0.1}>
              <SectionHeader icon={Clock} label="Timeline Status" />
              <div className="p-6 sm:p-8">
                {order.timeline && order.timeline.length > 0 ? (
                  <div className="relative border-l-2 border-gray-200 ml-4 space-y-8 pb-4">
                    {order.timeline.map((t) => {
                      const tCfg =
                        STATUS_CONFIG[t.status] || STATUS_CONFIG.pending;
                      const TIcon = tCfg.icon;
                      return (
                        <div
                          key={`${t.status}-${t.at}`}
                          className="relative pl-8"
                        >
                          {/* Timeline Dot */}
                          <div
                            className={cn(
                              'absolute left-[-17px] top-0 w-8 h-8 rounded-full border-4 border-white flex items-center justify-center bg-white shadow-sm',
                              tCfg.badgeText
                            )}
                          >
                            <TIcon className="w-4 h-4" />
                          </div>
                          <div>
                            <div className="flex flex-wrap items-center gap-2 mb-1.5">
                              <span
                                className={cn(
                                  'text-sm font-bold',
                                  tCfg.badgeText
                                )}
                              >
                                {tCfg.label}
                              </span>
                              <span className="text-[10px] font-bold text-gray-500 uppercase tracking-widest bg-gray-100 px-2 py-0.5 rounded-md border border-gray-200">
                                {formatDate(t.at, {
                                  day: 'numeric',
                                  month: 'short',
                                  year: 'numeric',
                                  hour: '2-digit',
                                  minute: '2-digit',
                                })}
                              </span>
                            </div>
                            {t.notes && (
                              <p className="text-xs font-medium text-gray-600 leading-relaxed bg-gray-50 p-3 rounded-xl border border-gray-200 mt-2 shadow-sm">
                                {t.notes}
                              </p>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                ) : (
                  <div className="text-sm text-gray-500 text-center py-6">
                    Belum ada riwayat status.
                  </div>
                )}
              </div>
            </GlassCard>
          </div>

          {/* ── RIGHT COLUMN ── */}
          <div className="space-y-6">
            {/* Summary */}
            <GlassCard delay={0.12}>
              <SectionHeader icon={StickyNote} label="Ringkasan Pesanan" />
              <div className="p-6 sm:p-8 space-y-6">
                <div className="space-y-4 text-sm">
                  <div className="flex items-center justify-between pb-4 border-b border-gray-100">
                    <span className="text-gray-500 font-medium">
                      Total Tagihan
                    </span>
                    <span className="text-xl font-black text-yellow-600">
                      {formatIDR(
                        toNumber(order.total) +
                          toNumber(order.payment?.unique_code || 0)
                      )}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-gray-500 font-medium">
                      Dibuat Pada
                    </span>
                    <span className="font-bold text-gray-900 text-right max-w-[150px]">
                      {formatDate(order.created_at, {
                        day: 'numeric',
                        month: 'short',
                        year: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit',
                      })}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-gray-500 font-medium">
                      Estimasi Tiba
                    </span>
                    <span className="font-bold text-gray-900">
                      {order.estimated_delivery
                        ? formatDate(order.estimated_delivery)
                        : '-'}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-gray-500 font-medium">
                      Resi Pengiriman
                    </span>
                    <span className="font-black text-gray-900 uppercase tracking-widest">
                      {order.tracking_number ?? '-'}
                    </span>
                  </div>
                </div>
              </div>
            </GlassCard>

            {/* Payment Info */}
            <GlassCard delay={0.14}>
              <SectionHeader icon={CreditCard} label="Pembayaran" />
              <div className="p-6 sm:p-8">
                {order.payment ? (
                  <div className="space-y-4 text-sm">
                    <div className="flex justify-between items-center">
                      <span className="text-gray-500 font-medium">Metode</span>
                      <span className="font-bold text-gray-600 bg-gray-100 border border-gray-200 px-2 py-1 rounded-md">
                        {order.payment.method ?? '-'}
                      </span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-500 font-medium">
                        Provider
                      </span>
                      <span className="font-black text-gray-900 uppercase">
                        {order.payment.provider ?? '-'}
                      </span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-500 font-medium">
                        Status Bayar
                      </span>
                      <span
                        className={cn(
                          'font-bold uppercase tracking-widest text-[10px] px-2 py-0.5 rounded-md border',
                          order.payment.status === 'paid'
                            ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
                            : 'bg-amber-50 text-amber-700 border-amber-200'
                        )}
                      >
                        {order.payment.status ?? '-'}
                      </span>
                    </div>
                    {order.payment.payment_code && (
                      <div className="flex justify-between items-center">
                        <span className="text-gray-500 font-medium">
                          Kode Bayar
                        </span>
                        <span className="font-mono font-bold text-gray-900 bg-gray-50 border border-gray-200 px-2 py-1 rounded-md">
                          {order.payment.payment_code}
                        </span>
                      </div>
                    )}
                    <div className="flex justify-between items-center pt-4 border-t border-gray-100">
                      <span className="text-gray-500 font-medium">
                        Dibayar Pada
                      </span>
                      <span className="font-bold text-gray-900">
                        {order.payment.paid_at
                          ? formatDate(order.payment.paid_at, {
                              day: 'numeric',
                              month: 'short',
                              hour: '2-digit',
                              minute: '2-digit',
                            })
                          : '-'}
                      </span>
                    </div>
                  </div>
                ) : (
                  <p className="text-sm text-gray-500 text-center">
                    Data pembayaran tidak tersedia.
                  </p>
                )}
              </div>
            </GlassCard>

            {/* Shipping Info */}
            <GlassCard delay={0.16}>
              <SectionHeader icon={MapPin} label="Alamat Pengiriman" />
              <div className="p-6 sm:p-8">
                {order.shipping_address ? (
                  <div className="space-y-4">
                    <div className="flex items-start justify-between gap-4">
                      <div>
                        <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">
                          Penerima
                        </p>
                        <p className="text-sm font-bold text-gray-900">
                          {order.shipping_address.recipient_name ?? '-'}
                        </p>
                        <p className="text-xs font-medium text-gray-500 mt-0.5">
                          {order.shipping_address.phone ?? '-'}
                        </p>
                      </div>
                      {order.shipping_address.phone && (
                        <Button
                          size="xs"
                          variant="outline"
                          leftIcon={<MessageCircle className="w-3.5 h-3.5" />}
                          onClick={() => {
                            let cleanedPhone =
                              order.shipping_address!.phone!.replace(/\D/g, '');
                            if (cleanedPhone.startsWith('0')) {
                              cleanedPhone = '62' + cleanedPhone.slice(1);
                            }
                            const text = `Halo ${order.shipping_address!.recipient_name}, kami dari Garam Cap Kapal. Terkait pesanan ${order.order_number}, mohon untuk segera menyelesaikan pembayaran Anda.`;
                            window.open(
                              `https://wa.me/${cleanedPhone}?text=${encodeURIComponent(text)}`,
                              '_blank'
                            );
                          }}
                          className="text-green-600 border-green-200 hover:bg-green-50 hover:border-green-300"
                        >
                          Chat WA
                        </Button>
                      )}
                    </div>
                    <div>
                      <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">
                        Alamat Lengkap
                      </p>
                      <p className="text-sm font-medium text-gray-700 leading-relaxed">
                        {order.shipping_address.address ?? '-'},{' '}
                        {order.shipping_address.district ?? '-'}
                        <br />
                        {order.shipping_address.city ?? '-'},{' '}
                        {order.shipping_address.province ?? '-'}{' '}
                        {order.shipping_address.postal_code ?? ''}
                      </p>
                    </div>
                    <div className="pt-4 border-t border-gray-100 flex items-center gap-3">
                      <div className="p-2 bg-gray-50 border border-gray-200 rounded-lg shadow-sm">
                        <Truck className="w-4 h-4 text-gray-500" />
                      </div>
                      <div>
                        <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-0.5">
                          Layanan Kurir
                        </p>
                        <p className="text-sm font-bold text-gray-900 uppercase">
                          {order.shipping_courier ?? '-'}{' '}
                          <span className="text-gray-500 capitalize font-medium">
                            — {order.shipping_service ?? '-'}
                          </span>
                        </p>
                      </div>
                    </div>
                  </div>
                ) : (
                  <p className="text-sm text-gray-500 text-center">
                    Alamat pengiriman tidak tersedia.
                  </p>
                )}
              </div>
            </GlassCard>

            <GlassCard delay={0.18}>
              <SectionHeader icon={StickyNote} label="Catatan Internal Admin" />
              <div className="p-6 sm:p-8 space-y-4">
                <DarkTextarea
                  value={adminNote}
                  onChange={(e) => setAdminNote(e.target.value)}
                  placeholder={
                    order.admin_notes ??
                    'Tulis catatan rahasia untuk pesanan ini...'
                  }
                  rows={4}
                />
                <button
                  onClick={handleSaveNote}
                  disabled={!adminNote.trim() || addOrderNote.isPending}
                  className="w-full py-3.5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 font-bold text-xs uppercase tracking-wider transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-sm"
                >
                  {addOrderNote.isPending ? (
                    <Loader2 className="w-4 h-4 animate-spin" />
                  ) : (
                    <StickyNote className="w-4 h-4 text-gray-500" />
                  )}
                  Simpan Catatan
                </button>
              </div>
            </GlassCard>
          </div>
        </div>
      </div>
    </div>
  );
}