import { toast } from 'sonner';
import {
  AlertCircle,
  Check,
  CheckCircle,
  CheckCircle2,
  ChevronDown,
  ChevronRight,
  Clock,
  ClipboardList,
  Download,
  FileText,
  GitBranch,
  Lock,
  RefreshCw,
  ShieldCheck,
  Upload,
  User,
} from 'lucide-react';
import { cn, formatDateTime } from '@/components/ui/utils';
import QuestionnaireResponseView from '../QuestionnaireResponseView';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Progress } from '@/components/ui/progress';
import { ScrollArea } from '@/components/ui/scroll-area';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

interface ApplicationDetailsTabsProps {
  application: any;
  activeTab: string;
  setActiveTab: (value: string) => void;
  processStages: any[];
  documents: any[];
  interviews: any[];
  expandedBranches: Record<string, boolean>;
  setExpandedBranches: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
  setSelectedStage: (value: string | null) => void;
  setShowDocumentsModal: (value: boolean) => void;
  setShowUploadForm: (value: boolean) => void;
  handleRetriggerEvaluators: () => void;
  handleCancelInterview: (interviewId: any) => void;
  setSelectedEvaluationForView: (value: any) => void;
  setShowFeedbackDetailsModal: (value: boolean) => void;
  renderFddAuditContent: () => React.ReactNode;
  eorProgress: number;
  eorData: any;
  eorChecklist: any[];
  setUploadDocType: (value: string) => void;
  isAdmin: boolean;
  fetchApplication: () => void;
  fetchEorData: () => void;
  deposits: any[];
  getDeposit: (type: string) => any;
  paymentConfigs: any;
  setPreviewDoc: (value: any) => void;
  setShowPreviewModal: (value: boolean) => void;
  auditLoading: boolean;
  auditLogs: any[];
  auditLogActionBadgeClass: (action: string) => string;
}

