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

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

interface Vendor {
  user: {
    id: number;
    email: string;
    first_name: string;
    last_name: string;
  };
  business_name: string;
  business_type: string;
}

interface HomeImprovementReceiptData {
  propertyId: number;
  vendor: Vendor; // Assuming the full vendor object is passed for display
  dateOfWork: string;
  description: string;
  cost: number;
  // receiptFile?: string; // Assume URL string for display
}

interface HomeImprovementReceiptDisplayProps {
  receiptData: HomeImprovementReceiptData;
  property: Property;
}

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

const HomeImprovementReceiptDisplay: React.FC<HomeImprovementReceiptDisplayProps> = ({
  receiptData,
  property,
}) => {
  if (!receiptData || !property) {
    return (
      <Box sx={{ p: 3 }}>
        <Typography variant="h6" color="error">
          No receipt information available to display.
        </Typography>
      </Box>
    );
  }

  const { vendor, dateOfWork, description, cost } = receiptData;

  return (
    <Card elevation={3} sx={{ my: 4, borderRadius: 2 }}>
      <CardContent>
        <Typography variant="h5" component="div" gutterBottom sx={{ fontWeight: 'bold' }}>
          Home Improvement Receipt
        </Typography>
        <Typography variant="subtitle1" color="text.secondary" sx={{ mb: 2 }}>
          For Property: {property.address}, {property.city}, {property.state} {property.zip_code}
        </Typography>
        <Divider sx={{ my: 2 }} />
        <Grid container spacing={2}>
          <Grid size={{ xs: 12, sm: 6 }}>
            <List dense>
              <ListItem>
                <ListItemText primary="Vendor" secondary={vendor.business_name} />
              </ListItem>
              <ListItem>
                <ListItemText primary="Vendor Type" secondary={vendor.business_type} />
              </ListItem>
            </List>
          </Grid>
          <Grid size={{ xs: 12, sm: 6 }}>
            <List dense>
              <ListItem>
                <ListItemText
                  primary="Date of Work"
                  secondary={dateOfWork ? new Date(dateOfWork).toLocaleDateString() : 'N/A'}
                />
              </ListItem>
              <ListItem>
                <ListItemText primary="Cost" secondary={formatCurrency(cost)} />
              </ListItem>
            </List>
          </Grid>
          <Grid size={{ xs: 12 }}>
            <Box sx={{ p: 2, border: '1px dashed #e0e0e0', borderRadius: 1, my: 2 }}>
              <Typography variant="subtitle2" gutterBottom>
                Description of Work Performed
              </Typography>
              <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                {description || 'No description provided.'}
              </Typography>
            </Box>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default HomeImprovementReceiptDisplay;
