proposal-system/web/src/pages/admin/workspace/AdminWorkspace.tsx

import { useState, useEffect, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation } from '@tanstack/react-query';
import {
  Box,
  Typography,
  Card,
  CardContent,
  Grid,
  Button,
  Chip,
  Collapse,
  Divider,
  TextField,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  CircularProgress,
  Menu,
  MenuItem,
  IconButton,
} from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import SaveIcon from '@mui/icons-material/Save';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import SendIcon from '@mui/icons-material/Send';
import RefreshIcon from '@mui/icons-material/Refresh';
import HistoryIcon from '@mui/icons-material/History';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import DownloadIcon from '@mui/icons-material/Download';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import UndoIcon from '@mui/icons-material/Undo';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import Tooltip from '@mui/material/Tooltip';
import { toast } from 'react-toastify';
import { proposalsApi, type ProposalDetail } from '../../../lib/api/proposals';
import { lineItemsApi, type LineItem } from '../../../lib/api/lineItems';
import { adminApi, type AuditEntry } from '../../../lib/api/admin';
import { queryClient } from '../../../lib/queryClient';
import { QUERY_KEYS } from '../../../constants/queryKeys';
import LineItemEditor, { type EditableLineItem } from '../../../components/admin/LineItemEditor';
import VendorDataPanel from '../../../components/admin/VendorDataPanel';
import SimilarProposalsPanel from '../../../components/admin/SimilarProposalsPanel';
import { STATUS_COLORS, STATUS_LABELS, PRIORITY_LABELS } from '../../../constants';
import { formatCurrency } from '../../../lib/format';

const ACTION_LABELS: Record<string, string> = {
  Submit: 'Submitted',
  Edit: 'Edited',
  Approve: 'Approved',
  ReturnToReview: 'Returned to Review',
  MarkSent: 'Marked Sent',
  CreateRevision: 'Revision Created',
  EditLineItem: 'Line Items Updated',
  EditScope: 'Scope Edited',
  Regenerate: 'Regenerated',
  GeneratePDF: 'PDF Generated',
  Download: 'Downloaded',
  AssignAdmin: 'Admin Assigned',
  UpdateRole: 'Role Updated',
  Revise: 'Revised',
};

function formatAction(action: string): string {
  return ACTION_LABELS[action] || action.replace(/([A-Z])/g, ' $1').trim();
}

function formatDetails(details: string): string {
  try {
    const parsed = JSON.parse(details);
    return parsed.message || details;
  } catch {
    return details;
  }
}

