import React, { useState } from 'react';
import {
  Box,
  Button,
  Typography,
  Dialog,
  DialogTitle,
  DialogContent,
  IconButton,
  TextField,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
  useMediaQuery,
} from '@mui/material';
import type { Theme } from '@mui/material/styles';
import { useTranslation } from 'react-i18next';
import { CardContainer } from '@/components/CardContainer';

import {
  Google,
  Apple,
  Sms,
  Trash,
  CloseSquare,
  Message,
  ArrowDown3,
} from 'iconsax-react';

export function SocialMedia() {
  const { t } = useTranslation('profileSetting');
  const [openDialog, setOpenDialog] = useState(false);
  const [emailInput, setEmailInput] = useState('');
  const [emailError, setEmailError] = useState(false);
  const [anchor, setAnchor] = useState<null | HTMLElement>(null);
  const openMenu = Boolean(anchor);
  const fullScreen = useMediaQuery((theme: Theme) =>
    theme.breakpoints.down('sm'),
  );

  const handleOpenDialog = () => setOpenDialog(true);
  const handleCloseDialog = () => setOpenDialog(false);

  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) =>
    setAnchor(e.currentTarget);
  const handleCloseMenu = () => setAnchor(null);

  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setEmailInput(value);
    setEmailError(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
  };

  const emailList = [
    { email: 'emailtemp@email.com', provider: 'email', time: '1 ماه پیش' },
    { email: 'emailtemp@gmail.com', provider: 'google', time: '1 ماه پیش' },
    { email: 'emailtemp@icloud.com', provider: 'apple', time: '1 ماه پیش' },
  ] as const;

  return (
    <CardContainer
      title={t('settingForm.titleSocial')}
      subtitle={t('settingForm.descriptionSocial')}
      action={
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'flex-start',
            flexWrap: 'wrap',
            gap: 1,
          }}
        >
          <Box
            sx={{
              display: 'flex',
              flexDirection: { xs: 'column', sm: 'row' },
              alignItems: { xs: 'stretch', sm: 'flex-start' },
              gap: 1,
              width: '100%',
            }}
          >
            <Button
              onClick={handleClickMenu}
              variant="outlined"
              sx={{
                width: '100%',
                maxWidth: { sm: 187 },
                textTransform: 'none',
                border: '1px solid',
                borderColor: 'primary.main',
                borderRadius: '8px',
                color: 'primary.main',
                fontSize: '14px',
                px: 2,
                py: 1,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                whiteSpace: 'nowrap',
              }}
            >
              <Box
                component="span"
                sx={{
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  direction: 'rtl',
                }}
              >
                {t('settingForm.addEmailOrSocialButton')}
              </Box>
              <ArrowDown3 size="20" color="#2979FF" />
            </Button>
          </Box>

          <Menu
            anchorEl={anchor}
            open={openMenu}
            onClose={handleCloseMenu}
            PaperProps={{
              sx: {
                minWidth: 240,
                maxWidth: '90vw',
              },
            }}
            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
            transformOrigin={{ vertical: 'top', horizontal: 'left' }}
          >
            <MenuItem
              onClick={() => {
                handleCloseMenu();
                handleOpenDialog();
              }}
            >
              <ListItemIcon>
                <Message size={20} color="black" />
              </ListItemIcon>
              <ListItemText>{t('settingForm.email')}</ListItemText>
            </MenuItem>
            <MenuItem>
              <ListItemIcon>
                <Google size={20} color="#4285F4" />
              </ListItemIcon>
              <ListItemText>{t('settingForm.google')}</ListItemText>
            </MenuItem>
            <MenuItem>
              <ListItemIcon>
                <Apple size={20} color="black" />
              </ListItemIcon>
              <ListItemText>{t('settingForm.apple')}</ListItemText>
            </MenuItem>
          </Menu>
        </Box>
      }
    >
      <Box sx={{ width: '100%', borderRadius: '8px', p: { xs: 1, sm: 2 } }}>
        {emailList.map((item, index) => (
          <Box
            key={index}
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              flexWrap: 'wrap',
              py: 1,
              gap: 1,
            }}
          >
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: 1,
                minWidth: 0,
              }}
            >
              {item.provider === 'google' && (
                <Google size="20" variant="Bold" color="#4285F4" />
              )}
              {item.provider === 'apple' && (
                <Apple size="20" variant="Bold" color="black" />
              )}
              {item.provider === 'email' && (
                <Sms size="20" variant="Bold" color="#1976d2" />
              )}

              <Box sx={{ minWidth: 0 }}>
                <Typography variant="h6" noWrap>
                  {item.email}
                </Typography>
                <Typography variant="caption" color="text.secondary">
                  {item.time}
                </Typography>
              </Box>
            </Box>

            <IconButton size="small">
              <Trash size="20" color="gray" variant="Outline" />
            </IconButton>
          </Box>
        ))}
      </Box>

      <Dialog
        open={openDialog}
        onClose={handleCloseDialog}
        fullWidth
        maxWidth="xs"
        fullScreen={fullScreen}
        sx={{
          '& .MuiDialog-paper': { m: { xs: 1, sm: 'auto' }, borderRadius: 2 },
        }}
      >
        <DialogTitle
          sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            fontWeight: 'bold',
            fontSize: '16px',
            gap: 1,
          }}
        >
          <IconButton onClick={handleCloseDialog}>
            <CloseSquare size={24} color="#82B1FF" />
          </IconButton>
          {t('settingForm.addEmailButton')}
        </DialogTitle>

        <DialogContent>
          <Box
            sx={{
              width: '100%',
              display: 'flex',
              flexDirection: 'column',
              gap: 2,
            }}
          >
            <Box>
              <Typography fontWeight="bold">
                {t('settingForm.newEmail')}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {t('settingForm.dialogHeader')}
              </Typography>
            </Box>

            <TextField
              fullWidth
              type="email"
              value={emailInput}
              onChange={handleEmailChange}
              error={emailError}
              helperText={emailError ? t('settingForm.emailError') : ''}
              label={t('settingForm.email')}
              placeholder="abc@email.com"
              sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px' } }}
            />

            <Button
              variant="contained"
              fullWidth
              sx={{ textTransform: 'none', borderRadius: '8px' }}
              disabled={emailError || emailInput === ''}
            >
              {t('settingForm.verificationCodeButton')}
            </Button>

            <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
              <Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
              <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
                {t('settingForm.or')}
              </Typography>
              <Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
            </Box>

            <Box
              sx={{
                display: 'flex',
                gap: 1,
                flexDirection: { xs: 'column', sm: 'row' },
              }}
            >
              <Button
                fullWidth
                sx={{
                  textTransform: 'none',
                  border: 2,
                  borderColor: '#1976d2',
                  color: '#1976d2',
                  borderRadius: '8px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Google
                  size="20"
                  color="#4285F4"
                  style={{ marginInlineStart: 8 }}
                />
                {t('settingForm.google')}
              </Button>
              <Button
                fullWidth
                sx={{
                  textTransform: 'none',
                  border: 2,
                  borderColor: '#1976d2',
                  color: '#1976d2',
                  borderRadius: '8px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Apple
                  size="20"
                  color="black"
                  style={{ marginInlineStart: 8 }}
                />
                {t('settingForm.apple')}
              </Button>
            </Box>
          </Box>
        </DialogContent>
      </Dialog>
    </CardContainer>
  );
}
