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

import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation } from '@tanstack/react-query';
import {
  Box,
  Typography,
  Card,
  CardContent,
  Grid,
  Button,
  Chip,
  Divider,
  TextField,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  CircularProgress,
  Alert,
} 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 { toast } from 'react-toastify';
import { proposalsApi, type ProposalDetail } from '../../../lib/api/proposals';
import { lineItemsApi, type LineItem } from '../../../lib/api/lineItems';
import { adminApi } 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';

const STATUS_COLORS: Record<string, 'default' | 'info' | 'warning' | 'success'> = {
  Draft: 'default',
  InReview: 'info',
  Approved: 'success',
  Sent: 'success',
  Revised: 'warning',
};

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

  const [lineItems, setLineItems] = useState<EditableLineItem[]>([]);
  const [refinedScope, setRefinedScope] = useState('');
  const [approveDialogOpen, setApproveDialogOpen] = useState(false);
  const [dirty, setDirty] = 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,
  });

  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);
    }
  }, [proposal]);

  const saveMutation = useMutation({
    mutationFn: async () => {
      await adminApi.updateProposal(id!, { refinedScope });
      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] });
      setDirty(false);
      toast.success('Changes saved');
    },
  });

  const approveMutation = useMutation({
    mutationFn: () => adminApi.approveProposal(id!),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.proposals, id] });
      setApproveDialogOpen(false);
      toast.success('Proposal approved');
    },
  });

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

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

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

  const pdfMutation = useMutation({
    mutationFn: () => adminApi.getPdf(id!),
    onSuccess: (data) => {
      if (data?.downloadUrl) {
        window.open(data.downloadUrl, '_blank');
        toast.success('PDF ready — downloading');
      } 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);
  };

  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={() => navigate('/admin')}>
          Back
        </Button>
        <Typography variant="h5" sx={{ flexGrow: 1 }}>
          {proposal.proposalNumber}
        </Typography>
        <Chip label={`Rev ${proposal.currentRevision}`} size="small" variant="outlined" />
        <Chip label={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: 'center' }}>
          <Box>
            <Typography variant="caption" color="text.secondary">Customer</Typography>
            <Typography variant="body2" sx={{ fontWeight: 600 }}>{proposal.customerName}</Typography>
          </Box>
          <Box>
            <Typography variant="caption" color="text.secondary">WO #</Typography>
            <Typography variant="body2" sx={{ fontWeight: 600 }}>{proposal.workOrderNumber}</Typography>
          </Box>
          <Box>
            <Typography variant="caption" color="text.secondary">Category</Typography>
            <Typography variant="body2">{proposal.serviceCategory}</Typography>
          </Box>
          <Box>
            <Typography variant="caption" color="text.secondary">Priority</Typography>
            <Chip label={proposal.priority} size="small" sx={{ ml: 0.5 }} />
          </Box>
          <Box>
            <Typography variant="caption" color="text.secondary">Address</Typography>
            <Typography variant="body2">{proposal.customerAddress}</Typography>
          </Box>
        </CardContent>
      </Card>

      {/* Three-Panel Layout */}
      <Grid container spacing={2}>
        {/* Left Panel: Reference */}
        <Grid size={{ xs: 12, md: 3 }}>
          <Card sx={{ height: '100%' }}>
            <CardContent>
              <Typography variant="subtitle2" sx={{ mb: 1 }}>Submission Details</Typography>

              <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>
        </Grid>

        {/* Center Panel: Editor */}
        <Grid size={{ xs: 12, md: 6 }}>
          <Card>
            <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>
        </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={{ mt: 2, position: 'sticky', bottom: 16, zIndex: 10 }}>
        <CardContent sx={{ py: 1.5, display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
          {dirty && (
            <Alert severity="info" sx={{ py: 0, flexGrow: 1 }}>Unsaved changes</Alert>
          )}
          {!dirty && <Box sx={{ flexGrow: 1 }} />}

          {isEditable && (
            <>
              <Button
                variant="outlined"
                startIcon={<RefreshIcon />}
                onClick={() => regenerateMutation.mutate()}
                disabled={regenerateMutation.isPending}
              >
                Regenerate
              </Button>
              <Button
                variant="contained"
                startIcon={<SaveIcon />}
                onClick={() => saveMutation.mutate()}
                disabled={saveMutation.isPending || !dirty}
              >
                Save
              </Button>
              <Button
                variant="contained"
                color="success"
                startIcon={<CheckCircleIcon />}
                onClick={() => setApproveDialogOpen(true)}
                disabled={lineItems.length === 0 || bidTotal <= 0}
              >
                Approve
              </Button>
            </>
          )}

          {isApproved && (
            <>
              <Button
                variant="contained"
                startIcon={<PictureAsPdfIcon />}
                onClick={() => pdfMutation.mutate()}
                disabled={pdfMutation.isPending}
              >
                {pdfMutation.isPending ? 'Generating...' : 'Generate PDF'}
              </Button>
              <Button
                variant="contained"
                color="success"
                startIcon={<SendIcon />}
                onClick={() => sendMutation.mutate()}
                disabled={sendMutation.isPending}
              >
                Mark as Sent
              </Button>
            </>
          )}

          {isSent && (
            <Button
              variant="outlined"
              startIcon={<HistoryIcon />}
              onClick={() => reviseMutation.mutate()}
              disabled={reviseMutation.isPending}
            >
              Create Revision
            </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>
    </Box>
  );
}