'use client';
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Users, Search, Shield } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

export function AdminUsersPage() {
  const [users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');

  useEffect(() => {
    fetch('/api/admin/users').then(r => r.json()).then(d => { setUsers(Array.isArray(d) ? d : []); setLoading(false); }).catch(() => setLoading(false));
  }, []);

  const filtered = (users ?? []).filter((u: any) =>
    (u?.name ?? '').toLowerCase().includes((search ?? '').toLowerCase()) ||
    (u?.email ?? '').toLowerCase().includes((search ?? '').toLowerCase())
  );

  return (
    <div className="max-w-[1200px] mx-auto">
      <div className="mb-6">
        <h1 className="font-display text-2xl font-bold tracking-tight flex items-center gap-2"><Users className="w-6 h-6 text-primary" /> All Users</h1>
        <p className="text-muted-foreground text-sm mt-1">Manage registered users</p>
      </div>

      <div className="relative mb-6">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
        <Input placeholder="Search users..." value={search} onChange={(e: any) => setSearch(e?.target?.value ?? '')} className="pl-10 max-w-sm" />
      </div>

      {loading ? (
        <div className="space-y-2">{[1,2,3,4].map(i => <div key={i} className="h-16 bg-muted rounded-xl animate-pulse" />)}</div>
      ) : (
        <div className="space-y-2">
          {filtered.map((u: any, i: number) => (
            <motion.div key={u?.id} initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: i * 0.05 }}>
              <Card className="hover:shadow-md transition-shadow">
                <CardContent className="p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">
                      {(u?.name ?? '?')?.[0]?.toUpperCase?.() ?? '?'}
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <p className="font-medium">{u?.name ?? ''}</p>
                        {u?.role === 'ADMIN' && <Badge variant="default" className="text-xs"><Shield className="w-3 h-3 mr-1" />Admin</Badge>}
                      </div>
                      <p className="text-sm text-muted-foreground">{u?.email ?? ''}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-4 text-sm">
                    <div><span className="text-muted-foreground">Plan:</span> <span className="font-medium capitalize">{u?.subscriptionPlan ?? 'free'}</span></div>
                    <Badge variant="secondary" className={u?.subscriptionStatus === 'ACTIVE' ? 'bg-green-100 text-green-700' : ''}>{u?.subscriptionStatus ?? 'INACTIVE'}</Badge>
                    <div className="text-muted-foreground"><span className="font-mono">{u?._count?.invoices ?? 0}</span> invoices</div>
                    <div className="text-muted-foreground"><span className="font-mono">{u?._count?.customers ?? 0}</span> customers</div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      )}
    </div>
  );
}