path: root/lib/swp/table/swp-inbox-document-detail-dialog.tsx

"use client";

import React, { useState, useMemo } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { 
  ChevronDown, 
  ChevronRight, 
  Download, 
  FileIcon,
  XCircle,
  AlertCircle,
} from "lucide-react";
import { 
  cancelVendorFile,
  downloadVendorFile,
} from "@/lib/swp/vendor-actions";
import type { SwpFileApiResponse } from "@/lib/swp/api-client";
import type { InboxDocumentItem } from "./swp-inbox-table";
import { toast } from "sonner";

interface SwpInboxDocumentDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  document: InboxDocumentItem | null;
  projNo: string;
  vendorCode: string;
  userId: string;
}

// Group type by revision
interface RevisionGroup {
  revNo: string;
  stage: string;
  activities: ActivityGroup[];
  totalFiles: number;
}

// Group type by Activity (activity can be null)
interface ActivityGroup {
  actvNo: string | null;
  files: SwpFileApiResponse[];
}

export function SwpInboxDocumentDetailDialog({
  open,
  onOpenChange,
  document,
  projNo,
}: SwpInboxDocumentDetailDialogProps) {
  const [expandedRevisions, setExpandedRevisions] = useState<Set<string>>(new Set());
  const [expandedActivities, setExpandedActivities] = useState<Set<string>>(new Set());
  const [isAllExpanded, setIsAllExpanded] = useState(true);

  // Group files into Revision > Activity structure
  const revisionGroups = useMemo(() => {
    if (!document) return [];

    const revMap = new Map<string, SwpFileApiResponse[]>();

    document.files.forEach((file) => {
      const revKey = `${file.REV_NO}|${file.STAGE}`;
      if (!revMap.has(revKey)) {
        revMap.set(revKey, []);
      }
      revMap.get(revKey)!.push(file);
    });

    const result: RevisionGroup[] = [];

    revMap.forEach((revFiles, revKey) => {
      const [revNo, stage] = revKey.split("|");

      // Group by Activity (nullable)
      const actMap = new Map<string | null, SwpFileApiResponse[]>();
      
      revFiles.forEach((file) => {
        const actvNo = file.ACTV_NO || null;
        if (!actMap.has(actvNo)) {
          actMap.set(actvNo, []);
        }
        actMap.get(actvNo)!.push(file);
      });

      const activities: ActivityGroup[] = [];
      actMap.forEach((files, actvNo) => {
        activities.push({ actvNo, files });
      });

      // Sort: No Activity first, then with Activity
      activities.sort((a, b) => {
        if (a.actvNo === null && b.actvNo !== null) return -1;
        if (a.actvNo !== null && b.actvNo === null) return 1;
        if (a.actvNo === null && b.actvNo === null) return 0;
        return (a.actvNo || "").localeCompare(b.actvNo || "");
      });

      result.push({
        revNo,
        stage,
        activities,
        totalFiles: revFiles.length,
      });
    });

    // Sort by revision number (newest first)
    return result.sort((a, b) => b.revNo.localeCompare(a.revNo));
  }, [document]);

  // Expand all when dialog opens
  React.useEffect(() => {
    if (open && revisionGroups.length > 0) {
      const allRevKeys = new Set<string>();
      const allActKeys = new Set<string>();
      
      revisionGroups.forEach((revision) => {
        const revKey = revision.revNo;
        allRevKeys.add(revKey);
        
        revision.activities.forEach((activity) => {
          const actKey = `${revKey}|${activity.actvNo || "NO_ACTIVITY"}`;
          allActKeys.add(actKey);
        });
      });
      
      setExpandedRevisions(allRevKeys);
      setExpandedActivities(allActKeys);
      setIsAllExpanded(true);
    }
  }, [open, revisionGroups]);

  const toggleRevision = (revKey: string) => {
    setExpandedRevisions((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(revKey)) {
        newSet.delete(revKey);
      } else {
        newSet.add(revKey);
      }
      return newSet;
    });
  };

  const toggleActivity = (actKey: string) => {
    setExpandedActivities((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(actKey)) {
        newSet.delete(actKey);
      } else {
        newSet.add(actKey);
      }
      return newSet;
    });
  };

  // Toggle all
  const handleToggleAll = () => {
    if (isAllExpanded) {
      // Collapse all
      setExpandedRevisions(new Set());
      setExpandedActivities(new Set());
      setIsAllExpanded(false);
    } else {
      // Expand all
      const allRevKeys = new Set<string>();
      const allActKeys = new Set<string>();
      
      revisionGroups.forEach((revision) => {
        const revKey = revision.revNo;
        allRevKeys.add(revKey);
        
        revision.activities.forEach((activity) => {
          const actKey = `${revKey}|${activity.actvNo || "NO_ACTIVITY"}`;
          allActKeys.add(actKey);
        });
      });
      
      setExpandedRevisions(allRevKeys);
      setExpandedActivities(allActKeys);
      setIsAllExpanded(true);
    }
  };

  const handleCancelFile = async (boxSeq: string, actvSeq: string, fileName: string) => {
    try {
      await cancelVendorFile(boxSeq, actvSeq);
      toast.success(`File cancelled: ${fileName}`);
      
      // Close dialog and trigger parent refresh
      onOpenChange(false);
    } catch (error) {
      console.error("Failed to cancel file:", error);
      toast.error("Failed to cancel file");
    }
  };

  const handleDownloadFile = async (fileName: string, ownDocNo: string) => {
    try {
      toast.info("Downloading file...");
      const result = await downloadVendorFile(projNo, ownDocNo, fileName);
      
      if (!result.success || !result.data) {
        toast.error(result.error || "File download failed");
        return;
      }

      // Create Blob and download
      const blob = new Blob([Buffer.from(result.data)], { type: result.mimeType });
      const url = URL.createObjectURL(blob);
      const link = window.document.createElement("a");
      link.href = url;
      link.download = result.fileName || fileName;
      window.document.body.appendChild(link);
      link.click();
      window.document.body.removeChild(link);
      URL.revokeObjectURL(url);

      toast.success(`File downloaded: ${fileName}`);
    } catch (error) {
      console.error("File download failed:", error);
      toast.error("Failed to download file");
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Uploaded File Details</DialogTitle>
          {document && (
            <DialogDescription>
              {document.ownDocNo}
            </DialogDescription>
          )}
        </DialogHeader>

        {document && (
          <div className="space-y-4">
            {/* Document Info */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-4 bg-muted/30 rounded-lg">
              <div>
                <span className="text-sm font-semibold">OWN_DOC_NO:</span>
                <div className="text-sm font-mono">{document.ownDocNo}</div>
              </div>
              <div>
                <span className="text-sm font-semibold">Latest Stage:</span>
                <div className="text-sm">{document.latestStage || "-"}</div>
              </div>
              <div>
                <span className="text-sm font-semibold">Latest Revision:</span>
                <div className="text-sm">{document.latestRevNo || "-"}</div>
              </div>
              <div>
                <span className="text-sm font-semibold">Latest REV Files:</span>
                <div className="text-sm">{document.latestRevFileCount}</div>
              </div>
            </div>

            {/* Revision and Activity Tree */}
            {revisionGroups.length > 0 ? (
              <div className="space-y-2">
                {/* Toggle All Button */}
                <div className="flex justify-end">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handleToggleAll}
                  >
                    {isAllExpanded ? (
                      <>
                        <ChevronDown className="h-4 w-4 mr-2" />
                        Collapse All
                      </>
                    ) : (
                      <>
                        <ChevronRight className="h-4 w-4 mr-2" />
                        Expand All
                      </>
                    )}
                  </Button>
                </div>
                {revisionGroups.map((revision) => {
                  const revKey = revision.revNo;
                  const isRevExpanded = expandedRevisions.has(revKey);

                  return (
                    <div key={revKey} className="border rounded-lg">
                      {/* Revision Header */}
                      <div
                        className="flex items-center justify-between p-3 bg-muted/50 cursor-pointer hover:bg-muted"
                        onClick={() => toggleRevision(revKey)}
                      >
                        <div className="flex items-center gap-3">
                          {isRevExpanded ? (
                            <ChevronDown className="h-4 w-4" />
                          ) : (
                            <ChevronRight className="h-4 w-4" />
                          )}
                          <Badge variant="secondary" className="font-mono">
                            REV {revision.revNo}
                          </Badge>
                          <Badge variant="outline" className={
                            revision.stage === "IFC" ? "bg-green-100 text-green-800" :
                            revision.stage === "IFA" ? "bg-blue-100 text-blue-800" :
                            "bg-gray-100 text-gray-800"
                          }>
                            {revision.stage}
                          </Badge>
                          <span className="text-sm text-muted-foreground">
                            {revision.activities.length} Groups / {revision.totalFiles} Files
                          </span>
                        </div>
                      </div>

                      {/* Activity List (or files without Activity) */}
                      {isRevExpanded && (
                        <div className="p-2 space-y-2">
                          {revision.activities.map((activity) => {
                            const actKey = `${revKey}|${activity.actvNo || "NO_ACTIVITY"}`;
                            const isActExpanded = expandedActivities.has(actKey);

                            return (
                              <div key={actKey} className="border rounded-md">
                                {/* Activity Header */}
                                <div
                                  className="flex items-center justify-between p-2 bg-muted/30 cursor-pointer hover:bg-muted/50"
                                  onClick={() => toggleActivity(actKey)}
                                >
                                  <div className="flex items-center gap-2">
                                    {isActExpanded ? (
                                      <ChevronDown className="h-4 w-4" />
                                    ) : (
                                      <ChevronRight className="h-4 w-4" />
                                    )}
                                    {activity.actvNo ? (
                                      <>
                                        <Badge variant="outline" className="bg-blue-100 text-blue-800">
                                          Activity
                                        </Badge>
                                        <span className="text-xs text-muted-foreground font-mono">
                                          {activity.actvNo}
                                        </span>
                                      </>
                                    ) : (
                                      <Badge variant="outline" className="bg-gray-100 text-gray-800">
                                        No Activity
                                      </Badge>
                                    )}
                                    <span className="text-xs text-muted-foreground">
                                      {activity.files.length} Files
                                    </span>
                                  </div>
                                </div>

                                {/* File List */}
                                {isActExpanded && (
                                  <div className="p-2 space-y-1">
                                    {activity.files.map((file, idx) => (
                                      <div
                                        key={idx}
                                        className="flex items-center justify-between p-2 border rounded bg-background hover:bg-muted/30"
                                      >
                                        <div className="flex items-center gap-2 flex-1">
                                          <FileIcon className="h-4 w-4 text-blue-500" />
                                          <span className="text-sm font-mono">{file.FILE_NM}</span>
                                          {file.FILE_SZ && (
                                            <span className="text-xs text-muted-foreground">
                                              ({formatFileSize(file.FILE_SZ)})
                                            </span>
                                          )}
                                          {file.STAT && (
                                            <Badge variant="outline" className={
                                              file.STAT === "SCW03" || file.STAT === "SCW08" ? "bg-green-100 text-green-800" :      // Complete, Checked
                                              file.STAT === "SCW02" ? "bg-blue-100 text-blue-800" :                                 // Processing
                                              file.STAT === "SCW01" ? "bg-yellow-100 text-yellow-800" :                             // Standby
                                              file.STAT === "SCW04" || file.STAT === "SCW05" || file.STAT === "SCW06" ? "bg-red-100 text-red-800" : // Reject, Error Zip, Error Meta
                                              file.STAT === "SCW07" ? "bg-purple-100 text-purple-800" :                             // Send for Eng Verification
                                              file.STAT === "SCW09" ? "bg-gray-100 text-gray-800" :                                 // Cancelled
                                              file.STAT === "SCW00" ? "bg-orange-100 text-orange-800" :                             // Upload
                                              "bg-gray-100 text-gray-800"
                                            }>
                                              {file.STAT_NM || file.STAT}
                                            </Badge>
                                          )}
                                        </div>
                                        <div className="flex items-center gap-1">
                                          {file.STAT === "SCW01" && file.BOX_SEQ && file.ACTV_SEQ && (
                                            <Button
                                              variant="outline"
                                              size="sm"
                                              onClick={() => handleCancelFile(file.BOX_SEQ!, file.ACTV_SEQ!, file.FILE_NM)}
                                            >
                                              <XCircle className="h-4 w-4 mr-1" />
                                              Cancel
                                            </Button>
                                          )}
                                          {file.FLD_PATH && (
                                            <Button
                                              variant="outline"
                                              size="sm"
                                              onClick={() => handleDownloadFile(file.FILE_NM, document.ownDocNo)}
                                            >
                                              <Download className="h-4 w-4 mr-1" />
                                              Download
                                            </Button>
                                          )}
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                )}
                              </div>
                            );
                          })}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            ) : (
              <div className="p-8 text-center text-muted-foreground">
                <AlertCircle className="h-12 w-12 mx-auto mb-2 opacity-50" />
                <p>No file information available</p>
              </div>
            )}
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}

function formatFileSize(sizeStr: string): string {
  const bytes = parseInt(sizeStr, 10);
  if (isNaN(bytes)) return sizeStr;

  const kb = bytes / 1024;
  const mb = kb / 1024;

  return mb >= 1 ? `${mb.toFixed(2)} MB` : `${kb.toFixed(2)} KB`;
}