'use client';
import { useEffect, useState } from 'react';
import { adminService } from '@/services/admin.service';
import type { RoleInfo, PermissionInfo } from '@/types/admin.types';

export default function AdminRolesPage() {
  const [roles, setRoles] = useState<RoleInfo[]>([]);
  const [permissions, setPermissions] = useState<PermissionInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedRole, setSelectedRole] = useState<RoleInfo | null>(null);
  const [showCreate, setShowCreate] = useState(false);
  const [newRole, setNewRole] = useState({ name: 'SUPPORT_AGENT', description: '' });
  const [selectedPerms, setSelectedPerms] = useState<string[]>([]);
  const [actionMsg, setActionMsg] = useState('');

  useEffect(() => {
    Promise.all([
      adminService.listRoles(),
      adminService.listPermissions(),
    ]).then(([rolesRes, permsRes]) => {
      if (rolesRes) setRoles(rolesRes);
      if (permsRes) setPermissions(permsRes);
      setLoading(false);
    });
  }, []);

  const handleCreate = async () => {
    try {
      await adminService.createRole({ name: newRole.name, description: newRole.description, permissionIds: selectedPerms });
      setActionMsg('Role created');
      setShowCreate(false);
      const rolesRes = await adminService.listRoles();
      if (rolesRes) setRoles(rolesRes);
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
  };

  const handleUpdatePerms = async (roleId: string) => {
    try {
      await adminService.updateRole(roleId, { permissionIds: selectedPerms });
      setActionMsg('Permissions updated');
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
  };

  const handleDelete = async (roleId: string) => {
    try {
      await adminService.deleteRole(roleId);
      setActionMsg('Role deleted');
      setRoles(roles.filter(r => r.id !== roleId));
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
  };

  const permsByModule = permissions.reduce((acc: Record<string, PermissionInfo[]>, p) => {
    const mod = p.module || 'General';
    if (!acc[mod]) acc[mod] = [];
    acc[mod].push(p);
    return acc;
  }, {});

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Roles & Permissions</h1>
          <p className="mt-1 text-sm text-white/50">Manage roles and granular permissions</p>
        </div>
        <button onClick={() => setShowCreate(!showCreate)} className="rounded-lg bg-indigo-500/20 px-4 py-2 text-xs font-medium text-indigo-400 hover:bg-indigo-500/30">
          {showCreate ? 'Cancel' : '+ New Role'}
        </button>
      </div>

      {actionMsg && <div className="rounded-lg bg-blue-500/10 p-3 text-sm text-blue-400">{actionMsg}</div>}

      {showCreate && (
        <div className="rounded-xl border border-white/10 bg-white/[0.02] p-4 space-y-3">
          <div className="flex gap-3">
            <select value={newRole.name} onChange={(e) => setNewRole({ ...newRole, name: e.target.value })} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-white">
              <option value="ADMIN">Admin</option>
              <option value="SUPPORT_AGENT">Support Agent</option>
              <option value="MODERATOR">Moderator</option>
              <option value="ANALYST">Analyst</option>
            </select>
            <input type="text" placeholder="Description" value={newRole.description} onChange={(e) => setNewRole({ ...newRole, description: e.target.value })} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-white placeholder-slate-500 flex-1" />
            <button onClick={handleCreate} className="rounded-lg bg-indigo-500/20 px-4 py-2 text-xs font-medium text-indigo-400 hover:bg-indigo-500/30">Create</button>
          </div>
          <div className="flex flex-wrap gap-2">
            {permissions.map((p) => (
              <label key={p.id} className="flex items-center gap-1 cursor-pointer">
                <input type="checkbox" checked={selectedPerms.includes(p.id)} onChange={(e) => {
                  setSelectedPerms(e.target.checked ? [...selectedPerms, p.id] : selectedPerms.filter(id => id !== p.id));
                }} className="rounded border-slate-600 bg-slate-800 text-indigo-500" />
                <span className="text-[10px] text-slate-300">{p.key}</span>
              </label>
            ))}
          </div>
        </div>
      )}

      {loading ? <p className="text-center text-slate-500 py-8">Loading...</p> : (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          {/* Roles List */}
          <div className="space-y-2 lg:col-span-1">
            <h3 className="text-sm font-medium text-white mb-2">Roles ({roles.length})</h3>
            {roles.map((role) => (
              <div key={role.id} onClick={() => { setSelectedRole(role); setSelectedPerms(role.permissions.map(p => p.permissionId)); }}
                className={`cursor-pointer rounded-xl border p-3 transition-colors ${selectedRole?.id === role.id ? 'border-indigo-500/50 bg-indigo-500/10' : 'border-white/5 bg-white/[0.02] hover:bg-white/[0.05]'}`}>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-white">{role.name}</p>
                    <p className="text-xs text-slate-400">{role.description || 'No description'}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-slate-400">{role._count?.users || 0} users</p>
                    {role.isSystem && <span className="text-[9px] text-amber-400">System</span>}
                    {!role.isSystem && <button onClick={(e) => { e.stopPropagation(); handleDelete(role.id); }} className="text-[9px] text-red-400 hover:text-red-300 ml-2">Delete</button>}
                  </div>
                </div>
                <div className="mt-2 flex flex-wrap gap-1">
                  {role.permissions.slice(0, 5).map((rp) => (
                    <span key={rp.permissionId} className="rounded bg-white/5 px-1.5 py-0.5 text-[8px] text-slate-400">{rp.permission.key}</span>
                  ))}
                  {role.permissions.length > 5 && <span className="text-[8px] text-slate-500">+{role.permissions.length - 5} more</span>}
                </div>
              </div>
            ))}
          </div>

          {/* Permissions Editor */}
          <div className="lg:col-span-2 rounded-xl border border-white/5 bg-white/[0.02] p-4">
            {selectedRole ? (
              <>
                <h3 className="text-sm font-medium text-white mb-4">Permissions for {selectedRole.name}</h3>
                <div className="space-y-4 max-h-[600px] overflow-y-auto">
                  {Object.entries(permsByModule).map(([module, perms]) => (
                    <div key={module}>
                      <h4 className="text-xs font-medium text-slate-400 uppercase mb-2">{module}</h4>
                      <div className="flex flex-wrap gap-2">
                        {perms.map((p) => (
                          <label key={p.id} className={`flex items-center gap-1.5 cursor-pointer rounded-lg border px-2.5 py-1.5 transition-colors ${selectedPerms.includes(p.id) ? 'border-indigo-500/50 bg-indigo-500/10' : 'border-white/10 bg-white/5 hover:bg-white/10'}`}>
                            <input type="checkbox" checked={selectedPerms.includes(p.id)} onChange={(e) => {
                              setSelectedPerms(e.target.checked ? [...selectedPerms, p.id] : selectedPerms.filter(id => id !== p.id));
                            }} className="rounded border-slate-600 bg-slate-800 text-indigo-500" />
                            <div>
                              <span className="text-xs text-white">{p.name || p.key}</span>
                              {p.description && <p className="text-[9px] text-slate-500">{p.description}</p>}
                            </div>
                          </label>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
                <button onClick={() => handleUpdatePerms(selectedRole.id)} className="mt-4 rounded-lg bg-indigo-500/20 px-4 py-2 text-xs font-medium text-indigo-400 hover:bg-indigo-500/30">
                  Save Permissions
                </button>
              </>
            ) : (
              <p className="text-center text-slate-500 py-10">Select a role to manage its permissions</p>
            )}
          </div>
        </div>
      )}
    </div>
  );
}