'use client';

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Button, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Skeleton, Dropdown } from '@the-order/ui';
import { getApiClient } from '@the-order/api-client';

export default function UsersPage(): JSX.Element {
  const [searchTerm, setSearchTerm] = useState('');

  // Mock data - in production, this would fetch from an API
  const { data: users, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: async () => {
      // Placeholder - would be a real API call
      return [
        { id: '1', email: 'admin@theorder.org', name: 'Admin User', role: 'admin', status: 'active' },
        { id: '2', email: 'reviewer@theorder.org', name: 'Reviewer User', role: 'reviewer', status: 'active' },
        { id: '3', email: 'user@example.com', name: 'Regular User', role: 'user', status: 'inactive' },
      ];
    },
  });

  const filteredUsers = users?.filter(
    (user: { email: string; name: string }) =>
      user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4">
        <div className="mb-8 flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">User Management</h1>
            <p className="text-gray-600">Manage users and their permissions</p>
          </div>
          <Button>Add User</Button>
        </div>

        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Users</CardTitle>
                <CardDescription>Manage system users and their roles</CardDescription>
              </div>
              <div className="w-64">
                <Input
                  placeholder="Search users..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
            </div>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="space-y-4">
                {[1, 2, 3].map((i) => (
                  <Skeleton key={i} className="h-16 w-full" />
                ))}
              </div>
            ) : filteredUsers && filteredUsers.length > 0 ? (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Name</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Role</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredUsers.map((user) => (
                    <TableRow key={user.id}>
                      <TableCell className="font-medium">{user.name}</TableCell>
                      <TableCell>{user.email}</TableCell>
                      <TableCell>
                        <Badge variant={user.role === 'admin' ? 'default' : 'secondary'}>
                          {user.role}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge variant={user.status === 'active' ? 'success' : 'warning'}>
                          {user.status}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Dropdown
                          trigger={<Button variant="outline" size="sm">Actions</Button>}
                          items={[
                            { label: 'Edit', value: 'edit', onClick: () => console.log('Edit', user.id) },
                            { label: 'Reset Password', value: 'reset', onClick: () => console.log('Reset', user.id) },
                            { divider: true },
                            {
                              label: user.status === 'active' ? 'Deactivate' : 'Activate',
                              value: 'toggle',
                              onClick: () => console.log('Toggle', user.id),
                            },
                          ]}
                        />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <p className="text-center text-gray-600 py-8">No users found</p>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

