import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Users, Lock, Key, Shield, Search, Plus } from 'lucide-react';

const mockRoles = [
  { id: 1, name: 'Super Admin', users: 2, permissions: 100, color: 'red' },
  { id: 2, name: 'Admin', users: 8, permissions: 85, color: 'orange' },
  { id: 3, name: 'Manager', users: 24, permissions: 60, color: 'blue' },
  { id: 4, name: 'Staff', users: 156, permissions: 35, color: 'green' },
  { id: 5, name: 'Guest', users: 489, permissions: 10, color: 'gray' }
];

const mockPermissions = [
  { module: 'User Management', read: true, write: true, delete: true },
  { module: 'Content Management', read: true, write: true, delete: false },
  { module: 'Financial Reports', read: true, write: false, delete: false },
  { module: 'System Settings', read: true, write: true, delete: true }
];

const AccessControl = () => {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Users</CardTitle>
            <Users className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">679</div>
            <p className="text-xs text-gray-600 mt-1">Active accounts</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Roles</CardTitle>
            <Shield className="h-4 w-4 text-purple-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">5</div>
            <p className="text-xs text-gray-600 mt-1">Permission groups</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active Sessions</CardTitle>
            <Key className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">342</div>
            <p className="text-xs text-gray-600 mt-1">Currently logged in</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Failed Logins</CardTitle>
            <Lock className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">23</div>
            <p className="text-xs text-gray-600 mt-1">Last 24 hours</p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>User Roles</CardTitle>
              <CardDescription>Manage user roles and permissions</CardDescription>
            </div>
            <Button>
              <Plus className="h-4 w-4 mr-2" />
              Add Role
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {mockRoles.map((role) => (
              <div key={role.id} className="border rounded-lg p-4 flex items-center justify-between hover:bg-gray-50 transition-colors">
                <div className="flex items-center gap-4 flex-1">
                  <div className={`w-12 h-12 rounded-full bg-${role.color}-100 flex items-center justify-center`}>
                    <Shield className={`h-6 w-6 text-${role.color}-600`} />
                  </div>
                  <div className="flex-1">
                    <h3 className="font-semibold text-gray-900">{role.name}</h3>
                    <p className="text-sm text-gray-600">{role.users} users • {role.permissions}% permissions</p>
                  </div>
                </div>
                <Button variant="outline" size="sm">Edit</Button>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Permission Matrix</CardTitle>
          <CardDescription>View and manage module permissions</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="text-left py-3 px-4 font-semibold">Module</th>
                  <th className="text-center py-3 px-4 font-semibold">Read</th>
                  <th className="text-center py-3 px-4 font-semibold">Write</th>
                  <th className="text-center py-3 px-4 font-semibold">Delete</th>
                </tr>
              </thead>
              <tbody>
                {mockPermissions.map((perm, idx) => (
                  <tr key={idx} className="border-b hover:bg-gray-50">
                    <td className="py-3 px-4">{perm.module}</td>
                    <td className="text-center py-3 px-4">
                      <Badge className={perm.read ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}>
                        {perm.read ? '✓' : '✗'}
                      </Badge>
                    </td>
                    <td className="text-center py-3 px-4">
                      <Badge className={perm.write ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}>
                        {perm.write ? '✓' : '✗'}
                      </Badge>
                    </td>
                    <td className="text-center py-3 px-4">
                      <Badge className={perm.delete ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}>
                        {perm.delete ? '✓' : '✗'}
                      </Badge>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default AccessControl;
