/**
 * DMSPushModal Component
 * Modal for Step 6: Push to DMS Verification
 * Allows user to verify completion details and expenses before pushing to DMS
 */

import { useState, useMemo, useEffect } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Receipt,
  DollarSign,
  TriangleAlert,
  Activity,
  CheckCircle2,
  Download,
  Eye,
  Loader2,
  RefreshCw,
} from 'lucide-react';
import { toast } from 'sonner';
import { getDocumentPreviewUrl, downloadDocument } from '@/services/workflowApi';
import '@/components/common/FilePreview/FilePreview.css';
import './DMSPushModal.css';

interface ExpenseItem {
  description: string;
  amount: number;
}

interface CompletionDetails {
  activityCompletionDate?: string;
  numberOfParticipants?: number;
  closedExpenses?: ExpenseItem[];
  totalClosedExpenses?: number;
  completionDescription?: string;
}

interface IODetails {
  ioNumber?: string;
  blockedAmount?: number;
  availableBalance?: number;
  remainingBalance?: number;
}

interface CompletionDocuments {
  completionDocuments?: Array<{
    name: string;
    url?: string;
    id?: string;
  }>;
  activityPhotos?: Array<{
    name: string;
    url?: string;
    id?: string;
  }>;
  invoicesReceipts?: Array<{
    name: string;
    url?: string;
    id?: string;
  }>;
  attendanceSheet?: {
    name: string;
    url?: string;
    id?: string;
  };
}

interface DMSPushModalProps {
  isOpen: boolean;
  onClose: () => void;
  onPush: (comments: string) => Promise<void>;
  onReQuotation?: (comments: string) => Promise<void>;
  completionDetails?: CompletionDetails | null;
  ioDetails?: IODetails | null;
  completionDocuments?: CompletionDocuments | null;
  requestTitle?: string;
  requestNumber?: string;
  taxationType?: string | null;
}