export default function AdminWorkspace() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();

  const [lineItems, setLineItems] = useState<EditableLineItem[]>([]);
  const [refinedScope, setRefinedScope] = useState('');
  const [workOrderNumber, setWorkOrderNumber] = useState('');
  const [poNumber, setPoNumber] = useState('');
  const [approveDialogOpen, setApproveDialogOpen] = useState(false);
  const [sendDialogOpen, setSendDialogOpen] = useState(false);
  const [reviseDialogOpen, setReviseDialogOpen] = useState(false);
  const [returnToReviewDialogOpen, setReturnToReviewDialogOpen] = useState(false);
  const [dirty, setDirty] = useState(false);
  const [revMenuAnchor, setRevMenuAnchor] = useState<null | HTMLElement>(null);
  const [downloadingRevId, setDownloadingRevId] = useState<string | null>(null);
  const [leftCollapsed, setLeftCollapsed] = useState(false);

  const { data: proposal, isLoading } = useQuery<ProposalDetail>({
    queryKey: [QUERY_KEYS.proposals, id],
    queryFn: () => proposalsApi.getById(id!),
    enabled: !!id,
  });

  const { data: fetchedLineItems } = useQuery<LineItem[]>({
    queryKey: [QUERY_KEYS.proposalLineItems, id],
    queryFn: () => lineItemsApi.getAll(id!),
    enabled: !!id,
  });

  const { data: auditTrail } = useQuery<AuditEntry[]>({
    queryKey: ['audit', id],
    queryFn: () => adminApi.getAudit(id!),
    enabled: !!id,
  });

  const { data: revisionHistory } = useQuery<ProposalDetail[]>({
    queryKey: [QUERY_KEYS.proposals, id, 'history'],
    queryFn: () => adminApi.getHistory(id!),
    enabled: !!id,
  });

  useEffect(() => {
    if (fetchedLineItems) {
      setLineItems(
        fetchedLineItems.map((li) => ({
          id: li.id,
          description: li.description,
          quantity: li.quantity,
          unit: li.unit,
          unitPrice: li.unitPrice,
          totalPrice: li.totalPrice,
          pricingMode: li.pricingMode,
          sortOrder: li.sortOrder,
          source: li.source,
        }))
      );
    }
  }, [fetchedLineItems]);

  useEffect(() => {
    if (proposal) {
      setRefinedScope(proposal.refinedScope || proposal.scopeOfWork);
      setWorkOrderNumber(proposal.workOrderNumber || '');
      setPoNumber(proposal.poNumber || '');
    }
  }, [proposal]);

  const dirtyRef = useRef(dirty);
  dirtyRef.current = dirty;

  useEffect(() => {
    if (!dirty) return;
    const handler = (e: BeforeUnloadEvent) => {
      e.preventDefault();
    };
    window.addEventListener('beforeunload', handler);
    return () => window.removeEventListener('beforeunload', handler);
  }, [dirty]);

  const saveMutation = useMutation({
    mutationFn: async () => {
      await adminApi.updateProposal(id!, { refinedScope, workOrderNumber, poNumber });
      await lineItemsApi.bulkUpdate(
        id!,
        lineItems.map((li) => ({
          id: li.id,
          description: li.description,
          quantity: li.quantity,
          unit: li.unit,
          unitPrice: li.unitPrice,
          totalPrice: li.totalPrice,
          pricingMode: li.pricingMode,
          sortOrder: li.sortOrder,
          source: li.source,
        }))
      );
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.proposalLineItems, id] });
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.proposals, id] });
      queryClient.invalidateQueries({ queryKey: ['audit', id] });
      setDirty(false);
      toast.success('Changes saved');
    },
  });

  const approveMutation = useMutation({
    mutationFn: async () => {
      if (dirty) {
        await saveMutation.mutateAsync();
      }
      await adminApi.approveProposal(id!);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.proposals, id] });
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.proposalLineItems, id] });
      queryClient.invalidateQueries({ queryKey: ['audit', id] });
      setApproveDialogOpen(false);
      setDirty(false);
      toast.success('Proposal approved');
    },
  });

  const sendMutation = useMutation({
    mutationFn: () => adminApi.sendProposal(id!),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.proposals, id] });
      queryClient.invalidateQueries({ queryKey: ['audit', id] });
      setSendDialogOpen(false);
      toast.success('Proposal marked as sent');
    },
  });

  const reviseMutation = useMutation({
    mutationFn: () => adminApi.reviseProposal(id!),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.proposals, id] });
      queryClient.invalidateQueries({ queryKey: ['audit', id] });
      setReviseDialogOpen(false);
      toast.success('Revision created');
    },
  });

  const returnToReviewMutation = useMutation({
    mutationFn: () => adminApi.returnToReview(id!),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.proposals, id] });
      queryClient.invalidateQueries({ queryKey: ['audit', id] });
      setReturnToReviewDialogOpen(false);
      toast.success('Proposal returned to review');
    },
  });

  const regenerateMutation = useMutation({
    mutationFn: () => adminApi.generateSuggestions(id!),
    onSuccess: () => {
      toast.info('AI suggestion generation started');
    },
  });

  const pdfMutation = useMutation({
    mutationFn: (regenerate?: boolean) => adminApi.getPdf(id!, regenerate ?? false),
    onSuccess: (data) => {
      if (data?.downloadUrl) {
        window.open(data.downloadUrl, '_blank');
        queryClient.invalidateQueries({ queryKey: ['audit', id] });
        toast.success('PDF ready');
      } else {
        toast.info('PDF generation queued — try again in a few seconds');
      }
    },
    onError: () => {
      toast.error('Failed to generate PDF');
    },
  });

  const handleLineItemsChange = (updated: EditableLineItem[]) => {
    setLineItems(updated);
    setDirty(true);
  };

  const DOWNLOADABLE_STATUSES = ['Approved', 'Sent', 'Revised'];

  const handleDownloadPdf = async (revId: string, proposalNumber: string, revision: number) => {
    setDownloadingRevId(revId);
    try {
      const result = await proposalsApi.getPdf(revId);
      if (result) {
        const a = document.createElement('a');
        a.href = result.downloadUrl;
        a.download = `${proposalNumber}-rev${revision}.pdf`;
        a.click();
        URL.revokeObjectURL(result.downloadUrl);
        toast.success('PDF downloaded');
      } else {
        toast.info('PDF not yet generated for this revision');
      }
    } catch {
      toast.error('Failed to download PDF');
    } finally {
      setDownloadingRevId(null);
    }
  };

  if (isLoading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
        <CircularProgress />
      </Box>
    );
  }

  if (!proposal) {
    return (
      <Box>
        <Typography color="error">Proposal not found</Typography>
        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate('/admin')} sx={{ mt: 2 }}>
          Back to Dashboard
        </Button>
      </Box>
    );
  }

  const isEditable = proposal.status === 'InReview' || proposal.status === 'Revised';
  const isApproved = proposal.status === 'Approved';
  const isSent = proposal.status === 'Sent';
  const bidTotal = lineItems.reduce((sum, li) => sum + li.totalPrice, 0);

  return (
    <Box>
      {/* Header */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
        <Button startIcon={<ArrowBackIcon />} onClick={() => {
          if (dirty && !window.confirm('You have unsaved changes. Are you sure you want to leave?')) return;
          navigate('/admin');
        }}>
          Back
        </Button>
        <Typography variant="h5" sx={{ flexGrow: 1 }}>
          {proposal.proposalNumber}
        </Typography>
        <Chip
          label={`Rev ${proposal.currentRevision}`}
          size="small"
          variant="outlined"
          onClick={(e) => setRevMenuAnchor(e.currentTarget)}
          onDelete={(e) => setRevMenuAnchor(e.currentTarget as HTMLElement)}
          deleteIcon={<ArrowDropDownIcon />}
          sx={{ cursor: 'pointer' }}
        />
        <Menu
          anchorEl={revMenuAnchor}
          open={Boolean(revMenuAnchor)}
          onClose={() => setRevMenuAnchor(null)}
        >
          {(revisionHistory ?? [])
            .sort((a, b) => a.currentRevision - b.currentRevision)
            .map((rev) => (
              <MenuItem
                key={rev.id}
                selected={rev.id === id}
                dense
                onClick={() => {
                  setRevMenuAnchor(null);
                  if (rev.id !== id) {
                    if (dirty && !window.confirm('You have unsaved changes. Are you sure you want to switch revisions?')) return;
                    navigate(`/admin/proposals/${rev.id}`);
                  }
                }}
                sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, minWidth: 160 }}
              >
                <Box>
                  <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600 }}>Rev {rev.currentRevision}</Typography>
                  <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>{STATUS_LABELS[rev.status] || rev.status}</Typography>
                </Box>
                {DOWNLOADABLE_STATUSES.includes(rev.status) && (
                  <IconButton
                    size="small"
                    onClick={(e) => {
                      e.stopPropagation();
                      setRevMenuAnchor(null);
                      handleDownloadPdf(rev.id, rev.proposalNumber, rev.currentRevision);
                    }}
                    disabled={downloadingRevId === rev.id}
                  >
                    <DownloadIcon sx={{ fontSize: '1rem' }} />
                  </IconButton>
                )}
              </MenuItem>
            ))}
        </Menu>
        <Chip label={STATUS_LABELS[proposal.status] || proposal.status} color={STATUS_COLORS[proposal.status] || 'default'} />
      </Box>

      {/* Proposal Info Bar */}
      <Card sx={{ mb: 2 }}>
        <CardContent sx={{ py: 1.5, display: 'flex', gap: 3, flexWrap: 'wrap', alignItems: 'flex-start' }}>
          <Box>
            <Typography sx={{ fontSize: '0.75rem', lineHeight: 1.5, color: 'text.secondary' }}>Customer</Typography>
            <Typography sx={{ fontSize: '0.875rem', lineHeight: 1.5, fontWeight: 600 }}>{proposal.customerName}</Typography>
          </Box>
          <Box>
            <Typography sx={{ fontSize: '0.75rem', lineHeight: 1.5, color: 'text.secondary' }}>Site</Typography>
            <Typography sx={{ fontSize: '0.875rem', lineHeight: 1.5, fontWeight: 600 }}>{proposal.customerAddress}</Typography>
          </Box>
          <Box>
            <Typography sx={{ fontSize: '0.75rem', lineHeight: 1.5, color: 'text.secondary' }}>WO #</Typography>
            {isEditable ? (
              <TextField
                size="small"
                variant="standard"
                placeholder="—"
                value={workOrderNumber}
                onChange={(e) => { setWorkOrderNumber(e.target.value); setDirty(true); }}
                sx={{ width: 140, display: 'block', '& input': { fontSize: '0.875rem', lineHeight: 1.5, fontWeight: 600, p: 0 }, '& .MuiInput-root': { mt: 0 } }}
              />
            ) : (
              <Typography sx={{ fontSize: '0.875rem', lineHeight: 1.5, fontWeight: 600 }}>{workOrderNumber || '—'}</Typography>
            )}
          </Box>
          <Box>
            <Typography sx={{ fontSize: '0.75rem', lineHeight: 1.5, color: 'text.secondary' }}>PO #</Typography>
            {isEditable ? (
              <TextField
                size="small"
                variant="standard"
                placeholder="—"
                value={poNumber}
                onChange={(e) => { setPoNumber(e.target.value); setDirty(true); }}
                sx={{ width: 120, display: 'block', '& input': { fontSize: '0.875rem', lineHeight: 1.5, fontWeight: 600, p: 0 }, '& .MuiInput-root': { mt: 0 } }}
              />
            ) : (
              <Typography sx={{ fontSize: '0.875rem', lineHeight: 1.5, fontWeight: 600 }}>{poNumber || '—'}</Typography>
            )}
          </Box>
          <Box>
            <Typography sx={{ fontSize: '0.75rem', lineHeight: 1.5, color: 'text.secondary' }}>Category</Typography>
            <Typography sx={{ fontSize: '0.875rem', lineHeight: 1.5, fontWeight: 600 }}>{proposal.serviceCategory}</Typography>
          </Box>
          <Box>
            <Typography sx={{ fontSize: '0.75rem', lineHeight: 1.5, color: 'text.secondary' }}>Priority</Typography>
            <Typography sx={{ fontSize: '0.875rem', lineHeight: 1.5, fontWeight: 600 }}>{PRIORITY_LABELS[proposal.priority] || proposal.priority}</Typography>
          </Box>
        </CardContent>
      </Card>

      {/* Three-Panel Layout */}
      <Grid container spacing={2}>
        {/* Left Panel: Reference (collapsible) */}
        {!leftCollapsed && (
          <Grid size={{ xs: 12, md: 3 }}>
            <Collapse in={!leftCollapsed} orientation="horizontal">
              <Card sx={{ height: '100%' }}>
                <CardContent>
                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
                    <Typography variant="subtitle2">Submission Details</Typography>
                    <IconButton size="small" onClick={() => setLeftCollapsed(true)}>
                      <ChevronLeftIcon fontSize="small" />
                    </IconButton>
                  </Box>

                  <Typography variant="caption" color="text.secondary">Submitted By</Typography>
                  <Typography variant="body2" sx={{ mb: 1 }}>{proposal.submittedByName || '-'}</Typography>

                  <Typography variant="caption" color="text.secondary">Submitted</Typography>
                  <Typography variant="body2" sx={{ mb: 1 }}>
                    {new Date(proposal.submittedAt).toLocaleString()}
                  </Typography>

                  <Divider sx={{ my: 1.5 }} />

                  <Typography variant="caption" color="text.secondary">Original Scope</Typography>
                  <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', mb: 1, fontSize: '0.8rem' }}>
                    {proposal.scopeOfWork}
                  </Typography>

                  {proposal.notes && (
                    <>
                      <Typography variant="caption" color="text.secondary">Notes</Typography>
                      <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', fontSize: '0.8rem' }}>
                        {proposal.notes}
                      </Typography>
                    </>
                  )}

                  <Divider sx={{ my: 1.5 }} />
                  <VendorDataPanel proposalId={id!} />
                </CardContent>
              </Card>
            </Collapse>
          </Grid>
        )}

        {/* Center Panel: Editor */}
        <Grid size={{ xs: 12, md: leftCollapsed ? 9 : 6 }}>
          <Box sx={{ display: 'flex', gap: 1 }}>
            {leftCollapsed && (
              <IconButton
                size="small"
                onClick={() => setLeftCollapsed(false)}
                sx={{ alignSelf: 'flex-start', mt: 1 }}
              >
                <ChevronRightIcon fontSize="small" />
              </IconButton>
            )}
            <Card sx={{ flexGrow: 1 }}>
              <CardContent>
                <Typography variant="subtitle2" sx={{ mb: 1 }}>Refined Scope</Typography>
                <TextField
                  fullWidth
                  multiline
                  minRows={3}
                  maxRows={6}
                  value={refinedScope}
                  onChange={(e) => { setRefinedScope(e.target.value); setDirty(true); }}
                  disabled={!isEditable}
                  size="small"
                  sx={{ mb: 2 }}
                />

                <LineItemEditor
                  items={lineItems}
                  onChange={handleLineItemsChange}
                  disabled={!isEditable}
                />
              </CardContent>
            </Card>
          </Box>
        </Grid>

        {/* Right Panel: Similar Proposals */}
        <Grid size={{ xs: 12, md: 3 }}>
          <Card sx={{ height: '100%' }}>
            <CardContent>
              <SimilarProposalsPanel
                proposalId={id!}
                onPullLineItem={(item) => {
                  const maxSort = lineItems.length > 0 ? Math.max(...lineItems.map((i) => i.sortOrder)) : 0;
                  handleLineItemsChange([
                    ...lineItems,
                    { ...item, id: null, sortOrder: maxSort + 1, source: 'Historical' },
                  ]);
                }}
                disabled={!isEditable}
              />
            </CardContent>
          </Card>
        </Grid>
      </Grid>

      {/* Action Bar */}
      <Card sx={{ position: 'sticky', bottom: 0, zIndex: 10, borderTop: '1px solid', borderColor: 'divider', borderRadius: 0 }}>
        <CardContent sx={{ py: 1.5, px: 2, display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
          <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
            <Typography sx={{ fontWeight: 700, fontSize: '1.1rem' }}>
              {bidTotal > 0 ? `Total: ${formatCurrency(bidTotal)}` : 'Total: Not priced'}
            </Typography>
            <Typography variant="body2" color="text.secondary">
              {lineItems.length} {lineItems.length === 1 ? 'item' : 'items'}
            </Typography>
            {proposal.vendorTotalCost != null && (
              <Typography variant="body2" color="text.secondary">
                Vendor: {formatCurrency(proposal.vendorTotalCost)}
              </Typography>
            )}
          </Box>

          <Box sx={{ flexGrow: 1 }} />

          {dirty && (
            <Chip label="Unsaved changes" size="small" color="info" variant="outlined" />
          )}

          {isEditable && (
            <>
              <Button
                variant="outlined"
                startIcon={<RefreshIcon />}
                onClick={() => regenerateMutation.mutate()}
                disabled={regenerateMutation.isPending}
              >
                Regenerate Suggested Line Items
              </Button>
              <Tooltip title={!dirty ? 'No unsaved changes' : ''}>
                <span>
                  <Button
                    variant="contained"
                    startIcon={<SaveIcon />}
                    onClick={() => saveMutation.mutate()}
                    disabled={saveMutation.isPending || !dirty}
                  >
                    Save
                  </Button>
                </span>
              </Tooltip>
              <Tooltip title={lineItems.length === 0 ? 'Add at least one line item before approving' : bidTotal <= 0 ? 'Total bid must be greater than $0' : ''}>
                <span>
                  <Button
                    variant="contained"
                    color="success"
                    startIcon={<CheckCircleIcon />}
                    onClick={() => setApproveDialogOpen(true)}
                    disabled={lineItems.length === 0 || bidTotal <= 0}
                  >
                    Approve
                  </Button>
                </span>
              </Tooltip>
            </>
          )}

          {isApproved && (
            <>
              <Button
                variant="outlined"
                color="warning"
                startIcon={<UndoIcon />}
                onClick={() => setReturnToReviewDialogOpen(true)}
                disabled={returnToReviewMutation.isPending}
              >
                Return to Review
              </Button>
              <Button
                variant="contained"
                startIcon={<PictureAsPdfIcon />}
                onClick={() => pdfMutation.mutate(false)}
                disabled={pdfMutation.isPending}
              >
                {pdfMutation.isPending ? 'Generating...' : 'Generate PDF'}
              </Button>
              <Button
                variant="contained"
                color="success"
                startIcon={<SendIcon />}
                onClick={() => setSendDialogOpen(true)}
                disabled={sendMutation.isPending}
              >
                Mark as Sent
              </Button>
            </>
          )}

          {isSent && (
            <>
              <Button
                variant="outlined"
                startIcon={<DownloadIcon />}
                onClick={() => handleDownloadPdf(id!, proposal.proposalNumber, proposal.currentRevision)}
                disabled={downloadingRevId === id}
              >
                Download PDF
              </Button>
              <Button
                variant="outlined"
                startIcon={<HistoryIcon />}
                onClick={() => setReviseDialogOpen(true)}
                disabled={reviseMutation.isPending}
              >
                Create Revision
              </Button>
            </>
          )}

          {proposal.status === 'Revised' && (
            <Button
              variant="outlined"
              startIcon={<DownloadIcon />}
              onClick={() => handleDownloadPdf(id!, proposal.proposalNumber, proposal.currentRevision)}
              disabled={downloadingRevId === id}
            >
              Download PDF
            </Button>
          )}
        </CardContent>
      </Card>

      {/* Approve Confirmation Dialog */}
      <Dialog open={approveDialogOpen} onClose={() => setApproveDialogOpen(false)}>
        <DialogTitle>Approve Proposal</DialogTitle>
        <DialogContent>
          <Typography gutterBottom>
            Approve <strong>{proposal.proposalNumber}</strong> for {proposal.customerName}?
          </Typography>
          <Box sx={{ mt: 2, p: 2, bgcolor: 'grey.50', borderRadius: 1 }}>
            <Typography variant="body2">Line Items: {lineItems.length}</Typography>
            <Typography variant="body2">
              Total Bid: {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(bidTotal)}
            </Typography>
            {proposal.vendorTotalCost != null && (
              <Typography variant="body2">
                Vendor Cost: {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(proposal.vendorTotalCost)}
              </Typography>
            )}
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setApproveDialogOpen(false)}>Cancel</Button>
          <Button
            variant="contained"
            color="success"
            onClick={() => approveMutation.mutate()}
            disabled={approveMutation.isPending}
          >
            {approveMutation.isPending ? 'Approving...' : 'Confirm Approve'}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Mark as Sent Confirmation Dialog */}
      <Dialog open={sendDialogOpen} onClose={() => setSendDialogOpen(false)}>
        <DialogTitle>Mark as Sent</DialogTitle>
        <DialogContent>
          <Typography>
            Mark <strong>{proposal.proposalNumber}</strong> as sent to {proposal.customerName}?
            This action cannot be undone.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setSendDialogOpen(false)}>Cancel</Button>
          <Button
            variant="contained"
            color="success"
            onClick={() => sendMutation.mutate()}
            disabled={sendMutation.isPending}
          >
            {sendMutation.isPending ? 'Sending...' : 'Confirm Send'}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Create Revision Confirmation Dialog */}
      <Dialog open={reviseDialogOpen} onClose={() => setReviseDialogOpen(false)}>
        <DialogTitle>Create Revision</DialogTitle>
        <DialogContent>
          <Typography>
            Create a new revision of <strong>{proposal.proposalNumber}</strong>?
            The current version will be marked as revised and a new editable copy will be created.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setReviseDialogOpen(false)}>Cancel</Button>
          <Button
            variant="contained"
            onClick={() => reviseMutation.mutate()}
            disabled={reviseMutation.isPending}
          >
            {reviseMutation.isPending ? 'Creating...' : 'Confirm Revision'}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Return to Review Confirmation Dialog */}
      <Dialog open={returnToReviewDialogOpen} onClose={() => setReturnToReviewDialogOpen(false)}>
        <DialogTitle>Return to Review</DialogTitle>
        <DialogContent>
          <Typography>
            Return <strong>{proposal.proposalNumber}</strong> to review?
            This will clear the approval and allow further editing.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setReturnToReviewDialogOpen(false)}>Cancel</Button>
          <Button
            variant="contained"
            color="warning"
            onClick={() => returnToReviewMutation.mutate()}
            disabled={returnToReviewMutation.isPending}
          >
            {returnToReviewMutation.isPending ? 'Returning...' : 'Confirm'}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Audit Trail */}
      {auditTrail && auditTrail.length > 0 && (
        <Card sx={{ mt: 2 }}>
          <CardContent sx={{ py: 1.5 }}>
            <Typography variant="subtitle2" sx={{ mb: 1 }}>Activity Log</Typography>
            <Box sx={{ maxHeight: 240, overflow: 'auto' }}>
              <Box
                component="table"
                sx={{
                  width: '100%',
                  borderCollapse: 'collapse',
                  '& tr:hover': { bgcolor: 'action.hover' },
                  '& td': { padding: '6px 8px', border: 0 },
                }}
              >
                <tbody>
                  {auditTrail.map((entry) => (
                    <tr key={entry.id}>
                      <td style={{ whiteSpace: 'nowrap', width: 155, paddingLeft: 0 }}>
                        <Typography variant="caption" color="text.secondary">
                          {new Date(entry.timestamp).toLocaleString()}
                        </Typography>
                      </td>
                      <td style={{ width: 150 }}>
                        <Chip label={formatAction(entry.action)} size="small" variant="outlined" />
                      </td>
                      <td style={{ whiteSpace: 'nowrap', width: 120 }}>
                        <Typography variant="caption">{entry.userName}</Typography>
                      </td>
                      <td style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 0 }}>
                        <Typography variant="caption" color="text.secondary">
                          {entry.details ? formatDetails(entry.details) : ''}
                        </Typography>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </Box>
            </Box>
          </CardContent>
        </Card>
      )}
    </Box>
  );
}