'use client';

import { useEffect, useState } from 'react';
import { api } from '@/lib/api';
import { ShoppingBag, Clock, CheckCircle, AlertCircle, XCircle, Boxes, TimerReset, Eye, Trash2, Download, X } from 'lucide-react';
import { useAuthStore } from '@/store/authStore';
import { DataTable, ColumnDef } from '@/components/ui/DataTable';
import { useRouter } from 'next/navigation';

const STATUS_MAP: Record<string, { label: string; icon: any; badge: string }> = {
  PENDING: { label: 'Chờ xử lý', icon: Clock, badge: 'bg-warning/10 text-warning border-warning/20' },
  PROCESSING: { label: 'Đang xử lý', icon: Clock, badge: 'bg-blue-500/10 text-blue-400 border-blue-500/20' },
  ESCROW: { label: 'Tạm giữ', icon: Clock, badge: 'bg-purple-500/10 text-purple-400 border-purple-500/20' },
  DELIVERED: { label: 'Đã giao', icon: CheckCircle, badge: 'bg-blue-500/10 text-blue-400 border-blue-500/20' },
  COMPLETED: { label: 'Hoàn thành', icon: CheckCircle, badge: 'bg-success/10 text-success border-success/20' },
  CANCELLED: { label: 'Đã hủy', icon: XCircle, badge: 'bg-danger/10 text-danger border-danger/20' },
  DISPUTED: { label: 'Tranh chấp', icon: AlertCircle, badge: 'bg-warning/10 text-warning border-warning/20' },
};

