import React from 'react';
import { Box, Paper, Typography, Grid, Divider } from '@mui/material';
import { LenderFinancingAgreementData } from 'types';

interface LenderFinancingAgreementDisplayProps {
    agreementData: LenderFinancingAgreementData;
}

const LenderFinancingAgreementDisplay: React.FC<LenderFinancingAgreementDisplayProps> = ({
    agreementData,
}) => {
    if (!agreementData) {
        return <Typography>No data available for this agreement.</Typography>;
    }

    return (
        <Box sx={{ p: 3 }}>
            <Paper elevation={0} sx={{ p: 4, border: '1px solid', borderColor: 'grey.300' }}>
                <Typography variant="h4" gutterBottom align="center" sx={{ mb: 4 }}>
                    Lender Financing Agreement
                </Typography>

                <Grid container spacing={3}>
                    <Grid size={{ xs: 12 }}>
                        <Typography variant="h6" gutterBottom>
                            Property Information
                        </Typography>
                        <Divider sx={{ mb: 2 }} />
                        <Grid container spacing={2}>
                            <Grid size={{ xs: 12, sm: 6 }}>
                                <Typography variant="subtitle2" color="text.secondary">
                                    Address
                                </Typography>
                                <Typography variant="body1">{agreementData.property_address}</Typography>
                            </Grid>
                            <Grid size={{ xs: 12, sm: 6 }}>
                                <Typography variant="subtitle2" color="text.secondary">
                                    Owner
                                </Typography>
                                <Typography variant="body1">{agreementData.property_owner}</Typography>
                            </Grid>
                        </Grid>
                    </Grid>

                    <Grid size={{ xs: 12 }} sx={{ mt: 2 }}>
                        <Typography variant="h6" gutterBottom>
                            Loan Details
                        </Typography>
                        <Divider sx={{ mb: 2 }} />
                        <Grid container spacing={2}>
                            <Grid size={{ xs: 12, sm: 6 }}>
                                <Typography variant="subtitle2" color="text.secondary">
                                    Loan Type
                                </Typography>
                                <Typography variant="body1" sx={{ textTransform: 'capitalize' }}>
                                    {agreementData.loan_type.replace(/_/g, ' ')}
                                </Typography>
                            </Grid>
                            <Grid size={{ xs: 12, sm: 6 }}>
                                <Typography variant="subtitle2" color="text.secondary">
                                    Interest Rate
                                </Typography>
                                <Typography variant="body1">{agreementData.interest_rate}%</Typography>
                            </Grid>
                            <Grid size={{ xs: 12, sm: 6 }}>
                                <Typography variant="subtitle2" color="text.secondary">
                                    PMI
                                </Typography>
                                <Typography variant="body1">{agreementData.pmi ? 'Yes' : 'No'}</Typography>
                            </Grid>
                        </Grid>
                    </Grid>

                    <Grid size={{ xs: 12 }} sx={{ mt: 2 }}>
                        <Typography variant="h6" gutterBottom>
                            Offer Details
                        </Typography>
                        <Divider sx={{ mb: 2 }} />
                        <Grid container spacing={2}>
                            <Grid size={{ xs: 12, sm: 6 }}>
                                <Typography variant="subtitle2" color="text.secondary">
                                    Offer Price
                                </Typography>
                                <Typography variant="body1">
                                    ${agreementData.offer_price?.toLocaleString()}
                                </Typography>
                            </Grid>
                            <Grid size={{ xs: 12, sm: 6 }}>
                                <Typography variant="subtitle2" color="text.secondary">
                                    Closing Date
                                </Typography>
                                <Typography variant="body1">{agreementData.closing_date}</Typography>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </Paper>
        </Box>
    );
};

export default LenderFinancingAgreementDisplay;