export function ApplicationDetailsTabs(props: ApplicationDetailsTabsProps) {
  const {
    application,
    activeTab,
    setActiveTab,
    processStages,
    documents,
    interviews,
    expandedBranches,
    setExpandedBranches,
    setSelectedStage,
    setShowDocumentsModal,
    setShowUploadForm,
    handleRetriggerEvaluators,
    handleCancelInterview,
    setSelectedEvaluationForView,
    setShowFeedbackDetailsModal,
    renderFddAuditContent,
    eorProgress,
    eorData,
    eorChecklist,
    setUploadDocType,
    isAdmin,
    fetchApplication,
    fetchEorData,
    deposits,
    getDeposit,
    paymentConfigs,
    setPreviewDoc,
    setShowPreviewModal,
    auditLoading,
    auditLogs,
    auditLogActionBadgeClass,
  } = props;

  const normalizeRole = (value: unknown): string =>
    String(value || '')
      .trim()
      .toLowerCase()
      .replace(/[_\s-]+/g, ' ');

  const participantHasAnyRole = (participant: any, expectedRoles: string[]) => {
    const participantRoles = [
      participant?.user?.role,
      participant?.user?.roleCode,
      participant?.metadata?.role,
    ].map(normalizeRole);
    const normalizedExpected = expectedRoles.map(normalizeRole);
    return participantRoles.some((role) => normalizedExpected.includes(role));
  };

  return (
    <Card data-testid="onboarding-details-tabs-container">
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <CardHeader className="pb-4 px-4 sm:px-6">
          <div className="overflow-x-auto custom-scrollbar-x -mx-4 px-4 sm:-mx-6 sm:px-6">
            <TabsList className="w-max min-w-full justify-start h-11 bg-slate-100/80 p-1" data-testid="onboarding-tabs-list">
              <TabsTrigger value="questionnaire" className="min-w-[120px]" data-testid="onboarding-tab-trigger-questionnaire">Questionnaire</TabsTrigger>
              <TabsTrigger value="progress" className="min-w-[80px]" data-testid="onboarding-tab-trigger-progress">Progress</TabsTrigger>
              <TabsTrigger value="documents" className="min-w-[100px]" data-testid="onboarding-tab-trigger-documents">Documents</TabsTrigger>
              <TabsTrigger value="interviews" className="min-w-[100px]" data-testid="onboarding-tab-trigger-interviews">Interviews</TabsTrigger>
              <TabsTrigger value="fdd" className="min-w-[120px]" data-testid="onboarding-tab-trigger-fdd">FDD Audit</TabsTrigger>
              <TabsTrigger value="eor" className="min-w-[120px]" data-testid="onboarding-tab-trigger-eor">EOR Checklist</TabsTrigger>
              <TabsTrigger value="payments" className="min-w-[100px]" data-testid="onboarding-tab-trigger-payments">Payments</TabsTrigger>
              <TabsTrigger value="audit" className="min-w-[100px]" data-testid="onboarding-tab-trigger-audit">Audit Trail</TabsTrigger>
            </TabsList>
          </div>
        </CardHeader>

        <CardContent>
          <TabsContent value="questionnaire" className="space-y-6" data-testid="onboarding-tab-content-questionnaire">
            <QuestionnaireResponseView application={application} />
          </TabsContent>

          <TabsContent value="progress" className="space-y-6" data-testid="onboarding-tab-content-progress">
            <div>
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-slate-900">Application Journey</h3>
                <Badge className="bg-amber-600" data-testid="onboarding-progress-percentage-badge">{application.progress}% Complete</Badge>
              </div>
              <Progress value={application.progress} className="h-3 mb-6" data-testid="onboarding-progress-bar" />
            </div>

            <div className="relative" data-testid="onboarding-progress-stages-container">
              {(() => {
                const interviewRoleMap: Record<number, string[]> = {
                  1: ['DD-ZM', 'RBM'],
                  2: ['DD Lead', 'ZBH'],
                  3: ['NBH', 'DD Head'],
                };

                const stageRoleMap: Record<string, string[]> = {
                  LOI_APPROVAL: ['DD Head', 'NBH'],
                  LOA_APPROVAL: ['DD Head', 'NBH'],
                };

                const getApproverStatus = (stageCode: string | number) => {
                  const stageParticipants = (application.participants || []).filter((p: any) => {
                    const metadataMatch =
                      p.metadata?.stageCode === stageCode ||
                      p.metadata?.allAssignments?.includes(stageCode) ||
                      (typeof stageCode === 'number' &&
                        (p.metadata?.interviewLevel === stageCode ||
                          p.metadata?.interviewLevel === String(stageCode) ||
                          p.metadata?.allAssignments?.includes(stageCode) ||
                          p.metadata?.allAssignments?.includes(String(stageCode)))) ||
                      (typeof stageCode === 'string' &&
                        !isNaN(Number(stageCode)) &&
                        (p.metadata?.interviewLevel === Number(stageCode) ||
                          p.metadata?.allAssignments?.includes(Number(stageCode))));

                    if (metadataMatch) return true;
                    if (typeof stageCode === 'number') {
                      return participantHasAnyRole(p, interviewRoleMap[stageCode] || []);
                    }
                    return participantHasAnyRole(p, stageRoleMap[stageCode] || []);
                  });

                  return stageParticipants.map((p: any) => {
                    const saCode = typeof stageCode === 'number' ? `INTERVIEW_LEVEL_${stageCode}` : stageCode;
                    const approval = (application.stageApprovals || []).find((sa: any) =>
                      sa.stageCode === saCode &&
                      String(sa.actorUserId) === String(p.userId)
                    );

                    return {
                      name: p.user?.name || p.user?.fullName || 'Unknown',
                      role: p.user?.role || p.user?.roleCode || p.metadata?.role || 'Reviewer',
                      status: approval ? (approval.decision === 'Approved' ? 'approved' : 'rejected') : 'pending'
                    };
                  });
                };

                const renderApprovers = (stageName: string, stageIndex: number) => {
                  const stageMapping: Record<string, string | number> = {
                    '1st Level Interview': 1,
                    '2nd Level Interview': 2,
                    '3rd Level Interview': 3,
                    'LOI Approval': 'LOI_APPROVAL',
                    'LOA': 'LOA_APPROVAL'
                  };

                  const stageCode = stageMapping[stageName];
                  if (!stageCode) return null;

                  const approvers = getApproverStatus(stageCode);
                  if (approvers.length === 0) return null;

                  return (
                    <div className="flex flex-wrap gap-2 mt-3" data-testid={`onboarding-stage-approvers-${stageIndex}`}>
                      {approvers.map((approver: any, i: number) => (
                        <div key={i} className="group relative flex items-center gap-1.5 bg-slate-50 border border-slate-200 rounded-full pl-1 pr-2.5 py-0.5 transition-all hover:bg-white hover:shadow-sm" data-testid={`onboarding-stage-approver-${stageIndex}-${i}`}>
                          <div className={cn(
                            "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white",
                            approver.status === 'approved' ? "bg-green-500" : approver.status === 'rejected' ? "bg-red-500" : "bg-slate-300"
                          )}>
                            {approver.name.split(' ').map((n: string) => n[0]).join('').substring(0, 2).toUpperCase()}
                          </div>
                          <div className="flex flex-col">
                            <span className="text-[10px] font-medium text-slate-700 leading-none">{approver.name}</span>
                            <span className="text-[8px] text-slate-500 leading-none mt-0.5">{approver.role}</span>
                          </div>

                          <div className={cn(
                            "absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full border border-white",
                            approver.status === 'approved' ? "bg-green-500" : approver.status === 'rejected' ? "bg-red-500" : "bg-amber-400"
                          )} data-testid={`onboarding-stage-approver-status-dot-${stageIndex}-${i}`} />

                          <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-slate-900 text-white text-[10px] rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
                            {approver.role}: {approver.status.toUpperCase()}
                          </div>
                        </div>
                      ))}
                    </div>
                  );
                };

                return processStages.map((stage, index) => (
                  <div key={stage.id} data-testid={`onboarding-progress-stage-${index}`}>
                    <div className="flex gap-4 pb-8">
                      <div className="relative">
                        <div className={`w-10 h-10 rounded-full flex items-center justify-center border-2 z-10 relative ${stage.status === 'completed'
                          ? 'bg-green-500 border-green-500 text-white shadow-md'
                          : stage.status === 'active'
                            ? stage.isLocked ? 'bg-slate-400 border-slate-400 text-white' : 'bg-amber-500 border-amber-500 text-white animate-pulse-subtle'
                            : 'bg-white border-slate-300 text-slate-400 shadow-none'
                          }`} data-testid={`onboarding-progress-stage-icon-${index}`}>
                          {stage.isParallel ? (
                            <GitBranch className="w-5 h-5" />
                          ) : stage.isLocked ? (
                            <div className="group relative">
                              <Lock className="w-5 h-5 text-white cursor-help" />
                              <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-slate-900 text-white text-[10px] rounded shadow-xl opacity-0 group-hover:opacity-100 pointer-events-none transition-all duration-200 whitespace-nowrap z-[100] border border-slate-700">
                                <div className="flex flex-col gap-1">
                                  <span className="font-bold text-amber-400 flex items-center gap-1">
                                    <AlertCircle className="w-3 h-3" /> Stage Locked
                                  </span>
                                  <span>{stage.lockMessage}</span>
                                </div>
                                <div className="absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-slate-900"></div>
                              </div>
                            </div>
                          ) : (
                            <>
                              {stage.status === 'completed' ? (
                                <CheckCircle2 className="w-6 h-6" />
                              ) : stage.status === 'active' ? (
                                <Clock className="w-5 h-5 text-white" />
                              ) : (
                                <div className="w-3 h-3 bg-slate-300 rounded-full"></div>
                              )}
                            </>
                          )}
                        </div>
                        {index < processStages.length - 1 && !stage.isParallel && (
                          <div className={`absolute top-10 left-1/2 -translate-x-1/2 w-0.5 h-full z-0 ${stage.status === 'completed' ? 'bg-green-500/30' : 'bg-slate-200'
                            }`} data-testid={`onboarding-progress-stage-connector-${index}`}></div>
                        )}
                      </div>
                      <div className="flex-1 pt-1">
                        <p className={cn(
                          "font-bold transition-colors",
                          stage.status === 'completed' ? "text-green-700" : stage.status === 'active' ? "text-amber-700" : "text-slate-900"
                        )} data-testid={`onboarding-progress-stage-name-${index}`}>{stage.name}</p>
                        {stage.description && (
                          <p className="text-slate-600 text-sm mt-0.5 leading-relaxed" data-testid={`onboarding-progress-stage-desc-${index}`}>{stage.description}</p>
                        )}

                        {renderApprovers(stage.name as string, index)}

                        {stage.evaluators && stage.evaluators.length > 0 && !['LOI Approval', 'LOA', '1st Level Interview', '2nd Level Interview', '3rd Level Interview'].includes(stage.name as string) && (
                          <p className="text-amber-600 text-xs mt-1.5 flex items-center gap-1 bg-amber-50 w-fit px-2 py-0.5 rounded border border-amber-100" data-testid={`onboarding-progress-stage-evaluators-${index}`}>
                            <User className="w-3 h-3" />
                            Evaluators: {stage.evaluators.join(' + ')}
                          </p>
                        )}

                        {(() => {
                          const expectedMap: Record<number, number> = {
                            3: 2,
                            4: 2,
                            5: 2,
                            6: 2,
                            8: 2,
                            12: 2
                          };
                          const stageId = Number(stage.id);
                          const expectedCount = expectedMap[stageId];

                          const stageCodeById: Record<number, string | number> = {
                            3: 1, // shortlist depends on L1 evaluators
                            4: 1,
                            5: 2,
                            6: 3,
                            8: 'LOI_APPROVAL',
                            12: 'LOA_APPROVAL',
                          };
                          const mappedStageCode = stageCodeById[stageId];
                          const actualCount = mappedStageCode ? getApproverStatus(mappedStageCode).length : (stage.evaluators?.length || 0);

                          const isEligibleForWarning = stageId === 3 ? (stage.status === 'completed') : (stage.status !== 'pending');

                          if (expectedCount && actualCount < expectedCount && application.status !== 'Rejected' && isEligibleForWarning) {
                            return (
                              <div className="mt-2" data-testid={`onboarding-progress-stage-warning-${index}`}>
                                <Alert variant="destructive" className="py-2 px-3 border-amber-200 bg-amber-50 text-amber-800">
                                  <AlertCircle className="h-4 w-4 text-amber-600" />
                                  <AlertTitle className="text-xs font-semibold">Missing Evaluators</AlertTitle>
                                  <AlertDescription className="text-xs">
                                    {actualCount === 0
                                      ? "Respective role users were not found for this location."
                                      : `Some roles (${actualCount}/${expectedCount}) are missing for this location.`
                                    }
                                    <Button
                                      variant="link"
                                      size="sm"
                                      className="h-auto p-0 ml-1 text-xs text-amber-700 underline"
                                      onClick={handleRetriggerEvaluators}
                                      data-testid={`onboarding-progress-stage-retrigger-${index}`}
                                    >
                                      <RefreshCw className="w-3 h-3 mr-1" />
                                      Re-trigger Assignment
                                    </Button>
                                  </AlertDescription>
                                </Alert>
                              </div>
                            );
                          }
                          return null;
                        })()}

                        {(() => {
                          const stageDocsCount = documents.filter(doc =>
                            doc.stage === stage.name ||
                            (!doc.stage && doc.documentType?.toLowerCase().includes(stage.name.toLowerCase().split(' ')[0]))
                          ).length;

                          return (
                            <div className="flex items-center gap-2 mt-1">
                              <button
                                onClick={() => {
                                  setSelectedStage(stage.name);
                                  setShowDocumentsModal(true);
                                  if (stageDocsCount === 0) setShowUploadForm(true);
                                }}
                                className="text-xs font-semibold text-blue-600 hover:text-blue-800 flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-50 border border-blue-100 hover:bg-blue-100 transition-all shadow-sm"
                                data-testid={`onboarding-progress-stage-docs-${index}`}
                              >
                                <FileText className="w-3.5 h-3.5" />
                                {stageDocsCount > 0 ? `${stageDocsCount} Documents` : 'Upload'}
                              </button>
                            </div>
                          );
                        })()}

                        <p className="text-slate-500 mt-1 text-xs" data-testid={`onboarding-progress-stage-status-text-${index}`}>
                          {stage.status === 'completed' && stage.date && `Completed: ${formatDateTime(stage.date)}`}
                          {stage.status === 'active' && 'In Progress'}
                          {stage.status === 'pending' && 'Pending'}
                        </p>
                      </div>
                    </div>

                    {stage.isParallel && stage.branches && (
                      <div className="ml-5 mb-8" data-testid={`onboarding-progress-parallel-branches-${index}`}>
                        {stage.branches.map((branch: any, branchIndex: number) => {
                          const branchKey = branch.name.toLowerCase().replace(/\s+/g, '-');
                          const isExpanded = expandedBranches[branchKey];
                          const branchColor = branch.color === 'blue' ? 'blue' : 'green';

                          return (
                            <div key={branchIndex} className="mb-6 last:mb-0">
                              <div className="flex items-center gap-3 mb-2">
                                <button
                                  onClick={() => setExpandedBranches(prev => ({
                                    ...prev,
                                    [branchKey]: !prev[branchKey]
                                  }))}
                                  className={`flex-1 flex items-center gap-3 p-4 rounded-lg border-2 transition-all hover:shadow-md ${branchColor === 'blue'
                                    ? 'border-blue-300 bg-blue-50 hover:bg-blue-100'
                                    : 'border-green-300 bg-green-50 hover:bg-green-100'
                                    }`}
                                  data-testid={`onboarding-progress-branch-trigger-${branchKey}`}
                                >
                                  {isExpanded ? (
                                    <ChevronDown className={`w-5 h-5 ${branchColor === 'blue' ? 'text-blue-600' : 'text-green-600'}`} />
                                  ) : (
                                    <ChevronRight className={`w-5 h-5 ${branchColor === 'blue' ? 'text-blue-600' : 'text-green-600'}`} />
                                  )}
                                  <div className={`w-8 h-8 rounded-full flex items-center justify-center ${branchColor === 'blue' ? 'bg-blue-200' : 'bg-green-200'
                                    }`}>
                                    <GitBranch className={`w-4 h-4 ${branchColor === 'blue' ? 'text-blue-700' : 'text-green-700'}`} />
                                  </div>
                                  <div className="flex-1 text-left">
                                    <p className={`${branchColor === 'blue' ? 'text-blue-900' : 'text-green-900'} font-semibold tracking-tight`}>
                                      {branch.name}
                                    </p>
                                    <p className={`text-[10px] uppercase font-bold tracking-wider ${branchColor === 'blue' ? 'text-blue-500' : 'text-green-500'}`}>
                                      {branch.stages.length} SUB-STEPS
                                    </p>
                                  </div>
                                </button>
                              </div>

                              {isExpanded && (
                                <div className="mt-4 ml-8 border-l-2 border-slate-200 pl-6 space-y-6" data-testid={`onboarding-progress-branch-content-${branchKey}`}>
                                  {branch.stages.map((branchStage: any, bsIdx: number) => (
                                    <div key={branchStage.id} className="relative">
                                      <div className="flex gap-4 text-xs" data-testid={`onboarding-progress-branch-stage-${branchKey}-${bsIdx}`}>
                                        {(() => {
                                          const stageDocs = documents.filter((doc: any) =>
                                            doc.documentType?.toLowerCase().includes(branchStage.name.toLowerCase().split(' ')[0]) ||
                                            doc.stage === branchStage.name
                                          );
                                          const isDone = branchStage.status === 'completed' || stageDocs.length > 0;

                                          return (
                                            <>
                                              <div className="relative">
                                                <div className={`w-8 h-8 rounded-full flex items-center justify-center border-2 ${isDone
                                                  ? `${branchColor === 'blue' ? 'bg-blue-500 border-blue-500' : 'bg-green-500 border-green-500'}`
                                                  : branchStage.status === 'active'
                                                    ? 'bg-amber-500 border-amber-500 text-white shadow-sm'
                                                    : 'bg-white border-slate-300 text-slate-400'
                                                  }`} data-testid={`onboarding-progress-branch-stage-icon-${branchKey}-${bsIdx}`}>
                                                  {isDone ? (
                                                    <Check className="w-4 h-4 text-white" strokeWidth={3} />
                                                  ) : branchStage.status === 'active' ? (
                                                    <Clock className="w-4 h-4 text-white" />
                                                  ) : (
                                                    <div className="w-2 h-2 bg-slate-300 rounded-full"></div>
                                                  )}
                                                </div>
                                              </div>
                                              <div className="flex-1">
                                                <p className="font-semibold text-slate-800" data-testid={`onboarding-progress-branch-stage-name-${branchKey}-${bsIdx}`}>{branchStage.name}</p>
                                                {branchStage.description && (
                                                  <p className="text-slate-500 text-xs mt-0.5">{branchStage.description}</p>
                                                )}

                                                <div className="flex items-center gap-2 mt-1">
                                                  <button
                                                    onClick={() => {
                                                      setSelectedStage(branchStage.name);
                                                      setShowDocumentsModal(true);
                                                      if (stageDocs.length === 0) setShowUploadForm(true);
                                                    }}
                                                    className={cn(
                                                      "text-[10px] font-medium flex items-center gap-1 transition-colors",
                                                      branchColor === 'blue' ? "text-blue-600 hover:text-blue-800" : "text-green-600 hover:text-green-800"
                                                    )}
                                                    data-testid={`onboarding-progress-branch-stage-docs-${branchKey}-${bsIdx}`}
                                                  >
                                                    <FileText className="w-2.5 h-2.5" />
                                                    {stageDocs.length > 0 ? `${stageDocs.length} Docs` : 'Upload'}
                                                  </button>
                                                </div>
                                                <p className="text-slate-400 text-[10px] mt-1" data-testid={`onboarding-progress-branch-stage-status-${branchKey}-${bsIdx}`}>
                                                  {isDone && branchStage.date ? `Done: ${formatDateTime(branchStage.date)}` : isDone && stageDocs.length > 0 ? `Uploaded: ${formatDateTime(stageDocs[0].updatedAt || stageDocs[0].createdAt)}` : branchStage.status === 'active' ? 'Evaluating' : 'Pending'}
                                                </p>
                                              </div>
                                            </>
                                          );
                                        })()}
                                      </div>
                                    </div>
                                  ))}
                                </div>
                              )}
                            </div>
                          );
                        })}
                        <div className="h-8 w-0.5 bg-slate-300 ml-5 opacity-50"></div>
                      </div>
                    )}
                  </div>
                ))
              })()}
            </div>
          </TabsContent>

          <TabsContent value="documents" className="space-y-4" data-testid="onboarding-tab-content-documents">
            <div className="flex items-center justify-between">
              <h3 className="text-slate-900">Uploaded Documents</h3>
              <Button size="sm" className="bg-amber-600 hover:bg-amber-700" data-testid="onboarding-documents-upload-tab-button" onClick={() => {
                setSelectedStage(null);
                setShowDocumentsModal(true);
                setShowUploadForm(true);
              }}>
                <Upload className="w-4 h-4 mr-2" />
                Upload Document
              </Button>
            </div>

            <div className="overflow-x-auto">
              <Table data-testid="onboarding-documents-table">
                <TableHeader>
                  <TableRow>
                    <TableHead className="min-w-[200px]">File Name</TableHead>
                    <TableHead className="min-w-[120px]">Type</TableHead>
                    <TableHead className="min-w-[120px]">Upload Date</TableHead>
                    <TableHead className="min-w-[150px]">Uploader</TableHead>
                    <TableHead className="text-right min-w-[100px]">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {documents.length === 0 ? (
                    <TableRow data-testid="onboarding-documents-empty-row">
                      <TableCell colSpan={5} className="text-center py-8 text-slate-500">
                        No documents uploaded yet
                      </TableCell>
                    </TableRow>
                  ) : (
                    documents.map((doc, idx) => (
                      <TableRow key={doc.id} data-testid={`onboarding-document-row-${idx}`}>
                        <TableCell className="flex items-center gap-2">
                          <FileText className="w-4 h-4 text-slate-400" />
                          <span className="truncate max-w-[150px] md:max-w-[300px]" data-testid={`onboarding-document-name-${idx}`}>{doc.fileName}</span>
                        </TableCell>
                        <TableCell data-testid={`onboarding-document-type-${idx}`}>{doc.documentType}</TableCell>
                        <TableCell>{formatDateTime(doc.createdAt)}</TableCell>
                        <TableCell data-testid={`onboarding-document-uploader-${idx}`}>
                          {doc.uploader?.fullName || (doc.uploadedBy ? 'Unknown User' : 'Applicant')}
                        </TableCell>
                        <TableCell>
                          <div className="flex justify-end gap-2">
                            <Button size="sm" variant="outline" data-testid={`onboarding-document-download-${idx}`} onClick={() => {
                                const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000';
                                window.open(`${baseUrl}/${doc.filePath}`, '_blank');
                            }}>
                              <Download className="w-3 h-3" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    )))}
                </TableBody>
              </Table>
            </div>
          </TabsContent>

          <TabsContent value="interviews" className="space-y-6" data-testid="onboarding-tab-content-interviews">
            <div>
              <h3 className="text-slate-900 mb-4">Scheduled Interviews</h3>
              <div className="overflow-x-auto">
                <Table data-testid="onboarding-interviews-scheduled-table">
                  <TableHeader>
                    <TableRow>
                      <TableHead className="min-w-[100px]">Level</TableHead>
                      <TableHead className="min-w-[180px]">Date & Time</TableHead>
                      <TableHead className="min-w-[100px]">Type</TableHead>
                      <TableHead className="min-w-[200px]">Location/Link</TableHead>
                      <TableHead className="min-w-[120px]">Status</TableHead>
                      <TableHead className="min-w-[150px]">Scheduled By</TableHead>
                      <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {(!interviews || interviews.length === 0) ? (
                      <TableRow data-testid="onboarding-interviews-empty-row">
                        <TableCell colSpan={7} className="text-center py-8 text-slate-500">
                          No interviews scheduled yet
                        </TableCell>
                      </TableRow>
                    ) : (
                      (Array.isArray(interviews) ? interviews : []).map((interview, idx) => (
                        <TableRow key={interview.id} data-testid={`onboarding-interview-row-${idx}`}>
                          <TableCell className="font-medium">Level {interview.level}</TableCell>
                          <TableCell>{interview.scheduleDate ? new Date(interview.scheduleDate).toLocaleString() : 'N/A'}</TableCell>
                          <TableCell className="capitalize">{interview.interviewType}</TableCell>
                          <TableCell>
                            {interview.interviewType?.toLowerCase().includes('virtual') ? (
                              <a href={interview.linkOrLocation} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline" data-testid={`onboarding-interview-link-${idx}`}>
                                Join Meeting
                              </a>
                            ) : (
                              <span data-testid={`onboarding-interview-location-${idx}`}>{interview.linkOrLocation}</span>
                            )}
                          </TableCell>
                          <TableCell>
                            <Badge variant={interview.status === 'Completed' ? 'default' : 'secondary'} data-testid={`onboarding-interview-status-${idx}`}>
                              {interview.status}
                            </Badge>
                          </TableCell>
                          <TableCell>{interview.scheduler?.fullName || interview.scheduledBy || 'N/A'}</TableCell>
                          <TableCell className="text-right">
                            {(interview.status === 'Scheduled' || interview.status === 'scheduled') && (
                              <Button
                                variant="ghost"
                                size="sm"
                                className="text-red-500 hover:text-red-700 hover:bg-red-50 h-8 px-2"
                                data-testid={`onboarding-interview-cancel-${idx}`}
                                onClick={() => handleCancelInterview(interview.id)}
                              >
                                Cancel
                              </Button>
                            )}
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>

            <div>
              <h3 className="text-slate-900 mb-4">Interview Feedback</h3>
              {(!interviews || interviews.length === 0) ? (
                <p className="text-slate-500 italic" data-testid="onboarding-interviews-no-feedback">No interviews scheduled.</p>
              ) : (
                (Array.isArray(interviews) ? interviews : []).map((interview, iIdx) => (
                  <div key={interview.id} className="mb-6 border p-4 rounded-lg bg-slate-50/50" data-testid={`onboarding-interview-feedback-block-${iIdx}`}>
                    <h4 className="font-semibold text-slate-800 mb-2">
                      Level {interview.level} Interview
                      <span className="font-normal text-slate-500 text-sm ml-2">
                        ({formatDateTime(interview.scheduleDate)} - {interview.interviewType})
                      </span>
                    </h4>
                    {interview.evaluations && interview.evaluations.length > 0 ? (
                      <Table data-testid={`onboarding-interview-evaluations-table-${iIdx}`}>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Interviewer</TableHead>
                            <TableHead>Role</TableHead>
                            <TableHead>
                              {interview.level === 1 ? 'Score (KT Matrix)' : 'Overall Score'}
                            </TableHead>
                            <TableHead>Remarks</TableHead>
                            <TableHead>Recommendation</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {interview.evaluations.map((evalItem: any, eIdx: number) => (
                            <TableRow key={evalItem.id} data-testid={`onboarding-interview-evaluation-row-${iIdx}-${eIdx}`}>
                              <TableCell className="font-medium">{evalItem.evaluator?.fullName}</TableCell>
                              <TableCell>{evalItem.evaluator?.role?.roleName || 'N/A'}</TableCell>
                              <TableCell>
                                {evalItem.ktMatrixScore ? (
                                  <Badge variant={
                                    interview.level === 1
                                      ? (Number(evalItem.ktMatrixScore) >= 50 ? 'outline' : 'destructive')
                                      : (Number(evalItem.ktMatrixScore) >= 5 ? 'outline' : 'destructive')
                                  } data-testid={`onboarding-interview-evaluation-score-${iIdx}-${eIdx}`}>
                                    {evalItem.ktMatrixScore}/{interview.level === 1 ? '100' : '10'}
                                  </Badge>
                                ) : 'N/A'}
                              </TableCell>
                              <TableCell className="max-w-xs truncate" title={evalItem.remarks || evalItem.qualitativeFeedback}>
                                {evalItem.remarks ? (
                                  <div className="flex flex-col gap-1">
                                    <span className="font-medium text-slate-800">{evalItem.remarks}</span>
                                    {evalItem.feedbackDetails && evalItem.feedbackDetails.length > 0 && (
                                      <Button
                                        variant="link"
                                        className="p-0 h-auto font-normal text-blue-600 text-xs w-fit"
                                        data-testid={`onboarding-interview-evaluation-details-btn-${iIdx}-${eIdx}`}
                                        onClick={() => {
                                          setSelectedEvaluationForView({ ...evalItem, interview });
                                          setShowFeedbackDetailsModal(true);
                                        }}
                                      >
                                        View Detailed Feedback
                                      </Button>
                                    )}
                                  </div>
                                ) : evalItem.feedbackDetails && evalItem.feedbackDetails.length > 0 ? (
                                  <Button
                                    variant="link"
                                    className="p-0 h-auto font-normal text-blue-600"
                                    data-testid={`onboarding-interview-evaluation-details-btn-${iIdx}-${eIdx}`}
                                    onClick={() => {
                                      setSelectedEvaluationForView({ ...evalItem, interview });
                                      setShowFeedbackDetailsModal(true);
                                    }}
                                  >
                                    View Detailed Feedback
                                  </Button>
                                ) : (
                                  evalItem.qualitativeFeedback || '-'
                                )}
                              </TableCell>
                              <TableCell data-testid={`onboarding-interview-evaluation-rec-${iIdx}-${eIdx}`}>{evalItem.recommendation || '-'}</TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    ) : (
                      <p className="text-sm text-slate-500 italic pl-2">No feedback recorded yet.</p>
                    )}
                  </div>
                ))
              )}
            </div>

            {['Level 2 Approved', 'Level 3 Interview Pending', 'Approved', 'Onboarded'].includes(application.status) && (
              <div data-testid="onboarding-interviews-summary-l2">
                <h3 className="text-slate-900 mb-4">Level 2 Interview Summary</h3>
                <div className="p-4 bg-slate-50 rounded-lg">
                  <p className="text-slate-600">Decision: Approved by both ZBH and DD Lead</p>
                  <p className="text-slate-600 mt-2">Overall Assessment: Strong candidate with excellent business plan</p>
                </div>
              </div>
            )}
          </TabsContent>

          <TabsContent value="fdd" className="space-y-6" data-testid="onboarding-tab-content-fdd">
            {renderFddAuditContent()}
          </TabsContent>

          <TabsContent value="eor" className="space-y-4" data-testid="onboarding-tab-content-eor">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-slate-900">Essential Operating Requirements</h3>
              <Badge className="bg-amber-600" data-testid="onboarding-eor-progress-badge">{Math.round(eorProgress)}% Complete</Badge>
            </div>
            <Progress value={eorProgress} className="h-3 mb-6" data-testid="onboarding-eor-progress-bar" />

            <div className="space-y-3" data-testid="onboarding-eor-checklist">
              {(eorData?.items || eorChecklist).map((item: any, idx: number) => {
                const docType = item.description || item.item;
                const hasDocument = !!item.proofDocument;

                return (
                  <div
                    key={item.id}
                    className="flex items-center gap-3 p-3 bg-slate-50 rounded-xl transition-all border border-transparent hover:border-slate-200 group"
                    data-testid={`onboarding-eor-item-${idx}`}
                  >
                    <Checkbox
                      checked={item.isCompliant || item.completed}
                      className="pointer-events-none shrink-0"
                      data-testid={`onboarding-eor-checkbox-${idx}`}
                    />

                    <div
                      className="flex flex-col flex-1 min-w-0 cursor-pointer"
                      data-testid={`onboarding-eor-clickable-${idx}`}
                      onClick={() => {
                        setSelectedStage(`EOR: ${docType}`);
                        setUploadDocType(docType);
                        setShowDocumentsModal(true);
                        if (!hasDocument) setShowUploadForm(true);
                        else setShowUploadForm(false);
                      }}
                    >
                      <div className="flex items-center gap-2">
                        <span className={(item.isCompliant || item.completed) ? 'text-slate-900 font-bold' : 'text-slate-600 font-medium'}>
                          {docType}
                        </span>
                        {hasDocument && !item.isCompliant && (
                          <Badge variant="outline" className="text-[10px] h-4 px-1.5 bg-amber-50 text-amber-600 border-amber-200 uppercase tracking-wider font-bold">
                            Needs Verification
                          </Badge>
                        )}
                      </div>
                      {hasDocument && (
                        <div className="flex items-center gap-1.5 text-xs text-blue-600 font-semibold mt-1">
                          <FileText className="w-3.5 h-3.5" />
                          <span className="truncate">{item.proofDocument.fileName}</span>
                        </div>
                      )}
                      {!hasDocument && (
                        <span className="text-[10px] text-slate-400 mt-1 uppercase tracking-tighter">Click to upload proof</span>
                      )}
                    </div>

                    <div className="flex items-center gap-2 shrink-0">
                      {hasDocument && !item.isCompliant && isAdmin && (
                        <div className="flex gap-2">
                          <Button
                            size="sm"
                            className="h-8 px-3 bg-green-600 hover:bg-green-700 text-white font-bold rounded-lg shadow-sm"
                            data-testid={`onboarding-eor-verify-btn-${idx}`}
                            onClick={async () => {
                              await (await import('@/services/eor.service')).eorService.updateItem(eorData.id, {
                                ...item,
                                isCompliant: true
                              });
                              fetchEorData();
                              toast.success(`${docType} verified!`);
                            }}
                          >
                            Verify
                          </Button>
                          <Button
                            size="sm"
                            variant="outline"
                            className="h-8 px-3 border-red-200 text-red-600 hover:bg-red-50 font-bold rounded-lg"
                            data-testid={`onboarding-eor-reject-btn-${idx}`}
                            onClick={async () => {
                              await (await import('@/services/eor.service')).eorService.updateItem(eorData.id, {
                                ...item,
                                isCompliant: false,
                                proofDocumentId: null
                              });
                              fetchEorData();
                              toast.success(`${docType} rejected.`);
                            }}
                          >
                            Reject
                          </Button>
                        </div>
                      )}

                      {(item.isCompliant || item.completed) && (
                        <div className="bg-green-100 p-1.5 rounded-full" data-testid={`onboarding-eor-done-icon-${idx}`}>
                          <CheckCircle className="w-4 h-4 text-green-600" />
                        </div>
                      )}

                      {!hasDocument && (
                        <div className="p-2 text-slate-300 group-hover:text-amber-500 transition-colors" data-testid={`onboarding-eor-upload-hint-${idx}`}>
                          <Upload className="w-4 h-4" />
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>

            {eorProgress === 100 && isAdmin && (application.status === 'EOR In Progress' || application.status === 'LOA Pending') && (
              <div className="mt-8 p-6 bg-green-50 rounded-xl border-2 border-green-200 animate-in fade-in slide-in-from-bottom-4 duration-500" data-testid="onboarding-eor-complete-banner">
                <div className="flex flex-col sm:flex-row items-center gap-4">
                  <div className="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center shrink-0">
                    <ShieldCheck className="w-7 h-7 text-green-600" />
                  </div>
                  <div className="flex-1 text-center sm:text-left">
                    <h4 className="text-green-900 font-bold text-lg">EOR Checklist Complete</h4>
                    <p className="text-green-700 text-sm">All 12 mandatory requirements have been verified. You can now complete the audit and move to final inauguration.</p>
                  </div>
                  <Button
                    className="w-full sm:w-auto bg-green-600 hover:bg-green-700 text-white font-bold h-12 px-8 rounded-xl shadow-lg shadow-green-600/20 transition-all hover:scale-[1.02] active:scale-[0.98]"
                    data-testid="onboarding-eor-submit-audit"
                    onClick={async () => {
                      try {
                        const checklistId = eorData?.id;
                        if (!checklistId) throw new Error('Checklist ID not found');

                        await (await import('@/services/eor.service')).eorService.submitAudit(checklistId, {
                          status: 'Completed',
                          overallComments: 'EOR Checklist verified and audit completed.'
                        });
                        toast.success('EOR Audit completed successfully!');
                        fetchApplication();
                        fetchEorData();
                      } catch (error: any) {
                        toast.error(error.message || 'Failed to complete EOR audit');
                      }
                    }}
                  >
                    Complete Audit & Proceed
                  </Button>
                </div>
              </div>
            )}
          </TabsContent>

          <TabsContent value="payments" className="space-y-6" data-testid="onboarding-tab-content-payments">
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-lg font-semibold text-slate-900">Security Deposits</h3>
              <Badge variant="outline" className="bg-slate-50 text-slate-500 border-slate-200" data-testid="onboarding-payments-count-badge">
                {deposits.length} Payment Record(s)
              </Badge>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {(() => {
                const deposit = getDeposit('SECURITY_DEPOSIT');
                const config = paymentConfigs.SECURITY_DEPOSIT;
                const expectedAmount = config?.amount || 500000;

                return (
                  <Card className={cn(
                    "border-l-4",
                    deposit?.status === 'Verified' ? "border-l-green-500" :
                      deposit?.status === 'Rejected' ? "border-l-red-500" : "border-l-amber-500"
                  )} data-testid="onboarding-payment-card-security">
                    <CardContent className="pt-6">
                      <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center gap-2">
                          <div className="w-8 h-8 rounded bg-amber-50 flex items-center justify-center text-amber-600">
                            <ClipboardList className="w-4 h-4" />
                          </div>
                          <span className="font-semibold text-slate-700">Security Deposit</span>
                        </div>
                        <Badge className={cn(
                          deposit?.status === 'Verified' ? "bg-green-100 text-green-700 hover:bg-green-100" :
                            deposit?.status === 'Rejected' ? "bg-red-100 text-red-700 hover:bg-red-100" :
                              "bg-amber-100 text-amber-700 hover:bg-amber-100"
                        )} data-testid="onboarding-payment-status-security">
                          {deposit?.status || 'Awaiting'}
                        </Badge>
                      </div>

                      <div className="space-y-3">
                        <div className="flex justify-between items-baseline">
                          <span className="text-xs text-slate-500 uppercase font-bold tracking-wider">Amount Received</span>
                          <span className="text-lg font-bold text-slate-900" data-testid="onboarding-payment-amount-security">₹{Number(deposit?.amount || 0).toLocaleString()}</span>
                        </div>
                        <div className="flex justify-between items-baseline border-t border-slate-100 pt-2">
                          <span className="text-xs text-slate-500">Expected Total</span>
                          <span className="text-sm font-medium text-slate-600">₹{expectedAmount.toLocaleString()}</span>
                        </div>

                        {deposit?.paymentReference && (
                          <div className="bg-slate-50 p-2 rounded text-xs font-mono text-slate-600 flex justify-between items-center" data-testid="onboarding-payment-ref-security">
                            <span>Ref: {deposit.paymentReference}</span>
                            {deposit.verifiedAt && <span>{formatDateTime(deposit.verifiedAt)}</span>}
                          </div>
                        )}

                        {deposit?.remarks && (
                          <div className="text-[11px] text-slate-500 bg-red-50/50 p-2 rounded border border-red-100 italic" data-testid="onboarding-payment-remarks-security">
                            "{deposit.remarks}"
                          </div>
                        )}

                        <div className="pt-4 mt-2 border-t border-slate-100">
                          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Verification Documents</p>
                          <div className="space-y-2">
                            {documents.filter((d: any) => d.documentType?.toLowerCase().includes('security') && d.documentType?.toLowerCase().includes('deposit')).map((doc: any, idx: number) => (
                              <div key={idx} className="flex items-center justify-between p-2 rounded bg-slate-50/50 border border-slate-100" data-testid={`onboarding-payment-doc-security-${idx}`}>
                                <div className="flex items-center gap-2 overflow-hidden">
                                  <FileText className="w-3 h-3 text-slate-400" />
                                  <span className="text-[10px] font-medium text-slate-700 truncate">{doc.fileName || doc.name}</span>
                                </div>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  className="h-6 px-2 text-[10px] text-amber-600 hover:text-amber-700 hover:bg-amber-50"
                                  data-testid={`onboarding-payment-doc-view-security-${idx}`}
                                  onClick={() => { setPreviewDoc(doc); setShowPreviewModal(true); }}
                                >
                                  View
                                </Button>
                              </div>
                            ))}
                            {documents.filter((d: any) => d.documentType?.toLowerCase().includes('security') && d.documentType?.toLowerCase().includes('deposit')).length === 0 && (
                              <p className="text-[10px] text-slate-400 italic">No proof uploaded</p>
                            )}
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                );
              })()}

              {(() => {
                const deposit = getDeposit('FIRST_FILL');
                const config = paymentConfigs.FIRST_FILL;
                const expectedAmount = config?.amount || 1500000;

                return (
                  <Card className={cn(
                    "border-l-4",
                    deposit?.status === 'Verified' ? "border-l-green-500" :
                      deposit?.status === 'Rejected' ? "border-l-red-500" : "border-l-amber-500"
                  )} data-testid="onboarding-payment-card-first-fill">
                    <CardContent className="pt-6">
                      <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center gap-2">
                          <div className="w-8 h-8 rounded bg-blue-50 flex items-center justify-center text-blue-600">
                            <ShieldCheck className="w-4 h-4" />
                          </div>
                          <span className="font-semibold text-slate-700">First Fill</span>
                        </div>
                        <Badge className={cn(
                          deposit?.status === 'Verified' ? "bg-green-100 text-green-700 hover:bg-green-100" :
                            deposit?.status === 'Rejected' ? "bg-red-100 text-red-700 hover:bg-red-100" :
                              "bg-amber-100 text-amber-700 hover:bg-amber-100"
                        )} data-testid="onboarding-payment-status-first-fill">
                          {deposit?.status || 'Awaiting'}
                        </Badge>
                      </div>

                      <div className="space-y-3">
                        <div className="flex justify-between items-baseline">
                          <span className="text-xs text-slate-500 uppercase font-bold tracking-wider">Amount Received</span>
                          <span className="text-lg font-bold text-slate-900" data-testid="onboarding-payment-amount-first-fill">₹{Number(deposit?.amount || 0).toLocaleString()}</span>
                        </div>
                        <div className="flex justify-between items-baseline border-t border-slate-100 pt-2">
                          <span className="text-xs text-slate-500">Expected Total</span>
                          <span className="text-sm font-medium text-slate-600">₹{expectedAmount.toLocaleString()}</span>
                        </div>

                        {deposit?.paymentReference && (
                          <div className="bg-slate-50 p-2 rounded text-xs font-mono text-slate-600 flex justify-between items-center" data-testid="onboarding-payment-ref-first-fill">
                            <span>Ref: {deposit.paymentReference}</span>
                            {deposit.verifiedAt && <span>{formatDateTime(deposit.verifiedAt)}</span>}
                          </div>
                        )}

                        {deposit?.remarks && (
                          <div className="text-[11px] text-slate-500 bg-red-50/50 p-2 rounded border border-red-100 italic" data-testid="onboarding-payment-remarks-first-fill">
                            "{deposit.remarks}"
                          </div>
                        )}

                        <div className="pt-4 mt-2 border-t border-slate-100">
                          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Verification Documents</p>
                          <div className="space-y-2">
                            {documents.filter((d: any) => d.documentType?.toLowerCase().includes('first') && d.documentType?.toLowerCase().includes('fill')).map((doc: any, idx: number) => (
                              <div key={idx} className="flex items-center justify-between p-2 rounded bg-slate-50/50 border border-slate-100" data-testid={`onboarding-payment-doc-first-fill-${idx}`}>
                                <div className="flex items-center gap-2 overflow-hidden">
                                  <FileText className="w-3 h-3 text-slate-400" />
                                  <span className="text-[10px] font-medium text-slate-700 truncate">{doc.fileName || doc.name}</span>
                                </div>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  className="h-6 px-2 text-[10px] text-blue-600 hover:text-blue-700 hover:bg-blue-50"
                                  data-testid={`onboarding-payment-doc-view-first-fill-${idx}`}
                                  onClick={() => { setPreviewDoc(doc); setShowPreviewModal(true); }}
                                >
                                  View
                                </Button>
                              </div>
                            ))}
                            {documents.filter((d: any) => d.documentType?.toLowerCase().includes('first') && d.documentType?.toLowerCase().includes('fill')).length === 0 && (
                              <p className="text-[10px] text-slate-400 italic">No proof uploaded</p>
                            )}
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                );
              })()}
            </div>
          </TabsContent>

          <TabsContent value="audit" data-testid="onboarding-tab-content-audit">
            <ScrollArea className="h-[30rem] rounded-md border border-slate-100 bg-slate-50/50">
              <div className="space-y-2.5 p-3 pr-4" data-testid="onboarding-audit-logs-container">
                {auditLoading ? (
                  <div className="flex items-center justify-center py-10" data-testid="onboarding-audit-loading">
                    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-amber-600" />
                    <span className="ml-2 text-sm text-slate-500">Loading audit trail…</span>
                  </div>
                ) : auditLogs.length === 0 ? (
                  <div className="rounded-lg border border-dashed border-slate-200 bg-white py-10 text-center text-sm text-slate-500" data-testid="onboarding-audit-empty">
                    No audit logs recorded yet for this application.
                  </div>
                ) : (
                  auditLogs.map((log: any, idx: number) => (
                    <div
                      key={log.id}
                      className="rounded-lg border border-slate-200/90 bg-white p-3 text-sm shadow-sm"
                      data-testid={`onboarding-audit-log-item-${idx}`}
                    >
                      <div className="flex flex-wrap items-start justify-between gap-x-3 gap-y-1.5">
                        <div className="flex min-w-0 flex-wrap items-center gap-2">
                          <Badge
                            variant="outline"
                            className={cn(
                              'shrink-0 text-[10px] font-semibold uppercase tracking-wide',
                              auditLogActionBadgeClass(log.action)
                            )}
                            data-testid={`onboarding-audit-log-action-${idx}`}
                          >
                            {String(log.action || 'EVENT').replace(/_/g, ' ')}
                          </Badge>
                          {log.stage ? (
                            <span
                              className="max-w-[200px] truncate text-[11px] text-slate-500"
                              title={log.stage}
                              data-testid={`onboarding-audit-log-stage-${idx}`}
                            >
                              {log.stage}
                            </span>
                          ) : null}
                        </div>
                        <time
                          className="shrink-0 text-xs tabular-nums text-slate-400"
                          dateTime={log.timestamp}
                          data-testid={`onboarding-audit-log-time-${idx}`}
                        >
                          {formatDateTime(log.timestamp)}
                        </time>
                      </div>
                      <p className="mt-2 text-[13px] leading-relaxed text-slate-800" data-testid={`onboarding-audit-log-desc-${idx}`}>
                        {log.description || '—'}
                      </p>
                      <div className="mt-2 flex items-center gap-1.5 text-xs text-slate-500">
                        <User className="h-3.5 w-3.5 shrink-0 text-slate-400" aria-hidden />
                        <span className="min-w-0 truncate">
                          <span className="font-medium text-slate-600" data-testid={`onboarding-audit-log-user-${idx}`}>
                            {log.userName || 'System'}
                          </span>
                          {log.userEmail ? (
                            <span className="text-slate-400" data-testid={`onboarding-audit-log-email-${idx}`}> · {log.userEmail}</span>
                          ) : null}
                        </span>
                      </div>
                    </div>
                  ))
                )}
              </div>
            </ScrollArea>
          </TabsContent>
        </CardContent>
      </Tabs>
    </Card>
  );
}