'use client';

import { use, useState } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import {
  ArrowLeft,
  PackageSearch,
  ShoppingCart,
  CreditCard,
  MapPin,
  Image as ImageIcon,
} from 'lucide-react';
import {
  useAdminManualPayments,
  useAdminOrder,
  useApproveManualPayment,
  useRejectManualPayment,
} from '@/hooks/useAdmin';
import { formatIDR, cn } from '@/lib/utils';
import { motion } from 'framer-motion';

// --- Shared Components (simplified for this page) ---
function GlassCard({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        'bg-white/60 backdrop-blur-xl border border-gray-200 rounded-3xl overflow-hidden shadow-sm',
        className
      )}
    >
      {children}
    </div>
  );
}

function SectionHeader({
  icon: Icon,
  label,
}: {
  icon: React.ElementType;
  label: string;
}) {
  return (
    <div className="flex items-center gap-3 px-6 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>
  );
}

// --- Page ---
interface Props {
  params: Promise<{ id: string }>;
}

export default function ManualPaymentDetailPage({ params }: Props) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { id } = use(params);

  // Ambil order_number dari URL query, default ke string kosong
  const orderNumberParam = searchParams.get('order_number') || '';

  // Ambil daftar manual payment dengan filter search orderNumberParam
  const { data: listRes, isLoading: isPaymentLoading } = useAdminManualPayments(
    {
      search: orderNumberParam,
      per_page: 50,
    }
  );

  // Cari payment spesifik berdasarkan ID
  const payment = listRes?.data?.find((p) => p.id === id);

  // Jika orderNumber dari URL kosong, coba gunakan dari data payment yang ditemukan
  const orderNumberToFetch = payment?.order?.order_number || orderNumberParam;

  const { data: order, isLoading: isOrderLoading } =
    useAdminOrder(orderNumberToFetch);

  const approveMutation = useApproveManualPayment();
  const rejectMutation = useRejectManualPayment();

  const [isRejectModalOpen, setIsRejectModalOpen] = useState(false);
  const [rejectReason, setRejectReason] = useState('');

  const isLoading = isPaymentLoading || (payment && isOrderLoading);

  const handleApprove = () => {
    if (confirm('Anda yakin ingin menyetujui pembayaran ini?')) {
      approveMutation.mutate(id, {
        onSuccess: () => {
          router.push('/dashboard/admin/manual-payments');
        },
      });
    }
  };

  const handleReject = () => {
    if (!rejectReason.trim()) {
      alert('Alasan penolakan tidak boleh kosong.');
      return;
    }
    rejectMutation.mutate(
      { paymentId: id, reason: rejectReason },
      {
        onSuccess: () => {
          setIsRejectModalOpen(false);
          router.push('/dashboard/admin/manual-payments');
        },
      }
    );
  };

  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-2 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>
    );
  }

  if (!payment) {
    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">
          Pembayaran Tidak Ditemukan
        </p>
        <Link
          href="/dashboard/admin/manual-payments"
          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
        </Link>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-transparent text-gray-900 relative overflow-hidden pb-24">
      <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 & Actions --- */}
        <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/manual-payments"
              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">
                Detail Pembayaran Manual
              </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: {payment.order?.order_number}
                </p>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <button
              onClick={() => setIsRejectModalOpen(true)}
              disabled={rejectMutation.isPending || approveMutation.isPending}
              className="px-6 py-3 rounded-xl bg-white border border-rose-200 text-rose-600 hover:bg-rose-50 hover:border-rose-300 font-bold text-sm transition-all disabled:opacity-50 shadow-sm"
            >
              Reject
            </button>
            <button
              onClick={handleApprove}
              disabled={approveMutation.isPending || rejectMutation.isPending}
              className="px-6 py-3 rounded-xl bg-emerald-500 hover:bg-emerald-600 text-white font-bold text-sm transition-all disabled:opacity-50 shadow-md shadow-emerald-500/20"
            >
              {approveMutation.isPending ? 'Menyimpan...' : 'Approve'}
            </button>
          </div>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start mt-6">
          {/* --- Image Proof --- */}
          <GlassCard>
            <SectionHeader icon={ImageIcon} label="Bukti Transfer" />
            <div className="p-6">
              <div className="bg-gray-50 rounded-2xl border border-gray-200 p-4 min-h-[400px] flex items-center justify-center overflow-hidden">
                {payment.payment_proof_path ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={`${process.env.NEXT_PUBLIC_API_URL?.replace('/api/v1', '')}/storage/${payment.payment_proof_path}`}
                    alt="Bukti Pembayaran"
                    className="w-full h-auto max-h-[600px] object-contain rounded-xl"
                  />
                ) : (
                  <div className="text-center text-gray-500 flex flex-col items-center">
                    <ImageIcon className="w-12 h-12 mb-3 text-gray-300" />
                    <p>
                      Gambar bukti transfer belum diunggah atau tidak ditemukan.
                    </p>
                  </div>
                )}
              </div>
              <div className="mt-4 flex flex-col gap-2">
                <div className="flex items-center justify-between p-4 bg-yellow-50/50 rounded-xl border border-yellow-100">
                  <span className="text-sm font-medium text-gray-600">
                    Wajib Dibayar
                  </span>
                  <div className="text-right">
                    <span className="text-xl font-black text-yellow-600 block">
                      {formatIDR(payment.amount + (payment.unique_code || 0))}
                    </span>
                    <span className="text-xs text-gray-500">
                      (Termasuk kode unik +{payment.unique_code || 0})
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </GlassCard>

          {/* --- Order Details --- */}
          <div className="space-y-6">
            {order ? (
              <>
                <GlassCard>
                  <SectionHeader icon={ShoppingCart} label="Item Pesanan" />
                  <div className="p-2 divide-y divide-gray-100 max-h-[300px] overflow-y-auto">
                    {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="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'}
                            </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>
                          </div>
                          <span className="text-sm font-black text-gray-900 shrink-0">
                            {formatIDR(Number(item.subtotal || 0))}
                          </span>
                        </div>
                      ))
                    ) : (
                      <p className="text-sm text-gray-500 p-6 text-center">
                        Tidak ada item
                      </p>
                    )}
                  </div>
                </GlassCard>

                <GlassCard>
                  <SectionHeader
                    icon={CreditCard}
                    label="Ringkasan Pembayaran"
                  />
                  <div className="p-6">
                    <div className="space-y-3 text-sm">
                      <div className="flex justify-between items-center">
                        <span className="text-gray-500">Subtotal</span>
                        <span className="font-bold text-gray-900">
                          {formatIDR(Number(order.subtotal || 0))}
                        </span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-gray-500">Ongkos Kirim</span>
                        <span className="font-bold text-gray-900">
                          {formatIDR(Number(order.shipping_fee || 0))}
                        </span>
                      </div>
                      {Number(order.coupon_discount) > 0 && (
                        <div className="flex justify-between items-center text-rose-600">
                          <span>Diskon Kupon</span>
                          <span className="font-bold">
                            -{formatIDR(Number(order.coupon_discount))}
                          </span>
                        </div>
                      )}
                      {Number(order.points_discount) > 0 && (
                        <div className="flex justify-between items-center text-rose-600">
                          <span>Potongan Poin</span>
                          <span className="font-bold">
                            -{formatIDR(Number(order.points_discount))}
                          </span>
                        </div>
                      )}
                      <div className="pt-3 border-t border-gray-100 flex justify-between items-center">
                        <span className="text-gray-500 font-bold">
                          Total Tagihan Order
                        </span>
                        <span className="font-black text-gray-900 text-lg">
                          {formatIDR(
                            Number(order.total || 0) +
                              Number(payment.unique_code || 0)
                          )}
                        </span>
                      </div>
                    </div>
                  </div>
                </GlassCard>

                <GlassCard>
                  <SectionHeader icon={MapPin} label="Info Pengiriman" />
                  <div className="p-6 text-sm">
                    {order.shipping_address ? (
                      <div className="space-y-3">
                        <p className="font-bold text-gray-900">
                          {order.shipping_address.recipient_name}
                          <span className="block text-xs text-gray-500 font-normal mt-0.5">
                            {order.shipping_address.phone}
                          </span>
                        </p>
                        <p className="text-gray-600 leading-relaxed">
                          {order.shipping_address.address},{' '}
                          {order.shipping_address.district}
                          <br />
                          {order.shipping_address.city},{' '}
                          {order.shipping_address.province}
                        </p>
                        <p className="text-xs font-bold text-gray-500 uppercase tracking-widest mt-2">
                          {order.shipping_courier} - {order.shipping_service}
                        </p>
                      </div>
                    ) : (
                      <p className="text-gray-500">Info tidak tersedia</p>
                    )}
                  </div>
                </GlassCard>
              </>
            ) : (
              <div className="p-12 text-center text-gray-500 bg-white/60 backdrop-blur-xl border border-gray-200 rounded-3xl">
                Memuat detail pesanan...
              </div>
            )}
          </div>
        </div>
      </div>

      {/* --- Reject Modal --- */}
      {isRejectModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 backdrop-blur-sm">
          <div className="bg-white rounded-2xl max-w-md w-full p-6 shadow-xl relative animate-in fade-in zoom-in duration-200">
            <h3 className="text-lg font-black text-gray-900 mb-2">
              Tolak Bukti Pembayaran
            </h3>
            <p className="text-sm text-gray-500 mb-4">
              Berikan alasan mengapa bukti ini ditolak (misal: gambar blur,
              nominal tidak sesuai).
            </p>
            <textarea
              value={rejectReason}
              onChange={(e) => setRejectReason(e.target.value)}
              placeholder="Alasan penolakan..."
              className="w-full p-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-rose-500/20 focus:border-rose-500 min-h-[100px] mb-4"
            />
            <div className="flex items-center justify-end gap-3">
              <button
                onClick={() => setIsRejectModalOpen(false)}
                className="px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg"
              >
                Batal
              </button>
              <button
                onClick={handleReject}
                disabled={rejectMutation.isPending || !rejectReason.trim()}
                className="px-4 py-2 text-sm font-bold text-white bg-rose-500 hover:bg-rose-600 rounded-lg disabled:opacity-50"
              >
                {rejectMutation.isPending ? 'Menyimpan...' : 'Tolak Pembayaran'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}