import React, { useState, useMemo } from 'react';
import { useStore } from '../context/StoreContext';
import { Transaction, CartItem, ReturnedItem, ReplacementItem, Product, ProductVariant } from '../types';
import { RotateCcw, Search, Check, AlertCircle, ShoppingBag, DollarSign, ArrowRightLeft, Package, Trash2, Plus, Sparkles, CheckCircle2, Printer, X } from 'lucide-react';

interface ReturnModalProps {
  isOpen: boolean;
  onClose: () => void;
  initialTransaction?: Transaction | null;
}

export const ReturnModal: React.FC<ReturnModalProps> = ({
  isOpen,
  onClose,
  initialTransaction = null
}) => {
  const { db, processSalesReturn } = useStore();

  // State
  const [selectedTrxId, setSelectedTrxId] = useState<string>(initialTransaction?.id || '');
  const [trxSearch, setTrxSearch] = useState<string>('');
  
  // Return items selection state: { [variantId]: { quantity: number, reason: string, condition: 'Layak Jual (Restok)' | 'Rusak / Afkir (Tidak Restok)' } }
  const [returnSelections, setReturnSelections] = useState<{
    [variantId: string]: {
      quantity: number;
      reason: string;
      condition: 'Layak Jual (Restok)' | 'Rusak / Afkir (Tidak Restok)';
    };
  }>({});

  const [returnType, setReturnType] = useState<'Refund Uang' | 'Tukar Barang'>('Refund Uang');
  
  // Replacement items (if Tukar Barang)
  const [replacementItems, setReplacementItems] = useState<ReplacementItem[]>([]);
  const [productSearch, setProductSearch] = useState<string>('');
  const [notes, setNotes] = useState<string>('');
  const [error, setError] = useState<string | null>(null);
  const [successReturnCode, setSuccessReturnCode] = useState<string | null>(null);

  // Sync initialTransaction when opened
  React.useEffect(() => {
    if (initialTransaction) {
      setSelectedTrxId(initialTransaction.id);
    }
  }, [initialTransaction]);

  // Selected Transaction object
  const selectedTrx = useMemo(() => {
    return db.transactions.find(t => t.id === selectedTrxId) || null;
  }, [db.transactions, selectedTrxId]);

  // Filtered transactions for dropdown search
  const filteredTransactions = useMemo(() => {
    if (!trxSearch.trim()) return db.transactions.slice(0, 15);
    const q = trxSearch.toLowerCase();
    return db.transactions.filter(
      t => t.transactionCode.toLowerCase().includes(q) || t.customerName.toLowerCase().includes(q)
    ).slice(0, 15);
  }, [db.transactions, trxSearch]);

  // Available products for replacement picker
  const availableProducts = useMemo(() => {
    if (!productSearch.trim()) return [];
    const q = productSearch.toLowerCase();
    const matches: { product: Product; variant: ProductVariant }[] = [];

    db.products.forEach(p => {
      p.variants.forEach(v => {
        const full = `${p.name} ${v.variantName} ${v.barcode}`.toLowerCase();
        if (full.includes(q)) {
          matches.push({ product: p, variant: v });
        }
      });
    });

    return matches.slice(0, 8);
  }, [db.products, productSearch]);

  // Reset when transaction changes
  const handleSelectTransaction = (trx: Transaction) => {
    setSelectedTrxId(trx.id);
    setReturnSelections({});
    setReplacementItems([]);
    setError(null);
  };

  // Toggle item return selection
  const handleToggleItem = (item: CartItem) => {
    setReturnSelections(prev => {
      const exists = prev[item.variantId];
      if (exists) {
        const copy = { ...prev };
        delete copy[item.variantId];
        return copy;
      } else {
        return {
          ...prev,
          [item.variantId]: {
            quantity: 1,
            reason: 'Salah Beli',
            condition: 'Layak Jual (Restok)'
          }
        };
      }
    });
  };

  // Update quantity for return selection
  const handleUpdateReturnQty = (variantId: string, maxQty: number, newQty: number) => {
    const validQty = Math.max(1, Math.min(maxQty, newQty));
    setReturnSelections(prev => {
      if (!prev[variantId]) return prev;
      return {
        ...prev,
        [variantId]: {
          ...prev[variantId],
          quantity: validQty
        }
      };
    });
  };

  // Update reason for return selection
  const handleUpdateReason = (variantId: string, reason: string) => {
    setReturnSelections(prev => {
      if (!prev[variantId]) return prev;
      return {
        ...prev,
        [variantId]: {
          ...prev[variantId],
          reason
        }
      };
    });
  };

  // Update condition for return selection
  const handleUpdateCondition = (
    variantId: string,
    condition: 'Layak Jual (Restok)' | 'Rusak / Afkir (Tidak Restok)'
  ) => {
    setReturnSelections(prev => {
      if (!prev[variantId]) return prev;
      return {
        ...prev,
        [variantId]: {
          ...prev[variantId],
          condition
        }
      };
    });
  };

  // Add Replacement Item
  const handleAddReplacement = (product: Product, variant: ProductVariant) => {
    if (variant.stock <= 0) {
      alert(`Stok ${product.name} - ${variant.variantName} sedang habis!`);
      return;
    }

    setReplacementItems(prev => {
      const existingIdx = prev.findIndex(i => i.variantId === variant.id);
      if (existingIdx >= 0) {
        const copy = [...prev];
        const currentQty = copy[existingIdx].quantity;
        if (currentQty >= variant.stock) {
          alert(`Maksimal stok tersedia adalah ${variant.stock}`);
          return prev;
        }
        copy[existingIdx].quantity += 1;
        copy[existingIdx].subtotal = copy[existingIdx].quantity * copy[existingIdx].sellPrice;
        return copy;
      } else {
        return [
          ...prev,
          {
            productId: product.id,
            productName: product.name,
            variantId: variant.id,
            variantName: variant.variantName,
            unit: variant.unit,
            quantity: 1,
            sellPrice: variant.sellPrice,
            buyPrice: variant.buyPrice,
            subtotal: variant.sellPrice
          }
        ];
      }
    });
    setProductSearch('');
  };

  const handleRemoveReplacement = (variantId: string) => {
    setReplacementItems(prev => prev.filter(i => i.variantId !== variantId));
  };

  const handleUpdateReplacementQty = (variantId: string, maxStock: number, newQty: number) => {
    const validQty = Math.max(1, Math.min(maxStock, newQty));
    setReplacementItems(prev =>
      prev.map(item => {
        if (item.variantId === variantId) {
          return {
            ...item,
            quantity: validQty,
            subtotal: validQty * item.sellPrice
          };
        }
        return item;
      })
    );
  };

  // Calculations
  const returnedItemsList: ReturnedItem[] = useMemo(() => {
    if (!selectedTrx) return [];
    const list: ReturnedItem[] = [];

    selectedTrx.items.forEach(item => {
      const sel = returnSelections[item.variantId];
      if (sel) {
        list.push({
          productId: item.productId,
          productName: item.productName,
          variantId: item.variantId,
          variantName: item.variantName,
          unit: item.unit,
          quantity: sel.quantity,
          sellPrice: item.sellPrice,
          buyPrice: item.buyPrice,
          refundAmount: item.sellPrice * sel.quantity,
          reason: sel.reason,
          condition: sel.condition
        });
      }
    });

    return list;
  }, [selectedTrx, returnSelections]);

  const totalReturnedValue = useMemo(() => {
    return returnedItemsList.reduce((acc, i) => acc + i.refundAmount, 0);
  }, [returnedItemsList]);

  const replacementTotal = useMemo(() => {
    return replacementItems.reduce((acc, i) => acc + i.subtotal, 0);
  }, [replacementItems]);

  const priceDifference = replacementTotal - totalReturnedValue;

  // Submit Handler
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    if (!selectedTrx) {
      setError('Silakan pilih transaksi terlebih dahulu!');
      return;
    }

    if (returnedItemsList.length === 0) {
      setError('Pilih minimal 1 barang yang ingin dikembalikan pelanggan!');
      return;
    }

    if (returnType === 'Tukar Barang' && replacementItems.length === 0) {
      setError('Silakan pilih minimal 1 barang pengganti untuk opsi Tukar Barang!');
      return;
    }

    try {
      const newRet = processSalesReturn({
        transactionId: selectedTrx.id,
        transactionCode: selectedTrx.transactionCode,
        customerName: selectedTrx.customerName,
        returnType,
        returnedItems: returnedItemsList,
        replacementItems: returnType === 'Tukar Barang' ? replacementItems : undefined,
        notes: notes.trim() || undefined
      });

      setSuccessReturnCode(newRet.returnCode);
    } catch (err: any) {
      setError(err.message || 'Gagal memproses retur penjualan');
    }
  };

  const handleResetForm = () => {
    setSelectedTrxId('');
    setTrxSearch('');
    setReturnSelections({});
    setReturnType('Refund Uang');
    setReplacementItems([]);
    setProductSearch('');
    setNotes('');
    setError(null);
    setSuccessReturnCode(null);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
      <div className="bg-white rounded-2xl max-w-3xl w-full shadow-2xl border border-slate-200 overflow-hidden my-auto max-h-[92vh] flex flex-col">
        
        {/* Header Modal */}
        <div className="px-5 py-4 bg-slate-900 text-white flex items-center justify-between shrink-0">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-emerald-500/20 text-emerald-400 rounded-xl border border-emerald-500/30">
              <RotateCcw className="w-5 h-5" />
            </div>
            <div>
              <h3 className="font-extrabold text-base text-white">Retur & Pengembalian Barang</h3>
              <p className="text-xs text-slate-400">Proses pencairan uang tunai / tukar barang belanjaan pembeli</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content Body */}
        <div className="p-5 overflow-y-auto space-y-5 flex-1">

          {/* Success Screen */}
          {successReturnCode ? (
            <div className="text-center py-8 space-y-4">
              <div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto animate-bounce">
                <CheckCircle2 className="w-10 h-10" />
              </div>
              <div>
                <h4 className="text-xl font-black text-slate-900">Retur Berhasil Diproses!</h4>
                <p className="text-xs font-mono font-bold text-emerald-600 mt-1">No. Bukti Retur: {successReturnCode}</p>
                <p className="text-xs text-slate-500 max-w-md mx-auto mt-2">
                  Stok barang telah diperbarui secara otomatis dan data retur telah tersimpan di sistem.
                </p>
              </div>

              <div className="pt-4 flex flex-wrap justify-center gap-3">
                <button
                  onClick={() => window.print()}
                  className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold transition flex items-center gap-1.5"
                >
                  <Printer className="w-4 h-4" />
                  <span>Cetak Bukti Retur</span>
                </button>
                <button
                  onClick={() => {
                    handleResetForm();
                    onClose();
                  }}
                  className="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold transition shadow-xs"
                >
                  Selesai & Tutup
                </button>
              </div>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-5">

              {error && (
                <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl flex items-center gap-2 text-xs font-semibold text-rose-700">
                  <AlertCircle className="w-4 h-4 shrink-0" />
                  <span>{error}</span>
                </div>
              )}

              {/* Step 1: Select Transaction */}
              <div className="space-y-2">
                <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider">
                  1. Pilih Transaksi Awal Pelanggan
                </label>

                {!selectedTrx ? (
                  <div className="space-y-2">
                    <div className="relative">
                      <Search className="w-4 h-4 text-slate-400 absolute left-3 top-2.5" />
                      <input
                        type="text"
                        value={trxSearch}
                        onChange={e => setTrxSearch(e.target.value)}
                        placeholder="Cari berdasarkan No. Transaksi atau Nama Pembeli..."
                        className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-emerald-500"
                      />
                    </div>

                    <div className="max-h-40 overflow-y-auto border border-slate-200 rounded-xl divide-y divide-slate-100">
                      {filteredTransactions.length === 0 ? (
                        <div className="p-3 text-center text-xs text-slate-400">Tidak ada transaksi ditemukan</div>
                      ) : (
                        filteredTransactions.map(trx => (
                          <div
                            key={trx.id}
                            onClick={() => handleSelectTransaction(trx)}
                            className="p-3 hover:bg-emerald-50/50 cursor-pointer transition flex items-center justify-between"
                          >
                            <div>
                              <div className="font-bold text-xs text-slate-900">{trx.transactionCode}</div>
                              <div className="text-[11px] text-slate-500">
                                {trx.customerName} • {new Date(trx.date).toLocaleString('id-ID', { dateStyle: 'short', timeStyle: 'short' })}
                              </div>
                            </div>
                            <div className="text-right">
                              <div className="font-extrabold text-xs text-emerald-700">Rp {trx.finalAmount.toLocaleString('id-ID')}</div>
                              <div className="text-[10px] text-slate-400">{trx.items.length} item barang</div>
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                  </div>
                ) : (
                  <div className="p-3 bg-slate-50 border border-slate-200 rounded-xl flex items-center justify-between">
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-extrabold text-xs text-slate-900">{selectedTrx.transactionCode}</span>
                        <span className="text-[11px] font-semibold text-slate-600">({selectedTrx.customerName})</span>
                      </div>
                      <div className="text-[11px] text-slate-500 mt-0.5">
                        Total Belanja: <span className="font-bold text-slate-800">Rp {selectedTrx.finalAmount.toLocaleString('id-ID')}</span> • {new Date(selectedTrx.date).toLocaleString('id-ID')}
                      </div>
                    </div>
                    <button
                      type="button"
                      onClick={() => setSelectedTrxId('')}
                      className="px-2.5 py-1 text-xs text-rose-600 hover:bg-rose-50 rounded-lg font-semibold transition"
                    >
                      Ganti Transaksi
                    </button>
                  </div>
                )}
              </div>

              {/* Step 2: Select Items to Return */}
              {selectedTrx && (
                <div className="space-y-3">
                  <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider">
                    2. Pilih Barang Yang Dikembalikan Pelanggan
                  </label>

                  <div className="border border-slate-200 rounded-xl overflow-hidden divide-y divide-slate-100">
                    {selectedTrx.items.map(item => {
                      const isSelected = !!returnSelections[item.variantId];
                      const currentSel = returnSelections[item.variantId];

                      return (
                        <div key={item.variantId} className={`p-3 transition ${isSelected ? 'bg-emerald-50/40' : 'hover:bg-slate-50'}`}>
                          <div className="flex items-start gap-3">
                            <input
                              type="checkbox"
                              checked={isSelected}
                              onChange={() => handleToggleItem(item)}
                              className="mt-1 rounded text-emerald-600 focus:ring-emerald-500 w-4 h-4 cursor-pointer"
                            />
                            <div className="flex-1">
                              <div className="flex items-center justify-between">
                                <span className="font-bold text-xs text-slate-900">{item.productName} - {item.variantName}</span>
                                <span className="font-semibold text-xs text-slate-700">
                                  Rp {item.sellPrice.toLocaleString('id-ID')} / {item.unit}
                                </span>
                              </div>
                              <div className="text-[11px] text-slate-500 mt-0.5">
                                Dibeli: <span className="font-bold text-slate-700">{item.quantity} {item.unit}</span> (Subtotal: Rp {item.subtotal.toLocaleString('id-ID')})
                              </div>

                              {/* Return details controls if selected */}
                              {isSelected && currentSel && (
                                <div className="mt-3 pt-3 border-t border-emerald-100 grid grid-cols-1 sm:grid-cols-3 gap-3 bg-white p-3 rounded-xl border border-emerald-200 shadow-2xs">
                                  <div>
                                    <label className="block text-[11px] font-bold text-slate-700 mb-1">
                                      Jumlah Dikerbalikan (Maks: {item.quantity}):
                                    </label>
                                    <input
                                      type="number"
                                      min={1}
                                      max={item.quantity}
                                      value={currentSel.quantity}
                                      onChange={e => handleUpdateReturnQty(item.variantId, item.quantity, parseInt(e.target.value) || 1)}
                                      className="w-full px-2.5 py-1 bg-slate-50 border border-slate-200 rounded-lg text-xs font-bold focus:ring-2 focus:ring-emerald-500"
                                    />
                                  </div>

                                  <div>
                                    <label className="block text-[11px] font-bold text-slate-700 mb-1">
                                      Alasan Pengembalian:
                                    </label>
                                    <select
                                      value={currentSel.reason}
                                      onChange={e => handleUpdateReason(item.variantId, e.target.value)}
                                      className="w-full px-2.5 py-1 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold focus:ring-2 focus:ring-emerald-500"
                                    >
                                      <option value="Salah Beli">Salah Beli / Tidak Cocok</option>
                                      <option value="Barang Cacat / Rusak">Barang Cacat / Rusak</option>
                                      <option value="Kadaluarsa / Expired">Kadaluarsa / Expired</option>
                                      <option value="Kualitas Tidak Bagus">Kualitas Kurang Bagus</option>
                                      <option value="Lainnya">Lainnya</option>
                                    </select>
                                  </div>

                                  <div>
                                    <label className="block text-[11px] font-bold text-slate-700 mb-1">
                                      Kondisi Barang:
                                    </label>
                                    <select
                                      value={currentSel.condition}
                                      onChange={e => handleUpdateCondition(item.variantId, e.target.value as any)}
                                      className="w-full px-2.5 py-1 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold focus:ring-2 focus:ring-emerald-500"
                                    >
                                      <option value="Layak Jual (Restok)">Layak Jual (Masuk Stok)</option>
                                      <option value="Rusak / Afkir (Tidak Restok)">Rusak (Catat Kerugian)</option>
                                    </select>
                                  </div>
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>

                  {returnedItemsList.length > 0 && (
                    <div className="p-3 bg-emerald-50 border border-emerald-200 rounded-xl flex items-center justify-between text-xs font-extrabold text-emerald-900">
                      <span>Total Nilai Pengembalian Barang:</span>
                      <span className="text-sm">Rp {totalReturnedValue.toLocaleString('id-ID')}</span>
                    </div>
                  )}
                </div>
              )}

              {/* Step 3: Resolution Option (Refund Money vs Exchange Item) */}
              {returnedItemsList.length > 0 && (
                <div className="space-y-3">
                  <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider">
                    3. Bentuk Penyelesaian Retur
                  </label>

                  <div className="grid grid-cols-2 gap-3">
                    <button
                      type="button"
                      onClick={() => setReturnType('Refund Uang')}
                      className={`p-3.5 rounded-xl border text-left transition flex items-start gap-3 ${
                        returnType === 'Refund Uang'
                          ? 'bg-emerald-600 text-white border-emerald-600 shadow-md'
                          : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
                      }`}
                    >
                      <DollarSign className="w-5 h-5 shrink-0 mt-0.5" />
                      <div>
                        <div className="font-extrabold text-xs">Cairkan Uang (Refund)</div>
                        <div className={`text-[11px] mt-0.5 ${returnType === 'Refund Uang' ? 'text-emerald-100' : 'text-slate-500'}`}>
                          Kembalikan uang tunai sebesar nilai barang
                        </div>
                      </div>
                    </button>

                    <button
                      type="button"
                      onClick={() => setReturnType('Tukar Barang')}
                      className={`p-3.5 rounded-xl border text-left transition flex items-start gap-3 ${
                        returnType === 'Tukar Barang'
                          ? 'bg-emerald-600 text-white border-emerald-600 shadow-md'
                          : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
                      }`}
                    >
                      <ArrowRightLeft className="w-5 h-5 shrink-0 mt-0.5" />
                      <div>
                        <div className="font-extrabold text-xs">Tukar Barang (Ganti Produk)</div>
                        <div className={`text-[11px] mt-0.5 ${returnType === 'Tukar Barang' ? 'text-emerald-100' : 'text-slate-500'}`}>
                          Pilih barang pengganti & hitung selisih
                        </div>
                      </div>
                    </button>
                  </div>

                  {/* Tukar Barang Picker */}
                  {returnType === 'Tukar Barang' && (
                    <div className="p-4 bg-slate-50 border border-slate-200 rounded-xl space-y-3">
                      <label className="block text-xs font-bold text-slate-800">
                        Pilih Barang Pengganti Dari Stok Toko:
                      </label>

                      <div className="relative">
                        <Search className="w-4 h-4 text-slate-400 absolute left-3 top-2.5" />
                        <input
                          type="text"
                          value={productSearch}
                          onChange={e => setProductSearch(e.target.value)}
                          placeholder="Ketik nama barang / barcode pengganti..."
                          className="w-full pl-9 pr-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-emerald-500"
                        />
                      </div>

                      {/* Available products popup list */}
                      {availableProducts.length > 0 && (
                        <div className="border border-slate-200 bg-white rounded-xl divide-y divide-slate-100 max-h-44 overflow-y-auto">
                          {availableProducts.map(({ product, variant }) => (
                            <div
                              key={variant.id}
                              onClick={() => handleAddReplacement(product, variant)}
                              className="p-2.5 hover:bg-emerald-50 cursor-pointer flex items-center justify-between text-xs"
                            >
                              <div>
                                <span className="font-bold text-slate-900">{product.name}</span>
                                <span className="text-slate-500 ml-1">({variant.variantName})</span>
                                <div className="text-[10px] text-slate-400">Stok: {variant.stock} {variant.unit}</div>
                              </div>
                              <div className="font-extrabold text-emerald-700 flex items-center gap-1">
                                <span>Rp {variant.sellPrice.toLocaleString('id-ID')}</span>
                                <Plus className="w-3.5 h-3.5 text-emerald-600" />
                              </div>
                            </div>
                          ))}
                        </div>
                      )}

                      {/* Selected Replacement Items Table */}
                      {replacementItems.length > 0 ? (
                        <div className="border border-slate-200 bg-white rounded-xl overflow-hidden divide-y divide-slate-100">
                          {replacementItems.map(item => {
                            const matchedProd = db.products.find(p => p.id === item.productId);
                            const matchedVar = matchedProd?.variants.find(v => v.id === item.variantId);
                            const maxStk = matchedVar?.stock || 999;

                            return (
                              <div key={item.variantId} className="p-2.5 flex items-center justify-between text-xs">
                                <div>
                                  <div className="font-bold text-slate-900">{item.productName} - {item.variantName}</div>
                                  <div className="text-[10px] text-slate-500">Rp {item.sellPrice.toLocaleString('id-ID')} / {item.unit}</div>
                                </div>

                                <div className="flex items-center gap-3">
                                  <div className="flex items-center gap-1">
                                    <span className="text-[10px] text-slate-400">Qty:</span>
                                    <input
                                      type="number"
                                      min={1}
                                      max={maxStk}
                                      value={item.quantity}
                                      onChange={e => handleUpdateReplacementQty(item.variantId, maxStk, parseInt(e.target.value) || 1)}
                                      className="w-14 px-2 py-0.5 border border-slate-200 rounded text-center font-bold text-xs"
                                    />
                                  </div>
                                  <span className="font-extrabold text-slate-900 w-24 text-right">
                                    Rp {item.subtotal.toLocaleString('id-ID')}
                                  </span>
                                  <button
                                    type="button"
                                    onClick={() => handleRemoveReplacement(item.variantId)}
                                    className="text-rose-500 hover:text-rose-700 p-1 rounded"
                                  >
                                    <Trash2 className="w-3.5 h-3.5" />
                                  </button>
                                </div>
                              </div>
                            );
                          })}
                        </div>
                      ) : (
                        <div className="p-3 text-center text-xs text-slate-400 border border-dashed border-slate-200 rounded-xl">
                          Belum ada barang pengganti dipilih. Gunakan pencarian di atas.
                        </div>
                      )}

                      {/* Exchange Price Summary */}
                      {replacementItems.length > 0 && (
                        <div className="p-3 bg-white border border-slate-200 rounded-xl space-y-1.5 text-xs">
                          <div className="flex justify-between text-slate-600">
                            <span>Total Harga Barang Pengganti:</span>
                            <span className="font-bold text-slate-900">Rp {replacementTotal.toLocaleString('id-ID')}</span>
                          </div>
                          <div className="flex justify-between text-slate-600">
                            <span>Nilai Barang Yang Dikembalikan:</span>
                            <span className="font-bold text-emerald-700">- Rp {totalReturnedValue.toLocaleString('id-ID')}</span>
                          </div>

                          <div className="pt-2 border-t border-slate-100 flex justify-between items-center font-extrabold text-sm">
                            <span>Status Selisih Pembayaran:</span>
                            {priceDifference > 0 ? (
                              <span className="text-amber-700 bg-amber-50 px-2.5 py-1 rounded-lg border border-amber-200">
                                Pembeli Tambah Bayar: Rp {priceDifference.toLocaleString('id-ID')}
                              </span>
                            ) : priceDifference < 0 ? (
                              <span className="text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-lg border border-emerald-200">
                                Toko Kembalikan Selisih: Rp {Math.abs(priceDifference).toLocaleString('id-ID')}
                              </span>
                            ) : (
                              <span className="text-slate-800 bg-slate-100 px-2.5 py-1 rounded-lg border border-slate-200">
                                Tukar Pas (Sama Harga)
                              </span>
                            )}
                          </div>
                        </div>
                      )}
                    </div>
                  )}

                  {/* Notes */}
                  <div>
                    <label className="block text-[11px] font-bold text-slate-700 mb-1">Catatan Retur (Opsional):</label>
                    <input
                      type="text"
                      value={notes}
                      onChange={e => setNotes(e.target.value)}
                      placeholder="Catatan tambahan misal: Dus penyok / struk fisik sudah ditahan..."
                      className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-emerald-500"
                    />
                  </div>
                </div>
              )}

              {/* Submit Buttons */}
              <div className="pt-4 border-t border-slate-100 flex items-center justify-end gap-3">
                <button
                  type="button"
                  onClick={onClose}
                  className="px-4 py-2 border border-slate-200 text-slate-700 hover:bg-slate-50 rounded-xl text-xs font-bold transition"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  disabled={!selectedTrx || returnedItemsList.length === 0}
                  className="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-300 text-white rounded-xl text-xs font-extrabold transition shadow-md flex items-center gap-1.5"
                >
                  <RotateCcw className="w-4 h-4" />
                  <span>Proses Retur Sekarang</span>
                </button>
              </div>

            </form>
          )}

        </div>

      </div>
    </div>
  );
};