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 TextField from '@mui/material/TextField'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import IconButton from '@mui/material/IconButton'
import Grid from '@mui/material/Grid'
import MenuItem from '@mui/material/MenuItem'
import Paper from '@mui/material/Paper'

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

// ** Types
import { Term, ReceiverBeneficiary, ServiceProvider } from './types'

interface TermsConditionsFormProps {
  terms: Term[]
  receivers: ReceiverBeneficiary[]
  serviceProviders: ServiceProvider[]
  onAddTerm: (term: Term) => void
  onUpdateTerm: (id: string, term: Term) => void
  onDeleteTerm: (id: string) => void
}

const TermsConditionsForm: React.FC<TermsConditionsFormProps> = ({
  terms,
  receivers,
  serviceProviders,
  onAddTerm,
  onUpdateTerm,
  onDeleteTerm
}) => {
  const handleAddTerm = () => {
    const newTerm: Term = {
      id: Date.now().toString(),
      selectTask: '',
      taskAssignedTo: '',
      taskToBeVerifiedBy: ''
    }
    onAddTerm(newTerm)
  }

  const getAssigneeOptions = () => {
    const options = ['Sender']
    receivers.forEach((receiver, index) => {
      const name = receiver.existingUserData?.firstName || receiver.manualFillData?.firstName || `Beneficiary ${index + 1}`
      options.push(`Beneficiary ${index + 1}: ${name}`)
    })
    serviceProviders.forEach((provider, index) => {
      const name = provider.firstName || `Service Provider ${index + 1}`
      options.push(`Service Provider ${index + 1}: ${name}`)
    })
    return options
  }

  const taskOptions = [
    'Signed Contract',
    'Payment Release',
    'Service Completion',
    'Inspection Passed',
    'Document Verification',
    'Custom Approval'
  ]

  return (
    <Box>
      <Box sx={{ mb: 4 }}>
        <Typography variant='h6' sx={{ mb: 2 }}>
          Setup Terms & Conditions
        </Typography>
        <Typography variant='body2' color='text.secondary'>
          Define the terms and conditions for this multi-party escrow
        </Typography>
      </Box>

      <Box sx={{ mb: 3 }}>
        <Typography variant='subtitle1' sx={{ mb: 2, fontWeight: 600 }}>
          Suggested Terms & Conditions
        </Typography>
      </Box>

      {terms.map((term, index) => (
        <Card key={term.id} sx={{ mb: 3 }}>
          <CardContent>
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
              <Typography variant='subtitle2' color='primary'>
                Term {index + 1}
              </Typography>
              {terms.length > 1 && (
                <IconButton size='small' color='error' onClick={() => onDeleteTerm(term.id)}>
                  <Icon icon='tabler:trash' />
                </IconButton>
              )}
            </Box>
            
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  select
                  label='Select Task *'
                  value={term.selectTask}
                  onChange={(e) => onUpdateTerm(term.id, { ...term, selectTask: e.target.value })}
                  required
                >
                  {taskOptions.map((option) => (
                    <MenuItem key={option} value={option}>
                      {option}
                    </MenuItem>
                  ))}
                </TextField>
              </Grid>
              
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  select
                  label='Task Assigned To *'
                  value={term.taskAssignedTo}
                  onChange={(e) => onUpdateTerm(term.id, { ...term, taskAssignedTo: e.target.value })}
                  required
                >
                  {getAssigneeOptions().map((option) => (
                    <MenuItem key={option} value={option}>
                      {option}
                    </MenuItem>
                  ))}
                </TextField>
              </Grid>
              
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  select
                  label='Task To Be Verified By *'
                  value={term.taskToBeVerifiedBy}
                  onChange={(e) => onUpdateTerm(term.id, { ...term, taskToBeVerifiedBy: e.target.value })}
                  required
                >
                  {getAssigneeOptions().map((option) => (
                    <MenuItem key={option} value={option}>
                      {option}
                    </MenuItem>
                  ))}
                </TextField>
              </Grid>
            </Grid>
          </CardContent>
        </Card>
      ))}

      <Button
        variant='outlined'
        startIcon={<Icon icon='tabler:plus' />}
        onClick={handleAddTerm}
        sx={{ mt: 2 }}
      >
        Add Term
      </Button>
    </Box>
  )
}

export default TermsConditionsForm