// src/views/components/product/SpecificationDetails.tsx

import React from 'react'
import {
  Grid,
  TextField,
  Button,
  Typography,
  Box,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  IconButton
} from '@mui/material'
import Icon from 'src/@core/components/icon'
import { SpecificationItem } from './types'

interface SpecificationDetailsProps {
  specifications: SpecificationItem[]
  specName: string
  specValue: string
  editingSpecId: string | null
  onSpecNameChange: (value: string) => void
  onSpecValueChange: (value: string) => void
  onAddSpecification: () => void
  onEditSpecification: (spec: SpecificationItem) => void
  onRemoveSpecification: (id: string) => void
  isSubmitting: boolean
}

const SpecificationDetails = ({
  specifications,
  specName,
  specValue,
  editingSpecId,
  onSpecNameChange,
  onSpecValueChange,
  onAddSpecification,
  onEditSpecification,
  onRemoveSpecification,
  isSubmitting
}: SpecificationDetailsProps) => {
  return (
    <Grid container spacing={4}>
      <Grid item xs={12}>
        <Typography variant='subtitle1' fontWeight={600} sx={{ mb: 3 }}>
          Specifications
        </Typography>

        <Paper sx={{ p: 3 }}>
          <Grid container spacing={3} alignItems='center'>
            <Grid item xs={12} md={5}>
              <TextField
                fullWidth
                label='Specification Name'
                placeholder='e.g. Material'
                size='small'
                value={specName}
                onChange={(e) => onSpecNameChange(e.target.value)}
                disabled={isSubmitting}
              />
            </Grid>
            <Grid item xs={12} md={5}>
              <TextField
                fullWidth
                label='Value'
                placeholder='e.g. Cotton'
                size='small'
                value={specValue}
                onChange={(e) => onSpecValueChange(e.target.value)}
                disabled={isSubmitting}
              />
            </Grid>
            <Grid item xs={12} md={2}>
              <Button variant='contained' fullWidth onClick={onAddSpecification} disabled={isSubmitting}>
                {editingSpecId ? 'Update' : 'Add'}
              </Button>
            </Grid>
          </Grid>
        </Paper>

        {specifications.length > 0 && (
          <Box sx={{ mt: 3 }}>
            <TableContainer component={Paper} variant='outlined'>
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell><Typography fontWeight={600}>Specification Name</Typography></TableCell>
                    <TableCell><Typography fontWeight={600}>Value</Typography></TableCell>
                    <TableCell align='center'><Typography fontWeight={600}>Action</Typography></TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {specifications.map((spec) => (
                    <TableRow key={spec.id}>
                      <TableCell>{spec.name}</TableCell>
                      <TableCell>{spec.value}</TableCell>
                      <TableCell align='center'>
                        <IconButton size='small' color='primary' onClick={() => onEditSpecification(spec)} disabled={isSubmitting}>
                          <Icon icon='tabler:edit' fontSize={18} />
                        </IconButton>
                        <IconButton size='small' color='error' onClick={() => onRemoveSpecification(spec.id)} disabled={isSubmitting}>
                          <Icon icon='tabler:trash' fontSize={18} />
                        </IconButton>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          </Box>
        )}
      </Grid>
    </Grid>
  )
}

export default SpecificationDetails