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

import { useCallback, useEffect, useState } from 'react';
import Image from 'next/image';
import { motion, Variants, AnimatePresence } from 'framer-motion';
import { X, Inbox, SlidersHorizontal, ChevronDown } from 'lucide-react';
import { RewardService, Redemption } from '@/lib/services/reward.service';
import { cn, formatDate } from '@/lib/utils';
import { toast } from 'sonner';

const fadeUp: Variants = {
  hidden: { opacity: 0, y: 16 },
  visible: (i = 0) => ({
    opacity: 1,
    y: 0,
    transition: { delay: i * 0.07, duration: 0.45, ease: [0.22, 1, 0.36, 1] },
  }),
};

type TxStatus = Redemption['status'];

const STATUS_CONFIG: Record<
  TxStatus,
  {
    label: string;
    badgeBg: string;
    badgeText: string;
    badgeBorder: string;
    dot: string;
  }
> = {
  PENDING: {
    label: 'Menunggu',
    badgeBg: 'bg-amber-500/10',
    badgeText: 'text-amber-500',
    badgeBorder: 'border-amber-500/20',
    dot: 'bg-amber-500',
  },
  APPROVED: {
    label: 'Diproses',
    badgeBg: 'bg-blue-500/10',
    badgeText: 'text-blue-500',
    badgeBorder: 'border-blue-500/20',
    dot: 'bg-blue-500',
  },
  SHIPPED: {
    label: 'Dikirim',
    badgeBg: 'bg-violet-500/10',
    badgeText: 'text-violet-500',
    badgeBorder: 'border-violet-500/20',
    dot: 'bg-violet-500',
  },
  DELIVERED: {
    label: 'Terkirim',
    badgeBg: 'bg-emerald-500/10',
    badgeText: 'text-emerald-500',
    badgeBorder: 'border-emerald-500/20',
    dot: 'bg-emerald-500',
  },
  REJECTED: {
    label: 'Ditolak',
    badgeBg: 'bg-rose-500/10',
    badgeText: 'text-rose-500',
    badgeBorder: 'border-rose-500/20',
    dot: 'bg-rose-500',
  },
  COMPLETED: {
    label: 'Selesai',
    badgeBg: 'bg-emerald-500/10',
    badgeText: 'text-emerald-500',
    badgeBorder: 'border-emerald-500/20',
    dot: 'bg-emerald-500',
  },
};

const STATUS_OPTIONS = [
  { value: '', label: 'Semua Status' },
  { value: 'PENDING', label: 'Menunggu' },
  { value: 'APPROVED', label: 'Diproses' },
  { value: 'SHIPPED', label: 'Dikirim' },
  { value: 'DELIVERED', label: 'Terkirim' },
  { value: 'REJECTED', label: 'Ditolak' },
];

function StatusBadge({ status }: { status: TxStatus }) {
  const cfg = STATUS_CONFIG[status] ?? {
    label: status,
    badgeBg: 'bg-gray-100',
    badgeText: 'text-gray-500',
    badgeBorder: 'border-gray-200',
    dot: 'bg-gray-400',
  };
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 px-2.5 py-1 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', cfg.dot)} />
      {cfg.label}
    </span>
  );
}

