import { useQuery } from '@tanstack/react-query'
import { Repeat } from 'lucide-react'
import { getAdminSubscriptions } from '../api/client'
import StatusBadge from '../components/StatusBadge'
import { money } from '../store/shop'

export default function Subscriptions() {
  const { data: subs } = useQuery({ queryKey: ['admin-subs'], queryFn: getAdminSubscriptions })
  const list = subs || []

  return (
    <div>
      <div className="flex items-center gap-2 mb-5"><Repeat className="text-brand" size={22} /><h1 className="text-xl font-bold">Subscriptions</h1></div>
      <div className="bg-card border border-edge rounded-xl overflow-hidden">
        <table className="w-full text-sm">
          <thead><tr className="text-slate-400 text-xs border-b border-edge bg-panel">
            <th className="text-left p-3">Customer</th><th className="text-left">Product</th><th className="text-left">Frequency</th><th className="text-left">Next Delivery</th><th className="text-right">Amount</th><th className="text-center">Status</th>
          </tr></thead>
          <tbody>
            {list.map((s: any) => (
              <tr key={s.id} className="border-b border-edge/50 hover:bg-panel/50">
                <td className="p-3">{s.owner}</td>
                <td className="text-slate-400">{s.productName || `#${s.productId}`}</td>
                <td className="text-slate-400">{s.frequency}</td>
                <td className="text-slate-400">{s.nextDeliveryDate || '-'}</td>
                <td className="text-right">{money(s.price)}</td>
                <td className="text-center"><StatusBadge status={s.status} /></td>
              </tr>
            ))}
            {!list.length && <tr><td colSpan={6} className="text-center text-slate-500 py-8">No subscriptions found.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  )
}