export default function AdminOrdersPage() {
  const router = useRouter();
  const [orders, setOrders] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [selectedOrder, setSelectedOrder] = useState<any | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [actionLoading, setActionLoading] = useState<string | null>(null);
  const token = useAuthStore((s) => s.token);

  const fetchOrders = async () => {
    if (!token) return;
    setLoading(true);
    try {
      const res = await api.get('/admin/orders', {
        params: { search }
      });
      const data = res.data?.data || res.data || [];
      setOrders(data.filter((o: any) => !statusFilter || o.status === statusFilter));
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const delayDebounceFn = setTimeout(() => {
      fetchOrders();
    }, search ? 250 : 0);
    return () => clearTimeout(delayDebounceFn);
  }, [search, statusFilter, token]);

  const summary = {
    total: orders.length,
    pending: orders.filter((o) => o.status === 'PENDING').length,
    completed: orders.filter((o) => o.status === 'COMPLETED').length,
    disputed: orders.filter((o) => o.status === 'DISPUTED').length,
    volume: orders.reduce((sum, o) => sum + Number(o.totalAmount || 0), 0),
  };

  const openDetail = (id: string) => router.push(`/admin/orders/${id}`);
  const downloadOrder = async (id: string) => {
    try { setActionLoading(`download-${id}`); const res = await api.get(`/admin/orders/${id}/download`, { responseType: 'blob' }); const type = selectedOrder?.items?.[0]?.product?.deliveryMethod === 'AUTO_TXT' ? 'txt' : 'zip'; const url = URL.createObjectURL(res.data); const link = document.createElement('a'); link.href = url; link.download = `order-${id}.${type}`; link.click(); URL.revokeObjectURL(url); } catch { alert('Đơn này không có file giao tự động để tải.'); } finally { setActionLoading(null); }
  };
  const deleteOrder = async (id: string) => {
    if (!confirm('Xóa vĩnh viễn đơn hàng này? Chỉ đơn đã hoàn thành hoặc đã hủy mới có thể xóa.')) return;
    try { setActionLoading(`delete-${id}`); await api.delete(`/admin/orders/${id}`); setOrders((current) => current.filter((item) => item.id !== id)); setSelectedOrder(null); } catch (error: any) { alert(error?.response?.data?.message || 'Không thể xóa đơn hàng.'); } finally { setActionLoading(null); }
  };

  const columns: ColumnDef<any>[] = [
    {
      header: 'Mã đơn',
      cell: (o) => (
        <div className="flex items-center gap-2">
          <ShoppingBag className="w-4 h-4 text-muted-foreground shrink-0" />
          <span className="text-foreground text-sm font-mono font-bold">#{o.id.slice(0, 8).toUpperCase()}</span>
        </div>
      ),
      align: 'left'
    },
    {
      header: 'Người mua',
      cell: (o) => (
        <div>
          <p className="text-foreground text-sm">{o.buyer?.name || 'Ẩn danh'}</p>
          <p className="text-muted-foreground text-xs truncate max-w-[120px]">{o.buyer?.email}</p>
        </div>
      ),
      align: 'left'
    },
    {
      header: 'Người bán',
      cell: (o) => (
        <div>
          <p className="text-foreground text-sm">{o.seller?.name || 'Ẩn danh'}</p>
          <p className="text-muted-foreground text-xs truncate max-w-[120px]">{o.seller?.email}</p>
        </div>
      ),
      align: 'left'
    },
    {
      header: 'Tổng tiền',
      cell: (o) => (
        <div>
          <p className="text-foreground text-sm font-bold">{Number(o.totalAmount).toLocaleString('vi-VN')}đ</p>
          <p className="text-muted-foreground text-xs">{new Date(o.createdAt).toLocaleDateString('vi-VN')}</p>
        </div>
      ),
      align: 'right'
    },
    {
      header: 'Trạng thái',
      cell: (o) => {
        const statusInfo = STATUS_MAP[o.status] || { label: o.status, icon: Clock, badge: 'bg-muted text-muted-foreground border-border' };
        const Icon = statusInfo.icon;
        return (
          <span className={`inline-flex items-center justify-center gap-1 text-[10px] font-bold px-2.5 py-1 rounded-full border w-fit mx-auto ${statusInfo.badge}`}>
            <Icon className="w-3 h-3" />
            {statusInfo.label}
          </span>
        );
      },
      align: 'center'
    },
    {
      header: 'Escrow / Tranh chấp',
      cell: (o) => <div className="space-y-1 text-center text-[10px]">{o.escrow ? <p className={o.escrow.status === 'HOLD' ? 'font-bold text-amber-300' : o.escrow.status === 'REFUNDED' ? 'font-bold text-rose-300' : 'font-bold text-emerald-300'}>Escrow: {o.escrow.status}</p> : <p className="text-gray-500">Không escrow</p>}{o.dispute?.status === 'RESOLVED' ? <p className="font-bold text-emerald-300">Khiếu nại đã xử lý</p> : o.dispute ? <p className="font-bold text-rose-300">Tranh chấp: {o.dispute.status}</p> : <p className="text-gray-500">Không tranh chấp</p>}</div>,
      align: 'center'
    },
    {
      header: 'Thao tác',
      align: 'center',
      cell: (o) => <div className="flex justify-center gap-1"><button onClick={() => openDetail(o.id)} className="rounded-md bg-sky-500/10 p-2 text-sky-300 hover:bg-sky-500/20" title="Xem chi tiết"><Eye className="h-3.5 w-3.5" /></button><button onClick={() => downloadOrder(o.id)} className="rounded-md bg-emerald-500/10 p-2 text-emerald-300 hover:bg-emerald-500/20" title="Tải đơn hàng"><Download className="h-3.5 w-3.5" /></button><button onClick={() => deleteOrder(o.id)} disabled={!['COMPLETED', 'CANCELLED'].includes(o.status) || Boolean(actionLoading)} className="rounded-md bg-red-500/10 p-2 text-red-300 hover:bg-red-500/20 disabled:cursor-not-allowed disabled:opacity-30" title="Xóa đơn hàng"><Trash2 className="h-3.5 w-3.5" /></button></div>
    }
  ];

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Quản lý Đơn hàng</h1>
          <p className="text-muted-foreground text-sm mt-1">Giám sát toàn bộ giao dịch, trị giá và tình trạng tranh chấp trên hệ thống.</p>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-4">
        {[{ label: 'Tổng đơn', value: summary.total, icon: Boxes }, { label: 'Chờ xử lý', value: summary.pending, icon: TimerReset }, { label: 'Hoàn thành', value: summary.completed, icon: CheckCircle }, { label: 'Tranh chấp', value: summary.disputed, icon: AlertCircle }].map((item, index) => {
          const Icon = item.icon;
          return (
            <div key={index} className="rounded-2xl border border-border bg-card p-4">
              <div className="flex items-center justify-between">
                <p className="text-sm text-muted-foreground">{item.label}</p>
                <Icon className="h-4 w-4 text-muted-foreground" />
              </div>
              <p className="mt-3 text-2xl font-black text-foreground">{item.value}</p>
            </div>
          );
        })}
      </div>

      <div className="flex flex-col gap-3 md:flex-row">
        <div className="flex-1">
          <DataTable
            columns={columns}
            data={orders}
            searchPlaceholder="Tìm theo Mã đơn hàng..."
            searchValue={search}
            onSearchChange={setSearch}
            emptyMessage={loading ? 'Đang tải dữ liệu...' : 'Không tìm thấy đơn hàng nào'}
          />
        </div>
        <div className="w-full md:w-56">
          <label className="mb-2 block text-sm text-muted-foreground">Trạng thái</label>
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-foreground"
          >
            <option value="">Tất cả</option>
            <option value="PENDING">PENDING</option>
            <option value="PROCESSING">PROCESSING</option>
            <option value="ESCROW">ESCROW</option>
            <option value="DELIVERED">DELIVERED</option>
            <option value="COMPLETED">COMPLETED</option>
            <option value="CANCELLED">CANCELLED</option>
            <option value="DISPUTED">DISPUTED</option>
          </select>
          <div className="mt-4 rounded-2xl border border-border bg-card p-4">
            <p className="text-sm text-muted-foreground">Doanh thu hiện tại</p>
            <p className="mt-2 text-xl font-black text-foreground">{summary.volume.toLocaleString('vi-VN')}đ</p>
          </div>
        </div>
      </div>
      {selectedOrder && <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"><div className="max-h-[90vh] w-full max-w-3xl overflow-auto rounded-2xl border border-white/10 bg-[#151619] p-6 shadow-2xl"><div className="flex items-start justify-between border-b border-white/10 pb-4"><div><p className="text-xs font-bold tracking-widest text-gray-500">CHI TIẾT ĐƠN HÀNG</p><h2 className="mt-1 text-xl font-black text-white">#{selectedOrder.id.slice(0, 8).toUpperCase()}</h2></div><button onClick={() => setSelectedOrder(null)} className="rounded-lg bg-white/5 p-2 text-gray-300"><X className="h-5 w-5" /></button></div>{detailLoading ? <p className="py-12 text-center text-gray-400">Đang tải chi tiết…</p> : <><div className="mt-5 grid gap-4 md:grid-cols-3"><Info title="Người mua" value={selectedOrder.buyer?.name || '—'} sub={selectedOrder.buyer?.email} /><Info title="Người bán" value={selectedOrder.seller?.name || '—'} sub={selectedOrder.seller?.email} /><Info title="Thanh toán" value={`${Number(selectedOrder.totalAmount || 0).toLocaleString('vi-VN')} đ`} sub={`Trạng thái: ${STATUS_MAP[selectedOrder.status]?.label || selectedOrder.status}`} /></div><div className="mt-4 rounded-xl border border-white/10"><p className="border-b border-white/10 px-4 py-3 text-sm font-bold text-white">Sản phẩm / bàn giao</p>{selectedOrder.items?.map((item: any) => <div key={item.id} className="border-b border-white/5 px-4 py-3 text-sm last:border-0"><b className="text-white">{item.product?.name}</b> × {item.quantity}<span className="ml-2 text-gray-500">{item.variant?.name || ''}</span><p className="mt-1 text-xs text-cyan-300">{item.product?.deliveryMethod === 'AUTO_TXT' ? 'Giao tự động TXT' : item.product?.deliveryMethod === 'AUTO_ZIP' ? 'Giao tự động ZIP' : 'Giao thủ công'}</p></div>)}</div>{selectedOrder.allocations?.length > 0 && <div className="mt-4 rounded-xl border border-white/10 p-4"><p className="text-sm font-bold text-white">Tài khoản đã cấp ({selectedOrder.allocations.length})</p><div className="mt-2 flex flex-wrap gap-2">{selectedOrder.allocations.map((a: any) => <span key={a.id} className="rounded bg-white/5 px-2 py-1 font-mono text-xs text-gray-300">{a.inventoryItem?.folderName}</span>)}</div></div>}<div className="mt-5 flex flex-wrap justify-end gap-2"><button onClick={() => downloadOrder(selectedOrder.id)} className="rounded-lg bg-emerald-500 px-4 py-2 text-sm font-bold text-black"><Download className="mr-2 inline h-4 w-4" />Tải đơn hàng</button><button onClick={() => deleteOrder(selectedOrder.id)} disabled={!['COMPLETED', 'CANCELLED'].includes(selectedOrder.status)} className="rounded-lg border border-red-500/30 px-4 py-2 text-sm font-bold text-red-300 disabled:opacity-30"><Trash2 className="mr-2 inline h-4 w-4" />Xóa đơn</button></div></>}</div></div>}
    </div>
  );
}

function Info({ title, value, sub }: { title: string; value: string; sub?: string }) { return <div className="rounded-xl border border-white/10 bg-black/20 p-4"><p className="text-[10px] font-bold uppercase tracking-wider text-gray-500">{title}</p><p className="mt-2 font-bold text-white">{value}</p>{sub && <p className="mt-1 truncate text-xs text-gray-500">{sub}</p>}</div>; }