// src/components/employees/EmployeeOverrides.tsx
'use client';

import { useState, useEffect, useCallback, useRef } from 'react';
import { useRouter } from 'next/navigation';
import toast from 'react-hot-toast';
import { getApiErrorMessage } from '@/lib/utils/apiError';

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

interface Override {
  id: string;
  permission_id: string;
  override_type: 'grant' | 'deny';
  reason: string | null;
  expires_at: string | null;
  granted_at: string;
  granted_by_name?: string;
}

interface EmployeeOverridesProps {
  employeeId: string;
  canManage: boolean;
  allPermissions: Permission[];
  existingOverrides?: Override[];
}

export default function EmployeeOverrides({ 
  employeeId, 
  canManage, 
  allPermissions,
  existingOverrides = []
}: EmployeeOverridesProps) {
  const router = useRouter();
  const [overrides, setOverrides] = useState<Override[]>(existingOverrides);
  const [loading, setLoading] = useState(false);
  const [selectedPermission, setSelectedPermission] = useState<Permission | null>(null);
  const [showModal, setShowModal] = useState(false);
  const [editingOverride, setEditingOverride] = useState<Override | null>(null);
  
  const [formData, setFormData] = useState({
    override_type: 'grant' as 'grant' | 'deny',
    reason: '',
    expires_at: '',
  });
  
  // Track initial mount to avoid the React 19 warning
  const isInitialMount = useRef(true);
  
  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      setOverrides(existingOverrides);
    }
  }, [existingOverrides]);
  
  const fetchOverrides = useCallback(async () => {
    setLoading(true);
    try {
      const res = await fetch(`/api/employees/${employeeId}/overrides`);
      if (res.ok) {
        const data = await res.json();
        setOverrides(data.data || []);
      }
    } catch (error) {
      console.error('Failed to fetch overrides:', error);
    } finally {
      setLoading(false);
    }
  }, [employeeId]);
  
  // Wrap getOverrideForPermission in useCallback
  const getOverrideForPermission = useCallback((permissionId: string): Override | undefined => {
    return overrides.find(o => o.permission_id === permissionId);
  }, [overrides]);
  
  const handleAddOverride = useCallback(async () => {
    if (!selectedPermission) return;
    
    setLoading(true);
    try {
      const res = await fetch(`/api/employees/${employeeId}/overrides`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          permission_id: selectedPermission.id,
          override_type: formData.override_type,
          reason: formData.reason,
          expires_at: formData.expires_at || null,
        }),
      });
      
      const data = await res.json();
      
      if (res.ok) {
        toast.success(data.message || `Permission ${formData.override_type === 'grant' ? 'granted' : 'denied'} successfully`);
        setShowModal(false);
        setSelectedPermission(null);
        setFormData({ override_type: 'grant', reason: '', expires_at: '' });
        await fetchOverrides();
        router.refresh();
      } else {
        toast.error(getApiErrorMessage(data, 'Failed to add override'));
      }
    } catch (error) {
      console.error('Add override error:', error);
      toast.error('Failed to add permission override');
    } finally {
      setLoading(false);
    }
  }, [selectedPermission, employeeId, formData, fetchOverrides, router]);
  
  const handleUpdateOverride = useCallback(async () => {
    if (!editingOverride) return;
    
    setLoading(true);
    try {
      const res = await fetch(`/api/employees/${employeeId}/overrides/${editingOverride.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          override_type: formData.override_type,
          reason: formData.reason,
          expires_at: formData.expires_at || null,
        }),
      });
      
      const data = await res.json();
      
      if (res.ok) {
        toast.success(data.message || 'Override updated successfully');
        setShowModal(false);
        setEditingOverride(null);
        setFormData({ override_type: 'grant', reason: '', expires_at: '' });
        await fetchOverrides();
        router.refresh();
      } else {
        toast.error(getApiErrorMessage(data, 'Failed to update override'));
      }
    } catch (error) {
      console.error('Update override error:', error);
      toast.error('Failed to update permission override');
    } finally {
      setLoading(false);
    }
  }, [editingOverride, employeeId, formData, fetchOverrides, router]);
  
  const handleDeleteOverride = useCallback(async (overrideId: string) => {
    if (!confirm('Remove this override? Employee will revert to role-based permission.')) return;
    
    setLoading(true);
    try {
      const res = await fetch(`/api/employees/${employeeId}/overrides/${overrideId}`, {
        method: 'DELETE',
      });
      
      const data = await res.json();
      
      if (res.ok) {
        toast.success(data.message || 'Override removed successfully');
        await fetchOverrides();
        router.refresh();
      } else {
        toast.error(getApiErrorMessage(data, 'Failed to remove override'));
      }
    } catch (error) {
      console.error('Delete override error:', error);
      toast.error('Failed to remove permission override');
    } finally {
      setLoading(false);
    }
  }, [employeeId, fetchOverrides, router]);
  
  const openAddModal = useCallback((permission: Permission) => {
    const existingOverride = getOverrideForPermission(permission.id);
    if (existingOverride) {
      setEditingOverride(existingOverride);
      setFormData({
        override_type: existingOverride.override_type,
        reason: existingOverride.reason || '',
        expires_at: existingOverride.expires_at?.split('.')[0] || '',
      });
    } else {
      setEditingOverride(null);
      setFormData({
        override_type: 'grant',
        reason: '',
        expires_at: '',
      });
    }
    setSelectedPermission(permission);
    setShowModal(true);
  }, [getOverrideForPermission]);
  
  // Group permissions with their override status
  const permissionsWithStatus = allPermissions.map(permission => {
    const override = getOverrideForPermission(permission.id);
    return {
      ...permission,
      override,
      hasOverride: !!override,
      overrideType: override?.override_type,
    };
  });
  
  // Group by module
  const groupedPermissions = permissionsWithStatus.reduce((acc, permission) => {
    if (!acc[permission.module]) {
      acc[permission.module] = [];
    }
    acc[permission.module].push(permission);
    return acc;
  }, {} as Record<string, typeof permissionsWithStatus>);
  
  const getOverrideBadge = useCallback((overrideType?: string) => {
    if (overrideType === 'grant') {
      return { bg: 'var(--color-success-light)', text: 'var(--color-success)', icon: '✨', label: 'Extra Granted' };
    }
    if (overrideType === 'deny') {
      return { bg: 'var(--color-danger-light)', text: 'var(--color-danger)', icon: '🚫', label: 'Denied' };
    }
    return null;
  }, []);
  
  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h3 className="text-lg font-semibold" style={{ color: 'var(--color-text)' }}>
            Permission Overrides
          </h3>
          <p className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>
            Grant extra permissions or deny specific ones for this employee
          </p>
        </div>
      </div>
      
      {/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div className="rounded-lg p-3 text-center" style={{ background: 'var(--color-surface-alt)', border: '1px solid var(--color-border)' }}>
          <div className="text-2xl font-bold" style={{ color: 'var(--color-success)' }}>
            {overrides.filter(o => o.override_type === 'grant').length}
          </div>
          <div className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>Granted Overrides</div>
        </div>
        <div className="rounded-lg p-3 text-center" style={{ background: 'var(--color-surface-alt)', border: '1px solid var(--color-border)' }}>
          <div className="text-2xl font-bold" style={{ color: 'var(--color-danger)' }}>
            {overrides.filter(o => o.override_type === 'deny').length}
          </div>
          <div className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>Denied Overrides</div>
        </div>
        <div className="rounded-lg p-3 text-center" style={{ background: 'var(--color-surface-alt)', border: '1px solid var(--color-border)' }}>
          <div className="text-2xl font-bold" style={{ color: 'var(--color-info)' }}>
            {allPermissions.length}
          </div>
          <div className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>Total Permissions</div>
        </div>
      </div>
      
      {/* Permissions Grid */}
      {loading ? (
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="h-16 rounded-lg animate-pulse" style={{ background: 'var(--color-surface-alt)' }}></div>
          ))}
        </div>
      ) : (
        <div className="space-y-4">
          {Object.entries(groupedPermissions).map(([moduleName, permissions]) => (
            <div key={moduleName} className="rounded-lg overflow-hidden" style={{ border: '1px solid var(--color-border)' }}>
              {/* Module Header */}
              <div className="px-4 py-2 flex items-center justify-between" style={{ background: 'var(--color-surface-alt)' }}>
                <span className="font-semibold text-sm" style={{ color: 'var(--color-text)' }}>
                  {moduleName.charAt(0).toUpperCase() + moduleName.slice(1)}
                </span>
                <span className="text-xs px-2 py-0.5 rounded-full" style={{ background: 'var(--color-cta-light)', color: 'var(--color-cta)' }}>
                  {permissions.length} permissions
                </span>
              </div>
              
              {/* Permissions as Chips */}
              <div className="p-3 flex flex-wrap gap-2">
                {permissions.map((permission) => {
                  const badge = getOverrideBadge(permission.overrideType);
                  return (
                    <button
                      key={permission.id}
                      type="button"
                      onClick={() => canManage && openAddModal(permission)}
                      className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all hover:scale-105 ${
                        badge ? 'hover:opacity-80' : 'hover:bg-surface-alt'
                      }`}
                      style={{
                        background: badge?.bg || 'var(--color-surface-alt)',
                        color: badge?.text || 'var(--color-text-secondary)',
                        border: '1px solid var(--color-border)',
                      }}
                    >
                      {badge?.icon && <span>{badge.icon}</span>}
                      <span>can {permission.action.replace('_', ' ')}</span>
                      {badge && (
                        <span className="ml-1 text-[10px] opacity-80">{badge.label}</span>
                      )}
                    </button>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      )}
      
      {/* Add/Edit Modal */}
      {showModal && selectedPermission && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}>
          <div className="rounded-lg max-w-md w-full max-h-[90vh] overflow-y-auto" style={{ 
            background: 'var(--color-surface)',
            border: '1px solid var(--color-border)'
          }}>
            <div className="flex justify-between items-center p-4 border-b" style={{ borderColor: 'var(--color-border)' }}>
              <h3 className="text-lg font-semibold" style={{ color: 'var(--color-text)' }}>
                {editingOverride ? 'Edit Override' : 'Add Override'}
              </h3>
              <button
                type="button"
                onClick={() => {
                  setShowModal(false);
                  setSelectedPermission(null);
                  setEditingOverride(null);
                  setFormData({ override_type: 'grant', reason: '', expires_at: '' });
                }}
                className="p-1 rounded hover:bg-surface-alt transition-colors"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <line x1="18" y1="6" x2="6" y2="18"/>
                  <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            </div>
            
            <div className="p-4 space-y-4">
              <div className="text-center p-3 rounded-lg" style={{ background: 'var(--color-surface-alt)' }}>
                <p className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
                  can {selectedPermission.action.replace('_', ' ')}
                </p>
                <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                  {selectedPermission.name}
                </p>
              </div>
              
              <div>
                <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
                  Override Type
                </label>
                <div className="flex gap-3">
                  <button
                    type="button"
                    onClick={() => setFormData(prev => ({ ...prev, override_type: 'grant' }))}
                    className={`flex-1 py-2 rounded-lg text-sm font-medium transition-all ${
                      formData.override_type === 'grant'
                        ? 'bg-green-500 text-white'
                        : 'bg-surface-alt text-text-secondary border-border'
                    }`}
                    style={{
                      background: formData.override_type === 'grant' ? 'var(--color-success)' : 'var(--color-surface-alt)',
                      color: formData.override_type === 'grant' ? 'white' : 'var(--color-text-secondary)',
                      border: formData.override_type === 'grant' ? 'none' : '1px solid var(--color-border)',
                    }}
                  >
                    ✅ Grant (Give Permission)
                  </button>
                  <button
                    type="button"
                    onClick={() => setFormData(prev => ({ ...prev, override_type: 'deny' }))}
                    className={`flex-1 py-2 rounded-lg text-sm font-medium transition-all ${
                      formData.override_type === 'deny'
                        ? 'bg-red-500 text-white'
                        : 'bg-surface-alt text-text-secondary border-border'
                    }`}
                    style={{
                      background: formData.override_type === 'deny' ? 'var(--color-danger)' : 'var(--color-surface-alt)',
                      color: formData.override_type === 'deny' ? 'white' : 'var(--color-text-secondary)',
                      border: formData.override_type === 'deny' ? 'none' : '1px solid var(--color-border)',
                    }}
                  >
                    ❌ Deny (Remove Permission)
                  </button>
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
                  Reason (Optional)
                </label>
                <textarea
                  rows={2}
                  value={formData.reason}
                  onChange={(e) => setFormData(prev => ({ ...prev, reason: e.target.value }))}
                  placeholder="Why is this override needed?"
                  className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 resize-none"
                  style={{
                    background: 'var(--color-surface-alt)',
                    border: '1px solid var(--color-border)',
                    color: 'var(--color-text)'
                  }}
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
                  Expires At (Optional)
                </label>
                <input
                  type="datetime-local"
                  value={formData.expires_at}
                  onChange={(e) => setFormData(prev => ({ ...prev, expires_at: e.target.value }))}
                  className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
                  style={{
                    background: 'var(--color-surface-alt)',
                    border: '1px solid var(--color-border)',
                    color: 'var(--color-text)'
                  }}
                />
              </div>
            </div>
            
            <div className="flex gap-3 p-4 border-t" style={{ borderColor: 'var(--color-border)' }}>
              <button
                type="button"
                onClick={editingOverride ? handleUpdateOverride : handleAddOverride}
                disabled={loading}
                className="flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-all hover:opacity-90 disabled:opacity-50"
                style={{ background: 'var(--color-cta)', color: 'white' }}
              >
                {loading ? 'Processing...' : (editingOverride ? 'Update Override' : 'Add Override')}
              </button>
              <button
                type="button"
                onClick={() => {
                  setShowModal(false);
                  setSelectedPermission(null);
                  setEditingOverride(null);
                  setFormData({ override_type: 'grant', reason: '', expires_at: '' });
                }}
                className="flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-all hover:opacity-80"
                style={{
                  background: 'var(--color-surface-alt)',
                  color: 'var(--color-text)',
                  border: '1px solid var(--color-border)'
                }}
              >
                Cancel
              </button>
            </div>
            
            {editingOverride && (
              <div className="p-4 border-t" style={{ borderColor: 'var(--color-border)' }}>
                <button
                  type="button"
                  onClick={() => {
                    setShowModal(false);
                    handleDeleteOverride(editingOverride.id);
                  }}
                  className="w-full px-4 py-2 rounded-lg text-sm font-medium transition-all hover:opacity-90"
                  style={{ background: 'var(--color-danger)', color: 'white' }}
                >
                  🗑️ Remove Override
                </button>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}