// app/components/admin/CommonComponents/PermissionMatrix.tsx
'use client';

export interface Permission {
  id: string;
  name: string;
  description: string;
  module: string;
  action: string;
}

interface PermissionMatrixProps {
  permissions: Permission[];
  selectedIds: string[];
  onToggle: (id: string) => void;
  onToggleModule: (module: string, permissionIds: string[], allSelected: boolean) => void;
  onSelectAll: () => void;
  onClearAll: () => void;
  className?: string;
}

function groupByModule(permissions: Permission[]): Record<string, Permission[]> {
  return permissions.reduce<Record<string, Permission[]>>((acc, p) => {
    (acc[p.module] ??= []).push(p);
    return acc;
  }, {});
}

function humanise(str: string) {
  return str.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
}

export default function PermissionMatrix({
  permissions,
  selectedIds,
  onToggle,
  onToggleModule,
  onSelectAll,
  onClearAll,
  className = '',
}: PermissionMatrixProps) {
  const grouped = groupByModule(permissions);

  if (permissions.length === 0) {
    return (
      <div className={`text-center py-12 text-var-text-muted border-2 border-dashed border-var-border rounded-xl ${className}`}>
        <svg className="w-16 h-16 mx-auto mb-4 text-var-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
        </svg>
        <p className="text-lg font-medium text-var-text mb-1">No Permissions Available</p>
        <p className="text-sm">Permissions need to be configured in the system first.</p>
      </div>
    );
  }

  return (
    <div className={`space-y-4 ${className}`}>
      {Object.entries(grouped).map(([module, modulePerms]) => {
        const allSelected = modulePerms.every(p => selectedIds.includes(p.id));

        return (
          <div key={module} className="border border-var-border rounded-xl overflow-hidden">
            <div className="bg-var-surface-hover px-4 py-3 border-b border-var-border flex items-center justify-between">
              <h4 className="font-medium text-var-text">{humanise(module)}</h4>
              <button
                type="button"
                onClick={() => onToggleModule(module, modulePerms.map(p => p.id), allSelected)}
                className="text-sm font-medium text-var-primary hover:text-var-primary-hover transition-colors duration-150"
              >
                {allSelected ? 'Deselect All' : 'Select All'}
              </button>
            </div>

            <div className="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
              {modulePerms.map(permission => (
                <label
                  key={permission.id}
                  htmlFor={`permission-${permission.id}`}
                  className="flex items-start gap-3 p-3 border border-var-border rounded-lg hover:bg-var-surface-hover cursor-pointer transition-colors duration-150"
                >
                  <input
                    type="checkbox"
                    id={`permission-${permission.id}`}
                    checked={selectedIds.includes(permission.id)}
                    onChange={() => onToggle(permission.id)}
                    className="mt-0.5 w-4 h-4 text-var-primary border-var-border rounded focus:ring-var-primary shrink-0"
                  />
                  <div className="min-w-0">
                    <span className="block text-sm font-medium text-var-text leading-snug">
                      {permission.name}
                    </span>
                    <span className="block text-xs text-var-text-muted mt-0.5 line-clamp-2">
                      {permission.description}
                    </span>
                  </div>
                </label>
              ))}
            </div>
          </div>
        );
      })}

      <div className="bg-var-primary-muted border border-var-border rounded-xl p-4">
        <h4 className="text-sm font-medium text-var-text mb-2">Quick Actions</h4>
        <div className="flex flex-wrap gap-2">
          <button
            type="button"
            onClick={onClearAll}
            className="text-sm text-var-primary hover:text-var-primary-hover px-3 py-1 bg-var-surface border border-var-border rounded-lg hover:bg-var-surface-hover transition-colors duration-200"
          >
            Clear All
          </button>
          <button
            type="button"
            onClick={onSelectAll}
            className="text-sm text-var-primary hover:text-var-primary-hover px-3 py-1 bg-var-surface border border-var-border rounded-lg hover:bg-var-surface-hover transition-colors duration-200"
          >
            Select All Permissions
          </button>
        </div>
      </div>
    </div>
  );
}