src/components/asset-request/AssetRequestAssignment.tsx

import React, { useState, useMemo, useEffect } from 'react';
import { format } from 'date-fns';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Package,
  User,
  Calendar,
  CheckCircle,
  Loader2,
  AlertCircle,
  Search,
  Plus,
  Minus,
} from 'lucide-react';
import {
  AssetRequest,
  AssetRequestAssignmentRequest,
  AssignedAssetDetail,
} from '@/types/asset-request';
import { Asset, AssetAssignment } from '@/types/asset-management';
import {
  validateAssignmentRequest,
  calculateInventoryImpact,
  logInventoryChange,
  createInventoryAuditLog,
} from '@/utils/inventoryManagement';

interface AssetRequestAssignmentProps {
  approvedRequests: AssetRequest[];
  availableAssets: Asset[];
  allAssets: Asset[];
  activeAssignments: AssetAssignment[];
  isLoading?: boolean;
  onAssign: (id: number, data: AssetRequestAssignmentRequest) => Promise<void>;
  currentUserId: number;
}

interface AssetAllocation {
  assetType: string;
  requestedQuantity: number;
  allocatedAssets: Asset[];
}

const AssetRequestAssignment: React.FC<AssetRequestAssignmentProps> = ({
  approvedRequests,
  availableAssets,
  allAssets,
  activeAssignments,
  isLoading = false,
  onAssign,
  currentUserId,
}) => {
  const [selectedRequest, setSelectedRequest] = useState<AssetRequest | null>(null);
  const [showAssignmentDialog, setShowAssignmentDialog] = useState(false);
  const [assetAllocations, setAssetAllocations] = useState<AssetAllocation[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [filterAssetType, setFilterAssetType] = useState<string>('all');

  // Get unique asset types from available assets
  const assetTypes = useMemo(() => {
    const types = new Set(availableAssets.map((asset) => asset.assetType));
    return Array.from(types).sort();
  }, [availableAssets]);

  // Filter available assets based on search and type
  const filteredAvailableAssets = useMemo(() => {
    let filtered = [...availableAssets];

    if (filterAssetType !== 'all') {
      filtered = filtered.filter((asset) => asset.assetType === filterAssetType);
    }

    if (searchTerm) {
      const term = searchTerm.toLowerCase();
      filtered = filtered.filter(
        (asset) =>
          asset.assetCode.toLowerCase().includes(term) ||
          asset.assetType.toLowerCase().includes(term) ||
          asset.brandModel.toLowerCase().includes(term) ||
          asset.serialNumber.toLowerCase().includes(term)
      );
    }

    return filtered;
  }, [availableAssets, searchTerm, filterAssetType]);

  // Initialize allocations when a request is selected
  useEffect(() => {
    if (selectedRequest) {
      const allocations: AssetAllocation[] = selectedRequest.requestedAssets.map((item) => ({
        assetType: item.assetType,
        requestedQuantity: item.quantity,
        allocatedAssets: [],
      }));
      setAssetAllocations(allocations);
    }
  }, [selectedRequest]);

  const handleSelectRequest = (request: AssetRequest) => {
    setSelectedRequest(request);
    setShowAssignmentDialog(true);
    setSearchTerm('');
    setFilterAssetType('all');
  };

  const handleAddAsset = (asset: Asset, assetType: string) => {
    setAssetAllocations((prev) =>
      prev.map((allocation) => {
        if (allocation.assetType === assetType) {
          // Check if asset is already allocated
          if (allocation.allocatedAssets.some((a) => a.assetID === asset.assetID)) {
            return allocation;
          }
          // Check if we've reached the requested quantity
          if (allocation.allocatedAssets.length >= allocation.requestedQuantity) {
            return allocation;
          }
          return {
            ...allocation,
            allocatedAssets: [...allocation.allocatedAssets, asset],
          };
        }
        return allocation;
      })
    );
  };

  const handleRemoveAsset = (assetId: number, assetType: string) => {
    setAssetAllocations((prev) =>
      prev.map((allocation) => {
        if (allocation.assetType === assetType) {
          return {
            ...allocation,
            allocatedAssets: allocation.allocatedAssets.filter(
              (a) => a.assetID !== assetId
            ),
          };
        }
        return allocation;
      })
    );
  };

  const handleAssignSubmit = async () => {
    if (!selectedRequest) return;

    // Validate that all requested assets have been allocated
    const allAllocated = assetAllocations.every(
      (allocation) => allocation.allocatedAssets.length === allocation.requestedQuantity
    );

    if (!allAllocated) {
      return;
    }

    // Build assigned assets list
    const assignedAssets: AssignedAssetDetail[] = [];
    assetAllocations.forEach((allocation) => {
      allocation.allocatedAssets.forEach((asset) => {
        assignedAssets.push({
          assetID: asset.assetID,
          assetCode: asset.assetCode,
          assetType: asset.assetType,
          quantity: 1, // Each asset is assigned individually
        });
      });
    });

    // Validate assignment request
    const validation = validateAssignmentRequest(assignedAssets, allAssets, activeAssignments);
    
    if (!validation.valid) {
      console.error('Assignment validation failed:', validation.errors);
      alert(`Cannot assign assets:\n${validation.errors.join('\n')}`);
      return;
    }
    
    // Show warnings if any
    if (validation.warnings.length > 0) {
      const proceed = window.confirm(
        `Warning:\n${validation.warnings.join('\n')}\n\nDo you want to proceed with the assignment?`
      );
      if (!proceed) {
        return;
      }
    }

    // Calculate inventory impact
    const impact = calculateInventoryImpact(assignedAssets, allAssets, activeAssignments);
    console.log('Inventory impact:', impact);
    
    // Log each assignment for audit trail
    assignedAssets.forEach((asset) => {
      const auditLog = createInventoryAuditLog({
        action: 'assignment',
        assetType: asset.assetType,
        assetId: asset.assetID,
        assetCode: asset.assetCode,
        employeeId: selectedRequest.employeeID,
        employeeName: selectedRequest.employeeName,
        performedBy: currentUserId,
        previousState: 'available',
        newState: 'assigned',
        requestId: selectedRequest.requestID,
        remarks: `Assigned via asset request #${selectedRequest.requestID}`
      });
      logInventoryChange(auditLog);
    });

    setIsSubmitting(true);
    try {
      await onAssign(selectedRequest.requestID, {
        assignedAssets,
        assignedBy: currentUserId,
      });
      
      console.log('Assignment completed successfully');
      console.log('Updated inventory status:', impact);
      
      setShowAssignmentDialog(false);
      setSelectedRequest(null);
      setAssetAllocations([]);
    } catch (error) {
      console.error('Error assigning assets:', error);
      alert(`Failed to assign assets: ${error instanceof Error ? error.message : 'Unknown error'}`);
    } finally {
      setIsSubmitting(false);
    }
  };

  const isAssetAllocated = (assetId: number): boolean => {
    return assetAllocations.some((allocation) =>
      allocation.allocatedAssets.some((a) => a.assetID === assetId)
    );
  };

  const canAddMoreAssets = (assetType: string): boolean => {
    const allocation = assetAllocations.find((a) => a.assetType === assetType);
    if (!allocation) return false;
    return allocation.allocatedAssets.length < allocation.requestedQuantity;
  };

  const getAllocationProgress = (assetType: string): { current: number; total: number } => {
    const allocation = assetAllocations.find((a) => a.assetType === assetType);
    if (!allocation) return { current: 0, total: 0 };
    return {
      current: allocation.allocatedAssets.length,
      total: allocation.requestedQuantity,
    };
  };

  const isAllocationComplete = (): boolean => {
    return assetAllocations.every(
      (allocation) => allocation.allocatedAssets.length === allocation.requestedQuantity
    );
  };

  if (isLoading) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center py-12">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Approved Requests - Assignment Queue</CardTitle>
        </CardHeader>
        <CardContent>
          {approvedRequests.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-12 text-center">
              <Package className="h-12 w-12 text-muted-foreground mb-4" />
              <p className="text-muted-foreground">
                No approved requests waiting for asset assignment
              </p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Request ID</TableHead>
                    <TableHead>Employee</TableHead>
                    <TableHead>Requested Assets</TableHead>
                    <TableHead>Approved Date</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {approvedRequests.map((request) => (
                    <TableRow key={request.requestID}>
                      <TableCell className="font-medium">#{request.requestID}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <User className="h-4 w-4 text-muted-foreground" />
                          <span>{request.employeeName}</span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="space-y-1">
                          {request.requestedAssets.map((asset, idx) => (
                            <div key={idx} className="text-sm">
                              {asset.assetType} (x{asset.quantity})
                            </div>
                          ))}
                        </div>
                      </TableCell>
                      <TableCell>
                        {request.reviewedDate && (
                          <div className="flex items-center gap-2 text-sm">
                            <Calendar className="h-4 w-4 text-muted-foreground" />
                            <span>{format(new Date(request.reviewedDate), 'MMM dd, yyyy')}</span>
                          </div>
                        )}
                      </TableCell>
                      <TableCell className="text-right">
                        <Button
                          variant="default"
                          size="sm"
                          onClick={() => handleSelectRequest(request)}
                        >
                          <Package className="h-4 w-4 mr-2" />
                          Assign Assets
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Assignment Dialog */}
      <Dialog open={showAssignmentDialog} onOpenChange={setShowAssignmentDialog}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Assign Assets to Request #{selectedRequest?.requestID}</DialogTitle>
            <DialogDescription>
              Select specific assets to assign to {selectedRequest?.employeeName}
            </DialogDescription>
          </DialogHeader>

          {selectedRequest && (
            <div className="space-y-6">
              {/* Request Summary */}
              <Card className="border-2">
                <CardHeader className="pb-3">
                  <CardTitle className="text-base">Request Summary</CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="text-muted-foreground">Employee:</span>{' '}
                      <span className="font-medium">{selectedRequest.employeeName}</span>
                    </div>
                    <div>
                      <span className="text-muted-foreground">Submitted:</span>{' '}
                      <span className="font-medium">
                        {format(new Date(selectedRequest.submittedDate), 'MMM dd, yyyy')}
                      </span>
                    </div>
                  </div>
                  <div className="text-sm">
                    <span className="text-muted-foreground">Justification:</span>{' '}
                    <span>{selectedRequest.justification}</span>
                  </div>
                </CardContent>
              </Card>

              {/* Allocation Progress */}
              <div className="space-y-3">
                <h3 className="text-sm font-semibold">Allocation Progress</h3>
                {assetAllocations.map((allocation, idx) => {
                  const progress = getAllocationProgress(allocation.assetType);
                  const isComplete = progress.current === progress.total;

                  return (
                    <Card key={idx} className={isComplete ? 'border-green-500' : 'border-2'}>
                      <CardContent className="p-4">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center gap-2">
                            <Package className="h-4 w-4" />
                            <span className="font-medium">{allocation.assetType}</span>
                          </div>
                          <Badge
                            className={
                              isComplete
                                ? 'bg-green-100 text-green-800 border-green-200'
                                : 'bg-yellow-100 text-yellow-800 border-yellow-200'
                            }
                          >
                            {progress.current}/{progress.total} Assigned
                          </Badge>
                        </div>

                        {/* Allocated Assets */}
                        {allocation.allocatedAssets.length > 0 && (
                          <div className="space-y-2">
                            {allocation.allocatedAssets.map((asset) => (
                              <div
                                key={asset.assetID}
                                className="flex items-center justify-between bg-muted/50 rounded p-2 text-sm"
                              >
                                <div>
                                  <span className="font-medium">{asset.assetCode}</span>
                                  <span className="text-muted-foreground ml-2">
                                    {asset.brandModel}
                                  </span>
                                </div>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() =>
                                    handleRemoveAsset(asset.assetID, allocation.assetType)
                                  }
                                  className="h-7 w-7 p-0"
                                >
                                  <Minus className="h-4 w-4" />
                                </Button>
                              </div>
                            ))}
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  );
                })}
              </div>

              {/* Asset Selection */}
              <div className="space-y-3">
                <h3 className="text-sm font-semibold">Available Assets</h3>

                {/* Filters */}
                <div className="flex gap-3">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input
                      placeholder="Search by code, type, brand, or serial number..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                  <Select value={filterAssetType} onValueChange={setFilterAssetType}>
                    <SelectTrigger className="w-48">
                      <SelectValue placeholder="Filter by type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Types</SelectItem>
                      {assetTypes.map((type) => (
                        <SelectItem key={type} value={type}>
                          {type}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                {/* Assets List */}
                <div className="border rounded-md max-h-64 overflow-y-auto">
                  {filteredAvailableAssets.length === 0 ? (
                    <div className="flex flex-col items-center justify-center py-8 text-center">
                      <AlertCircle className="h-8 w-8 text-muted-foreground mb-2" />
                      <p className="text-sm text-muted-foreground">
                        No available assets match your search
                      </p>
                    </div>
                  ) : (
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Asset Code</TableHead>
                          <TableHead>Type</TableHead>
                          <TableHead>Brand/Model</TableHead>
                          <TableHead>Condition</TableHead>
                          <TableHead className="text-right">Action</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {filteredAvailableAssets.map((asset) => {
                          const allocated = isAssetAllocated(asset.assetID);
                          const canAdd = canAddMoreAssets(asset.assetType);

                          return (
                            <TableRow key={asset.assetID}>
                              <TableCell className="font-medium">{asset.assetCode}</TableCell>
                              <TableCell>{asset.assetType}</TableCell>
                              <TableCell>{asset.brandModel}</TableCell>
                              <TableCell>
                                <Badge variant="outline">{asset.assetCondition}</Badge>
                              </TableCell>
                              <TableCell className="text-right">
                                {allocated ? (
                                  <Badge className="bg-green-100 text-green-800 border-green-200">
                                    <CheckCircle className="h-3 w-3 mr-1" />
                                    Allocated
                                  </Badge>
                                ) : (
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => handleAddAsset(asset, asset.assetType)}
                                    disabled={!canAdd}
                                  >
                                    <Plus className="h-4 w-4 mr-1" />
                                    Add
                                  </Button>
                                )}
                              </TableCell>
                            </TableRow>
                          );
                        })}
                      </TableBody>
                    </Table>
                  )}
                </div>
              </div>
            </div>
          )}

          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setShowAssignmentDialog(false)}
              disabled={isSubmitting}
            >
              Cancel
            </Button>
            <Button
              onClick={handleAssignSubmit}
              disabled={isSubmitting || !isAllocationComplete()}
              className="bg-green-600 hover:bg-green-700"
            >
              {isSubmitting ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Assigning...
                </>
              ) : (
                <>
                  <CheckCircle className="h-4 w-4 mr-2" />
                  Confirm Assignment
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default AssetRequestAssignment;