// resources/assets/ts/ContactsPage/components/ContactsImportPreview.tsx

import React, { useState } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
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 Chip from '@mui/material/Chip';
import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
import Alert from '@mui/material/Alert';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Tooltip from '@mui/material/Tooltip';
import {
  CheckCircle as CheckCircleIcon,
  Error as ErrorIcon,
  Warning as WarningIcon,
  KeyboardArrowDown as KeyboardArrowDownIcon,
  KeyboardArrowUp as KeyboardArrowUpIcon,
  Info as InfoIcon,
} from '@mui/icons-material';
import { ContactPreview } from '../../utils/csvImportUtils';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
  return (
    <div hidden={value !== index} style={{ paddingTop: '16px' }}>
      {value === index && children}
    </div>
  );
};

interface ContactsImportPreviewProps {
  contacts: ContactPreview[];
  onConfirm: () => void;
  onCancel: () => void;
}

const ContactsImportPreview: React.FC<ContactsImportPreviewProps> = ({
  contacts,
  onConfirm,
  onCancel,
}) => {
  const { i18n } = useLingui();
  const [tabValue, setTabValue] = useState(0);
  const [expandedRows, setExpandedRows] = useState<Set<number>>(new Set());

  // Categorize contacts
  const validContacts = contacts.filter(c => c.validation.valid && !c.isDuplicate);
  const duplicateContacts = contacts.filter(c => c.isDuplicate);
  const errorContacts = contacts.filter(c => !c.validation.valid);

  const toggleRowExpansion = (rowNumber: number) => {
    const newExpanded = new Set(expandedRows);
    if (newExpanded.has(rowNumber)) {
      newExpanded.delete(rowNumber);
    } else {
      newExpanded.add(rowNumber);
    }
    setExpandedRows(newExpanded);
  };

  const renderContactRow = (contact: ContactPreview, showActions: boolean = true) => {
    const isExpanded = expandedRows.has(contact.rowNumber);

    return (
      <React.Fragment key={contact.rowNumber}>
        <TableRow
          sx={{
            backgroundColor: 
              !contact.validation.valid ? 'rgba(244, 67, 54, 0.08)' :
              contact.isDuplicate ? 'rgba(255, 152, 0, 0.08)' :
              'rgba(76, 175, 80, 0.08)',
          }}
        >
          <TableCell>
            {showActions && (
              <IconButton
                size="small"
                onClick={() => toggleRowExpansion(contact.rowNumber)}
              >
                {isExpanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
              </IconButton>
            )}
          </TableCell>
          <TableCell>{contact.rowNumber}</TableCell>
          <TableCell>
            {!contact.validation.valid && (
              <Chip
                icon={<ErrorIcon />}
                label={i18n._(msg`Error`)}
                size="small"
                color="error"
              />
            )}
            {contact.validation.valid && contact.isDuplicate && (
              <Chip
                icon={<WarningIcon />}
                label={i18n._(msg`Duplicate`)}
                size="small"
                color="warning"
              />
            )}
            {contact.validation.valid && !contact.isDuplicate && (
              <Chip
                icon={<CheckCircleIcon />}
                label={i18n._(msg`Ready`)}
                size="small"
                color="success"
              />
            )}
          </TableCell>
          <TableCell>{contact.firmenname}</TableCell>
          <TableCell>{contact.email || '-'}</TableCell>
          <TableCell>{contact.ort || '-'}</TableCell>
          <TableCell>
            {contact.validation.errors.length > 0 && (
              <Tooltip title={contact.validation.errors.join(', ')}>
                <ErrorIcon color="error" fontSize="small" />
              </Tooltip>
            )}
            {contact.isDuplicate && contact.duplicateReason && (
              <Tooltip title={contact.duplicateReason}>
                <WarningIcon color="warning" fontSize="small" />
              </Tooltip>
            )}
          </TableCell>
        </TableRow>
        
        {/* Expanded Details */}
        <TableRow>
          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={7}>
            <Collapse in={isExpanded} timeout="auto" unmountOnExit>
              <Box sx={{ margin: 2 }}>
                <Typography variant="subtitle2" gutterBottom>
                  <Trans>Details</Trans>
                </Typography>
                <Paper variant="outlined" sx={{ p: 2 }}>
                  <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
                    <Box>
                      <Typography variant="caption" color="text.secondary"><Trans>Company name:</Trans></Typography>
                      <Typography variant="body2">{contact.firmenname}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption" color="text.secondary"><Trans>Abbreviation:</Trans></Typography>
                      <Typography variant="body2">{contact.abkuerzung || '-'}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption" color="text.secondary"><Trans>Keywords:</Trans></Typography>
                      <Typography variant="body2">{contact.schlagwoerter || '-'}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption" color="text.secondary"><Trans>Email:</Trans></Typography>
                      <Typography variant="body2">{contact.email || '-'}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption" color="text.secondary"><Trans>Address:</Trans></Typography>
                      <Typography variant="body2">
                        {contact.strasse && contact.plz && contact.ort
                          ? `${contact.strasse}, ${contact.plz} ${contact.ort}`
                          : '-'}
                      </Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption" color="text.secondary"><Trans>Phone:</Trans></Typography>
                      <Typography variant="body2">{contact.telefon_1 || '-'}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption" color="text.secondary"><Trans>Category ID:</Trans></Typography>
                      <Typography variant="body2">{contact.kategorie_id}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption" color="text.secondary"><Trans>Priority ID:</Trans></Typography>
                      <Typography variant="body2">{contact.prioritaet_id}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption" color="text.secondary"><Trans>Industry ID:</Trans></Typography>
                      <Typography variant="body2">{contact.branche_id}</Typography>
                    </Box>
                    <Box>
                      <Typography variant="caption" color="text.secondary"><Trans>Responsible:</Trans></Typography>
                      <Typography variant="body2">{contact.verantwortlicher}</Typography>
                    </Box>
                  </Box>
                  
                  {/* Show errors if any */}
                  {contact.validation.errors.length > 0 && (
                    <Alert severity="error" sx={{ mt: 2 }}>
                      <Typography variant="subtitle2"><Trans>Errors:</Trans></Typography>
                      <ul style={{ margin: 0, paddingLeft: '20px' }}>
                        {contact.validation.errors.map((error, i) => (
                          <li key={i}>{error}</li>
                        ))}
                      </ul>
                    </Alert>
                  )}
                  
                  {/* Show duplicate reason if any */}
                  {contact.isDuplicate && contact.duplicateReason && (
                    <Alert severity="warning" sx={{ mt: 2 }}>
                      <Typography variant="body2">{contact.duplicateReason}</Typography>
                    </Alert>
                  )}
                </Paper>
              </Box>
            </Collapse>
          </TableCell>
        </TableRow>
      </React.Fragment>
    );
  };

  return (
    <Box>
      {/* Summary Statistics */}
      <Paper variant="outlined" sx={{ p: 3, mb: 3 }}>
        <Typography variant="h6" gutterBottom>
          <Trans>Import preview</Trans>
        </Typography>
        <Box sx={{ display: 'flex', gap: 3, mt: 2 }}>
          <Box>
            <Typography variant="h4" color="success.main">
              {validContacts.length}
            </Typography>
            <Typography variant="body2" color="text.secondary">
              <Trans>Ready to import</Trans>
            </Typography>
          </Box>
          <Box>
            <Typography variant="h4" color="warning.main">
              {duplicateContacts.length}
            </Typography>
            <Typography variant="body2" color="text.secondary">
              <Trans>Duplicates (will be skipped)</Trans>
            </Typography>
          </Box>
          <Box>
            <Typography variant="h4" color="error.main">
              {errorContacts.length}
            </Typography>
            <Typography variant="body2" color="text.secondary">
              <Trans>Errors (will be skipped)</Trans>
            </Typography>
          </Box>
        </Box>

        {validContacts.length === 0 && (
          <Alert severity="warning" sx={{ mt: 2 }}>
            <Trans>No valid contacts found to import.</Trans>
          </Alert>
        )}
      </Paper>

      {/* Tabs */}
      <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
        <Tabs value={tabValue} onChange={(e, newValue) => setTabValue(newValue)}>
          <Tab
            label={i18n._(msg`All (${contacts.length})`)}
            icon={<InfoIcon />}
            iconPosition="start"
          />
          <Tab
            label={i18n._(msg`Ready (${validContacts.length})`)}
            icon={<CheckCircleIcon />}
            iconPosition="start"
          />
          <Tab
            label={i18n._(msg`Duplicates (${duplicateContacts.length})`)}
            icon={<WarningIcon />}
            iconPosition="start"
          />
          <Tab
            label={i18n._(msg`Errors (${errorContacts.length})`)}
            icon={<ErrorIcon />}
            iconPosition="start"
          />
        </Tabs>
      </Box>

      {/* Contact Tables */}
      <TabPanel value={tabValue} index={0}>
        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell width="50px"></TableCell>
                <TableCell><Trans>Row</Trans></TableCell>
                <TableCell><Trans>Status</Trans></TableCell>
                <TableCell><Trans>Company name</Trans></TableCell>
                <TableCell><Trans>Email</Trans></TableCell>
                <TableCell><Trans>City</Trans></TableCell>
                <TableCell width="50px"></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {contacts.map(contact => renderContactRow(contact))}
            </TableBody>
          </Table>
        </TableContainer>
      </TabPanel>

      <TabPanel value={tabValue} index={1}>
        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell width="50px"></TableCell>
                <TableCell><Trans>Row</Trans></TableCell>
                <TableCell><Trans>Status</Trans></TableCell>
                <TableCell><Trans>Company name</Trans></TableCell>
                <TableCell><Trans>Email</Trans></TableCell>
                <TableCell><Trans>City</Trans></TableCell>
                <TableCell width="50px"></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {validContacts.map(contact => renderContactRow(contact))}
            </TableBody>
          </Table>
        </TableContainer>
      </TabPanel>

      <TabPanel value={tabValue} index={2}>
        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell width="50px"></TableCell>
                <TableCell><Trans>Row</Trans></TableCell>
                <TableCell><Trans>Status</Trans></TableCell>
                <TableCell><Trans>Company name</Trans></TableCell>
                <TableCell><Trans>Email</Trans></TableCell>
                <TableCell><Trans>City</Trans></TableCell>
                <TableCell width="50px"></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {duplicateContacts.map(contact => renderContactRow(contact))}
            </TableBody>
          </Table>
        </TableContainer>
      </TabPanel>

      <TabPanel value={tabValue} index={3}>
        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell width="50px"></TableCell>
                <TableCell><Trans>Row</Trans></TableCell>
                <TableCell><Trans>Status</Trans></TableCell>
                <TableCell><Trans>Company name</Trans></TableCell>
                <TableCell><Trans>Email</Trans></TableCell>
                <TableCell><Trans>City</Trans></TableCell>
                <TableCell width="50px"></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {errorContacts.map(contact => renderContactRow(contact))}
            </TableBody>
          </Table>
        </TableContainer>
      </TabPanel>

      {/* Action Buttons */}
      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3 }}>
        <Button
          variant="outlined"
          onClick={onCancel}
          sx={{ textTransform: 'none' }}
        >
          <Trans>Cancel</Trans>
        </Button>
        <Button
          variant="contained"
          color="success"
          onClick={onConfirm}
          disabled={validContacts.length === 0}
          sx={{ textTransform: 'none' }}
        >
          {i18n._(msg`Import ${validContacts.length} contacts`)}
        </Button>
      </Box>
    </Box>
  );
};

export default ContactsImportPreview;