'use client';

import { useState } from 'react';
import { Search, CheckCircle2, Clock, RefreshCw } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { formatIDR, formatDate } from '@/lib/utils';
import {
  useAdminManualPayments,
  useExpireOverdueManualPayments,
} from '@/hooks/useAdmin';
import { ListParams } from '@/lib/services/admin.service';
import { ManualPayment } from '@/types';
import { Button } from '@/components/ui/button';
export default function ManualPaymentsAdminPage() {
  const router = useRouter();
  const [params, setParams] = useState<ListParams>({
    page: 1,
    per_page: 10,
    search: '',
  });

  const { data: res, isLoading } = useAdminManualPayments(params);
  const payments = res?.data ?? [];
  const meta = res?.meta;

  const expireMutation = useExpireOverdueManualPayments();

  return (
    <div className="space-y-6">
      {/* ── Header ── */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-black text-gray-900 tracking-tight">
            Verifikasi Pembayaran Manual
          </h1>
          <p className="text-sm text-gray-500 mt-1">
            Review bukti transfer pelanggan untuk metode QRIS Manual.
          </p>
        </div>
        <div className="flex items-center gap-3">
          <Button
            variant="primary"
            onClick={() => {
              if (
                confirm(
                  'Jalankan proses expire otomatis untuk pembayaran yang melewati batas waktu 24 jam?'
                )
              ) {
                expireMutation.mutate();
              }
            }}
            isLoading={expireMutation.isPending}
            leftIcon={<RefreshCw className="w-4 h-4" />}
          >
            {expireMutation.isPending ? 'Memproses...' : 'Expire Overdue'}
          </Button>
        </div>
      </div>

      {/* ── Filters ── */}
      <div className="bg-white border border-gray-200 rounded-2xl p-4 flex flex-col sm:flex-row gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input
            type="text"
            placeholder="Cari order number..."
            value={params.search}
            onChange={(e) =>
              setParams({ ...params, search: e.target.value, page: 1 })
            }
            className="w-full pl-9 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400/20 focus:border-yellow-400 transition-all"
          />
        </div>
      </div>

      {/* ── Table ── */}
      <div className="bg-white border border-gray-200 rounded-2xl overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse">
            <thead>
              <tr className="bg-gray-50 border-b border-gray-200">
                <th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-widest whitespace-nowrap">
                  Order Number
                </th>
                <th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-widest whitespace-nowrap">
                  Customer
                </th>
                <th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-widest whitespace-nowrap">
                  Total Transfer
                </th>
                <th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-widest whitespace-nowrap">
                  Waktu Upload
                </th>
                <th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-widest whitespace-nowrap text-right">
                  Aksi
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {isLoading ? (
                <tr>
                  <td
                    colSpan={5}
                    className="px-6 py-12 text-center text-gray-500"
                  >
                    Memuat data...
                  </td>
                </tr>
              ) : payments.length === 0 ? (
                <tr>
                  <td
                    colSpan={5}
                    className="px-6 py-12 text-center text-gray-500"
                  >
                    <div className="flex flex-col items-center justify-center">
                      <CheckCircle2 className="w-10 h-10 text-emerald-400 mb-3" />
                      <p className="font-bold text-gray-900">
                        Tidak ada antrean
                      </p>
                      <p className="text-sm">
                        Semua pembayaran sudah diverifikasi.
                      </p>
                    </div>
                  </td>
                </tr>
              ) : (
                payments.map((p: ManualPayment) => (
                  <tr
                    key={p.id}
                    onClick={() =>
                      router.push(
                        `/dashboard/admin/manual-payments/${p.id}?order_number=${p.order?.order_number || ''}`
                      )
                    }
                    className="hover:bg-gray-50/50 transition-colors cursor-pointer"
                  >
                    <td className="px-6 py-4">
                      <div className="flex flex-col">
                        <span className="font-mono font-bold text-sm text-gray-900">
                          {p.order?.order_number}
                        </span>
                        <span className="text-xs text-gray-500 mt-1 flex items-center gap-1">
                          <Clock className="w-3 h-3" /> Batas:{' '}
                          {formatDate(p.expired_at, {
                            day: 'numeric',
                            month: 'short',
                            hour: '2-digit',
                            minute: '2-digit',
                          })}
                        </span>
                      </div>
                    </td>
                    <td className="px-6 py-4">
                      <span className="text-sm font-medium text-gray-900">
                        {p.order?.user?.name || '-'}
                      </span>
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex flex-col">
                        <span className="text-sm font-black text-yellow-600">
                          {formatIDR(p.amount + (p.unique_code || 0))}
                        </span>
                        <span className="text-xs text-gray-500 mt-1">
                          (Kode Unik: +{p.unique_code || 0})
                        </span>
                      </div>
                    </td>
                    <td className="px-6 py-4">
                      <span className="text-sm text-gray-700">
                        {formatDate(p.updated_at, {
                          day: 'numeric',
                          month: 'short',
                          hour: '2-digit',
                          minute: '2-digit',
                        })}
                      </span>
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex items-center justify-end gap-2 text-sm font-bold text-blue-600 hover:text-blue-700">
                        Lihat Detail &rarr;
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {/* ── Pagination ── */}
        {meta && meta.last_page > 1 && (
          <div className="px-6 py-4 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
            <span className="text-sm text-gray-500">
              Menampilkan {meta.from} - {meta.to} dari {meta.total} data
            </span>
            <div className="flex gap-2">
              <button
                disabled={params.page === 1}
                onClick={() =>
                  setParams({ ...params, page: (params.page ?? 1) - 1 })
                }
                className="px-3 py-1 border border-gray-200 rounded-lg text-sm bg-white disabled:opacity-50"
              >
                Prev
              </button>
              <button
                disabled={params.page === meta.last_page}
                onClick={() =>
                  setParams({ ...params, page: (params.page ?? 1) + 1 })
                }
                className="px-3 py-1 border border-gray-200 rounded-lg text-sm bg-white disabled:opacity-50"
              >
                Next
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}