'use client';

import { useEffect, useState, type ReactNode } from 'react';
import Link from 'next/link';
import { Activity, CalendarDays, CircleDollarSign, Clock3, Infinity, Landmark, ShoppingBag, Users } from 'lucide-react';
import { api } from '@/lib/api';

const money = (value: number) => `${Number(value || 0).toLocaleString('vi-VN')} đ`;

export default function AdminDashboardPage() {
  const [data, setData] = useState<any>(null);
  const todayValue = new Date().toISOString().slice(0, 10);
  const [view, setView] = useState<'all' | 'month' | 'week' | 'day'>('all');
  const [selectedDay, setSelectedDay] = useState(todayValue);
  const [selectedMonth, setSelectedMonth] = useState(todayValue.slice(0, 7));
  useEffect(() => { let from = '', to = ''; if (view === 'day') from = to = selectedDay; if (view === 'month') { const [year, month] = selectedMonth.split('-').map(Number); from = `${selectedMonth}-01`; to = new Date(year, month, 0).toISOString().slice(0, 10); } if (view === 'week') { const date = new Date(`${selectedDay}T00:00:00`); const offset = (date.getDay() + 6) % 7; date.setDate(date.getDate() - offset); from = date.toISOString().slice(0, 10); date.setDate(date.getDate() + 6); to = date.toISOString().slice(0, 10); } void api.get('/admin/stats', { params: from ? { from, to } : {} }).then((response) => setData(response.data)).catch(() => setData({ periods: {} })); }, [view, selectedDay, selectedMonth]);
  const periods = data?.periods || {};
  const cards = [
    { key: 'all', title: 'Toàn thời gian', data: periods.allTime, icon: Infinity, tone: 'from-blue-600 to-blue-500' },
    { key: 'month', title: 'Tháng này', data: periods.thisMonth, icon: CalendarDays, tone: 'from-violet-600 to-purple-500' },
    { key: 'week', title: 'Tuần này', data: periods.thisWeek, icon: Clock3, tone: 'from-emerald-600 to-teal-500' },
    { key: 'day', title: 'Hôm nay', data: periods.today, icon: Activity, tone: 'from-amber-500 to-orange-500' },
  ];
  const maxRevenue = Math.max(1, ...(data?.chart || []).map((item: any) => item.revenue));
  return <div className="space-y-5 pb-8">
    <header className="flex flex-wrap items-start justify-between gap-4"><div><p className="text-xs font-bold uppercase tracking-[.2em] text-red-400">SHOPMMO ADMIN</p><h1 className="mt-1 text-2xl font-black text-white">Tổng quan vận hành</h1><p className="mt-1 text-sm text-gray-500">Theo dõi doanh thu, đơn hàng, phí sàn và hoạt động mới nhất.</p></div><div className="rounded-xl border border-emerald-400/20 bg-emerald-400/10 px-4 py-2 text-sm font-bold text-emerald-300"><span className="mr-2 inline-block h-2 w-2 animate-pulse rounded-full bg-emerald-400" />{data?.onlineUsers ?? '—'} đang hoạt động</div></header>
    <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">{cards.map((card) => { const Icon = card.icon; return <button type="button" onClick={() => setView(card.key as any)} key={card.title} className={`rounded-2xl bg-gradient-to-br ${card.tone} p-4 text-left text-white shadow-lg transition hover:-translate-y-0.5 ${view === card.key ? 'ring-2 ring-white ring-offset-2 ring-offset-[#090909]' : ''}`}><div className="flex items-center justify-between text-xs font-black uppercase"><span>{card.title}</span><span className="rounded-full bg-white/20 p-1"><Icon className="h-5 w-5" /></span></div><div className="mt-4 grid grid-cols-2 gap-2 text-xs"><Metric label="Thành viên" value={card.data?.members ?? '—'} /><Metric label="Đơn hàng" value={card.data?.orders ?? '—'} /><Metric label="Doanh thu" value={card.data ? money(card.data.revenue) : '—'} /><Metric label="Phí sàn 5%" value={card.data ? money(card.data.fees) : '—'} /></div></button>; })}</section>
    {view !== 'all' && <section className="flex flex-wrap items-center gap-3 rounded-2xl border border-white/10 bg-[#121315] p-4"><b className="text-sm text-white">Xem chi tiết</b>{view === 'month' ? <input type="month" value={selectedMonth} onChange={(event) => setSelectedMonth(event.target.value)} className="rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white" /> : <input type="date" value={selectedDay} onChange={(event) => setSelectedDay(event.target.value)} className="rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white" />}<span className="text-sm text-gray-400">Thành viên: <b className="text-white">{data?.selected?.members ?? 0}</b> · Đơn: <b className="text-white">{data?.selected?.orders ?? 0}</b> · Doanh thu: <b className="text-emerald-300">{money(data?.selected?.revenue)}</b> · Phí sàn: <b className="text-amber-300">{money(data?.selected?.fees)}</b></span></section>}
    <section className="grid gap-5 xl:grid-cols-2"><Panel title="Doanh thu & phí sàn 7 ngày"><div className="mt-6 flex h-52 items-end gap-2 border-b border-white/10 pb-6">{(data?.chart || []).map((item: any) => <div key={item.label} className="flex h-full flex-1 flex-col justify-end gap-1 text-center"><div className="mx-auto w-full max-w-8 rounded-t bg-violet-500/80" style={{ height: `${Math.max(3, item.revenue / maxRevenue * 100)}%` }} title={money(item.revenue)} /><span className="mt-2 text-[10px] text-gray-500">{item.label}</span></div>)}</div><div className="mt-4 flex gap-5 text-xs"><span className="text-violet-300">■ Doanh thu đơn hoàn tất</span><span className="text-emerald-300">Phí sàn cố định 5%</span></div></Panel><Panel title="Tình trạng dòng tiền"><div className="mt-4 grid grid-cols-2 gap-3"><Info icon={<Landmark />} label="Đang giữ Escrow" value={money(data?.escrowAmount)} color="text-amber-300" /><Info icon={<CircleDollarSign />} label="Khiếu nại đang mở" value={data?.openDisputes ?? 0} color="text-red-300" /><Info icon={<ShoppingBag />} label="Đơn tuần này" value={periods.thisWeek?.orders ?? 0} color="text-violet-300" /><Info icon={<Users />} label="Thành viên mới" value={periods.thisWeek?.members ?? 0} color="text-sky-300" /></div><div className="mt-5 rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-gray-400">Seller nhận 95% giá trị đơn sau khi giao dịch hoàn tất. Phí sàn 5% được lưu riêng trên từng đơn để đối soát.</div></Panel></section>
    <section className="grid gap-5 xl:grid-cols-2"><Timeline title="Đơn hàng gần đây" link="/vi/admin/orders" items={(data?.recentOrders || []).map((order: any) => ({ id: order.id, title: `${order.buyer?.name || order.buyer?.email || 'Khách'} mua ${order.items?.[0]?.product?.name || 'sản phẩm'}`, meta: `${money(order.totalAmount)} · ${order.status}`, date: order.createdAt }))} /><Timeline title="Nạp tiền gần đây" link="/vi/admin/payments" items={(data?.recentDeposits || []).map((deposit: any) => ({ id: deposit.id, title: `${deposit.user?.name || deposit.user?.email || 'Người dùng'} nạp qua ${deposit.providerName}`, meta: `${money(deposit.amount)} · ${deposit.status}`, date: deposit.createdAt }))} /></section>
  </div>;
}

