import React from 'react';
import {
  Box,
  Typography,
  Card,
  CardContent,
  Divider,
  Grid,
  List,
  ListItem,
  ListItemText,
  CardActions,
  Button,
} from '@mui/material';
import { axiosInstance } from '../../../../../axiosApi';

// Interfaces for consistency across components
interface Property {
  id: number;
  address: string;
  city: string;
  state: string;
  zip_code: string;
}

interface OfferData {
  propertyId: number;
  offer_price: number;
  closing_date?: string;
  closing_days?: number;
  contingencies: string;
  status: string;
}

interface OfferDisplayProps {
  offerData: OfferData;
  property: Property;
  isPropertyOwner: boolean;
  onAccept: () => void;
  onReject: () => void;
  onCounter: () => void;
}

const formatCurrency = (value: number): string => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(value);
};

const OfferDisplay: React.FC<OfferDisplayProps> = ({
  offerData,
  property,
  isPropertyOwner,
  onAccept,
  onReject,
  onCounter,
}) => {
  if (!offerData || !property) {
    return (
      <Box sx={{ p: 3 }}>
        <Typography variant="h6" color="error">
          No offer information available to display.
        </Typography>
      </Box>
    );
  }

  const { offer_price, closing_date, closing_days, contingencies, status } = offerData;

  const getClosingText = () => {
    if (closing_days) {
      return `${closing_days} days`;
    }
    if (closing_date) {
      try {
        const formattedDate = new Date(closing_date).toLocaleDateString();
        return `By ${formattedDate}`;
      } catch (error) {
        console.error('Invalid closingDate format:', error);
        return 'Invalid Date';
      }
    }
    return 'Not specified';
  };

  const showActions =
    (isPropertyOwner && (status === 'submitted' || status === 'pending')) ||
    (!isPropertyOwner && status === 'countered');

  return (
    <Card elevation={3} sx={{ my: 4, borderRadius: 2 }}>
      <CardContent>
        <Typography variant="h5" component="div" gutterBottom sx={{ fontWeight: 'bold' }}>
          Residential House Offer
        </Typography>
        <Typography variant="subtitle1" color="text.secondary" sx={{ mb: 2 }}>
          For Property: {property.address}, {property.city}, {property.state} {property.zip_code}
        </Typography>
        <Typography variant="body1" color="text.primary">
          Status: {status.charAt(0).toUpperCase() + status.slice(1)}
        </Typography>

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

        <Grid container spacing={2}>
          <Grid size={{ xs: 12, sm: 6 }}>
            <List dense>
              <ListItem>
                <ListItemText primary="Offer Price" secondary={formatCurrency(offer_price)} />
              </ListItem>
            </List>
          </Grid>
          <Grid size={{ xs: 12, sm: 6 }}>
            <List dense>
              <ListItem>
                <ListItemText primary="Closing Timeline" secondary={getClosingText()} />
              </ListItem>
            </List>
          </Grid>
          <Grid size={{ xs: 12 }}>
            <Box sx={{ p: 2, border: '1px dashed #e0e0e0', borderRadius: 1, my: 2 }}>
              <Typography variant="subtitle2" gutterBottom>
                Other Contingencies
              </Typography>
              <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                {contingencies || 'No contingencies listed.'}
              </Typography>
            </Box>
          </Grid>
        </Grid>
      </CardContent>
      {showActions && (
        <CardActions>
          <Button variant="contained" onClick={onAccept}>
            Accept
          </Button>
          <Button onClick={onCounter}>Counter</Button>
          <Button onClick={onReject}>Reject</Button>
        </CardActions>
      )}
    </Card>
  );
};

export default OfferDisplay;
