// app/components/admin/dashboard/RecentUsersTable.tsx
'use client';

import { Users } from 'lucide-react';
import { format } from 'date-fns';
import { RecentUser } from '@/types/dashboard';

interface RecentUsersTableProps {
  users: RecentUser[];
}

export default function RecentUsersTable({ users }: RecentUsersTableProps) {
  return (
    <div className="bg-var-surface rounded-xl shadow-var-card border border-var-border overflow-hidden">
      <div className="px-6 py-4 bg-var-primary-muted border-b border-var-border">
        <div className="flex items-center space-x-2">
          <Users className="w-5 h-5 text-var-primary" />
          <h3 className="text-lg font-semibold text-var-text">Recent Users</h3>
        </div>
      </div>
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-var-border">
          <thead className="bg-var-surface-hover">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">User</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">Company</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">Location</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">Orders</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">Total Spent</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">Last Order</th>
            </tr>
          </thead>
          <tbody className="bg-var-surface divide-y divide-var-border">
            {users.map((user) => (
              <tr key={user.id} className="hover:bg-var-surface-hover transition-colors">
                <td className="px-6 py-4">
                  <div>
                    <p className="text-sm font-medium text-var-text">
                      {user.first_name} {user.last_name}
                    </p>
                    <p className="text-xs text-var-text-muted">{user.email}</p>
                  </div>
                </td>
                <td className="px-6 py-4 text-sm text-var-text-secondary">{user.company || '-'}</td>
                <td className="px-6 py-4 text-sm text-var-text-secondary">{user.country || '-'}</td>
                <td className="px-6 py-4">
                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-var-primary-muted text-var-primary">
                    {user.total_orders} orders
                  </span>
                </td>
                <td className="px-6 py-4 text-sm font-semibold text-var-text">
                  ${user.total_spent.toLocaleString()}
                 </td>
                <td className="px-6 py-4 text-sm text-var-text-muted">
                  {user.last_order_date ? format(new Date(user.last_order_date), 'MMM dd, yyyy') : '-'}
                 </td>
               </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}