import { ArrowLeft, Check, RotateCcw, UserPlus, MessageSquare, FileText, Calendar, AlertTriangle, Send, ShieldCheck, Loader2, Upload, PauseCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Separator } from '@/components/ui/separator';
import { useState, useEffect } from 'react';
import { User } from '@/lib/mock-data';
import { toast } from 'sonner';
import { terminationService } from '@/services/termination.service';
import { useNavigate } from 'react-router-dom';
import { API } from '@/api/API';
import { formatDateTime } from '@/components/ui/utils';
import { formatTerminationStatusLabel } from '@/lib/terminationDisplay';
import {
  getJointRoundCutoffMsFromTimeline,
  isAuditLogInCurrentJointRound
} from '@/lib/terminationJointReviewRound';
import { TERMINATION_DOCUMENT_TYPES, TERMINATION_STAGE_OPTIONS } from '@/lib/offboardingDocumentOptions';
import { DocumentPreviewModal } from '@/components/ui/DocumentPreviewModal';
import { WIDE_DIALOG_CLASS } from '@/lib/dialogStyles';
interface TerminationDetailsProps {
  terminationId: string;
  onBack: () => void;
  currentUser: User | null;
}

export function TerminationDetails({ terminationId, onBack, currentUser }: TerminationDetailsProps) {
  const navigate = useNavigate();
  const [actionDialog, setActionDialog] = useState<{ open: boolean; type: 'approve' | 'withdrawal' | 'sendBack' | 'assign' | 'pushfnf' | 'revoke' | 'hold' | null }>({ open: false, type: null });
  const [remarks, setRemarks] = useState('');
  const [assignToUser, setAssignToUser] = useState('');
  const [stageDocumentsDialog, setStageDocumentsDialog] = useState<{ open: boolean; stageName: string; documents: any[] }>({ open: false, stageName: '', documents: [] });
  const [isLoading, setIsLoading] = useState(true);
  const [terminationData, setTerminationData] = useState<any>(null);
  const [auditLogs, setAuditLogs] = useState<any[]>([]);
  const [showSCNDialog, setShowSCNDialog] = useState(false);
  const [scnFile, setScnFile] = useState<File | null>(null);
  const [scnRemarks, setScnRemarks] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);
  const [showFinalizeDialog, setShowFinalizeDialog] = useState(false);
  const [finalDecision, setFinalDecision] = useState<'Approve' | 'Reject' | 'Reconsider'>('Approve');
  const [finalRemarks, setFinalRemarks] = useState('');
  const [showUploadDialog, setShowUploadDialog] = useState(false);
  const [uploadFile, setUploadFile] = useState<File | null>(null);
  const [uploadDocType, setUploadDocType] = useState<string>(TERMINATION_DOCUMENT_TYPES[0]);
  const [uploadStage, setUploadStage] = useState('');
  const [previewDocument, setPreviewDocument] = useState<any>(null);

  const fetchTermination = async () => {
    try {
      setIsLoading(true);
      const data = await terminationService.getTerminationById(terminationId);
      setTerminationData(data);
      fetchAuditLogs();
    } catch (error) {
      console.error('Error fetching termination:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const fetchAuditLogs = async () => {
    try {
      const response: any = await API.getAuditLogs('termination', terminationId);
      if (response.data && response.data.success) {
        setAuditLogs(response.data.data || []);
      }
    } catch (error) {
      console.error('Error fetching audit logs:', error);
    }
  };

  useEffect(() => {
    fetchTermination();
  }, [terminationId]);

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[400px] space-y-4">
        <Loader2 className="w-8 h-8 text-amber-600 animate-spin" />
        <p className="text-slate-600">Loading termination details...</p>
      </div>
    );
  }

  const handleIssueSCN = async () => {
    try {
      setIsProcessing(true);
      await terminationService.issueSCN(terminationId, { remarks: scnRemarks });
      toast.success('SCN issued successfully');
      setShowSCNDialog(false);
      fetchTermination();
    } catch (error) {
      toast.error('Failed to issue SCN');
    } finally {
      setIsProcessing(false);
    }
  };

  const handleUploadSCNResponse = async () => {
    if (!scnFile) return;
    try {
      setIsProcessing(true);
      await terminationService.uploadSCNResponse(terminationId, scnFile, scnRemarks);
      toast.success('SCN response uploaded');
      setShowSCNDialog(false);
      fetchTermination();
    } catch (error) {
      toast.error('Failed to upload response');
    } finally {
      setIsProcessing(false);
    }
  };

  const handleFinalize = async () => {
    try {
      setIsProcessing(true);
      await terminationService.finalizeTermination(terminationId, finalDecision, finalRemarks);
      toast.success(`Termination ${finalDecision.toLowerCase()}ed`);
      setShowFinalizeDialog(false);
      fetchTermination();
    } catch (error) {
      toast.error('Failed to finalize termination');
    } finally {
      setIsProcessing(false);
    }
  };

  const handleUploadDocument = async () => {
    if (!uploadFile) {
      toast.error('Please select a file to upload');
      return;
    }
    try {
      setIsProcessing(true);
      const formData = new FormData();
      formData.append('file', uploadFile);
      formData.append('documentType', uploadDocType);
      if (uploadStage) formData.append('stage', uploadStage);
      await terminationService.uploadDocument(terminationId, formData);
      toast.success('Document uploaded successfully');
      setShowUploadDialog(false);
      setUploadFile(null);
      setUploadDocType(TERMINATION_DOCUMENT_TYPES[0]);
      setUploadStage('');
      fetchTermination();
    } catch (error) {
      toast.error('Failed to upload document');
    } finally {
      setIsProcessing(false);
    }
  };

  // Check if user can push to F&F (DD Lead and above)
  const canPushToFnF = currentUser && ['DD Lead', 'DD Head', 'DD_HEAD', 'NBH', 'DD Admin', 'Super Admin'].includes(currentUser.role || currentUser.roleCode);

  const stageAliases: Record<string, string[]> = {
    'Submitted': ['Submitted'],
    'RBM + DD-ZM Review': ['RBM + DD-ZM Review'],
    'ZBH Review': ['ZBH Review'],
    'DD Lead Review': ['DD Lead Review'],
    'Legal Verification': ['Legal Verification'],
    'DD Head Review': ['DD Head Review'],
    'NBH Evaluation': ['NBH Evaluation'],
    'Show Cause Notice (SCN)': ['Show Cause Notice', 'Show Cause Notice (SCN)', 'SCN'],
    'Evaluation of Dealer SCN Response': ['Evaluation of Dealer SCN Response', 'Personal Hearing'],
    'NBH Final Approval': ['NBH Final Approval'],
    'CCO Approval': ['CCO Approval'],
    'CEO Final Approval': ['CEO Final Approval'],
    'Legal - Termination Letter': ['Legal - Termination Letter'],
    'Dealer Terminated': ['Terminated', 'Dealer Terminated']
  };

  const stageSequence = [
    'Submitted',
    'RBM + DD-ZM Review',
    'ZBH Review',
    'DD Lead Review',
    'Legal Verification',
    'DD Head Review',
    'NBH Evaluation',
    'Show Cause Notice (SCN)',
    'Evaluation of Dealer SCN Response',
    'NBH Final Approval',
    'CCO Approval',
    'CEO Final Approval',
    'Legal - Termination Letter',
    'Dealer Terminated'
  ];

  // Centralized Permissions Utility for Termination logic (Robust Validation)
  const getTerminationPermissions = () => {
    if (!terminationData || !currentUser) {
      return { canApprove: false, canWithdraw: false, canIssueSCN: false, canUploadSCNResponse: false, canFinalize: false, canPushToFnF: false };
    }

    const currentStage = terminationData.currentStage;
    const status = terminationData.status;
    const userRole = currentUser.role || currentUser.roleCode;
    const isScnStage = ['Show Cause Notice (SCN)', 'SCN'].includes(currentStage);

    const isFinalState = ['Completed', 'Rejected', 'Withdrawn', 'Terminated'].includes(status) || currentStage === 'Terminated';
    const isSettlementPhase = status === 'F&F Initiated' || currentStage === 'F&F Initiated' || status === 'Settled' || status === 'FNF_INITIATED';

    const scnJointRoundCutoffMs = getJointRoundCutoffMsFromTimeline(terminationData.timeline, 'scn_response_eval');
    const rbmJointRoundCutoffMs = getJointRoundCutoffMsFromTimeline(terminationData.timeline, 'rbm_review');
    const isScnResponseEvalStage =
      currentStage === 'Evaluation of Dealer SCN Response' || currentStage === 'Personal Hearing';
    const jointRoundCutoffMs =
      currentStage === 'RBM + DD-ZM Review' ? rbmJointRoundCutoffMs : isScnResponseEvalStage ? scnJointRoundCutoffMs : null;

    const userHasApprovedJointly = auditLogs.some(log => {
      if (!isAuditLogInCurrentJointRound(log, jointRoundCutoffMs)) return false;
      const logUserId = log.userId || log.user?.id || log.actor?.id || log.actorId;
      const isThisUser = String(logUserId) === String(currentUser.id);
      const actionText = (log.action || log.description || '').toUpperCase();
      const isPartialApprove = actionText.includes('PARTIAL_APPROVE') || actionText.includes('PARTIAL APPROVED');
      
      const logStage = log.details?.stage || log.stage || '';
      const isRbmReviewLog = logStage === 'RBM + DD-ZM Review' || (log.remarks || '').includes('Partial approval by');
      const isPersonalHearingLog =
        logStage === 'Evaluation of Dealer SCN Response' ||
        logStage === 'Personal Hearing' ||
        (log.remarks || '').includes('SCN Response Review by');

      const stageMatches =
        (currentStage === 'RBM + DD-ZM Review' && isRbmReviewLog) ||
        (isScnResponseEvalStage && isPersonalHearingLog);
        
      return isThisUser && isPartialApprove && stageMatches;
    });

    const isStage = (stageName: string) => {
      const aliases = stageAliases[stageName] || [stageName];
      return aliases.includes(currentStage);
    };

    const isCurrentlyAssigned = userRole === 'Super Admin' || userRole === 'DD Admin' || (
      (isStage('RBM + DD-ZM Review') && (userRole === 'RBM' || userRole === 'DD-ZM') && !userHasApprovedJointly) ||
      (isStage('ZBH Review') && userRole === 'ZBH') ||
      (isStage('DD Lead Review') && userRole === 'DD Lead') ||
      (isStage('Legal Verification') && userRole === 'Legal Admin') ||
      (isStage('DD Head Review') && (userRole === 'DD Head' || userRole === 'DD_HEAD')) ||
      (isStage('NBH Evaluation') && userRole === 'NBH') ||
      (isStage('Evaluation of Dealer SCN Response') && ['DD Lead', 'ZBH', 'RBM', 'DD Head', 'DD_HEAD'].includes(userRole) && !userHasApprovedJointly) ||
      (isStage('NBH Final Approval') && userRole === 'NBH') ||
      (isStage('CCO Approval') && userRole === 'CCO') ||
      (isStage('CEO Final Approval') && userRole === 'CEO') ||
      (isStage('Legal - Termination Letter') && userRole === 'Legal Admin')
    );

    return {
      canApprove: isCurrentlyAssigned && !isFinalState && !isSettlementPhase && ![...['NBH Final Approval', 'CCO Approval', 'CEO Final Approval'], 'Show Cause Notice (SCN)', 'SCN'].includes(currentStage),
      canIssueSCN: currentStage === 'NBH Evaluation' && (userRole === 'NBH' || userRole === 'Super Admin') && !isFinalState,
      canUploadSCNResponse: isScnStage && (['Legal Admin', 'DD Admin', 'DD Lead', 'Super Admin'].includes(userRole)) && !isFinalState,
      canHold:
        (isStage('NBH Evaluation') || isStage('NBH Final Approval')) &&
        (userRole === 'NBH' || userRole === 'Super Admin') &&
        status !== 'On Hold' &&
        !isFinalState,
      canFinalize: (
        (currentStage === 'NBH Final Approval' && userRole === 'NBH') ||
        (currentStage === 'CCO Approval' && userRole === 'CCO') ||
        (currentStage === 'CEO Final Approval' && userRole === 'CEO') ||
        userRole === 'Super Admin'
      ) && ['NBH Final Approval', 'CCO Approval', 'CEO Final Approval'].includes(currentStage) && !isFinalState,
      canPushToFnF: canPushToFnF && !isSettlementPhase && ['Legal - Termination Letter', 'Terminated', 'Dealer Terminated'].includes(currentStage),
      canWithdraw: userRole === 'ASM' && currentStage === 'Request Initiated' && !isFinalState,
      isFinalState,
      isSettlementPhase
    };
  };

  const permissions = getTerminationPermissions();

  // Use actual data from backend
  const request = terminationData || {};
  const isScnStage = ['Show Cause Notice', 'Show Cause Notice (SCN)', 'SCN'].includes(request.currentStage);


  const resolveCanonicalStage = (currentStage?: string) => {
    if (!currentStage) return '';
    const normalized = String(currentStage).trim();
    const matched = stageSequence.find((stageName) =>
      (stageAliases[stageName] || [stageName]).includes(normalized)
    );
    return matched || normalized;
  };

  const getProgressStatus = (stageName: string) => {
    const isTerminal = ['Rejected', 'Revoked', 'Withdrawn'].includes(request.status);
    const isSuccessFinal = ['Completed', 'Terminated', 'Settled', 'F&F Initiated', 'FNF_INITIATED', 'Awaiting F&F', 'Awaiting F&F (LWD Pending)'].includes(request.status) || request.currentStage === 'Terminated';
    
    // For terminal states, we determine the last active stage from the timeline to keep the track visible
    let currentStageForProgress = request.currentStage || request.status;
    if (isTerminal && (request.currentStage === 'Rejected' || request.currentStage === 'Revoked' || !request.currentStage)) {
       const lastTimelineEntry = [...(request.timeline || [])].reverse().find(e => e.stage && e.stage !== 'Rejected' && e.stage !== 'Revoked');
       if (lastTimelineEntry) currentStageForProgress = lastTimelineEntry.stage;
    }

    const currentCanonical = resolveCanonicalStage(currentStageForProgress);
    const currentIndex = stageSequence.indexOf(currentCanonical);
    const stageIndex = stageSequence.indexOf(stageName);

    // If workflow finished successfully or entered F&F, ALL reached stages (including Terminated itself) turn completed
    if (isSuccessFinal && stageIndex <= currentIndex) {
        return 'completed';
    }

    if (stageIndex === -1) return 'pending';
    if (currentIndex === -1) return stageName === 'Submitted' ? 'completed' : 'pending';
    
    if (stageIndex < currentIndex) return 'completed';
    if (stageIndex === currentIndex) {
      if (isTerminal) return 'completed'; // Or 'rejected' if component supports it
      return 'active';
    }
    
    return 'pending';
  };

  const allUploadedDocs = [
    ...(request.documents || []),
    ...(request.uploadedDocuments || [])
  ];

  const stageDocuments: Record<string, any[]> = Object.keys(stageAliases).reduce((acc: Record<string, any[]>, stageName) => {
    const aliases = stageAliases[stageName] || [stageName];
    const docs = allUploadedDocs
      .filter((doc: any) => !doc.stage || aliases.includes(doc.stage))
      .map((doc: any) => ({
        id: doc.id || `${stageName}-${doc.fileName || doc.name}`,
        name: doc.fileName || doc.name || 'Document',
        type: doc.documentType || doc.type || 'Document',
        uploadDate: doc.uploadDate || doc.createdAt ? formatDateTime(doc.uploadDate || doc.createdAt) : 'N/A',
        uploader: doc.uploader?.fullName || doc.uploader || '-',
        path: doc.filePath || doc.path || doc.url
      }));
    acc[stageName] = docs;
    return acc;
  }, {});

  const getStageTimelineEntries = (stageName: string) => {
    const aliases = stageAliases[stageName] || [stageName];
    const entries = (request.timeline || []).filter((entry: any) => 
      aliases.includes(entry.stage) || 
      (stageName === 'Submitted' && (entry.stage === 'Submitted' || entry.stage === 'Request Initiated'))
    );

    // Sort by timestamp
    return entries.sort((a: any, b: any) => 
      new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
    );
  };

  const progressStages = [
    {
      id: 1,
      name: 'Submitted',
      status: getProgressStatus('Submitted'),
      description: 'Termination request initiated',
      date: '',
      actionType: '',
      actionBy: '',
      remarks: '',
      feedback: ''
    },
    {
      id: 2,
      name: 'RBM + DD-ZM Review',
      status: getProgressStatus('RBM + DD-ZM Review'),
      description: 'Joint review and approval by RBM and DD-ZM'
    },
    {
      id: 3,
      name: 'ZBH Review',
      status: getProgressStatus('ZBH Review'),
      description: 'Zonal Business Head evaluation'
    },
    {
      id: 4,
      name: 'DD Lead Review',
      status: getProgressStatus('DD Lead Review'),
      description: 'DD Lead validation'
    },
    {
      id: 5,
      name: 'Legal Verification',
      status: getProgressStatus('Legal Verification'),
      description: 'Legal team validates termination grounds'
    },
    {
      id: 6,
      name: 'DD Head Review',
      status: getProgressStatus('DD Head Review'),
      description: 'DD Head strategic review'
    },
    {
      id: 7,
      name: 'NBH Evaluation',
      status: getProgressStatus('NBH Evaluation'),
      description: 'National Business Head decision'
    },
    {
      id: 8,
      name: 'Show Cause Notice (SCN)',
      status: getProgressStatus('Show Cause Notice (SCN)'),
      description: 'SCN sent to dealer, awaiting response'
    },
    {
      id: 9,
      name: 'Evaluation of Dealer SCN Response',
      status: getProgressStatus('Evaluation of Dealer SCN Response'),
      description: 'Joint evaluation of SCN response by DD-Lead, ZBH, RBM, and DD-Head'
    },
    {
      id: 10,
      name: 'NBH Final Approval',
      status: getProgressStatus('NBH Final Approval'),
      description: 'NBH final termination decision'
    },
    {
      id: 11,
      name: 'CCO Approval',
      status: getProgressStatus('CCO Approval'),
      description: 'Chief Commercial Officer approval'
    },
    {
      id: 12,
      name: 'CEO Final Approval',
      status: getProgressStatus('CEO Final Approval'),
      description: 'CEO final authorization'
    },
    {
      id: 13,
      name: 'Legal - Termination Letter',
      status: getProgressStatus('Legal - Termination Letter'),
      description: 'Legal team issues final termination letter'
    },
    {
      id: 14,
      name: 'Dealer Terminated',
      status: getProgressStatus('Dealer Terminated'),
      description: 'Dealership termination effective',
      date: '',
      actionType: '',
      actionBy: '',
      remarks: '',
      feedback: ''
    }
  ];

  const handleViewStageDocuments = (stageName: string) => {
    const documents = stageDocuments[stageName] || [];
    setStageDocumentsDialog({ open: true, stageName, documents });
  };

  const handleAction = (type: 'approve' | 'withdrawal' | 'sendBack' | 'assign' | 'pushfnf' | 'revoke' | 'hold') => {
    setActionDialog({ open: true, type });
  };

  const handleSubmitAction = async () => {
    const actionType = actionDialog.type;

    // Standardize Send Back vs sendback
    const effectiveAction = actionType === 'sendBack' ? 'sendBack' : actionType || 'approve';

    const remarksTrimmed = remarks.trim();
    if (['sendBack', 'revoke'].includes(actionType || '') && remarksTrimmed.length < 5) {
      toast.error('Please provide detailed remarks (minimum 5 characters required for Send Back / Revoke)');
      return;
    }

    if (!remarksTrimmed && !['assign', 'pushfnf'].includes(actionType || '')) {
      toast.error('Please provide remarks/comments for this action');
      return;
    }

    if (actionType === 'assign' && !assignToUser) {
      toast.error('Please select a user');
      return;
    }

    setIsProcessing(true);
    try {
      let response: any;
      if (actionType === 'approve' || actionType === 'sendBack' || actionType === 'withdrawal' || actionType === 'revoke' || actionType === 'hold') {
        response = await terminationService.updateTerminationStatus(terminationId, effectiveAction, remarks);
      } else if (actionType === 'pushfnf') {
        response = await terminationService.updateTerminationStatus(terminationId, 'pushfnf', remarks);
      } else {
        toast.error('Action logic not fully implemented for this type');
        setIsProcessing(false);
        return;
      }

      if (response && (response.success === false || response.ok === false)) {
        console.error('[TerminationDetails] Action failed:', response);
        toast.error(response.message || response.data?.message || 'Failed to perform action');
        setIsProcessing(false);
        return;
      }

      const actionMessages: Record<string, string> = {
        approve: 'Request approved and forwarded',
        withdrawal: 'Request withdrawn successfully',
        sendBack: 'Request sent back for clarification',
        assign: `Request assigned successfully`,
        pushfnf: 'Request pushed to F&F successfully',
        revoke: 'Request revoked and withdrawn'
      };

      toast.success(actionMessages[actionType!] || response?.message || 'Action completed');
      setActionDialog({ open: false, type: null });
      setRemarks('');
      setAssignToUser('');
      fetchTermination();
    } catch (error: any) {
      const msg = error.response?.data?.message || 'Failed to perform action';
      toast.error(msg);
    } finally {
      setIsProcessing(false);
    }
  };

  const getSeverityColor = (severity: string) => {
    switch (severity) {
      case 'Critical':
        return 'bg-red-100 text-red-700 border-red-300';
      case 'High':
        return 'bg-orange-100 text-orange-700 border-orange-300';
      case 'Medium':
        return 'bg-yellow-100 text-yellow-700 border-yellow-300';
      default:
        return 'bg-blue-100 text-blue-700 border-blue-300';
    }
  };

  const workNotesCount = (request.worknotes || []).length;

  return (
    <div className="space-y-6">
      {/* Warning Alert */}
      <Alert className="border-amber-200 bg-amber-50">
        <AlertTriangle className="h-4 w-4 text-amber-600" />
        <AlertTitle className="text-amber-900">Sensitive Information</AlertTitle>
        <AlertDescription className="text-amber-700">
          This is a termination case. All actions are logged and audited. Proceed with caution.
        </AlertDescription>
      </Alert>

      {/* Header */}
      <div className="flex items-start justify-between">
        <div className="flex items-center gap-4">
          <Button variant="outline" size="icon" onClick={onBack} className="hover:bg-slate-100 transition-colors">
            <ArrowLeft className="w-4 h-4" />
          </Button>
          <div>
            <h1 className="text-2xl">{request.requestId || terminationId}</h1>
            <p className="text-slate-600">{request.dealer?.businessName || request.dealer?.legalName || 'Termination'}</p>
          </div>
          <Badge className={getSeverityColor(request.severity)}>
            {request.severity}
          </Badge>
          <Badge className={
            request.status === 'Completed' || request.status === 'Terminated' || request.status === 'Settled'
              ? 'bg-green-100 text-green-700 border-green-300'
              : request.status === 'Rejected' || request.status === 'Withdrawn'
                ? 'bg-red-100 text-red-700 border-red-300'
                : 'bg-yellow-100 text-yellow-700 border-yellow-300'
          }>
            {request.status === 'Settled' ? 'Completed' : formatTerminationStatusLabel(request.status || 'Pending')}
          </Badge>
        </div>
      </div>

      <Tabs defaultValue="details" className="w-full">
        <TabsList className="bg-slate-100 p-1">
          <TabsTrigger value="details" className="data-[state=active]:bg-white">Details</TabsTrigger>
          <TabsTrigger value="progress" className="data-[state=active]:bg-white">Progress</TabsTrigger>
          <TabsTrigger value="documents" className="data-[state=active]:bg-white">Documents</TabsTrigger>
          <TabsTrigger value="audit" className="data-[state=active]:bg-white">Audit Trail</TabsTrigger>
        </TabsList>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
          <div className="lg:col-span-2 space-y-6">

        {/* Details Tab */}
        <TabsContent value="details" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Dealer Information</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
                <div>
                  <Label className="text-slate-600">Dealer Code</Label>
                  <p>{request.dealer?.dealerCode?.dealerCode || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Dealer Name</Label>
                  <p>{request.dealer?.businessName || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">GST</Label>
                  <p>{request.dealer?.gstNumber || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Dealer Email</Label>
                  <p>{request.dealer?.user?.email || 'N/A'}</p>
                </div>
                <div className="col-span-2">
                  <Label className="text-slate-600">Address</Label>
                  <p>{request.dealer?.registeredAddress || request.dealer?.application?.address || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">City</Label>
                  <p>{request.dealer?.application?.city || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">District</Label>
                  <p>{request.dealer?.application?.district?.name || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Dealership Name</Label>
                  <p>{request.dealer?.businessName || request.dealershipName}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Sales Code</Label>
                  <p>{request.dealer?.dealerCode?.salesCode || request.salesCode || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Service Code</Label>
                  <p>{request.dealer?.dealerCode?.serviceCode || request.serviceCode || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">GMA Code</Label>
                  <p>{request.dealer?.dealerCode?.gmaCode || request.accessoriesCode || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">GMA Code</Label>
                  <p>{request.dealer?.dealerCode?.gmaCode || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Gear Code</Label>
                  <p>{request.dealer?.dealerCode?.gearCode || 'N/A'}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Operational Details</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
                <div>
                  <Label className="text-slate-600">Inauguration</Label>
                  <p>{request.dealer?.onboardedAt ? formatDateTime(request.dealer.onboardedAt, 'date') : (request.inauguration || 'N/A')}</p>
                </div>
                <div>
                  <Label className="text-slate-600">LOA Date</Label>
                  <p>{request.dealer?.loaDate ? formatDateTime(request.dealer.loaDate, 'date') : 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">LOI Date</Label>
                  <p>{request.dealer?.loiDate ? formatDateTime(request.dealer.loiDate, 'date') : 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Last 6 Months Sales</Label>
                  <p>{request.lastSixMonthsSales}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Number of Dealerships</Label>
                  <p>{request.numberOfDealerships}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Number of Studios</Label>
                  <p>{request.numberOfStudios}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Constitution</Label>
                  <p>{request.dealer?.constitutionType || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Dealership Type</Label>
                  <p>{request.dealer?.application?.businessType || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Type of Closure</Label>
                  <p>{request.typeOfClosure || 'Complete'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Format Category</Label>
                  <p>{request.formatCategory || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Dealer Score Card Band</Label>
                  <p>{request.dealerScoreCardBand || 'N/A'}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="border-amber-200 bg-amber-50/30">
            <CardHeader>
              <CardTitle className="text-amber-900 flex items-center gap-2">
                <AlertTriangle className="w-5 h-5" />
                Termination Details
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <Label className="text-slate-600">Termination Category</Label>
                  <p className="text-amber-900">{request.category}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Sub Category</Label>
                  <p>{request.subCategory || 'N/A'}</p>
                </div>
                <div>
                  <Label className="text-slate-600">Description</Label>
                  <p>{request.reason}</p>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label className="text-slate-600">Severity</Label>
                    <div className="mt-1">
                      <Badge className={getSeverityColor(request.severity)}>
                        {request.severity}
                      </Badge>
                    </div>
                  </div>
                  <div>
                    <Label className="text-slate-600">Submitted By</Label>
                    <p>{request.initiator?.fullName || 'System'}</p>
                  </div>
                  <div>
                    <Label className="text-slate-600">Submitted On</Label>
                    <p>{formatDateTime(request.createdAt)}</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Progress Tab */}
        <TabsContent value="progress">
          <Card>
            <CardHeader>
              <CardTitle>Termination Progress Timeline</CardTitle>
              <CardDescription>Track the termination request approval process</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {progressStages.map((stage, index) => {
                  const documentCount = stageDocuments[stage.name]?.length || 0;
                  const stageEntries = getStageTimelineEntries(stage.name);
                  return (
                    <div key={stage.id} className="flex gap-4">
                      <div className="flex flex-col items-center">
                        <div className={`w-10 h-10 rounded-full flex items-center justify-center ${stage.status === 'completed' ? 'bg-green-100 text-green-600' :
                          stage.status === 'active' ? 'bg-amber-100 text-amber-600' :
                            'bg-slate-100 text-slate-400'
                          }`}>
                          {stage.status === 'completed' ? (
                            <Check className="w-5 h-5" />
                          ) : stage.status === 'active' ? (
                            <AlertTriangle className="w-5 h-5" />
                          ) : (
                            <span>{stage.id}</span>
                          )}
                        </div>
                        {index < progressStages.length - 1 && (
                          <div className={`w-0.5 ${stage.remarks ? 'h-32' : 'h-16'
                            } ${stage.status === 'completed' ? 'bg-green-300' : 'bg-slate-200'
                            }`} />
                        )}
                      </div>
                      <div className="flex-1 pb-8">
                        <div className="flex items-center justify-between mb-1">
                          <div className="flex items-center gap-2">
                            <h3 className={
                              stage.status === 'completed' ? 'text-green-600' :
                                stage.status === 'active' ? 'text-amber-600' :
                                  'text-slate-400'
                            }>{stage.name}</h3>
                            {documentCount > 0 && (
                              <button
                                onClick={() => handleViewStageDocuments(stage.name)}
                                className="flex items-center gap-1 px-2 py-1 rounded-full bg-amber-100 hover:bg-amber-200 text-amber-700 text-xs transition-colors cursor-pointer"
                              >
                                <FileText className="w-3 h-3" />
                                <span>{documentCount} {documentCount === 1 ? 'doc' : 'docs'}</span>
                              </button>
                            )}
                          </div>
                          {(stageEntries[0]?.timestamp || stage.date) && (
                            <div className="flex items-center gap-1 text-xs text-slate-500 bg-slate-50 px-2 py-0.5 rounded-full border border-slate-100">
                              <Calendar className="w-3 h-3" />
                              <span>{formatDateTime(stageEntries[0]?.timestamp || stage.date)}</span>
                            </div>
                          )}
                        </div>
                        <p className="text-slate-600 text-sm">{stage.description}</p>

                        {stageEntries.length > 0 && (
                          <div className="mt-3 space-y-3">
                            {stageEntries.map((entry: any, entryIdx: number) => {
                              const rawRemarks = entry.remarks || entry.comments || '';
                              const isAttachment = rawRemarks?.startsWith('Attachment:');
                              const remarksContent = isAttachment 
                                ? rawRemarks.replace('Attachment:', '').trim()
                                : rawRemarks;

                              return (
                                <div key={entryIdx} className="group">
                                  <div className="flex items-center gap-2 mb-1">
                                    <Badge className={`
                                      text-[10px] h-4 px-1.5
                                      ${entry.action?.toLowerCase().includes('rejected') || entry.action?.toLowerCase().includes('revoked')
                                        ? 'bg-red-100 text-red-700' 
                                        : entry.action?.toLowerCase().includes('approved') 
                                          ? 'bg-emerald-100 text-emerald-700'
                                          : 'bg-blue-100 text-blue-700'}
                                    `}>
                                      {entry.action || 'Action'}
                                    </Badge>
                                    <span className="text-[10px] text-slate-500 font-medium">
                                      by {entry.user || 'System'}{entry.role ? ` (${entry.role})` : ''} • {formatDateTime(entry.timestamp)}
                                    </span>
                                  </div>
                                  <div className={`
                                    p-2.5 rounded-lg border text-sm
                                    ${isAttachment 
                                      ? 'bg-amber-50/50 border-amber-100 text-amber-900' 
                                      : 'bg-slate-50 border-slate-100 text-slate-700'}
                                  `}>
                                    {isAttachment ? (
                                      <div className="flex items-center gap-2">
                                        <FileText className="w-3.5 h-3.5 text-amber-600" />
                                        <span className="font-medium truncate">{remarksContent}</span>
                                      </div>
                                    ) : (
                                      <p className="leading-relaxed">{remarksContent || 'No remarks provided.'}</p>
                                    )}
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Documents Tab */}
        <TabsContent value="documents">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle>Documents</CardTitle>
                <CardDescription>View and manage termination case documents</CardDescription>
              </div>
              <Button size="sm" onClick={() => setShowUploadDialog(true)} className="bg-amber-600 hover:bg-amber-700">
                <Upload className="w-4 h-4 mr-2" />
                Upload Document
              </Button>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Document Name</TableHead>
                    <TableHead>Type</TableHead>
                    <TableHead>Upload Date</TableHead>
                    <TableHead>Uploader</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {(() => {
                    const allDocs = [
                      ...(request.documents || []),
                      ...(request.uploadedDocuments || [])
                    ];

                    if (allDocs.length === 0) return (
                      <TableRow>
                        <TableCell colSpan={5} className="text-center py-4 text-slate-500">
                          No documents found
                        </TableCell>
                      </TableRow>
                    );

                    return allDocs.map((doc: any, index: number) => (
                      <TableRow key={doc.id || index}>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <FileText className="w-4 h-4 text-slate-500" />
                            <span>{doc.name || doc.fileName}</span>
                          </div>
                        </TableCell>
                        <TableCell>{doc.documentType || doc.type || 'Document'}</TableCell>
                        <TableCell>{formatDateTime(doc.uploadDate || doc.createdAt)}</TableCell>
                        <TableCell>{doc.uploader?.fullName || doc.uploader || '-'}</TableCell>
                        <TableCell>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => {
                              const path = doc.filePath || doc.path || doc.url;
                              if (!path) return;
                              const fullPath = path.startsWith('/uploads/') && !path.startsWith('/uploads/documents/')
                                ? path.replace('/uploads/', '/uploads/documents/')
                                : path;
                              setPreviewDocument({
                                fileName: doc.name || doc.fileName || 'Document',
                                filePath: fullPath,
                                documentType: doc.documentType || doc.type || 'Document'
                              });
                            }}
                          >
                            View
                          </Button>
                        </TableCell>
                      </TableRow>
                    ));
                  })()}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Audit Trail Tab */}
        <TabsContent value="audit">
          <Card>
            <CardHeader>
              <CardTitle>Audit Trail</CardTitle>
              <CardDescription>Complete history of actions on this termination case</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {auditLogs.length > 0 ? (
                  auditLogs.map((log: any, index: number) => (
                    <div
                      key={index}
                      className="flex gap-3 pb-6 border-b border-slate-100 last:border-0 relative"
                    >
                      <div className="w-2 h-2 rounded-full bg-slate-300 mt-2 z-10" />
                      <div className="flex-1">
                        <div className="flex items-center justify-between mb-2">
                          <div className="flex items-center gap-2">
                            <Badge className={`
                              ${(log.description || log.action || log.details?.action || '').toLowerCase().includes('reject') || (log.description || log.action || log.details?.action || '').toLowerCase().includes('revok')
                                ? 'bg-red-100 text-red-700 border-red-200'
                                : (log.description || log.action || log.details?.action || '').toLowerCase().includes('sent back') || (log.description || log.action || log.details?.action || '').toLowerCase().includes('send back')
                                  ? 'bg-amber-100 text-amber-700 border-amber-200'
                                  : (log.description || log.action || log.details?.action || '').toLowerCase().includes('approv') || (log.description || log.action || log.details?.action || '').toLowerCase().includes('initi')
                                    ? 'bg-emerald-100 text-emerald-700 border-emerald-200'
                                    : 'bg-slate-100 text-slate-700 border-slate-200'}
                            `}>
                              {log.description || log.action}
                            </Badge>
                            <span className="text-xs text-slate-500 font-medium italic">by {log.actor?.name || log.userName || 'System'}</span>
                          </div>
                          <span className="text-xs text-slate-500">
                            {formatDateTime(log.timestamp || log.createdAt)}
                          </span>
                        </div>
                        
                        {(log.remarks || log.newData?.remarks || log.details?.remarks) && (
                          <div className="p-3 bg-slate-50 border border-slate-100 rounded-lg text-sm text-slate-700 shadow-sm ml-1">
                            {log.remarks || log.newData?.remarks || log.details?.remarks}
                          </div>
                        )}
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="text-center py-8 text-slate-500">
                    <p>No activity logs found for this case.</p>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Actions</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {(request.currentStage === 'Evaluation of Dealer SCN Response' || request.currentStage === 'Personal Hearing') && (
                <Alert className="mb-2 bg-blue-50 border-blue-200">
                  <AlertTitle className="text-blue-800 text-sm font-semibold">Joint Review Stage</AlertTitle>
                  <AlertDescription className="text-blue-700 text-xs">
                    Joint evaluation by <strong>DD-Lead, ZBH, RBM, and DD-Head</strong> required before advancing to NBH Final Approval.
                  </AlertDescription>
                </Alert>
              )}

              {currentUser?.role !== 'Dealer' && (
                <>
                  {!permissions.canFinalize && (
                    <>
                      {permissions.canApprove && (
                        <Button
                          className="w-full bg-green-600 hover:bg-green-700 font-bold"
                          onClick={() => handleAction('approve')}
                        >
                          <Check className="w-4 h-4 mr-2" />
                          Approve
                        </Button>
                      )}
                      {permissions.canIssueSCN && (
                        <Button
                          className="w-full bg-purple-600 hover:bg-purple-700"
                          onClick={() => setShowSCNDialog(true)}
                        >
                          <AlertTriangle className="w-4 h-4 mr-2" />
                          Issue SCN
                        </Button>
                      )}
                      {permissions.canUploadSCNResponse && (
                        <Button
                          className="w-full bg-amber-600 hover:bg-amber-700"
                          onClick={() => {
                            setScnFile(null);
                            setShowSCNDialog(true);
                          }}
                        >
                          <FileText className="w-4 h-4 mr-2" />
                          Upload SCN Response
                        </Button>
                      )}
                      {permissions.canApprove && (
                        <Button
                          variant="outline"
                          className="w-full"
                          onClick={() => handleAction('sendBack')}
                        >
                          <RotateCcw className="w-4 h-4 mr-2" />
                          Send Back
                        </Button>
                      )}
                    </>
                  )}
                  {permissions.canHold && (
                    <Button
                      variant="outline"
                      className="w-full border-orange-200 text-orange-700 hover:bg-orange-50"
                      onClick={() => handleAction('hold')}
                    >
                      <PauseCircle className="w-4 h-4 mr-2" />
                      Hold Decision
                    </Button>
                  )}
                  {permissions.canFinalize && (
                    <Button
                      className="w-full bg-indigo-600 hover:bg-indigo-700"
                      onClick={() => setShowFinalizeDialog(true)}
                    >
                      <ShieldCheck className="w-4 h-4 mr-2" />
                      Final Authorization
                    </Button>
                  )}
                </>
              )}

              {permissions.canPushToFnF && (
                <Button
                  variant="outline"
                  className="w-full text-blue-600 border-blue-300 hover:bg-blue-50"
                  onClick={() => handleAction('pushfnf')}
                >
                  <Send className="w-4 h-4 mr-2" />
                  Push to F&F
                </Button>
              )}

              {!permissions.isFinalState && (
                <Button
                  variant="outline"
                  className="w-full"
                  onClick={() => handleAction('assign')}
                >
                  <UserPlus className="w-4 h-4 mr-2" />
                  Assign User
                </Button>
              )}

              <Separator />

              <Button
                variant="outline"
                className="w-full"
                onClick={() => navigate(`/worknotes/termination/${terminationId}`, {
                  state: {
                    applicationName: request?.dealer?.businessName || 'Termination',
                    registrationNumber: terminationId || '',
                    participants: request?.participants || []
                  }
                })}
              >
                <MessageSquare className="w-4 h-4 mr-2" />
                View Work Notes
                {workNotesCount > 0 && (
                  <Badge className="ml-auto bg-amber-600 hover:bg-amber-700 text-white h-5 px-2">
                    {workNotesCount}
                  </Badge>
                )}
              </Button>
            </CardContent>
          </Card>
          </div>
        </div>
      </Tabs>

      {/* Action Dialogs */}
      <Dialog open={actionDialog.open} onOpenChange={(open) => setActionDialog({ open, type: null })}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              {actionDialog.type === 'approve' && 'Approve Termination Request'}
              {actionDialog.type === 'withdrawal' && 'Withdraw Termination Request'}
              {actionDialog.type === 'sendBack' && 'Send Back for Clarification'}
              {actionDialog.type === 'revoke' && 'Revoke Termination Request'}
              {actionDialog.type === 'assign' && 'Assign to User'}
              {actionDialog.type === 'pushfnf' && 'Push to Full & Final Settlement'}
              {actionDialog.type === 'hold' && 'Hold Termination Case'}
            </DialogTitle>
            <DialogDescription>
              {actionDialog.type === 'assign'
                ? 'Select a user to assign this request to'
                : actionDialog.type === 'pushfnf'
                  ? 'This will move the termination case to F&F for dues clearance'
                  : 'Please provide remarks for this action'
              }
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            {actionDialog.type === 'assign' ? (
              <div className="space-y-2">
                <Label>Select User</Label>
                <Select value={assignToUser} onValueChange={setAssignToUser}>
                  <SelectTrigger>
                    <SelectValue placeholder="Choose a user" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="rbm">RBM - Regional Business Manager</SelectItem>
                    <SelectItem value="zbh">ZBH - Zonal Business Head</SelectItem>
                    <SelectItem value="dd-lead">DD Lead</SelectItem>
                    <SelectItem value="legal">Legal Team</SelectItem>
                    <SelectItem value="nbh">NBH - National Business Head</SelectItem>
                    <SelectItem value="cco">CCO - Chief Commercial Officer</SelectItem>
                    <SelectItem value="ceo">CEO</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            ) : actionDialog.type === 'pushfnf' ? (
              <div className="space-y-2">
                <Label>Remarks (Optional)</Label>
                <Textarea
                  value={remarks}
                  onChange={(e) => setRemarks(e.target.value)}
                  placeholder="Add any additional notes..."
                  rows={3}
                />
              </div>
            ) : (
              <div className="space-y-2">
                <Label>Remarks *</Label>
                <Textarea
                  value={remarks}
                  onChange={(e) => setRemarks(e.target.value)}
                  placeholder="Enter your remarks here..."
                  rows={4}
                />
              </div>
            )}
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setActionDialog({ open: false, type: null })}>
              Cancel
            </Button>
            <Button
              onClick={handleSubmitAction}
              className={
                actionDialog.type === 'approve' ? 'bg-green-600 hover:bg-green-700' :
                  actionDialog.type === 'withdrawal' ? 'bg-red-600 hover:bg-red-700' :
                  actionDialog.type === 'hold' ? 'bg-orange-600 hover:bg-orange-700' :
                    'bg-blue-600 hover:bg-blue-700'
              }
            >
              Confirm
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Stage Documents Dialog */}
      <Dialog open={stageDocumentsDialog.open} onOpenChange={(open) => setStageDocumentsDialog({ open, stageName: '', documents: [] })}>
        <DialogContent className={WIDE_DIALOG_CLASS}>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <FileText className="w-5 h-5 text-amber-600" />
              Documents - {stageDocumentsDialog.stageName}
            </DialogTitle>
            <DialogDescription>
              Documents uploaded for this stage ({stageDocumentsDialog.documents.length} {stageDocumentsDialog.documents.length === 1 ? 'document' : 'documents'})
            </DialogDescription>
          </DialogHeader>

          <div className="max-h-96 overflow-y-auto">
            {stageDocumentsDialog.documents.length > 0 ? (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Document Name</TableHead>
                    <TableHead>Type</TableHead>
                    <TableHead>Upload Date</TableHead>
                    <TableHead>Uploader</TableHead>
                    <TableHead>Action</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {stageDocumentsDialog.documents.map((doc) => (
                    <TableRow key={doc.id}>
                      <TableCell>{doc.name}</TableCell>
                      <TableCell>
                        <Badge variant="outline">{doc.type}</Badge>
                      </TableCell>
                      <TableCell>{doc.uploadDate}</TableCell>
                      <TableCell>{doc.uploader}</TableCell>
                      <TableCell>
                        <Button
                          size="sm"
                          variant="outline"
                          className="text-amber-600 hover:text-amber-700"
                          onClick={() => {
                            const path = doc.path;
                            if (!path) return;
                            const fullPath = path.startsWith('/uploads/') && !path.startsWith('/uploads/documents/')
                              ? path.replace('/uploads/', '/uploads/documents/')
                              : path;
                            setPreviewDocument({
                              fileName: doc.name || 'Document',
                              filePath: fullPath,
                              documentType: doc.type || 'Document'
                            });
                          }}
                        >
                          <FileText className="w-4 h-4 mr-1" />
                          View
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <div className="text-center py-8 text-slate-500">
                No documents uploaded for this stage yet
              </div>
            )}
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setStageDocumentsDialog({ open: false, stageName: '', documents: [] })}>
              Close
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* SCN Dialog */}
      <Dialog open={showSCNDialog} onOpenChange={setShowSCNDialog}>
        <DialogContent className="bg-white">
          <DialogHeader>
            <DialogTitle>
              {isScnStage ? 'Upload SCN Response' : 'Issue Show Cause Notice (SCN)'}
            </DialogTitle>
            <DialogDescription>
              {isScnStage
                ? 'Upload the response received from the dealer regarding the SCN.'
                : 'Confirm the issuance of a formal Show Cause Notice to the dealer.'}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 pt-4">
            {isScnStage && (
              <div className="space-y-2">
                <Label>SCN Response File</Label>
                <div className="flex items-center gap-2 mt-1">
                  <input
                    type="file"
                    className="hidden"
                    id="scn-file-upload"
                    onChange={(e) => setScnFile(e.target.files?.[0] || null)}
                  />
                  <Button
                    variant="outline"
                    className="w-full border-dashed"
                    onClick={() => document.getElementById('scn-file-upload')?.click()}
                  >
                    {scnFile ? scnFile.name : 'Select PDF or Image'}
                  </Button>
                </div>
              </div>
            )}
            <div className="space-y-2">
              <Label>Remarks/Details</Label>
              <Textarea
                placeholder="Add any internal remarks or justification..."
                value={scnRemarks}
                onChange={(e) => setScnRemarks(e.target.value)}
                rows={4}
              />
            </div>
            <DialogFooter className="gap-2 sm:gap-0">
              <Button variant="outline" onClick={() => setShowSCNDialog(false)} disabled={isProcessing}>
                Cancel
              </Button>
              <Button
                className={isScnStage ? 'bg-amber-600 hover:bg-amber-700' : 'bg-purple-600 hover:bg-purple-700'}
                onClick={isScnStage ? handleUploadSCNResponse : handleIssueSCN}
                disabled={isProcessing || (isScnStage && !scnFile)}
              >
                {isProcessing ? 'Processing...' : isScnStage ? 'Upload Response' : 'Issue SCN'}
              </Button>
            </DialogFooter>
          </div>
        </DialogContent>
      </Dialog>

      {/* Finalize Termination Dialog */}
      <Dialog open={showFinalizeDialog} onOpenChange={setShowFinalizeDialog}>
        <DialogContent className="bg-white">
          <DialogHeader>
            <DialogTitle>Final Termination Authorization</DialogTitle>
            <DialogDescription>
              Provide your final decision on this termination case.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 pt-4">
            <div className="space-y-2">
              <Label>Final Decision</Label>
              <Select value={finalDecision} onValueChange={(val: any) => setFinalDecision(val)}>
                <SelectTrigger className="mt-2 text-slate-900 border-slate-300">
                  <SelectValue placeholder="Select decision" />
                </SelectTrigger>
                <SelectContent className="bg-white border-slate-200 shadow-xl overflow-visible z-[9999]">
                  <SelectItem value="Approve" className="text-amber-700 focus:bg-amber-50">Confirm Termination</SelectItem>
                  <SelectItem value="Reject" className="text-slate-600 focus:bg-slate-50">Reject Termination</SelectItem>
                  <SelectItem value="Reconsider" className="text-amber-600 focus:bg-amber-50">Reconsider / Give More Time</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Authorization Remarks</Label>
              <Textarea
                placeholder="Provide your rationale for this decision..."
                value={finalRemarks}
                onChange={(e) => setFinalRemarks(e.target.value)}
                rows={4}
              />
            </div>
            <DialogFooter className="gap-2 sm:gap-0">
              <Button variant="outline" onClick={() => setShowFinalizeDialog(false)} disabled={isProcessing}>
                Cancel
              </Button>
              <Button
                className="bg-indigo-600 hover:bg-indigo-700"
                onClick={handleFinalize}
                disabled={isProcessing || !finalRemarks}
              >
                {isProcessing ? 'Authorizing...' : 'Submit Decision'}
              </Button>
            </DialogFooter>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog open={showUploadDialog} onOpenChange={setShowUploadDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Upload Termination Document</DialogTitle>
            <DialogDescription>Add a document and map it to a stage (optional).</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 pt-2">
            <div className="space-y-2">
              <Label>Document Type</Label>
              <Select value={uploadDocType} onValueChange={setUploadDocType}>
                <SelectTrigger>
                  <SelectValue placeholder="Select document type" />
                </SelectTrigger>
                <SelectContent>
                  {TERMINATION_DOCUMENT_TYPES.map((docType) => (
                    <SelectItem key={docType} value={docType}>
                      {docType}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Stage (Optional)</Label>
              <Select value={uploadStage || 'none'} onValueChange={(value) => setUploadStage(value === 'none' ? '' : value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select stage" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">No Stage Mapping</SelectItem>
                  {TERMINATION_STAGE_OPTIONS.map((stage) => (
                    <SelectItem key={stage} value={stage}>
                      {stage}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>File</Label>
              <input type="file" onChange={(e) => setUploadFile(e.target.files?.[0] || null)} />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowUploadDialog(false)} disabled={isProcessing}>Cancel</Button>
            <Button onClick={handleUploadDocument} disabled={isProcessing}>
              {isProcessing ? 'Uploading...' : 'Upload'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <DocumentPreviewModal
        isOpen={!!previewDocument}
        onClose={() => setPreviewDocument(null)}
        document={previewDocument}
      />
    </div>
  );
}
