import React from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import Chip from '@mui/material/Chip'
import Divider from '@mui/material/Divider'
import Paper from '@mui/material/Paper'
import Grid from '@mui/material/Grid'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import Button from '@mui/material/Button'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

// ** Types
import { MultiPartyEscrowData } from './types'

interface PreviewFinishFormProps {
  data: MultiPartyEscrowData
  onEditStep: (step: number) => void
}

const PreviewFinishForm: React.FC<PreviewFinishFormProps> = ({ data, onEditStep }) => {
  const totalEscrowAmount = data.receivers.reduce((sum, receiver) => sum + (parseFloat(receiver.amount) || 0), 0)
  
  const totalFeesFromSender = data.serviceProviders
    .filter(p => p.feesPaidBy.sender)
    .reduce((sum, p) => sum + (parseFloat(p.serviceProviderFees) || 0), 0)
  
  const totalFeesFromReceiver = data.serviceProviders
    .filter(p => p.feesPaidBy.receiver)
    .reduce((sum, p) => sum + (parseFloat(p.serviceProviderFees) || 0), 0)

  const getNetAmountForReceiver = (receiverId: string, amount: number) => {
    let totalDeduction = 0
    data.serviceProviders.forEach(provider => {
      if (provider.feesPaidBy.receiver) {
        const distribution = provider.receiverFeeDistribution.find(d => d.receiverId === receiverId)
        if (distribution) {
          totalDeduction += distribution.amount
        }
      }
    })
    return amount - totalDeduction
  }

  const getFeeBreakdownForReceiver = (receiverId: string) => {
    const breakdowns: React.ReactNode[] = []
    data.serviceProviders.forEach((provider, idx) => {
      if (provider.feesPaidBy.receiver) {
        const distribution = provider.receiverFeeDistribution.find(d => d.receiverId === receiverId)
        if (distribution && distribution.percentage > 0) {
          breakdowns.push(
            <div key={provider.id}>
              SP {idx + 1}: {provider.firstName} {distribution.percentage}% = -${distribution.amount.toFixed(2)}
            </div>
          )
        }
      }
    })
    return breakdowns.length > 0 ? breakdowns : '-'
  }

  return (
    <Box>
      {/* Receivers Section */}
      <Card sx={{ mb: 3 }}>
        <CardContent>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
            <Typography variant='h6'>Receiver / Beneficiary Users</Typography>
            <Button 
              size='small' 
              startIcon={<Icon icon='tabler:edit' />} 
              onClick={() => onEditStep(0)}
              variant='outlined'
            >
              Edit
            </Button>
          </Box>
          <Divider sx={{ mb: 2 }} />
          
          {data.receivers.map((receiver, idx) => (
            <Paper key={receiver.id} sx={{ p: 2, mb: 2 }}>
              <Typography variant='subtitle1' fontWeight={600} gutterBottom>
                {receiver.existingUserData?.firstName || receiver.manualFillData?.firstName} {receiver.existingUserData?.lastName || receiver.manualFillData?.lastName}
                <Chip label={`$${parseFloat(receiver.amount || '0').toLocaleString()}`} size='small' color='primary' sx={{ ml: 2 }} />
              </Typography>
              <Grid container spacing={2}>
                <Grid item xs={12} sm={6}>
                  <Typography variant='caption' color='text.secondary'>Wallet ID</Typography>
                  <Typography variant='body2'>{receiver.existingUserData?.walletId || receiver.manualFillData?.walletId || '-'}</Typography>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Typography variant='caption' color='text.secondary'>Email</Typography>
                  <Typography variant='body2'>{receiver.existingUserData?.email || receiver.manualFillData?.email || '-'}</Typography>
                </Grid>
                <Grid item xs={12}>
                  <Typography variant='caption' color='text.secondary'>Phone</Typography>
                  <Typography variant='body2'>{receiver.existingUserData?.phoneNumber || receiver.manualFillData?.phoneNumber || '-'}</Typography>
                </Grid>
              </Grid>
            </Paper>
          ))}
        </CardContent>
      </Card>

      {/* Service Providers Section */}
      <Card sx={{ mb: 3 }}>
        <CardContent>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
            <Typography variant='h6'>3rd Party Service Providers</Typography>
            <Button 
              size='small' 
              startIcon={<Icon icon='tabler:edit' />} 
              onClick={() => onEditStep(1)}
              variant='outlined'
            >
              Edit
            </Button>
          </Box>
          <Divider sx={{ mb: 2 }} />
          
          {data.serviceProviders.length === 0 ? (
            <Typography variant='body2' color='text.secondary' sx={{ textAlign: 'center', py: 3 }}>
              No service providers added
            </Typography>
          ) : (
            data.serviceProviders.map((provider, idx) => (
              <Paper key={provider.id} sx={{ p: 2, mb: 2 }}>
                <Typography variant='subtitle1' fontWeight={600} gutterBottom>
                  {provider.firstName} {provider.lastName}
                  <Chip 
                    label={`Fees: $${parseFloat(provider.serviceProviderFees || '0').toLocaleString()} Paid by: ${provider.feesPaidBy.sender ? 'Sender' : ''}${provider.feesPaidBy.sender && provider.feesPaidBy.receiver ? ' & ' : ''}${provider.feesPaidBy.receiver ? 'Receiver' : ''}`} 
                    size='small' 
                    color='info' 
                    sx={{ ml: 2 }} 
                  />
                </Typography>
                <Grid container spacing={2}>
                  <Grid item xs={12} sm={6}>
                    <Typography variant='caption' color='text.secondary'>Wallet ID</Typography>
                    <Typography variant='body2'>{provider.walletId || '-'}</Typography>
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <Typography variant='caption' color='text.secondary'>Email</Typography>
                    <Typography variant='body2'>{provider.email || '-'}</Typography>
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <Typography variant='caption' color='text.secondary'>Service Name</Typography>
                    <Typography variant='body2'>{provider.serviceName || '-'}</Typography>
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <Typography variant='caption' color='text.secondary'>Phone</Typography>
                    <Typography variant='body2'>{provider.phoneNumber || '-'}</Typography>
                  </Grid>
                </Grid>

                {provider.feesPaidBy.receiver && provider.receiverFeeDistribution.length > 0 && (
                  <Box sx={{ mt: 2 }}>
                    <Typography variant='subtitle2' gutterBottom>Receiver Fee Distribution</Typography>
                    <TableContainer component={Paper} variant='outlined'>
                      <Table size='small'>
                        <TableHead>
                          <TableRow sx={{ bgcolor: 'action.hover' }}>
                            <TableCell>Receiver</TableCell>
                            <TableCell align='right'>%</TableCell>
                            <TableCell align='right'>Amount</TableCell>
                          </TableRow>
                        </TableHead>
                        <TableBody>
                          {provider.receiverFeeDistribution.map((dist) => (
                            <TableRow key={dist.receiverId}>
                              <TableCell>{dist.receiverName}</TableCell>
                              <TableCell align='right'>{dist.percentage}%</TableCell>
                              <TableCell align='right'>${dist.amount.toFixed(2)}</TableCell>
                            </TableRow>
                          ))}
                          <TableRow sx={{ bgcolor: 'action.hover' }}>
                            <TableCell><strong>Total</strong></TableCell>
                            <TableCell align='right'><strong>{provider.receiverFeeDistribution.reduce((sum, d) => sum + d.percentage, 0)}%</strong></TableCell>
                            <TableCell align='right'><strong>${provider.receiverFeeDistribution.reduce((sum, d) => sum + d.amount, 0).toFixed(2)}</strong></TableCell>
                          </TableRow>
                        </TableBody>
                      </Table>
                    </TableContainer>
                  </Box>
                )}
              </Paper>
            ))
          )}
        </CardContent>
      </Card>

      {/* Terms & Conditions Section */}
      <Card sx={{ mb: 3 }}>
        <CardContent>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
            <Typography variant='h6'>Terms & Conditions</Typography>
            <Button 
              size='small' 
              startIcon={<Icon icon='tabler:edit' />} 
              onClick={() => onEditStep(2)}
              variant='outlined'
            >
              Edit
            </Button>
          </Box>
          <Divider sx={{ mb: 2 }} />
          
          {data.terms.terms.length === 0 ? (
            <Typography variant='body2' color='text.secondary' sx={{ textAlign: 'center', py: 3 }}>
              No terms added
            </Typography>
          ) : (
            data.terms.terms.map((term, idx) => (
              <Paper key={term.id} sx={{ p: 2, mb: 2 }}>
                <Typography variant='subtitle1' fontWeight={600} gutterBottom>
                  Term {idx + 1}: {term.selectTask}
                </Typography>
                <Grid container spacing={2}>
                  <Grid item xs={12} sm={6}>
                    <Typography variant='caption' color='text.secondary'>Task Assigned To</Typography>
                    <Typography variant='body2'>{term.taskAssignedTo}</Typography>
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <Typography variant='caption' color='text.secondary'>Task To Be Verified By</Typography>
                    <Typography variant='body2'>{term.taskToBeVerifiedBy}</Typography>
                  </Grid>
                </Grid>
              </Paper>
            ))
          )}
        </CardContent>
      </Card>

      {/* Payment Distribution Summary */}
      <Card>
        <CardContent>
          <Typography variant='h6' gutterBottom>Payment Distribution Summary</Typography>
          <Divider sx={{ mb: 2 }} />
          
          <Grid container spacing={3}>
            <Grid item xs={12} md={6}>
              <Typography variant='subtitle1' gutterBottom>Sender Pays</Typography>
              <TableContainer component={Paper} variant='outlined'>
                <Table size='small'>
                  <TableBody>
                    <TableRow>
                      <TableCell>Escrow Amount for {data.receivers.length} Beneficiaries</TableCell>
                      <TableCell align='right'>${totalEscrowAmount.toFixed(2)}</TableCell>
                    </TableRow>
                    {data.serviceProviders.filter(p => p.feesPaidBy.sender).map((p, idx) => (
                      <TableRow key={idx}>
                        <TableCell>Service Provider Fees ({p.firstName})</TableCell>
                        <TableCell align='right'>${parseFloat(p.serviceProviderFees || '0').toFixed(2)}</TableCell>
                      </TableRow>
                    ))}
                    <TableRow sx={{ bgcolor: 'action.hover' }}>
                      <TableCell><strong>Total Sender Pays</strong></TableCell>
                      <TableCell align='right'><strong>${(totalEscrowAmount + totalFeesFromSender).toFixed(2)}</strong></TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            </Grid>
            
            <Grid item xs={12} md={6}>
              <Typography variant='subtitle1' gutterBottom>Receiver / Beneficiary Receives</Typography>
              <TableContainer component={Paper} variant='outlined'>
                <Table size='small'>
                  <TableHead>
                    <TableRow sx={{ bgcolor: 'action.hover' }}>
                      <TableCell>Beneficiary</TableCell>
                      <TableCell align='right'>Escrow Amount</TableCell>
                      <TableCell>Fees Deducted</TableCell>
                      <TableCell align='right'>Net Amount</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {data.receivers.map((receiver) => {
                      const amount = parseFloat(receiver.amount || '0')
                      const netAmount = getNetAmountForReceiver(receiver.id, amount)
                      const feeBreakdown = getFeeBreakdownForReceiver(receiver.id)
                      const receiverName = receiver.existingUserData?.firstName || receiver.manualFillData?.firstName || 'Unknown'
                      
                      return (
                        <TableRow key={receiver.id}>
                          <TableCell>{receiverName}</TableCell>
                          <TableCell align='right'>${amount.toFixed(2)}</TableCell>
                          <TableCell>{feeBreakdown}</TableCell>
                          <TableCell align='right' sx={{ fontWeight: 600 }}>${netAmount.toFixed(2)}</TableCell>
                        </TableRow>
                      )
                    })}
                    <TableRow sx={{ bgcolor: 'action.hover' }}>
                      <TableCell><strong>Total</strong></TableCell>
                      <TableCell align='right'><strong>${totalEscrowAmount.toFixed(2)}</strong></TableCell>
                      <TableCell><strong>-${totalFeesFromReceiver.toFixed(2)}</strong></TableCell>
                      <TableCell align='right'><strong>${(totalEscrowAmount - totalFeesFromReceiver).toFixed(2)}</strong></TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            </Grid>
          </Grid>
          
          <Typography variant='body2' color='text.secondary' sx={{ mt: 3, textAlign: 'center' }}>
            Please review all details above before submitting. Click Submit to finalise.
          </Typography>
        </CardContent>
      </Card>
    </Box>
  )
}

export default PreviewFinishForm