import SectionContainer from '../../components/SectionContainer.jsx';
import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box, Avatar } from '@mui/material';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
import '../../App.css';

const columns = [
  {
    field: 'avatar',
    headerName: '',
    width: 100,
    renderCell: (params) => (
      <Avatar
        src={params.value || '/favicon.png'}
        sx={{ width: 48, height: 48 }}
      />
    )
  },
  { field: 'fullName', headerName: 'Full Name', flex: 1 },
  { field: 'email', headerName: 'Email', flex: 1.5 },
  { field: 'phone', headerName: 'Phone', flex: 1 },
  { field: 'address', headerName: 'Address', flex: 1.5 },
  { field: 'company', headerName: 'Company', flex: 1 },
  {
    field: 'actions',
    headerName: '',
    width: 130,
    renderCell: (params) => (
      <Box display="flex"
                    alignItems="center"
                    justifyContent="flex-end"
                    height="100%"
                    gap={2}>
        <IconButton
          size="small"
          sx={{
            backgroundColor: '#DFCCBC',
            color: '#26201A',
            '&:hover': { backgroundColor: '#C2B2A4' },
            borderRadius: 2,
            p: 1,
          }}
        >
          <EditRoundedIcon fontSize="small" />
        </IconButton>
        <IconButton
          size="small"
          sx={{
            backgroundColor: '#FBE9E7',
            color: '#C62828',
            '&:hover': { backgroundColor: '#EF9A9A' },
            borderRadius: 2,
            p: 1,
          }}
        >
          <DeleteRoundedIcon fontSize="small" />
        </IconButton>
      </Box>
    )
  }
];

export default function Clients() {
  const [rows, setRows] = useState([
    {
      id: 1,
      avatar: '/client1.jpg',
      fullName: 'Anna Wintour',
      email: 'anna@fendi.com',
      phone: '+1 555-1234',
      address: '123 Fashion Blvd, NY',
      company: 'Fendi Casa'
    },
    {
      id: 2,
      avatar: '/client2.jpg',
      fullName: 'Karl Lagerfeld',
      email: 'karl@fendi.com',
      phone: '+1 555-5678',
      address: '456 Style Ave, Paris',
      company: 'Fendi Casa'
    },
    {
      id: 3,
      avatar: '',
      fullName: 'Donatella Versace',
      email: 'donatella@fendi.com',
      phone: '+1 555-9999',
      address: '789 Couture St, Milan',
      company: 'Fendi Casa'
    }
  ]);

  return (
    <SectionContainer sx={{ width: '100%' }}>
      <Typography variant="h4" gutterBottom color="#26201AFF">
        Clients
      </Typography>
      <Box mt={2}>
        <DataGrid
          getRowHeight={() => 60}
          rows={rows}
          columns={columns}
          pageSize={5}
          rowsPerPageOptions={[5]}
          getRowSpacing={() => ({ top: 4, bottom: 4 })}
        />
        <Box display="flex" justifyContent="flex-end" mt={2}>
          <Button variant="contained" className="button-gold">
            Add Client
          </Button>
        </Box>
      </Box>
    </SectionContainer>
  );
}