export function DMSPushModal({
  isOpen,
  onClose,
  onPush,
  onReQuotation,
  completionDetails,
  ioDetails,
  completionDocuments,
  requestTitle,
  requestNumber,
  taxationType,
}: DMSPushModalProps) {
  const isNonGst = useMemo(() => {
    return taxationType === 'Non GST' || taxationType === 'Non-GST';
  }, [taxationType]);

  const [comments, setComments] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [previewDocument, setPreviewDocument] = useState<{
    name: string;
    url: string;
    type?: string;
    size?: number;
  } | null>(null);
  const [previewLoading, setPreviewLoading] = useState(false);

  const commentsChars = comments.length;
  const maxCommentsChars = 500;

  // Calculate total closed expenses
  const totalClosedExpenses = useMemo(() => {
    if (completionDetails?.totalClosedExpenses) {
      return completionDetails.totalClosedExpenses;
    }
    if (completionDetails?.closedExpenses && Array.isArray(completionDetails.closedExpenses)) {
      return completionDetails.closedExpenses.reduce((sum, item) => {
        const amount = typeof item === 'object' ? (item.amount || 0) : 0;
        const gst = typeof item === 'object' ? ((item as any).gstAmt || 0) : 0;
        const total = (item as any).totalAmt || (amount + gst);
        return sum + (Number(total) || 0);
      }, 0);
    }
    return 0;
  }, [completionDetails]);

  // Format date
  const formatDate = (dateString?: string) => {
    if (!dateString) return '—';
    try {
      const date = new Date(dateString);
      return date.toLocaleDateString('en-IN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
    } catch {
      return dateString;
    }
  };

  // Format currency
  const formatCurrency = (amount: number) => {
    return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
  };

  // Check if document can be previewed
  const canPreviewDocument = (doc: { name: string; url?: string; id?: string }): boolean => {
    if (!doc.name) return false;
    const name = doc.name.toLowerCase();
    return name.endsWith('.pdf') ||
      name.endsWith('.jpg') ||
      name.endsWith('.jpeg') ||
      name.endsWith('.png') ||
      name.endsWith('.gif') ||
      name.endsWith('.webp');
  };

  // Handle document preview - fetch as blob to avoid CSP issues
  const handlePreviewDocument = async (doc: { name: string; url?: string; id?: string }) => {
    if (!doc.id) {
      toast.error('Document preview not available - document ID missing');
      return;
    }

    setPreviewLoading(true);
    try {
      const previewUrl = getDocumentPreviewUrl(doc.id);

      // Determine file type from name
      const fileName = doc.name.toLowerCase();
      const isPDF = fileName.endsWith('.pdf');
      const isImage = fileName.match(/\.(jpg|jpeg|png|gif|webp)$/i);

      // Fetch document as a blob to create a blob URL (CSP compliant)
      const isProduction = import.meta.env.PROD || import.meta.env.MODE === 'production';
      const token = isProduction ? null : localStorage.getItem('accessToken');

      const headers: HeadersInit = {
        'Accept': isPDF ? 'application/pdf' : '*/*'
      };

      if (!isProduction && token) {
        headers['Authorization'] = `Bearer ${token}`;
      }

      const response = await fetch(previewUrl, {
        headers,
        credentials: 'include',
        mode: 'cors'
      });

      if (!response.ok) {
        throw new Error(`Failed to load file: ${response.status} ${response.statusText}`);
      }

      const blob = await response.blob();

      if (blob.size === 0) {
        throw new Error('File is empty or could not be loaded');
      }

      // Create blob URL (CSP compliant - uses 'blob:' protocol)
      const blobUrl = window.URL.createObjectURL(blob);

      setPreviewDocument({
        name: doc.name,
        url: blobUrl,
        type: blob.type || (isPDF ? 'application/pdf' : isImage ? 'image' : undefined),
        size: blob.size,
      });
    } catch (error) {
      console.error('Failed to load document preview:', error);
      toast.error('Failed to load document preview');
    } finally {
      setPreviewLoading(false);
    }
  };

  // Cleanup blob URLs on unmount
  useEffect(() => {
    return () => {
      if (previewDocument?.url && previewDocument.url.startsWith('blob:')) {
        window.URL.revokeObjectURL(previewDocument.url);
      }
    };
  }, [previewDocument]);

  const handleSubmit = async () => {
    if (!comments.trim()) {
      toast.error('Please provide comments before proceeding');
      return;
    }

    try {
      setSubmitting(true);
      await onPush(comments.trim());
      handleReset();
      onClose();
    } catch (error) {
      console.error('Failed to generate e-invoice:', error);
      toast.error('Failed to generate e-invoice. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  const handleReset = () => {
    setComments('');
  };

  const handleReQuotation = async () => {
    if (!comments.trim()) {
      toast.error('Please provide comments (reason) for re-quotation request');
      return;
    }

    if (!onReQuotation) {
      toast.error('Re-quotation handler not provided');
      return;
    }

    try {
      setSubmitting(true);
      await onReQuotation(comments.trim());
      handleReset();
      onClose();
    } catch (error) {
      console.error('Failed to request re-quotation:', error);
      // Error is handled in the parent handler
    } finally {
      setSubmitting(false);
    }
  };

  const handleClose = () => {
    if (!submitting) {
      handleReset();
      onClose();
    }
  };

  return (
    <>
      <Dialog open={isOpen} onOpenChange={handleClose}>
        <DialogContent className="settlement-push-modal overflow-hidden flex flex-col w-full max-w-none">
          <DialogHeader className="px-6 pt-6 pb-3 flex-shrink-0">
            <div className="flex items-center gap-2 sm:gap-3 mb-2">
              <div className="p-1.5 sm:p-2 rounded-lg bg-indigo-100">
                <Activity className="w-4 h-4 sm:w-5 sm:h-5 sm:w-6 sm:h-6 text-indigo-600" />
              </div>
              <div className="flex-1">
                <DialogTitle className="font-semibold text-lg sm:text-xl flex items-center gap-2 flex-wrap">
                  E-Invoice Generation & Sync
                  {taxationType && (
                    <Badge className={`ml-2 border-none shadow-sm ${!isNonGst ? 'bg-emerald-600 text-white hover:bg-emerald-700' : 'bg-indigo-600 text-white hover:bg-indigo-700'}`}>
                      {!isNonGst ? 'GST Claim' : 'Non-GST Claim'}
                    </Badge>
                  )}
                </DialogTitle>
                <DialogDescription className="text-xs sm:text-sm mt-1">
                  Review completion details and expenses before generating e-invoice and initiating SAP settlement
                </DialogDescription>
              </div>
            </div>

            {/* Request Info Card - Grid layout */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 p-3 sm:p-4 bg-gray-50 rounded-lg border">
              <div className="flex items-center justify-between sm:flex-col sm:items-start sm:gap-1">
                <span className="font-medium text-xs sm:text-sm text-gray-600">Workflow Step:</span>
                <Badge variant="outline" className="font-mono text-xs">Requestor Claim Approval</Badge>
              </div>
              {requestNumber && (
                <div className="flex flex-col gap-1">
                  <span className="font-medium text-xs sm:text-sm text-gray-600">Request Number:</span>
                  <p className="text-gray-700 font-mono text-xs sm:text-sm">{requestNumber}</p>
                </div>
              )}
              <div className="flex flex-col gap-1">
                <span className="font-medium text-xs sm:text-sm text-gray-600">Title:</span>
                <p className="text-gray-700 text-xs sm:text-sm line-clamp-2">{requestTitle || '—'}</p>
              </div>
              <div className="flex items-center gap-2 sm:flex-col sm:items-start sm:gap-1">
                <span className="font-medium text-xs sm:text-sm text-gray-600">Action:</span>
                <Badge className="bg-indigo-100 text-indigo-800 border-indigo-200 text-xs">
                  <Activity className="w-3 h-3 mr-1" />
                  SYNC TO SAP
                </Badge>
              </div>
            </div>
          </DialogHeader>

          <div className="flex-1 overflow-y-auto overflow-x-hidden px-6 py-3">
            <div className="space-y-3 sm:space-y-4 max-w-7xl mx-auto">
              {/* Grid layout for all three cards on larger screens */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                {/* Completion Details Card */}
                {completionDetails && (
                  <Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
                        <CheckCircle2 className="w-4 h-4 sm:w-5 sm:h-5 text-green-600" />
                        Completion Details
                      </CardTitle>
                      <CardDescription className="text-xs sm:text-sm">
                        Review activity completion information
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-2 sm:space-y-3">
                      {completionDetails.activityCompletionDate && (
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 py-1.5 sm:py-2 border-b">
                          <span className="text-xs sm:text-sm text-gray-600">Activity Completion Date:</span>
                          <span className="text-xs sm:text-sm font-semibold text-gray-900">
                            {formatDate(completionDetails.activityCompletionDate)}
                          </span>
                        </div>
                      )}
                      {completionDetails.numberOfParticipants !== undefined && (
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 py-1.5 sm:py-2 border-b">
                          <span className="text-xs sm:text-sm text-gray-600">Number of Participants:</span>
                          <span className="text-xs sm:text-sm font-semibold text-gray-900">
                            {completionDetails.numberOfParticipants}
                          </span>
                        </div>
                      )}
                      {completionDetails.completionDescription && (
                        <div className="pt-2">
                          <p className="text-xs text-gray-600 mb-1">Completion Description:</p>
                          <p className="text-xs sm:text-sm text-gray-900 line-clamp-3">
                            {completionDetails.completionDescription}
                          </p>
                        </div>
                      )}
                    </CardContent>
                  </Card>
                )}

                {/* IO Details Card */}
                {ioDetails && ioDetails.ioNumber && (
                  <Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
                        <Receipt className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600" />
                        IO Details
                      </CardTitle>
                      <CardDescription className="text-xs sm:text-sm">
                        Internal Order information for budget reference
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-2 sm:space-y-3">
                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 py-1.5 sm:py-2 border-b">
                        <span className="text-xs sm:text-sm text-gray-600">IO Number:</span>
                        <span className="text-xs sm:text-sm font-semibold text-gray-900 font-mono">
                          {ioDetails.ioNumber}
                        </span>
                      </div>
                      {ioDetails.blockedAmount !== undefined && ioDetails.blockedAmount > 0 && (
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 py-1.5 sm:py-2 border-b">
                          <span className="text-xs sm:text-sm text-gray-600">Blocked Amount:</span>
                          <span className="text-xs sm:text-sm font-bold text-green-700">
                            {formatCurrency(ioDetails.blockedAmount)}
                          </span>
                        </div>
                      )}
                      {ioDetails.remainingBalance !== undefined && ioDetails.remainingBalance !== null && (
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 py-1.5 sm:py-2">
                          <span className="text-xs sm:text-sm text-gray-600">Remaining Balance:</span>
                          <span className="text-xs sm:text-sm font-semibold text-gray-900">
                            {formatCurrency(ioDetails.remainingBalance)}
                          </span>
                        </div>
                      )}
                    </CardContent>
                  </Card>
                )}

                {/* Expense Breakdown Card */}
                {completionDetails?.closedExpenses && completionDetails.closedExpenses.length > 0 && (
                  <Card className="md:col-span-2 lg:col-span-3">
                    <CardHeader className="pb-3">
                      <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
                        <DollarSign className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
                        Expense Breakdown
                      </CardTitle>
                      <CardDescription className="text-xs sm:text-sm">
                        Review closed expenses breakdown (Base + GST)
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      {/* Table Header */}
                      <div className="grid grid-cols-12 gap-2 mb-2 px-3 text-xs font-medium text-gray-500 uppercase tracking-wider hidden sm:grid">
                        <div className={`${isNonGst ? 'col-span-8' : 'col-span-4'}`}>Description</div>
                        <div className="col-span-2 text-right">Base</div>
                        {!isNonGst && (
                          <>
                            <div className="col-span-2 text-right">GST Rate</div>
                            <div className="col-span-2 text-right">GST Amt</div>
                          </>
                        )}
                        <div className="col-span-2 text-right">Total</div>
                      </div>

                      <div className="space-y-2 max-h-[300px] overflow-y-auto">
                        {completionDetails.closedExpenses.map((expense, index) => {
                          const amount = typeof expense === 'object' ? (expense.amount || 0) : 0; // Base Amount
                          const gstRate = typeof expense === 'object' ? ((expense as any).gstRate || 0) : 0;
                          const gstAmt = typeof expense === 'object' ? ((expense as any).gstAmt || 0) : 0; // GST Amount
                          const total = typeof expense === 'object' ? ((expense as any).totalAmt || (amount + gstAmt)) : 0; // Total Amount

                          return (
                            <div
                              key={index}
                              className="grid grid-cols-1 sm:grid-cols-12 gap-2 items-center py-2 px-3 bg-gray-50 rounded border text-xs sm:text-sm"
                            >
                              {/* Mobile View: Stacked */}
                              <div className="sm:hidden flex justify-between w-full mb-1">
                                <span className="font-semibold text-gray-900">{expense.description || `Expense ${index + 1}`}</span>
                                <span className="font-bold text-gray-900">{formatCurrency(total)}</span>
                              </div>
                              <div className="sm:hidden flex justify-between w-full text-xs text-gray-500">
                                <span>Base: {formatCurrency(amount)}</span>
                                {!isNonGst && (
                                  <span>GST: {gstRate}% ({formatCurrency(gstAmt)})</span>
                                )}
                              </div>

                              {/* Desktop View: Grid */}
                              <div className={`hidden sm:block ${isNonGst ? 'col-span-8' : 'col-span-4'} min-w-0`}>
                                <p className="font-medium text-gray-900 truncate" title={expense.description}>
                                  {expense.description || `Expense ${index + 1}`}
                                </p>
                              </div>
                              <div className="hidden sm:block col-span-2 text-right text-gray-600">
                                {formatCurrency(amount)}
                              </div>
                              {!isNonGst && (
                                <>
                                  <div className="hidden sm:block col-span-2 text-right text-gray-600">
                                    {gstRate}%
                                  </div>
                                  <div className="hidden sm:block col-span-2 text-right text-gray-600">
                                    {formatCurrency(gstAmt)}
                                  </div>
                                </>
                              )}
                              <div className="hidden sm:block col-span-2 text-right font-semibold text-gray-900">
                                {formatCurrency(total)}
                              </div>
                            </div>
                          );
                        })}
                      </div>

                      <div className="flex items-center justify-between py-2 sm:py-3 px-3 sm:px-4 bg-blue-50 rounded border-2 border-blue-200 mt-3 sm:mt-4">
                        <span className="text-xs sm:text-sm font-semibold text-gray-900">Total Closed Expenses:</span>
                        <span className="text-sm sm:text-base font-bold text-blue-700">
                          {formatCurrency(totalClosedExpenses)}
                        </span>
                      </div>
                    </CardContent>
                  </Card>
                )}
              </div>

              {/* Completion Documents Section */}
              {completionDocuments && (
                <div className="space-y-4">
                  {/* Completion Documents */}
                  {completionDocuments.completionDocuments && completionDocuments.completionDocuments.length > 0 && (
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <h3 className="font-semibold text-sm sm:text-base flex items-center gap-2">
                          <CheckCircle2 className="w-4 h-4 sm:w-5 sm:h-5 text-green-600" />
                          Completion Documents
                        </h3>
                        <Badge variant="secondary" className="text-xs">
                          {completionDocuments.completionDocuments.length} file(s)
                        </Badge>
                      </div>
                      <div className="space-y-2 max-h-[200px] overflow-y-auto">
                        {completionDocuments.completionDocuments.map((doc, index) => (
                          <div
                            key={index}
                            className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 flex items-center justify-between gap-2"
                          >
                            <div className="flex items-center gap-2 lg:gap-3 min-w-0 flex-1">
                              <CheckCircle2 className="w-4 h-4 lg:w-5 lg:h-5 text-green-600 flex-shrink-0" />
                              <div className="min-w-0 flex-1">
                                <p className="font-medium text-xs lg:text-sm text-gray-900 truncate" title={doc.name}>
                                  {doc.name}
                                </p>
                              </div>
                            </div>
                            {doc.id && (
                              <div className="flex items-center gap-1 flex-shrink-0">
                                {canPreviewDocument(doc) && (
                                  <button
                                    type="button"
                                    onClick={() => handlePreviewDocument(doc)}
                                    disabled={previewLoading}
                                    className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                    title="Preview document"
                                  >
                                    {previewLoading ? (
                                      <Loader2 className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 animate-spin" />
                                    ) : (
                                      <Eye className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
                                    )}
                                  </button>
                                )}
                                <button
                                  type="button"
                                  onClick={async () => {
                                    try {
                                      if (doc.id) {
                                        await downloadDocument(doc.id);
                                      }
                                    } catch (error) {
                                      console.error('Failed to download document:', error);
                                      toast.error('Failed to download document');
                                    }
                                  }}
                                  className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
                                  title="Download document"
                                >
                                  <Download className="w-4 h-4 lg:w-5 lg:h-5 text-gray-600" />
                                </button>
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Activity Photos */}
                  {completionDocuments.activityPhotos && completionDocuments.activityPhotos.length > 0 && (
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <h3 className="font-semibold text-sm sm:text-base flex items-center gap-2">
                          <Activity className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
                          Activity Photos
                        </h3>
                        <Badge variant="secondary" className="text-xs">
                          {completionDocuments.activityPhotos.length} file(s)
                        </Badge>
                      </div>
                      <div className="space-y-2 max-h-[200px] overflow-y-auto">
                        {completionDocuments.activityPhotos.map((doc, index) => (
                          <div
                            key={index}
                            className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 flex items-center justify-between gap-2"
                          >
                            <div className="flex items-center gap-2 lg:gap-3 min-w-0 flex-1">
                              <Activity className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 flex-shrink-0" />
                              <div className="min-w-0 flex-1">
                                <p className="font-medium text-xs lg:text-sm text-gray-900 truncate" title={doc.name}>
                                  {doc.name}
                                </p>
                              </div>
                            </div>
                            {doc.id && (
                              <div className="flex items-center gap-1 flex-shrink-0">
                                {canPreviewDocument(doc) && (
                                  <button
                                    type="button"
                                    onClick={() => handlePreviewDocument(doc)}
                                    disabled={previewLoading}
                                    className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                    title="Preview photo"
                                  >
                                    {previewLoading ? (
                                      <Loader2 className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 animate-spin" />
                                    ) : (
                                      <Eye className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
                                    )}
                                  </button>
                                )}
                                <button
                                  type="button"
                                  onClick={async () => {
                                    try {
                                      if (doc.id) {
                                        await downloadDocument(doc.id);
                                      }
                                    } catch (error) {
                                      console.error('Failed to download document:', error);
                                      toast.error('Failed to download document');
                                    }
                                  }}
                                  className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
                                  title="Download photo"
                                >
                                  <Download className="w-4 h-4 lg:w-5 lg:h-5 text-gray-600" />
                                </button>
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Invoices / Receipts */}
                  {completionDocuments.invoicesReceipts && completionDocuments.invoicesReceipts.length > 0 && (
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <h3 className="font-semibold text-sm sm:text-base flex items-center gap-2">
                          <Receipt className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600" />
                          Invoices / Receipts
                        </h3>
                        <Badge variant="secondary" className="text-xs">
                          {completionDocuments.invoicesReceipts.length} file(s)
                        </Badge>
                      </div>
                      <div className="space-y-2 max-h-[200px] overflow-y-auto">
                        {completionDocuments.invoicesReceipts.map((doc, index) => (
                          <div
                            key={index}
                            className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 flex items-center justify-between gap-2"
                          >
                            <div className="flex items-center gap-2 lg:gap-3 min-w-0 flex-1">
                              <Receipt className="w-4 h-4 lg:w-5 lg:h-5 text-purple-600 flex-shrink-0" />
                              <div className="min-w-0 flex-1">
                                <p className="font-medium text-xs lg:text-sm text-gray-900 truncate" title={doc.name}>
                                  {doc.name}
                                </p>
                              </div>
                            </div>
                            {doc.id && (
                              <div className="flex items-center gap-1 flex-shrink-0">
                                {canPreviewDocument(doc) && (
                                  <button
                                    type="button"
                                    onClick={() => handlePreviewDocument(doc)}
                                    disabled={previewLoading}
                                    className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                    title="Preview document"
                                  >
                                    {previewLoading ? (
                                      <Loader2 className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 animate-spin" />
                                    ) : (
                                      <Eye className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
                                    )}
                                  </button>
                                )}
                                <button
                                  type="button"
                                  onClick={async () => {
                                    try {
                                      if (doc.id) {
                                        await downloadDocument(doc.id);
                                      }
                                    } catch (error) {
                                      console.error('Failed to download document:', error);
                                      toast.error('Failed to download document');
                                    }
                                  }}
                                  className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
                                  title="Download document"
                                >
                                  <Download className="w-4 h-4 lg:w-5 lg:h-5 text-gray-600" />
                                </button>
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Attendance Sheet */}
                  {completionDocuments.attendanceSheet && (
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <h3 className="font-semibold text-sm sm:text-base flex items-center gap-2">
                          <Activity className="w-4 h-4 sm:w-5 sm:h-5 text-indigo-600" />
                          Attendance Sheet
                        </h3>
                      </div>
                      <div className="border rounded-lg p-2.5 lg:p-3 bg-gray-50 flex items-center justify-between gap-2">
                        <div className="flex items-center gap-2 lg:gap-3 min-w-0 flex-1">
                          <Activity className="w-4 h-4 lg:w-5 lg:h-5 text-indigo-600 flex-shrink-0" />
                          <div className="min-w-0 flex-1">
                            <p className="font-medium text-xs lg:text-sm text-gray-900 truncate" title={completionDocuments.attendanceSheet.name}>
                              {completionDocuments.attendanceSheet.name}
                            </p>
                          </div>
                        </div>
                        {completionDocuments.attendanceSheet.id && (
                          <div className="flex items-center gap-1 flex-shrink-0">
                            {canPreviewDocument(completionDocuments.attendanceSheet) && (
                              <button
                                type="button"
                                onClick={() => handlePreviewDocument(completionDocuments.attendanceSheet!)}
                                disabled={previewLoading}
                                className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                title="Preview document"
                              >
                                {previewLoading ? (
                                  <Loader2 className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 animate-spin" />
                                ) : (
                                  <Eye className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
                                )}
                              </button>
                            )}
                            <button
                              type="button"
                              onClick={async () => {
                                try {
                                  if (completionDocuments.attendanceSheet?.id) {
                                    await downloadDocument(completionDocuments.attendanceSheet.id);
                                  }
                                } catch (error) {
                                  console.error('Failed to download document:', error);
                                  toast.error('Failed to download document');
                                }
                              }}
                              className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
                              title="Download document"
                            >
                              <Download className="w-4 h-4 lg:w-5 lg:h-5 text-gray-600" />
                            </button>
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                </div>
              )}

              {/* Verification Warning */}
              <div className="p-2.5 sm:p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
                <div className="flex items-start gap-2">
                  <TriangleAlert className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <p className="text-xs sm:text-sm font-semibold text-yellow-900">
                      Please verify all details before generation
                    </p>
                    <p className="text-xs text-yellow-700 mt-1">
                      Once submitted, the system will generate an e-invoice and initiate the SAP settlement process.
                    </p>
                  </div>
                </div>
              </div>

              {/* Comments & Remarks */}
              <div className="space-y-1.5 max-w-2xl">
                <Label htmlFor="comment" className="text-xs sm:text-sm font-semibold text-gray-900 flex items-center gap-2">
                  Comments & Remarks <span className="text-red-500">*</span>
                </Label>
                <Textarea
                  id="comment"
                  placeholder="Enter your comments about e-invoice generation (e.g., verified expenses, ready for settlement)..."
                  value={comments}
                  onChange={(e) => {
                    const value = e.target.value;
                    if (value.length <= maxCommentsChars) {
                      setComments(value);
                    }
                  }}
                  rows={4}
                  className="text-sm min-h-[80px] resize-none"
                />
                <div className="flex items-center justify-between text-xs text-gray-500">
                  <div className="flex items-center gap-1">
                    <TriangleAlert className="w-3 h-3" />
                    Required and visible to all
                  </div>
                  <span>{commentsChars}/{maxCommentsChars}</span>
                </div>
              </div>
            </div>
          </div>

          <DialogFooter className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 px-6 pt-3 pb-6 border-t flex-shrink-0">
            <Button
              variant="outline"
              onClick={handleClose}
              disabled={submitting}
            >
              Cancel
            </Button>
            {onReQuotation && (
              <Button
                variant="outline"
                className="border-orange-500 text-orange-600 hover:bg-orange-50"
                onClick={handleReQuotation}
                disabled={!comments.trim() || submitting}
              >
                {submitting ? (
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                ) : (
                  <RefreshCw className="w-4 h-4 mr-2" />
                )}
                Request Re-quotation
              </Button>
            )}
            <Button
              onClick={handleSubmit}
              disabled={!comments.trim() || submitting}
              className="bg-indigo-600 hover:bg-indigo-700 text-white"
            >
              {submitting ? (
                'Processing...'
              ) : (
                <>
                  <Activity className="w-4 h-4 mr-2" />
                  Generate & Sync
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>

      </Dialog>

      {/* File Preview Modal - Matching DocumentsTab style */}
      {previewDocument && (
        <Dialog
          open={!!previewDocument}
          onOpenChange={() => setPreviewDocument(null)}
        >
          <DialogContent className="file-preview-dialog p-3 sm:p-6">
            <div className="file-preview-content">
              <DialogHeader className="pb-4 flex-shrink-0 pr-8">
                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                  <div className="flex items-center gap-3 flex-1 min-w-0">
                    <Eye className="w-5 h-5 text-blue-600 flex-shrink-0" />
                    <div className="flex-1 min-w-0">
                      <DialogTitle className="text-base sm:text-lg font-bold text-gray-900 truncate pr-2">
                        {previewDocument.name}
                      </DialogTitle>
                      {previewDocument.type && (
                        <p className="text-xs sm:text-sm text-gray-500">
                          {previewDocument.type} {previewDocument.size && `• ${(previewDocument.size / 1024).toFixed(1)} KB`}
                        </p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2 flex-wrap mr-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        const link = document.createElement('a');
                        link.href = previewDocument.url;
                        link.download = previewDocument.name;
                        link.click();
                      }}
                      className="gap-2 h-9"
                    >
                      <Download className="h-4 w-4" />
                      <span className="hidden sm:inline">Download</span>
                    </Button>
                  </div>
                </div>
              </DialogHeader>

              <div className="file-preview-body bg-gray-100 rounded-lg p-2 sm:p-4">
                {previewLoading ? (
                  <div className="flex items-center justify-center h-full min-h-[70vh]">
                    <div className="text-center">
                      <Loader2 className="w-8 h-8 animate-spin text-blue-600 mx-auto mb-2" />
                      <p className="text-sm text-gray-600">Loading preview...</p>
                    </div>
                  </div>
                ) : previewDocument.name.toLowerCase().endsWith('.pdf') || previewDocument.type?.includes('pdf') ? (
                  <div className="w-full h-full flex items-center justify-center">
                    <iframe
                      src={previewDocument.url}
                      className="w-full h-full rounded-lg border-0"
                      title={previewDocument.name}
                      style={{
                        minHeight: '70vh',
                        height: '100%'
                      }}
                    />
                  </div>
                ) : previewDocument.name.match(/\.(jpg|jpeg|png|gif|webp)$/i) || previewDocument.type?.includes('image') ? (
                  <div className="flex items-center justify-center h-full">
                    <img
                      src={previewDocument.url}
                      alt={previewDocument.name}
                      style={{
                        maxWidth: '100%',
                        maxHeight: '100%',
                        objectFit: 'contain'
                      }}
                      className="rounded-lg shadow-lg"
                    />
                  </div>
                ) : (
                  <div className="flex flex-col items-center justify-center h-full text-center">
                    <div className="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center mb-4">
                      <Eye className="w-10 h-10 text-gray-400" />
                    </div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Preview Not Available</h3>
                    <p className="text-sm text-gray-600 mb-6">
                      This file type cannot be previewed. Please download to view.
                    </p>
                    <Button
                      onClick={() => {
                        const link = document.createElement('a');
                        link.href = previewDocument.url;
                        link.download = previewDocument.name;
                        link.click();
                      }}
                      className="gap-2"
                    >
                      <Download className="h-4 w-4" />
                      Download {previewDocument.name}
                    </Button>
                  </div>
                )}
              </div>
            </div>
          </DialogContent>
        </Dialog>
      )}
    </>
  );
}

