/**
 * Admin Roles & Permissions Page
 * Manage user roles and permissions
 */

import { useState } from 'react';
import { Shield, Users, Lock, Loader2 } from 'lucide-react';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';

const roles = [
  {
    id: 'developer',
    name: 'Developer',
    description: 'Super admin with full system access',
    color: 'error' as const,
    userCount: 1,
    permissions: ['all'],
  },
  {
    id: 'owner',
    name: 'Owner',
    description: 'Account owner with full account access',
    color: 'primary' as const,
    userCount: 5,
    permissions: ['manage_account', 'manage_billing', 'manage_team', 'manage_sites', 'view_analytics'],
  },
  {
    id: 'admin',
    name: 'Admin',
    description: 'Account admin with most permissions',
    color: 'success' as const,
    userCount: 12,
    permissions: ['manage_team', 'manage_sites', 'view_analytics', 'manage_content'],
  },
  {
    id: 'editor',
    name: 'Editor',
    description: 'Can edit content and limited settings',
    color: 'warning' as const,
    userCount: 25,
    permissions: ['manage_content', 'view_analytics'],
  },
  {
    id: 'viewer',
    name: 'Viewer',
    description: 'Read-only access',
    color: 'default' as const,
    userCount: 10,
    permissions: ['view_analytics', 'view_content'],
  },
];

export default function AdminRolesPermissionsPage() {
  const [selectedRole, setSelectedRole] = useState(roles[0]);

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Roles & Permissions</h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">
          Manage user roles and their permissions
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Roles List */}
        <div className="lg:col-span-1">
          <Card className="p-4">
            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
              <Shield className="w-5 h-5" />
              System Roles
            </h2>
            <div className="space-y-2">
              {roles.map((role) => (
                <button
                  key={role.id}
                  onClick={() => setSelectedRole(role)}
                  className={`w-full text-left p-3 rounded-lg transition-colors ${
                    selectedRole.id === role.id
                      ? 'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800'
                      : 'hover:bg-gray-50 dark:hover:bg-gray-800'
                  }`}
                >
                  <div className="flex items-center justify-between mb-1">
                    <span className="font-medium text-gray-900 dark:text-white">{role.name}</span>
                    <Badge variant="light" color={role.color}>
                      {role.userCount}
                    </Badge>
                  </div>
                  <p className="text-xs text-gray-600 dark:text-gray-400">{role.description}</p>
                </button>
              ))}
            </div>
          </Card>
        </div>

        {/* Role Details */}
        <div className="lg:col-span-2">
          <Card className="p-6">
            <div className="flex items-center justify-between mb-6">
              <div>
                <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{selectedRole.name}</h2>
                <p className="text-gray-600 dark:text-gray-400 mt-1">{selectedRole.description}</p>
              </div>
              <Badge variant="light" color={selectedRole.color}>
                {selectedRole.userCount} users
              </Badge>
            </div>

            <div className="mb-6">
              <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
                <Lock className="w-5 h-5" />
                Permissions
              </h3>
              <div className="space-y-2">
                {selectedRole.permissions.map((permission) => (
                  <div key={permission} className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                    <input
                      type="checkbox"
                      checked
                      readOnly
                      className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
                    />
                    <span className="text-sm font-medium text-gray-900 dark:text-white">
                      {permission.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
                <Users className="w-5 h-5" />
                Users with this Role
              </h3>
              <div className="text-sm text-gray-600 dark:text-gray-400">
                {selectedRole.userCount} users currently have the {selectedRole.name} role
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}
