// src/components/permissions/PermissionsTable.tsx
'use client';

import { useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import DataTable, { Column } from '@/components/ui/DataTable';
import Pagination from '@/components/ui/Pagination';
import FilterPanel from '@/components/ui/FilterPanel';
import Toolbar from '@/components/ui/Toolbar';
import Modal from '@/components/ui/CustomModal'; // Import Modal component
import { toast } from 'react-hot-toast';
import { getApiErrorMessage } from '@/lib/utils/apiError';

interface Permission {
  id: string;
  name: string;
  description: string | null;
  module: string;
  action: string;
  created_at: string;
  role_count?: number; // Add role usage count
}

interface PaginationData {
  page: number;
  limit: number;
  total: number;
  totalPages: number;
}

interface PermissionsTableProps {
  canEdit: boolean;
  canDelete: boolean;
  canBulkDelete: boolean;
  initialPermissions: {
    permissions: Permission[];
    pagination: PaginationData;
  };
  modules: string[];
}

export default function PermissionsTable({ 
  canEdit, 
  canDelete, 
  canBulkDelete, 
  initialPermissions,
  modules 
}: PermissionsTableProps) {
  const router = useRouter();

  const [permissions, setPermissions] = useState<Permission[]>(initialPermissions.permissions);
  const [pagination, setPagination] = useState<PaginationData>(initialPermissions.pagination);
  const [loading, setLoading] = useState(false);
  const [selectedPermissions, setSelectedPermissions] = useState<Set<string>>(new Set());
  const [showFilters, setShowFilters] = useState(false);
  
  // Modal states
  const [modalConfig, setModalConfig] = useState<{
    isOpen: boolean;
    type: 'danger' | 'warning' | 'info' | 'success';
    title: string;
    message: string;
    confirmText?: string;
    cancelText?: string;
    onConfirm: () => void;
  }>({
    isOpen: false,
    type: 'danger',
    title: '',
    message: '',
    confirmText: 'Confirm',
    cancelText: 'Cancel',
    onConfirm: () => {},
  });
  
  const [isDeleting, setIsDeleting] = useState(false);
  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
  
  const [search, setSearch] = useState('');
  const [module, setModule] = useState('');
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  
  const [tempSearch, setTempSearch] = useState('');
  const [tempModule, setTempModule] = useState('');
  const [tempStartDate, setTempStartDate] = useState('');
  const [tempEndDate, setTempEndDate] = useState('');
  
  const [currentPage, setCurrentPage] = useState(1);
  
  const columns: Column<Permission>[] = [
    {
      key: 'name',
      header: 'Name',
      render: (permission: Permission) => (
        <span style={{ color: 'var(--color-text)' }}>{permission.name}</span>
      )
    },
    {
      key: 'module',
      header: 'Module',
      render: (permission: Permission) => (
        <span className="inline-flex px-2 py-1 text-xs font-medium rounded-md" style={{ 
          background: 'var(--color-cta-light)',
          color: 'var(--color-cta)'
        }}>
          {permission.module}
        </span>
      )
    },
    {
      key: 'action',
      header: 'Action',
      render: (permission: Permission) => (
        <span style={{ color: 'var(--color-text-secondary)' }}>{permission.action}</span>
      )
    },
    {
      key: 'role_count',
      header: 'Role Usage',
      render: (permission: Permission) => {
        const count = permission.role_count || 0;
        let color = 'var(--color-text-tertiary)';
        let bgColor = 'transparent';
        
        if (count === 0) {
          color = 'var(--color-text-muted)';
        } else if (count === 1) {
          color = 'var(--color-info)';
          bgColor = 'var(--color-info-light)';
        } else if (count <= 3) {
          color = 'var(--color-warning)';
          bgColor = 'var(--color-warning-light)';
        } else {
          color = 'var(--color-success)';
          bgColor = 'var(--color-success-light)';
        }
        
        return (
          <div className="flex items-center gap-2">
            {count > 0 ? (
              <span 
                className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md"
                style={{ 
                  background: bgColor,
                  color: color
                }}
              >
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                </svg>
                {count} {count === 1 ? 'Role' : 'Roles'}
              </span>
            ) : (
              <span 
                className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md"
                style={{ 
                  background: 'var(--color-surface-alt)',
                  color: color
                }}
              >
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <circle cx="12" cy="12" r="10"/>
                  <line x1="12" y1="8" x2="12" y2="12"/>
                  <line x1="12" y1="16" x2="12.01" y2="16"/>
                </svg>
                Not in use
              </span>
            )}
          </div>
        );
      }
    },
    {
      key: 'description',
      header: 'Description',
      render: (permission: Permission) => (
        <span style={{ color: 'var(--color-text-tertiary)' }}>
          {permission.description || '-'}
        </span>
      )
    },
    {
      key: 'created_at',
      header: 'Created At',
      render: (permission: Permission) => (
        <span style={{ color: 'var(--color-text-tertiary)' }}>
          {new Date(permission.created_at).toLocaleDateString()}
        </span>
      )
    }
  ];
  
  if (canEdit || canDelete) {
    columns.push({
      key: 'actions',
      header: 'Actions',
      className: 'text-right',
      render: (permission: Permission) => (
        <div className="flex justify-end gap-2">
          {canEdit && (
            <button
              onClick={() => router.push(`/admin/dashboard/employees/permissions/edit/${permission.id}`)}
              className="p-1 rounded hover:bg-surface-alt transition-colors"
              style={{ color: 'var(--color-info)' }}
              title="Edit Permission"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"/>
              </svg>
            </button>
          )}
          {canDelete && (
            <button
              onClick={() => {
                if ((permission.role_count || 0) > 0) {
                  // Show warning modal if permission is in use
                  setModalConfig({
                    isOpen: true,
                    type: 'warning',
                    title: 'Cannot Delete Permission',
                    message: `This permission is currently assigned to ${permission.role_count} role(s). Please remove it from all roles before deleting.`,
                    confirmText: 'OK',
                    cancelText: '',
                    onConfirm: () => setModalConfig(prev => ({ ...prev, isOpen: false })),
                  });
                } else {
                  showDeleteConfirmation(permission.id, permission.name);
                }
              }}
              className="p-1 rounded hover:bg-surface-alt transition-colors"
              style={{ color: 'var(--color-danger)' }}
              title="Delete Permission"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
              </svg>
            </button>
          )}
        </div>
      )
    });
  }
  
  const filterFields = [
    {
      name: 'search',
      label: 'Search',
      type: 'text' as const,
      placeholder: 'Search by name, module...',
      value: tempSearch,
      onChange: setTempSearch
    },
    {
      name: 'module',
      label: 'Module',
      type: 'select' as const,
      placeholder: 'All Modules',
      options: modules.map(mod => ({ value: mod, label: mod })),
      value: tempModule,
      onChange: setTempModule
    },
    {
      name: 'startDate',
      label: 'Start Date',
      type: 'date' as const,
      value: tempStartDate,
      onChange: setTempStartDate
    },
    {
      name: 'endDate',
      label: 'End Date',
      type: 'date' as const,
      value: tempEndDate,
      onChange: setTempEndDate
    }
  ];
  
  const showDeleteConfirmation = (id: string, name: string) => {
    setPendingDeleteId(id);
    setModalConfig({
      isOpen: true,
      type: 'danger',
      title: 'Delete Permission',
      message: `Are you sure you want to delete the permission "${name}"? This action cannot be undone.`,
      confirmText: 'Delete',
      cancelText: 'Cancel',
      onConfirm: handleDeletePermission,
    });
  };
  
  const showBulkDeleteConfirmation = () => {
    // Check if any selected permissions are in use
    const selectedPermissionsList = permissions.filter(p => selectedPermissions.has(p.id));
    const inUsePermissions = selectedPermissionsList.filter(p => (p.role_count || 0) > 0);
    
    if (inUsePermissions.length > 0) {
      const permissionNames = inUsePermissions.map(p => p.name).join(', ');
      setModalConfig({
        isOpen: true,
        type: 'warning',
        title: 'Cannot Delete Some Permissions',
        message: `The following permissions are currently assigned to roles and cannot be deleted:\n\n${permissionNames}\n\nPlease remove them from roles first.`,
        confirmText: 'OK',
        cancelText: '',
        onConfirm: () => setModalConfig(prev => ({ ...prev, isOpen: false })),
      });
      return;
    }
    
    setModalConfig({
      isOpen: true,
      type: 'danger',
      title: 'Bulk Delete Permissions',
      message: `Are you sure you want to delete ${selectedPermissions.size} permission(s)? This action cannot be undone.`,
      confirmText: 'Delete All',
      cancelText: 'Cancel',
      onConfirm: handleBulkDelete,
    });
  };
  
  const fetchPermissions = useCallback(async (page: number, filters?: {
    search?: string;
    module?: string;
    startDate?: string;
    endDate?: string;
  }) => {
    setLoading(true);
    
    try {
      const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
      const params = new URLSearchParams();
      
      params.append('page', page.toString());
      params.append('limit', '10');
      
      const searchValue = filters?.search !== undefined ? filters.search : search;
      const moduleValue = filters?.module !== undefined ? filters.module : module;
      const startDateValue = filters?.startDate !== undefined ? filters.startDate : startDate;
      const endDateValue = filters?.endDate !== undefined ? filters.endDate : endDate;
      
      if (searchValue && searchValue.trim()) params.append('search', searchValue);
      if (moduleValue) params.append('module', moduleValue);
      if (startDateValue) params.append('startDate', startDateValue);
      if (endDateValue) params.append('endDate', endDateValue);
      
      const res = await fetch(`${baseUrl}/api/permissions?${params.toString()}`, {
        cache: 'no-store',
      });
      
      if (!res.ok) throw new Error('Failed to fetch');
      
      const data = await res.json();
      setPermissions(data.data.permissions);
      setPagination(data.data.pagination);
      setCurrentPage(page);
      setSelectedPermissions(new Set());
    } catch (error) {
      console.error('Failed to fetch permissions:', error);
    } finally {
      setLoading(false);
    }
  }, [search, module, startDate, endDate]);
  
  const handleToggleFilters = useCallback(() => {
    if (!showFilters) {
      setTempSearch(search);
      setTempModule(module);
      setTempStartDate(startDate);
      setTempEndDate(endDate);
    }
    setShowFilters(!showFilters);
  }, [showFilters, search, module, startDate, endDate]);
  
  const handleApplyFilters = useCallback(() => {
    setSearch(tempSearch);
    setModule(tempModule);
    setStartDate(tempStartDate);
    setEndDate(tempEndDate);
    fetchPermissions(1, {
      search: tempSearch,
      module: tempModule,
      startDate: tempStartDate,
      endDate: tempEndDate
    });
  }, [tempSearch, tempModule, tempStartDate, tempEndDate, fetchPermissions]);
  
  const handleResetFilters = useCallback(() => {
    setTempSearch('');
    setTempModule('');
    setTempStartDate('');
    setTempEndDate('');
    setSearch('');
    setModule('');
    setStartDate('');
    setEndDate('');
    fetchPermissions(1, {
      search: '',
      module: '',
      startDate: '',
      endDate: ''
    });
  }, [fetchPermissions]);
  
  const handlePageChange = useCallback((page: number) => {
    if (page < 1 || page > pagination.totalPages) return;
    fetchPermissions(page);
  }, [pagination.totalPages, fetchPermissions]);
  
  const handleSelectAll = useCallback(() => {
    if (selectedPermissions.size === permissions.length) {
      setSelectedPermissions(new Set());
    } else {
      setSelectedPermissions(new Set(permissions.map(p => p.id)));
    }
  }, [selectedPermissions.size, permissions]);
  
  const handleSelectPermission = useCallback((id: string) => {
    setSelectedPermissions(prev => {
      const newSelected = new Set(prev);
      if (newSelected.has(id)) {
        newSelected.delete(id);
      } else {
        newSelected.add(id);
      }
      return newSelected;
    });
  }, []);
  
  const handleBulkDelete = useCallback(async () => {
    setIsDeleting(true);
    
    try {
      const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
      const res = await fetch(`${baseUrl}/api/permissions/bulk`, {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ids: Array.from(selectedPermissions) })
      });
      
      if (res.ok) {
        setModalConfig(prev => ({ ...prev, isOpen: false }));
        await fetchPermissions(currentPage);
      } else {
        const data = await res.json();
        toast.error(getApiErrorMessage(data, 'Failed to delete permissions'));
      }
    } catch (error) {
      console.error('Failed to delete permissions:', error);
    } finally {
      setIsDeleting(false);
      setPendingDeleteId(null);
    }
  }, [selectedPermissions, fetchPermissions, currentPage]);
  
  const handleDeletePermission = useCallback(async () => {
    if (!pendingDeleteId) return;
    
    setIsDeleting(true);
    
    try {
      const res = await fetch(`/api/permissions/${pendingDeleteId}`, { method: 'DELETE' });
      if (res.ok) {
        setModalConfig(prev => ({ ...prev, isOpen: false }));
        await fetchPermissions(currentPage);
      } else {
        const data = await res.json();
        toast.error(getApiErrorMessage(data, 'Failed to delete permission'));
      }
    } catch (error) {
      console.error('Failed to delete permission:', error);
    } finally {
      setIsDeleting(false);
      setPendingDeleteId(null);
    }
  }, [pendingDeleteId, fetchPermissions, currentPage]);
  
  const closeModal = () => {
    if (!isDeleting) {
      setModalConfig(prev => ({ ...prev, isOpen: false }));
      setPendingDeleteId(null);
    }
  };
  
  return (
    <div className="space-y-4">
      <Toolbar
        leftActions={
          <>
            <button
              onClick={handleToggleFilters}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all border"
              style={{ 
                borderColor: 'var(--color-border)',
                color: 'var(--color-text)',
                background: 'var(--color-surface)'
              }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M3 6h18M6 12h12M10 18h4"/>
              </svg>
              {showFilters ? 'Hide Filters' : 'Show Filters'}
            </button>
            
            {canBulkDelete && selectedPermissions.size > 0 && (
              <button
                onClick={showBulkDeleteConfirmation}
                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all"
                style={{ background: 'var(--color-danger)', color: 'white' }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                </svg>
                Delete ({selectedPermissions.size})
              </button>
            )}
          </>
        }
      />
      
      {showFilters && (
        <FilterPanel
          fields={filterFields}
          onApply={handleApplyFilters}
          onReset={handleResetFilters}
          applyButtonText="Apply Filters"
          resetButtonText="Reset"
        />
      )}
      
      <DataTable
        columns={columns}
        data={permissions}
        loading={loading}
        selectedIds={selectedPermissions}
        onSelect={handleSelectPermission}
        onSelectAll={handleSelectAll}
        getRowId={(permission) => permission.id}
        showCheckbox={canBulkDelete}
        emptyMessage="No permissions found"
        skeletonRows={10}
      />
      
      {!loading && pagination.totalPages > 0 && (
        <Pagination
          currentPage={currentPage}
          totalPages={pagination.totalPages}
          totalItems={pagination.total}
          itemsPerPage={pagination.limit}
          onPageChange={handlePageChange}
          showItemsInfo={true}
        />
      )}
      
      {/* Custom Modal */}
      <Modal
        isOpen={modalConfig.isOpen}
        onClose={closeModal}
        onConfirm={modalConfig.onConfirm}
        title={modalConfig.title}
        message={modalConfig.message}
        confirmText={modalConfig.confirmText}
        cancelText={modalConfig.cancelText}
        type={modalConfig.type}
        isLoading={isDeleting}
      />
    </div>
  );
}