function StatusFilter({
  value,
  onChange,
}: {
  value: string;
  onChange: (v: string) => void;
}) {
  const [open, setOpen] = useState(false);
  const current =
    STATUS_OPTIONS.find((o) => o.value === value) ?? STATUS_OPTIONS[0];

  return (
    <div className="relative">
      <button
        onClick={() => setOpen((v) => !v)}
        className="flex items-center gap-2 px-5 py-3 border border-gray-200 bg-white rounded-xl hover:border-yellow-400 hover:bg-yellow-50 text-gray-600 hover:text-yellow-700 text-sm font-bold tracking-wide transition-all whitespace-nowrap shadow-sm"
      >
        <SlidersHorizontal className="w-4 h-4" />
        {current.label}
        <ChevronDown
          className={cn(
            'w-4 h-4 transition-transform duration-200',
            open && 'rotate-180'
          )}
        />
      </button>

      <AnimatePresence>
        {open && (
          <>
            <div
              className="fixed inset-0 z-10"
              onClick={() => setOpen(false)}
            />
            <motion.div
              initial={{ opacity: 0, y: 10, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 10, scale: 0.95 }}
              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
              className="absolute left-0 top-full mt-2 z-20 bg-white border border-gray-200 shadow-xl rounded-2xl py-2 min-w-[200px] overflow-hidden"
            >
              {STATUS_OPTIONS.map((opt) => (
                <button
                  key={opt.value}
                  onClick={() => {
                    onChange(opt.value);
                    setOpen(false);
                  }}
                  className={cn(
                    'w-full text-left px-5 py-3 text-xs font-bold uppercase tracking-wider transition-colors',
                    value === opt.value
                      ? 'text-yellow-700 bg-yellow-50'
                      : 'text-gray-500 hover:text-gray-900 hover:bg-gray-50'
                  )}
                >
                  {opt.label}
                </button>
              ))}
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
}

export default function AdminRewardTransactionsPage() {
  const [transactions, setTransactions] = useState<Redemption[]>([]);
  const [loading, setLoading] = useState(true);
  const [statusFilter, setStatusFilter] = useState<string>('');

  // Update Status Modal State
  const [selectedTx, setSelectedTx] = useState<Redemption | null>(null);
  const [newStatus, setNewStatus] = useState<string>('');
  const [trackingNumber, setTrackingNumber] = useState<string>('');
  const [isUpdating, setIsUpdating] = useState(false);

  const fetchTransactions = useCallback(async () => {
    setLoading(true);
    try {
      const params = statusFilter ? { status: statusFilter } : undefined;
      const res = await RewardService.adminGetTransactions(params);
      setTransactions(res.data);
    } catch (_error) {
      toast.error('Gagal memuat transaksi penukaran.');
    } finally {
      setLoading(false);
    }
  }, [statusFilter]);

  useEffect(() => {
    fetchTransactions();
  }, [statusFilter, fetchTransactions]);

  const handleUpdateStatus = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedTx || !newStatus) return;

    setIsUpdating(true);
    try {
      const res = await RewardService.adminUpdateTransactionStatus(
        selectedTx.id,
        {
          status: newStatus as any,
          tracking_number: trackingNumber || undefined,
        }
      );
      toast.success(res.message);
      setSelectedTx(null);
      fetchTransactions();
    } catch (error: any) {
      toast.error(error.response?.data?.error || 'Gagal mengubah status.');
    } finally {
      setIsUpdating(false);
    }
  };

  const openModal = (tx: Redemption) => {
    setSelectedTx(tx);
    setNewStatus(tx.status);
    setTrackingNumber(tx.tracking_number || '');
  };

  return (
    <div className="min-h-screen bg-transparent 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-0 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-7xl mx-auto space-y-6 pt-6 px-4 sm:px-6">
        {/* ── Header ── */}
        <motion.div
          initial="hidden"
          animate="visible"
          variants={fadeUp}
          custom={0}
          className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 relative"
        >
          <div>
            <h1 className="text-3xl sm:text-4xl font-black text-gray-900 tracking-tight leading-none mb-2">
              Verifikasi <span className="text-yellow-600">Penukaran</span>
            </h1>
            <p className="text-sm font-medium text-gray-500 tracking-wide">
              Kelola pengiriman hadiah dan status penukaran user.
            </p>
          </div>

          {/* Mascot */}
          <div className="absolute right-64 -top-8 w-24 md:w-32 opacity-20 pointer-events-none hidden md:block z-0">
            <Image
              src="/mascots/capt-yodi-chill-pose.avif"
              alt="Captain Yodi"
              width={200}
              height={200}
              className="w-full h-auto object-contain"
            />
          </div>

          <div className="flex gap-2 relative z-10">
            <StatusFilter value={statusFilter} onChange={setStatusFilter} />
          </div>
        </motion.div>

        {/* ── Data Table ── */}
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="relative bg-white/60 backdrop-blur-xl border border-gray-200 rounded-3xl overflow-hidden shadow-sm"
        >
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-gray-50/50 border-b border-gray-200">
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest whitespace-nowrap">
                    User & Waktu
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest whitespace-nowrap">
                    Item Hadiah
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest whitespace-nowrap min-w-[200px]">
                    Pengiriman
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest whitespace-nowrap">
                    Status
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest text-right whitespace-nowrap">
                    Aksi
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {loading ? (
                  <tr>
                    <td
                      colSpan={5}
                      className="px-6 py-10 text-center text-sm font-medium text-gray-500"
                    >
                      Memuat data...
                    </td>
                  </tr>
                ) : transactions.length === 0 ? (
                  <tr>
                    <td
                      colSpan={5}
                      className="px-6 py-16 text-center text-sm text-gray-500"
                    >
                      <div className="flex flex-col items-center justify-center">
                        <div className="w-16 h-16 bg-white border border-gray-200 rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm">
                          <Inbox className="w-8 h-8 text-gray-400" />
                        </div>
                        <p className="font-bold text-gray-900 text-lg tracking-wide mb-1">
                          Belum ada transaksi
                        </p>
                        <p className="text-sm font-medium text-gray-500">
                          {statusFilter
                            ? 'Tidak ada transaksi dengan status tersebut.'
                            : 'Penukaran yang masuk akan tampil di sini.'}
                        </p>
                      </div>
                    </td>
                  </tr>
                ) : (
                  transactions.map((tx) => (
                    <tr
                      key={tx.id}
                      className="hover:bg-gray-50/50 transition-colors group"
                    >
                      <td className="px-6 py-5">
                        <div className="font-bold text-gray-900 text-sm">
                          {tx.user?.name}
                        </div>
                        <div className="text-[10px] font-medium text-gray-500 tracking-wide mt-1">
                          {formatDate(tx.created_at, {
                            day: 'numeric',
                            month: 'short',
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit',
                          })}
                        </div>
                      </td>
                      <td className="px-6 py-5">
                        <div className="font-bold text-gray-900 text-sm">
                          {tx.pointItem?.name}
                        </div>
                        <span
                          className={cn(
                            'inline-flex items-center mt-1.5 px-2.5 py-1 text-[9px] font-bold uppercase tracking-widest border rounded-full',
                            tx.type === 'PHYSICAL'
                              ? 'bg-blue-500/10 text-blue-600 border-blue-500/20'
                              : 'bg-purple-500/10 text-purple-600 border-purple-500/20'
                          )}
                        >
                          {tx.type}
                        </span>
                      </td>
                      <td className="px-6 py-5">
                        {tx.type === 'PHYSICAL' ? (
                          <div className="max-w-xs space-y-1.5">
                            <div
                              className="text-[11px] font-medium text-gray-600 leading-relaxed line-clamp-2"
                              title={tx.shipping_address || ''}
                            >
                              {tx.shipping_address || '-'}
                            </div>
                            {tx.tracking_number && (
                              <div className="inline-flex items-center gap-1.5 bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-lg">
                                <span className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">
                                  Resi:
                                </span>
                                <span className="text-xs font-mono font-bold text-gray-900">
                                  {tx.tracking_number}
                                </span>
                              </div>
                            )}
                          </div>
                        ) : (
                          <span className="text-gray-400 text-xs italic font-medium">
                            - (Digital)
                          </span>
                        )}
                      </td>
                      <td className="px-6 py-5">
                        <StatusBadge status={tx.status} />
                      </td>
                      <td className="px-6 py-5 text-right">
                        {tx.type === 'PHYSICAL' &&
                        !['DELIVERED', 'REJECTED', 'COMPLETED'].includes(
                          tx.status
                        ) ? (
                          <button
                            onClick={() => openModal(tx)}
                            className="inline-flex items-center px-4 py-2 bg-white hover:bg-yellow-50 hover:text-yellow-700 hover:border-yellow-400 border border-gray-200 text-gray-600 text-xs font-bold rounded-xl shadow-sm transition-all whitespace-nowrap"
                          >
                            Update Status
                          </button>
                        ) : (
                          <span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                            Selesai
                          </span>
                        )}
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </motion.div>
      </div>

      {/* ── Modal Update Status ── */}
      <AnimatePresence>
        {selectedTx && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 backdrop-blur-sm">
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 10 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 10 }}
              className="bg-white rounded-3xl shadow-xl border border-gray-200 w-full max-w-md overflow-hidden"
            >
              <div className="px-6 py-5 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
                <div>
                  <h3 className="font-black text-gray-900 tracking-tight text-lg">
                    Update Status
                  </h3>
                  <p className="text-[11px] font-medium text-gray-500 mt-1 line-clamp-1">
                    {selectedTx.user?.name} - {selectedTx.pointItem?.name}
                  </p>
                </div>
                <button
                  onClick={() => setSelectedTx(null)}
                  className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-200 rounded-full transition-colors"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>
              <form onSubmit={handleUpdateStatus} className="p-6 space-y-6">
                <div>
                  <label className="block text-xs font-bold text-gray-700 mb-2">
                    Status Baru
                  </label>
                  <div className="relative">
                    <select
                      value={newStatus}
                      onChange={(e) => setNewStatus(e.target.value)}
                      className="w-full px-4 py-3 appearance-none border border-gray-200 rounded-xl text-sm font-medium bg-gray-50 focus:bg-white focus:outline-none focus:border-yellow-400 focus:ring-1 focus:ring-yellow-400 transition-all shadow-sm"
                    >
                      <option value="PENDING">Menunggu (PENDING)</option>
                      <option value="APPROVED">Diproses (APPROVED)</option>
                      <option value="SHIPPED">Dikirim (SHIPPED)</option>
                      <option value="DELIVERED">Terkirim (DELIVERED)</option>
                      <option value="REJECTED">
                        Tolak & Refund Poin (REJECTED)
                      </option>
                    </select>
                    <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
                  </div>
                </div>

                {newStatus === 'SHIPPED' && (
                  <div>
                    <label className="block text-xs font-bold text-gray-700 mb-2">
                      Nomor Resi
                    </label>
                    <input
                      type="text"
                      required
                      value={trackingNumber}
                      onChange={(e) => setTrackingNumber(e.target.value)}
                      className="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm font-medium bg-gray-50 focus:bg-white focus:outline-none focus:border-yellow-400 focus:ring-1 focus:ring-yellow-400 transition-all shadow-sm"
                      placeholder="Masukkan no resi..."
                    />
                  </div>
                )}

                {newStatus === 'REJECTED' && (
                  <div className="p-4 bg-rose-50 border border-rose-200 rounded-2xl flex items-start gap-4 shadow-sm">
                    <div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center shrink-0 border border-rose-200 shadow-sm overflow-hidden">
                      <Image
                        src="/mascots/capt-yodi-chill-pose.avif"
                        alt="Warning"
                        width={40}
                        height={40}
                        className="object-contain"
                      />
                    </div>
                    <div>
                      <p className="text-xs font-bold text-rose-800 tracking-wide mb-1">
                        Perhatian
                      </p>
                      <p className="text-xs text-rose-700 font-medium leading-relaxed">
                        Menolak penukaran ini akan mengembalikan{' '}
                        <span className="font-bold">
                          {selectedTx.points_used} poin
                        </span>{' '}
                        ke user dan mengembalikan stok. Pastikan keputusan ini
                        final.
                      </p>
                    </div>
                  </div>
                )}

                <div className="flex gap-3 justify-end pt-4 border-t border-gray-100 mt-6">
                  <button
                    type="button"
                    onClick={() => setSelectedTx(null)}
                    className="px-5 py-2.5 text-sm font-bold text-gray-600 hover:bg-gray-100 border border-transparent rounded-xl transition-colors"
                  >
                    Batal
                  </button>
                  <button
                    type="submit"
                    disabled={isUpdating}
                    className="px-6 py-2.5 text-sm font-bold text-yellow-950 bg-yellow-400 rounded-xl hover:bg-yellow-500 disabled:opacity-50 transition-colors shadow-sm"
                  >
                    {isUpdating ? 'Menyimpan...' : 'Simpan Status'}
                  </button>
                </div>
              </form>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
}