function Metric({ label, value }: { label: string; value: any }) { return <div className="rounded-lg bg-black/15 p-2"><p className="text-[10px] opacity-75">{label}</p><p className="mt-1 font-black">{value}</p></div>; }
function Panel({ title, children }: { title: string; children: ReactNode }) { return <div className="rounded-2xl border border-white/10 bg-[#121315] p-5"><h2 className="border-l-2 border-teal-400 pl-2 text-sm font-black uppercase text-white">{title}</h2>{children}</div>; }
function Info({ icon, label, value, color }: { icon: ReactNode; label: string; value: any; color: string }) { return <div className="rounded-xl border border-white/10 bg-black/20 p-3"><div className={`flex items-center gap-2 text-xs ${color}`}>{icon}{label}</div><p className="mt-3 text-xl font-black text-white">{value}</p></div>; }
function Timeline({ title, link, items }: { title: string; link: string; items: any[] }) { return <div className="rounded-2xl border border-white/10 bg-[#121315] p-5"><div className="flex items-center justify-between"><h2 className="border-l-2 border-teal-400 pl-2 text-sm font-black uppercase text-white">{title}</h2><Link href={link} className="text-xs font-bold text-teal-300 hover:underline">Xem tất cả</Link></div><div className="mt-4 max-h-72 space-y-3 overflow-auto">{items.length ? items.map((item) => <div key={item.id} className="border-l border-emerald-400/30 pl-4"><div className="rounded-lg bg-black/30 p-3"><p className="text-sm font-semibold text-white">{item.title}</p><p className="mt-1 text-xs text-gray-400">{item.meta}</p><p className="mt-1 text-[10px] text-gray-600">{new Date(item.date).toLocaleString('vi-VN')}</p></div></div>) : <p className="py-8 text-center text-sm text-gray-500">Chưa có dữ liệu.</p>}</div></div>; }