import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { 
  Package, 
  Settings, 
  Users, 
  ExternalLink, 
  ArrowRight,
  Clock,
  CheckCircle,
  AlertCircle
} from 'lucide-react';
import { Asset, SystemDetails, AssetAssignment } from '@/types/asset-management';

interface RelatedEntitiesNavProps {
  asset?: Asset;
  systemDetails?: SystemDetails;
  assignments?: AssetAssignment[];
  onNavigateToAsset?: (assetId: number) => void;
  onNavigateToSystemDetails?: (systemDetailsId: number) => void;
  onNavigateToAssignments?: () => void;
  onNavigateToEmployee?: (employeeId: number) => void;
  currentView?: 'asset' | 'systemDetails' | 'assignments';
}

const RelatedEntitiesNav: React.FC<RelatedEntitiesNavProps> = ({
  asset,
  systemDetails,
  assignments = [],
  onNavigateToAsset,
  onNavigateToSystemDetails,
  onNavigateToAssignments,
  onNavigateToEmployee,
  currentView
}) => {
  const activeAssignments = assignments.filter(a => !a.returnedDate);
  const completedAssignments = assignments.filter(a => a.returnedDate);
  
  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold">Related Information</h3>
      
      <div className="grid grid-cols-1 gap-4">
        {/* Asset Information */}
        {asset && (
          <Card className={currentView === 'asset' ? 'border-primary bg-primary/5' : ''}>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <Package className="h-4 w-4" />
                Asset Information
                {currentView === 'asset' && (
                  <Badge variant="secondary" className="text-xs">Current</Badge>
                )}
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <div className="space-y-2">
                <div>
                  <p className="font-medium">{asset.assetType}</p>
                  <p className="text-sm text-muted-foreground">{asset.brandModel}</p>
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-xs text-muted-foreground">Serial: {asset.serialNumber}</p>
                    <p className="text-xs text-muted-foreground">Condition: {asset.assetCondition}</p>
                  </div>
                  {onNavigateToAsset && currentView !== 'asset' && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onNavigateToAsset(asset.assetID)}
                    >
                      <ExternalLink className="h-3 w-3 mr-1" />
                      View
                    </Button>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {/* System Details */}
        <Card className={currentView === 'systemDetails' ? 'border-primary bg-primary/5' : ''}>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Settings className="h-4 w-4" />
              System Details
              {currentView === 'systemDetails' && (
                <Badge variant="secondary" className="text-xs">Current</Badge>
              )}
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            {systemDetails ? (
              <div className="space-y-2">
                <div>
                  <p className="font-medium">{systemDetails.systemModel}</p>
                  <p className="text-sm text-muted-foreground">{systemDetails.manufacturer}</p>
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-xs text-muted-foreground">CPU: {systemDetails.processor}</p>
                    <p className="text-xs text-muted-foreground">RAM: {systemDetails.installedRAM}</p>
                  </div>
                  {onNavigateToSystemDetails && currentView !== 'systemDetails' && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onNavigateToSystemDetails(systemDetails.systemDetailsID)}
                    >
                      <ExternalLink className="h-3 w-3 mr-1" />
                      View
                    </Button>
                  )}
                </div>
              </div>
            ) : (
              <div className="text-center py-4">
                <AlertCircle className="h-8 w-8 mx-auto mb-2 text-muted-foreground opacity-50" />
                <p className="text-sm text-muted-foreground">No system details available</p>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Assignment History */}
        <Card className={currentView === 'assignments' ? 'border-primary bg-primary/5' : ''}>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm flex items-center gap-2">
              <Users className="h-4 w-4" />
              Assignment History
              {currentView === 'assignments' && (
                <Badge variant="secondary" className="text-xs">Current</Badge>
              )}
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            {assignments.length > 0 ? (
              <div className="space-y-3">
                {/* Current Assignment */}
                {activeAssignments.length > 0 && (
                  <div>
                    <div className="flex items-center gap-2 mb-2">
                      <Badge variant="default" className="bg-green-600 text-xs">
                        <Clock className="h-3 w-3 mr-1" />
                        Active
                      </Badge>
                      <span className="text-xs text-muted-foreground">Current Assignment</span>
                    </div>
                    {activeAssignments.map(assignment => (
                      <div key={assignment.assignmentID} className="flex items-center justify-between">
                        <div>
                          <p className="text-sm font-medium">{assignment.employeeName || `Employee #${assignment.employeeID}`}</p>
                          <p className="text-xs text-muted-foreground">
                            Since {new Date(assignment.assignedDate).toLocaleDateString()}
                          </p>
                        </div>
                        {onNavigateToEmployee && (
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => onNavigateToEmployee(assignment.employeeID)}
                          >
                            <ExternalLink className="h-3 w-3 mr-1" />
                            View
                          </Button>
                        )}
                      </div>
                    ))}
                  </div>
                )}

                {/* Assignment Summary */}
                <div className="flex items-center justify-between pt-2 border-t">
                  <div className="flex items-center gap-4 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      {activeAssignments.length} active
                    </span>
                    <span className="flex items-center gap-1">
                      <CheckCircle className="h-3 w-3" />
                      {completedAssignments.length} completed
                    </span>
                  </div>
                  {onNavigateToAssignments && currentView !== 'assignments' && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={onNavigateToAssignments}
                    >
                      <ExternalLink className="h-3 w-3 mr-1" />
                      View All
                    </Button>
                  )}
                </div>
              </div>
            ) : (
              <div className="text-center py-4">
                <Users className="h-8 w-8 mx-auto mb-2 text-muted-foreground opacity-50" />
                <p className="text-sm text-muted-foreground">No assignments yet</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default RelatedEntitiesNav;