'use client';

import { useEffect, useMemo, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import {
  AlertCircle, CheckCircle2, ChevronRight, Clock, Download, Loader2,
  MessageCircle, Paperclip, Search, Send, ShieldCheck, ShoppingBag,
  Truck, WalletCards, X, XCircle,
} from 'lucide-react';
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { api } from '@/lib/api';
import { useAuthStore } from '@/store/authStore';

type Order = {
  id: string;
  totalAmount: number | string;
  sellerPayout?: number | string;
  platformFee?: number | string;
  status: string;
  createdAt: string;
  deliveredAt?: string | null;
  confirmedAt?: string | null;
  buyer?: { id?: string; name?: string; email?: string };
  items?: { product?: { name?: string; imageUrl?: string | null }; quantity: number; price: number | string; variant?: { name?: string | null } }[];
  dispute?: { id: string; status?: string } | null;
};

type Stats = {
  balance?: number;
  escrowHold?: number;
  payoutOnHold?: number;
  totalOrders?: number;
  revenue30Days?: number;
  pendingOrders?: number;
  statusCounts?: Record<string, number>;
};

const STATUS: Record<string, { label: string; tone: string; icon: typeof Clock }> = {
  PENDING: { label: 'Chờ thanh toán', tone: 'border-amber-400/25 bg-amber-400/10 text-amber-300', icon: Clock },
  ESCROW: { label: 'Chờ bàn giao', tone: 'border-blue-400/25 bg-blue-400/10 text-blue-300', icon: ShieldCheck },
  DELIVERED: { label: 'Đã giao', tone: 'border-cyan-400/25 bg-cyan-400/10 text-cyan-300', icon: Truck },
  COMPLETED: { label: 'Đã hoàn thành', tone: 'border-emerald-400/25 bg-emerald-400/10 text-emerald-300', icon: CheckCircle2 },
  DISPUTED: { label: 'Tranh chấp', tone: 'border-red-400/25 bg-red-400/10 text-red-300', icon: AlertCircle },
  CANCELLED: { label: 'Đã hoàn tiền', tone: 'border-rose-400/25 bg-rose-400/10 text-rose-300', icon: XCircle },
  CANCELED: { label: 'Đã hủy', tone: 'border-rose-400/25 bg-rose-400/10 text-rose-300', icon: XCircle },
};

const money = (value?: number | string) => `${Number(value || 0).toLocaleString('vi-VN')} đ`;
const shortDate = (value: string) => new Intl.DateTimeFormat('vi-VN', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }).format(new Date(value));

