'use client';
import { useEffect, useState } from 'react';
import { Copy, Share2 } from 'lucide-react';
import { api } from '@/lib/api';

export default function AffiliatePage() {
  const [data, setData] = useState<any>(null);
  useEffect(() => { void api.get('/affiliate/dashboard').then((r) => setData(r.data)).catch(() => setData({ error: true })); }, []);
  if (!data) return <div className="py-24 text-center text-gray-400">Đang tải Affiliate...</div>;
  if (data.error) return <div className="py-24 text-center text-red-300">Không thể tải dữ liệu Affiliate.</div>;
  const card = (name: string, value: string | number, color = 'text-white') => <div className="rounded-2xl border border-white/10 bg-[#121315] p-5"><p className="text-xs font-bold uppercase text-gray-500">{name}</p><p className={`mt-3 text-2xl font-black ${color}`}>{value}</p></div>;
  return <main className="mx-auto max-w-6xl space-y-6 p-5 md:p-8"><header><p className="text-xs font-bold uppercase tracking-[.2em] text-violet-300">SHOPMMO AFFILIATE</p><h1 className="mt-2 text-3xl font-black text-white">Tiếp thị liên kết</h1></header><section className="rounded-2xl border border-violet-400/25 bg-violet-500/10 p-5"><p className="flex gap-2 font-bold text-violet-100"><Share2 className="h-5 w-5" />Link giới thiệu của bạn</p><div className="mt-4 flex gap-3"><code className="min-w-0 flex-1 truncate rounded-xl bg-black/30 px-4 py-3 text-sm text-white">{data.referralUrl}</code><button onClick={() => navigator.clipboard.writeText(data.referralUrl)} className="rounded-xl bg-violet-600 px-4 text-sm font-bold text-white"><Copy className="mr-2 inline h-4 w-4" />Sao chép</button></div><p className="mt-3 text-xs text-violet-200">Mã: {data.referralCode} · Rủi ro: {data.riskStatus} ({data.riskScore})</p></section><section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">{card('Lượt truy cập', data.visits)}{card('Khách đang hoạt động', data.activeReferrals)}{card('Chờ duyệt', `${Number(data.wallet?.pendingBalance || 0).toLocaleString('vi-VN')} đ`, 'text-amber-300')}{card('Có thể rút', `${Number(data.wallet?.availableBalance || 0).toLocaleString('vi-VN')} đ`, 'text-emerald-300')}</section></main>;
}