'use client';

import React from 'react';
import RouterLink from 'next/link';
import {
  Box,
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
  TableSortLabel,
  Tooltip,
  Typography,
  useTheme,
} from '@mui/material';
import { AppLoader } from '@/components/core/app-loader';
import {
  Delete as DeleteIcon,
  Edit as EditIcon,
  Mail as MailIcon,
  Visibility as VisibilityIcon,
} from '@mui/icons-material';

import { paths } from '@/paths';

import {
  type Newsletter,
  type NewslettersPagination,
} from '@/services/newsletter.service';

interface NewslettersTableProps {
  newsletters: Newsletter[];
  pagination?: NewslettersPagination;
  loading?: boolean;
  onPageChange: (page: number) => void;
  onRowsPerPageChange: (rowsPerPage: number) => void;
  onSort: (field: string, direction: 'asc' | 'desc') => void;
  currentSort: {
    sortBy: string;
    sortOrder: 'asc' | 'desc';
  };
  onEdit: (newsletter: Newsletter) => void;
  onDelete: (newsletter: Newsletter) => void;
}

interface Column {
  id: keyof Newsletter | 'actions' | 'sentBy' | 'delivery';
  label: string;
  minWidth?: number;
  sortable?: boolean;
}

const columns: Column[] = [
  { id: 'title', label: 'Title', minWidth: 200, sortable: true },
  { id: 'subject', label: 'Subject', minWidth: 200, sortable: true },
  { id: 'sentBy', label: 'Sent By', minWidth: 160, sortable: false },
  { id: 'delivery', label: 'Delivery', minWidth: 120, sortable: false },
  { id: 'createdAt', label: 'Created', minWidth: 140, sortable: true },
  { id: 'actions', label: 'Actions', minWidth: 130, sortable: false },
];

function formatDate(dateString?: string): string {
  if (!dateString) return '—';
  try {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    });
  } catch {
    return '—';
  }
}

function SentByCell({ newsletter }: { newsletter: Newsletter }) {
  if (!newsletter.sentBy) {
    return (
      <Typography variant="body2" color="text.secondary">
        —
      </Typography>
    );
  }

  return (
    <Box>
      <Typography variant="body2" fontWeight={600}>
        {newsletter.sentBy.fullName}
      </Typography>
      <Typography variant="caption" color="text.secondary">
        {newsletter.sentBy.emailAddress}
      </Typography>
    </Box>
  );
}

function DeliveryCell({ newsletter }: { newsletter: Newsletter }) {
  if (newsletter.emailsSent === undefined && newsletter.recipientsCount === undefined) {
    return (
      <Typography variant="body2" color="text.secondary">
        —
      </Typography>
    );
  }

  const sent = newsletter.emailsSent ?? 0;
  const total = newsletter.recipientsCount ?? sent;
  const failed = newsletter.emailsFailed ?? 0;

  return (
    <Box>
      <Typography variant="body2">
        {sent}/{total} sent
      </Typography>
      {failed > 0 && (
        <Typography variant="caption" color="error">
          {failed} failed
        </Typography>
      )}
    </Box>
  );
}

export function NewslettersTable({
  newsletters,
  pagination,
  loading = false,
  onPageChange,
  onRowsPerPageChange,
  onSort,
  currentSort,
  onEdit,
  onDelete,
}: NewslettersTableProps): React.JSX.Element {
  const theme = useTheme();

  const handleSort = (columnId: string) => {
    if (columnId === currentSort.sortBy) {
      onSort(columnId, currentSort.sortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      onSort(columnId, 'desc');
    }
  };

  const handleChangePage = (_event: unknown, newPage: number) => {
    onPageChange(newPage + 1);
  };

  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
    onRowsPerPageChange(parseInt(event.target.value, 10));
  };

  if (loading && newsletters.length === 0) {
    return (
      <Paper sx={{ position: 'relative', width: '100%', minHeight: 400, overflow: 'hidden' }}>
        <AppLoader fill size="lg" />
      </Paper>
    );
  }

  return (
    <Paper sx={{ width: '100%', overflow: 'hidden' }}>
      <TableContainer sx={{ maxHeight: 600 }}>
        <Table stickyHeader>
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell
                  key={column.id}
                  style={{ minWidth: column.minWidth }}
                  sx={{
                    backgroundColor: theme.palette.grey[50],
                    fontWeight: 600,
                  }}
                >
                  {column.sortable ? (
                    <TableSortLabel
                      active={currentSort.sortBy === column.id}
                      direction={
                        currentSort.sortBy === column.id ? currentSort.sortOrder : 'desc'
                      }
                      onClick={() => handleSort(column.id as string)}
                    >
                      {column.label}
                    </TableSortLabel>
                  ) : (
                    column.label
                  )}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {newsletters.length === 0 && !loading ? (
              <TableRow>
                <TableCell colSpan={columns.length} align="center" sx={{ py: 6 }}>
                  <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
                    <MailIcon sx={{ fontSize: 48, color: 'text.disabled' }} />
                    <Typography variant="body1" color="text.secondary">
                      No newsletters created yet
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      Click &quot;Create Newsletter&quot; to get started
                    </Typography>
                  </Box>
                </TableCell>
              </TableRow>
            ) : (
              newsletters.map((newsletter) => (
                <TableRow hover key={newsletter._id}>
                  <TableCell>
                    <Typography variant="subtitle2" fontWeight={600}>
                      {newsletter.title}
                    </Typography>
                  </TableCell>
                  <TableCell>
                    <Typography variant="body2" noWrap>
                      {newsletter.subject}
                    </Typography>
                  </TableCell>
                  <TableCell>
                    <SentByCell newsletter={newsletter} />
                  </TableCell>
                  <TableCell>
                    <DeliveryCell newsletter={newsletter} />
                  </TableCell>
                  <TableCell>
                    <Typography variant="body2">{formatDate(newsletter.createdAt)}</Typography>
                  </TableCell>
                  <TableCell>
                    <Box sx={{ display: 'flex', gap: 0.5 }}>
                      <Tooltip title="View newsletter">
                        <IconButton
                          component={RouterLink}
                          href={`${paths.dashboard.newsletterNewsletters}/${newsletter._id}`}
                          size="small"
                          color="primary"
                        >
                          <VisibilityIcon fontSize="small" />
                        </IconButton>
                      </Tooltip>
                      <Tooltip title="Edit newsletter">
                        <IconButton size="small" onClick={() => onEdit(newsletter)}>
                          <EditIcon fontSize="small" />
                        </IconButton>
                      </Tooltip>
                      <Tooltip title="Delete newsletter">
                        <IconButton size="small" color="error" onClick={() => onDelete(newsletter)}>
                          <DeleteIcon fontSize="small" />
                        </IconButton>
                      </Tooltip>
                    </Box>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </TableContainer>

      {pagination && (
        <TablePagination
          rowsPerPageOptions={[5, 10, 25, 50]}
          component="div"
          count={pagination.totalCount}
          rowsPerPage={pagination.limit}
          page={(pagination.currentPage || 1) - 1}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
          labelRowsPerPage="Rows per page:"
          sx={{
            borderTop: `1px solid ${theme.palette.divider}`,
          }}
        />
      )}
    </Paper>
  );
}