export default function SellerOrdersPage() {
  const router = useRouter();
  const params = useParams<{ locale: string }>();
  const user = useAuthStore((state) => state.user);
  const [orders, setOrders] = useState<Order[]>([]);
  const [stats, setStats] = useState<Stats>({});
  const [loading, setLoading] = useState(true);
  const [statusFilter, setStatusFilter] = useState('ALL');
  const [search, setSearch] = useState('');
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [actionLoading, setActionLoading] = useState<string | null>(null);
  const [error, setError] = useState('');
  const [chatOrder, setChatOrder] = useState<Order | null>(null);
  const [messages, setMessages] = useState<any[]>([]);
  const [messageText, setMessageText] = useState('');
  const [zipFile, setZipFile] = useState<File | null>(null);
  const [sendingMessage, setSendingMessage] = useState(false);

  const load = async (showLoader = false) => {
    try {
      if (showLoader) setLoading(true);
      setError('');
      const [ordersResponse, statsResponse] = await Promise.all([
        api.get('/orders/seller'),
        api.get('/orders/seller/stats'),
      ]);
      const nextOrders = ordersResponse.data?.data || [];
      setOrders(nextOrders);
      setStats(statsResponse.data || {});
      setSelectedId((current) => current && nextOrders.some((order: Order) => order.id === current) ? current : nextOrders[0]?.id || null);
    } catch (err: any) {
      setError(err.response?.data?.message || 'Không thể tải dữ liệu đơn bán. Vui lòng thử lại.');
    } finally {
      if (showLoader) setLoading(false);
    }
  };

  useEffect(() => { void load(true); }, []);

  useEffect(() => {
    if (!chatOrder) return;
    const refresh = async () => {
      try {
        const response = await api.get(`/orders/${chatOrder.id}/messages`);
        setMessages(response.data || []);
      } catch { /* Keep the conversation visible if a request is temporarily unavailable. */ }
    };
    void refresh();
    const timer = window.setInterval(refresh, 3000);
    return () => window.clearInterval(timer);
  }, [chatOrder?.id]);

  const filtered = useMemo(() => orders.filter((order) => {
    const needle = search.trim().toLowerCase();
    const productName = order.items?.map((item) => item.product?.name || '').join(' ') || '';
    return (statusFilter === 'ALL' || order.status === statusFilter)
      && (!needle || [order.id, order.buyer?.name, order.buyer?.email, productName].filter(Boolean).join(' ').toLowerCase().includes(needle));
  }), [orders, search, statusFilter]);

  const selected = orders.find((order) => order.id === selectedId) || filtered[0] || null;
  const statusCounts = stats.statusCounts || orders.reduce<Record<string, number>>((result, order) => ({ ...result, [order.status]: (result[order.status] || 0) + 1 }), {});
  const trend = useMemo(() => {
    const days = Array.from({ length: 14 }, (_, index) => {
      const date = new Date(); date.setHours(0, 0, 0, 0); date.setDate(date.getDate() - (13 - index));
      return { key: date.toISOString().slice(0, 10), label: `${date.getDate()}/${date.getMonth() + 1}`, orders: 0, revenue: 0 };
    });
    const index = new Map(days.map((day) => [day.key, day]));
    orders.forEach((order) => {
      const day = index.get(new Date(order.createdAt).toISOString().slice(0, 10));
      if (day) {
        day.orders += 1;
        if (order.status === 'COMPLETED') day.revenue += Number(order.sellerPayout || 0);
      }
    });
    return days;
  }, [orders]);

  const openChat = async (order: Order) => {
    setChatOrder(order); setMessages([]); setZipFile(null);
    try {
      const response = await api.get(`/orders/${order.id}/messages`);
      setMessages(response.data || []);
    } catch { setError('Không thể tải cuộc trò chuyện của đơn hàng.'); }
  };

  const markDelivered = async (orderId: string) => {
    try {
      setActionLoading(orderId);
      await api.post(`/orders/${orderId}/status`, { status: 'DELIVERED' });
      await load();
    } catch (err: any) { setError(err.response?.data?.message || 'Không thể cập nhật trạng thái bàn giao.'); }
    finally { setActionLoading(null); }
  };

  const sendMessage = async () => {
    if (!chatOrder || (!messageText.trim() && !zipFile)) return;
    try {
      setSendingMessage(true);
      if (messageText.trim()) await api.post(`/orders/${chatOrder.id}/messages`, { content: messageText.trim() });
      if (zipFile) { const formData = new FormData(); formData.append('file', zipFile); await api.post(`/orders/${chatOrder.id}/messages/zip`, formData); }
      setMessageText(''); setZipFile(null);
      const response = await api.get(`/orders/${chatOrder.id}/messages`);
      setMessages(response.data || []);
    } catch (err: any) { setError(err.response?.data?.message || 'Không thể gửi tin nhắn hoặc tệp ZIP.'); }
    finally { setSendingMessage(false); }
  };

  const requestAdmin = async () => {
    if (!chatOrder) return;
    try { await api.post(`/orders/${chatOrder.id}/messages/request-admin`); }
    catch (err: any) { setError(err.response?.data?.message || 'Không thể mời quản trị viên.'); }
  };

  const cards = [
    { label: 'Tổng số đơn', value: orders.length, sub: 'Toàn bộ lịch sử', icon: ShoppingBag, tone: 'text-rose-300 bg-rose-500/10 border-rose-500/20' },
    { label: 'Chờ thanh toán', value: statusCounts.PENDING || 0, sub: 'Cần theo dõi', icon: Clock, tone: 'text-amber-300 bg-amber-500/10 border-amber-500/20' },
    { label: 'Đang bàn giao', value: (statusCounts.ESCROW || 0) + (statusCounts.DELIVERED || 0), sub: 'Escrow đang giữ', icon: Truck, tone: 'text-violet-300 bg-violet-500/10 border-violet-500/20' },
    { label: 'Tranh chấp', value: statusCounts.DISPUTED || 0, sub: 'Cần xử lý', icon: AlertCircle, tone: 'text-orange-300 bg-orange-500/10 border-orange-500/20' },
    { label: 'Doanh thu hoàn về', value: money(stats.balance), sub: 'Số dư có thể rút', icon: WalletCards, tone: 'text-emerald-300 bg-emerald-500/10 border-emerald-500/20' },
    { label: 'Đang giữ để payout', value: money(stats.payoutOnHold), sub: 'Chờ xác nhận/release', icon: ShieldCheck, tone: 'text-cyan-300 bg-cyan-500/10 border-cyan-500/20' },
  ];

  if (loading) return <div className="flex min-h-[420px] items-center justify-center"><Loader2 className="h-8 w-8 animate-spin text-rose-400" /></div>;

  return <div className="space-y-4 pb-8">
    <section className="flex flex-col gap-3 rounded-xl border border-white/10 bg-[#121212] p-4 md:flex-row md:items-center md:justify-between">
      <div><h1 className="text-xl font-black text-white">Đơn bán</h1><p className="mt-1 text-xs text-zinc-500">Quản lý đơn đã thanh toán, bàn giao cho người mua và theo dõi doanh thu thực tế.</p></div>
      <button onClick={() => void load()} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs font-bold text-zinc-300 hover:bg-white/10">Làm mới</button>
    </section>
    {error && <div className="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200">{error}</div>}

    <section className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-6">{cards.map((card) => { const Icon = card.icon; return <div key={card.label} className="rounded-xl border border-white/10 bg-[#141414] p-3"><div className={`mb-3 inline-flex rounded-lg border p-2 ${card.tone}`}><Icon className="h-4 w-4" /></div><p className="text-[11px] font-medium text-zinc-500">{card.label}</p><p className="mt-1 truncate text-lg font-black text-white">{card.value}</p><p className="mt-1 text-[10px] text-zinc-600">{card.sub}</p></div>; })}</section>

    <section className="rounded-xl border border-white/10 bg-[#141414] p-4"><div className="mb-3 flex items-center justify-between"><div><h2 className="font-bold text-white">Xu hướng đơn hàng</h2><p className="text-xs text-zinc-500">14 ngày gần nhất · doanh thu chỉ tính đơn hoàn thành</p></div><span className="rounded-md bg-white/5 px-2 py-1 text-xs text-zinc-400">14 ngày</span></div><div className="h-52"><ResponsiveContainer width="100%" height="100%"><AreaChart data={trend}><defs><linearGradient id="sellerRevenue" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#fb7185" stopOpacity={.45}/><stop offset="95%" stopColor="#fb7185" stopOpacity={0}/></linearGradient></defs><CartesianGrid stroke="#ffffff0c" vertical={false}/><XAxis dataKey="label" tick={{ fill: '#71717a', fontSize: 11 }} axisLine={false} tickLine={false}/><YAxis tick={{ fill: '#71717a', fontSize: 11 }} axisLine={false} tickLine={false} width={42}/><Tooltip contentStyle={{ background: '#0f0f0f', border: '1px solid #ffffff1a', borderRadius: 10 }} labelStyle={{ color: '#fff' }} formatter={(value: any, key: any) => [String(key) === 'revenue' ? money(value) : Number(value || 0), String(key) === 'revenue' ? 'Doanh thu' : 'Số đơn']}/><Area type="monotone" dataKey="orders" stroke="#a78bfa" fill="transparent" strokeWidth={2}/><Area type="monotone" dataKey="revenue" stroke="#fb7185" fill="url(#sellerRevenue)" strokeWidth={2}/></AreaChart></ResponsiveContainer></div></section>

    <section className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_280px]"><div className="min-w-0 rounded-xl border border-white/10 bg-[#141414]"><div className="border-b border-white/10 p-3"><div className="relative"><Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-600"/><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Tìm theo mã đơn, người mua hoặc sản phẩm..." className="w-full rounded-lg border border-white/10 bg-black/25 py-2.5 pl-9 pr-3 text-sm text-white outline-none placeholder:text-zinc-600 focus:border-rose-400/50"/></div><div className="mt-3 flex flex-wrap gap-2">{['ALL', 'ESCROW', 'DELIVERED', 'COMPLETED', 'DISPUTED', 'CANCELLED'].map((key) => <button key={key} onClick={() => setStatusFilter(key)} className={`rounded-md px-3 py-1.5 text-[11px] font-bold ${statusFilter === key ? 'bg-rose-500 text-white' : 'bg-white/5 text-zinc-400 hover:text-white'}`}>{key === 'ALL' ? `Tất cả (${orders.length})` : `${STATUS[key]?.label || key} (${statusCounts[key] || 0})`}</button>)}</div></div><div className="overflow-x-auto"><table className="w-full min-w-[800px] text-left"><thead className="text-[10px] uppercase tracking-wide text-zinc-600"><tr className="border-b border-white/5"><th className="px-4 py-3">Mã đơn / Người mua</th><th className="px-4 py-3">Sản phẩm</th><th className="px-4 py-3">Thanh toán</th><th className="px-4 py-3">Trạng thái</th><th className="px-4 py-3 text-right">Doanh thu</th></tr></thead><tbody>{filtered.length ? filtered.map((order) => { const detail = STATUS[order.status] || { label: order.status, tone: 'border-white/10 bg-white/5 text-zinc-300', icon: Clock }; const Icon = detail.icon; const isSelected = selected?.id === order.id; return <tr key={order.id} onClick={() => setSelectedId(order.id)} className={`cursor-pointer border-b border-white/[.045] text-sm transition-colors hover:bg-white/[.035] ${isSelected ? 'bg-rose-500/[.08]' : ''}`}><td className="px-4 py-3"><p className="font-mono text-xs font-bold text-white">ORD-{order.id.slice(0, 8).toUpperCase()}</p><p className="mt-1 text-xs text-zinc-300">{order.buyer?.name || 'Khách hàng'}</p><p className="text-[10px] text-zinc-600">{shortDate(order.createdAt)}</p></td><td className="max-w-[220px] px-4 py-3"><p className="truncate font-semibold text-zinc-200">{order.items?.[0]?.product?.name || 'Sản phẩm'}</p><p className="mt-1 text-[10px] text-zinc-500">SKU: {order.items?.[0]?.variant?.name || 'Mặc định'} · SL {order.items?.reduce((total, item) => total + item.quantity, 0) || 0}</p></td><td className="px-4 py-3"><p className="font-bold text-white">{money(order.totalAmount)}</p><p className="mt-1 text-[10px] text-zinc-500">Phí sàn {money(order.platformFee)}</p></td><td className="px-4 py-3"><span className={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-[10px] font-bold ${detail.tone}`}><Icon className="h-3 w-3"/>{detail.label}</span></td><td className="px-4 py-3 text-right"><p className="font-bold text-emerald-300">{money(order.sellerPayout)}</p><p className="mt-1 text-[10px] text-zinc-600">Sau phí sàn</p></td></tr>; }) : <tr><td colSpan={5} className="px-4 py-16 text-center text-sm text-zinc-500">Không có đơn hàng phù hợp.</td></tr>}</tbody></table></div></div>
      <OrderDetail order={selected} onChat={openChat} onDelivered={markDelivered} onDetail={(order) => router.push(`/${params.locale || 'vi'}/seller/orders/${order.id}`)} loadingId={actionLoading}/></section>

    {chatOrder && <ChatModal order={chatOrder} userId={user?.id} messages={messages} messageText={messageText} zipFile={zipFile} sending={sendingMessage} onClose={() => setChatOrder(null)} onText={setMessageText} onFile={setZipFile} onSend={sendMessage} onAdmin={requestAdmin}/>}
  </div>;
}

function OrderDetail({ order, onChat, onDelivered, onDetail, loadingId }: { order: Order | null; onChat: (order: Order) => void; onDelivered: (id: string) => void; onDetail: (order: Order) => void; loadingId: string | null }) {
  if (!order) return <aside className="rounded-xl border border-white/10 bg-[#141414] p-5 text-sm text-zinc-500">Chọn một đơn hàng để xem chi tiết.</aside>;
  const status = STATUS[order.status] || STATUS.PENDING;
  return <aside className="rounded-xl border border-white/10 bg-[#141414] p-4"><div className="flex items-start justify-between gap-2"><div><p className="text-xs text-zinc-500">Chi tiết đơn đang chọn</p><h2 className="mt-1 font-mono text-sm font-black text-white">ORD-{order.id.slice(0, 8).toUpperCase()}</h2></div><span className={`rounded-full border px-2 py-1 text-[10px] font-bold ${status.tone}`}>{status.label}</span></div><div className="mt-4 space-y-3 border-y border-white/10 py-4 text-xs"><Detail label="Người mua" value={order.buyer?.name || 'Khách hàng'}/><Detail label="Email" value={order.buyer?.email || '—'}/><Detail label="Sản phẩm" value={order.items?.[0]?.product?.name || '—'}/><Detail label="Thanh toán" value={money(order.totalAmount)}/><Detail label="Doanh thu sau phí" value={money(order.sellerPayout)} accent/><Detail label="Thời gian đặt" value={shortDate(order.createdAt)}/></div><div className="mt-4"><p className="mb-3 text-xs font-bold text-zinc-300">Tiến trình giao hàng</p><ol className="space-y-3 text-xs text-zinc-500"><li className="flex gap-2"><span className="mt-0.5 h-2 w-2 rounded-full bg-emerald-400"/>Đơn được tạo</li><li className="flex gap-2"><span className={`mt-0.5 h-2 w-2 rounded-full ${['ESCROW','DELIVERED','COMPLETED'].includes(order.status) ? 'bg-emerald-400' : 'bg-zinc-700'}`}/>Thanh toán thành công</li><li className="flex gap-2"><span className={`mt-0.5 h-2 w-2 rounded-full ${['DELIVERED','COMPLETED'].includes(order.status) ? 'bg-emerald-400' : 'bg-zinc-700'}`}/>Bàn giao cho người mua</li></ol></div><div className="mt-5 grid gap-2"><button onClick={() => onDetail(order)} className="rounded-lg border border-sky-400/30 bg-sky-500/10 px-3 py-2.5 text-xs font-bold text-sky-200">Xem chi tiết đơn hàng <ChevronRight className="ml-1 inline h-3.5 w-3.5"/></button>{order.status === 'ESCROW' && <button onClick={() => onDelivered(order.id)} disabled={loadingId === order.id} className="rounded-lg bg-emerald-500 px-3 py-2.5 text-xs font-black text-black disabled:opacity-50">{loadingId === order.id ? 'Đang cập nhật...' : 'Đánh dấu đã giao'}</button>}<button onClick={() => onChat(order)} className="rounded-lg border border-violet-400/30 bg-violet-500/10 px-3 py-2.5 text-xs font-bold text-violet-200">Liên hệ người mua</button></div></aside>;
}

function Detail({ label, value, accent = false }: { label: string; value: string; accent?: boolean }) { return <div className="flex justify-between gap-3"><span className="text-zinc-500">{label}</span><span className={`max-w-[155px] text-right font-semibold ${accent ? 'text-emerald-300' : 'text-zinc-200'}`}>{value}</span></div>; }

function ChatModal({ order, userId, messages, messageText, zipFile, sending, onClose, onText, onFile, onSend, onAdmin }: { order: Order; userId?: string; messages: any[]; messageText: string; zipFile: File | null; sending: boolean; onClose: () => void; onText: (value: string) => void; onFile: (file: File | null) => void; onSend: () => void; onAdmin: () => void }) { return <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm"><div className="flex h-[min(620px,90vh)] w-full max-w-xl flex-col rounded-2xl border border-white/10 bg-[#17191f] p-5 shadow-2xl"><div className="flex items-start justify-between border-b border-white/10 pb-3"><div><h3 className="flex items-center gap-2 font-bold text-white"><MessageCircle className="h-5 w-5 text-violet-300"/>Chat với {order.buyer?.name || 'người mua'}</h3><p className="mt-1 text-xs text-zinc-500">Đơn ORD-{order.id.slice(0, 8).toUpperCase()} · Seller có thể gửi tệp ZIP.</p></div><button onClick={onClose} className="rounded-lg bg-white/5 p-2 text-zinc-300"><X className="h-4 w-4"/></button></div><div className="flex-1 space-y-3 overflow-y-auto py-4">{messages.length ? messages.map((message) => { const mine = message.senderId === userId; const name = mine ? 'Bạn' : message.sender?.name || order.buyer?.name || 'Người mua'; const role = mine ? 'SELLER' : message.sender?.role?.name || 'BUYER'; return <div key={message.id} className={`flex ${mine ? 'justify-end' : 'justify-start'}`}><div className={`max-w-[82%] rounded-xl border p-3 text-sm ${mine ? 'border-violet-400/30 bg-violet-600 text-white' : 'border-white/5 bg-white/5 text-zinc-200'}`}><p className={`mb-1 text-[11px] font-bold ${mine ? 'text-violet-100' : 'text-cyan-300'}`}>{name} · {role}</p><p>{message.content}</p>{message.attachment && <button onClick={async () => { const response = await api.get(`/orders/${order.id}/messages/${message.id}/download`, { responseType: 'blob' }); const url = URL.createObjectURL(response.data); const link = document.createElement('a'); link.href = url; link.download = message.attachment.name; link.click(); URL.revokeObjectURL(url); }} className="mt-2 inline-flex items-center gap-2 rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-xs font-bold"><Download className="h-4 w-4"/>{message.attachment.name}</button>}<p className={`mt-2 text-[10px] ${mine ? 'text-right text-violet-100/70' : 'text-zinc-500'}`}>{shortDate(message.createdAt)}</p></div></div>; }) : <p className="py-10 text-center text-sm text-zinc-500">Chưa có tin nhắn. Hãy bắt đầu trao đổi với người mua.</p>}</div><div className="border-t border-white/10 pt-3"><button onClick={onAdmin} className="mb-3 flex w-full items-center justify-center gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs font-bold text-amber-300"><AlertCircle className="h-4 w-4"/>Mời admin vào cuộc trò chuyện</button><div className="flex gap-2"><input value={messageText} onChange={(event) => onText(event.target.value)} onKeyDown={(event) => event.key === 'Enter' && onSend()} className="min-w-0 flex-1 rounded-lg bg-black/30 px-3 py-2 text-sm text-white outline-none" placeholder="Nhập tin nhắn cho người mua"/><label className="flex cursor-pointer items-center justify-center rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-3 text-cyan-300"><Paperclip className="h-4 w-4"/><input type="file" accept=".zip,application/zip" className="hidden" onChange={(event) => onFile(event.target.files?.[0] || null)}/></label><button onClick={onSend} disabled={sending || (!messageText.trim() && !zipFile)} className="rounded-lg bg-violet-600 px-4 text-sm font-bold text-white disabled:opacity-50"><Send className="h-4 w-4"/></button></div>{zipFile && <p className="mt-2 text-xs text-cyan-300">Đính kèm ZIP: {zipFile.name}</p>}</div></div></div>; }