import React, {
  useEffect,
  useMemo,
  useRef,
  useState,
  useCallback,
} from 'react';
import API from '../../api';
import usePlaylistsStore from '../../store/playlists';
import M3UForm from '../forms/M3U';
import { TableHelper } from '../../helpers';
import {
  useMantineTheme,
  Paper,
  Button,
  Flex,
  Text,
  Box,
  ActionIcon,
  Tooltip,
  Switch,
  Group,
  Center,
} from '@mantine/core';
import {
  SquareMinus,
  SquarePen,
  RefreshCcw,
  ArrowUpDown,
  ArrowUpNarrowWide,
  ArrowDownWideNarrow,
  SquarePlus,
} from 'lucide-react';
import useLocalStorage from '../../hooks/useLocalStorage';
import {
  useDateTimeFormat,
  format,
  diff,
  getNow,
} from '../../utils/dateTimeUtils.js';
import ConfirmationDialog from '../../components/ConfirmationDialog';
import useWarningsStore from '../../store/warnings';
import { CustomTable, useTable } from './CustomTable';

// Helper function to format status text
const formatStatusText = (status) => {
  switch (status) {
    case 'idle':
      return 'Idle';
    case 'fetching':
      return 'Fetching';
    case 'parsing':
      return 'Parsing';
    case 'error':
      return 'Error';
    case 'success':
      return 'Success';
    case 'pending_setup':
      return 'Pending Setup';
    default:
      return status
        ? status.charAt(0).toUpperCase() + status.slice(1)
        : 'Unknown';
  }
};

// Helper function to get status text color
const getStatusColor = (status) => {
  switch (status) {
    case 'idle':
      return 'gray.5';
    case 'fetching':
      return 'blue.5';
    case 'parsing':
      return 'indigo.5';
    case 'error':
      return 'red.5';
    case 'success':
      return 'green.5';
    case 'pending_setup':
      return 'orange.5'; // Orange to indicate action needed
    default:
      return 'gray.5';
  }
};

const RowActions = ({
  tableSize,
  editPlaylist,
  deletePlaylist,
  row,
  refreshPlaylist,
}) => {
  const iconSize =
    tableSize == 'default' ? 'sm' : tableSize == 'compact' ? 'xs' : 'md';

  return (
    <>
      <ActionIcon
        variant="transparent"
        size={iconSize}
        color="yellow.5"
        onClick={() => {
          editPlaylist(row.original);
        }}
      >
        <SquarePen size={tableSize === 'compact' ? 16 : 18} />
      </ActionIcon>
      <ActionIcon
        variant="transparent"
        size={iconSize}
        color="red.9"
        onClick={() => deletePlaylist(row.original.id)}
      >
        <SquareMinus size={tableSize === 'compact' ? 16 : 18} />
      </ActionIcon>
      <ActionIcon
        variant="transparent"
        size={iconSize}
        color="blue.5"
        onClick={() => refreshPlaylist(row.original.id)}
        disabled={!row.original.is_active}
      >
        <RefreshCcw size={tableSize === 'compact' ? 16 : 18} />
      </ActionIcon>
    </>
  );
};

const M3UTable = () => {
  const [playlist, setPlaylist] = useState(null);
  const [playlistModalOpen, setPlaylistModalOpen] = useState(false);
  const [rowSelection, setRowSelection] = useState([]);
  const [playlistCreated, setPlaylistCreated] = useState(false);
  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState(null);
  const [playlistToDelete, setPlaylistToDelete] = useState(null);
  // Auto-created channel preview shown in the delete confirmation so the
  // user sees what cascades along with the account.
  const [autoChannelsInfo, setAutoChannelsInfo] = useState({
    count: 0,
    sample_names: [],
  });
  const [data, setData] = useState([]);
  const [sorting, setSorting] = useState([{ id: 'name', desc: '' }]);
  const [deleting, setDeleting] = useState(false);

  const playlists = usePlaylistsStore((s) => s.playlists);
  const refreshProgress = usePlaylistsStore((s) => s.refreshProgress);
  const setRefreshProgress = usePlaylistsStore((s) => s.setRefreshProgress);
  const editPlaylistId = usePlaylistsStore((s) => s.editPlaylistId);
  const setEditPlaylistId = usePlaylistsStore((s) => s.setEditPlaylistId);

  // Memoize data to prevent unnecessary re-renders during progress updates
  const processedData = useMemo(() => {
    return playlists
      .filter((playlist) => playlist.locked === false)
      .sort((a, b) => {
        // First sort by active status (active items first)
        if (a.is_active !== b.is_active) {
          return a.is_active ? -1 : 1;
        }
        // Then sort by name (case-insensitive)
        return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
      });
  }, [playlists]);

  const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed);
  const suppressWarning = useWarningsStore((s) => s.suppressWarning);

  const theme = useMantineTheme();
  const [tableSize] = useLocalStorage('table-size', 'default');
  const { fullDateFormat, fullDateTimeFormat } = useDateTimeFormat();

  const generateStatusString = (data) => {
    if (data.progress == 100) {
      return 'Idle';
    }

    switch (data.action) {
      case 'initializing':
        return buildInitializingStats();

      case 'downloading':
        return buildDownloadingStats(data);

      case 'processing_groups':
        return buildGroupProcessingStats(data);

      case 'parsing':
        return buildParsingStats(data);

      default:
        return data.status === 'error'
          ? buildErrorStats(data)
          : `${data.action || 'Processing'}...`;
    }
  };

  const buildDownloadingStats = (data) => {
    if (data.progress == 100) {
      return 'Download complete!';
    }

    if (data.progress == 0) {
      return 'Downloading...';
    }

    // Format time remaining in minutes:seconds
    const timeRemaining = data.time_remaining
      ? `${Math.floor(data.time_remaining / 60)}:${String(Math.floor(data.time_remaining % 60)).padStart(2, '0')}`
      : 'calculating...';

    // Format speed with appropriate unit (KB/s or MB/s)
    const speed =
      data.speed >= 1024
        ? `${(data.speed / 1024).toFixed(2)} MB/s`
        : `${Math.round(data.speed)} KB/s`;

    return (
      <Box>
        <Flex direction="column" gap={2}>
          <Flex justify="space-between" align="center">
            <Text size="xs" fw={500}>
              Downloading:
            </Text>
            <Text size="xs">{parseInt(data.progress)}%</Text>
          </Flex>
          <Flex justify="space-between" align="center">
            <Text size="xs" fw={500}>
              Speed:
            </Text>
            <Text size="xs">{speed}</Text>
          </Flex>
          <Flex justify="space-between" align="center">
            <Text size="xs" fw={500}>
              Time left:
            </Text>
            <Text size="xs">{timeRemaining}</Text>
          </Flex>
        </Flex>
      </Box>
    );
  };

  const buildGroupProcessingStats = (data) => {
    if (data.progress == 100) {
      return 'Groups processed!';
    }

    if (data.progress == 0) {
      return 'Processing groups...';
    }

    // Format time displays if available
    const elapsedTime = data.elapsed_time
      ? `${Math.floor(data.elapsed_time / 60)}:${String(Math.floor(data.elapsed_time % 60)).padStart(2, '0')}`
      : null;

    return (
      <Box>
        <Flex direction="column" gap={2}>
          <Flex justify="space-between" align="center">
            <Text size="xs" fw={500}>
              Processing groups:
            </Text>
            <Text size="xs">{parseInt(data.progress)}%</Text>
          </Flex>
          {elapsedTime && (
            <Flex justify="space-between" align="center">
              <Text size="xs" fw={500}>
                Elapsed:
              </Text>
              <Text size="xs">{elapsedTime}</Text>
            </Flex>
          )}
          {data.groups_processed && (
            <Flex justify="space-between" align="center">
              <Text size="xs" fw={500}>
                Groups:
              </Text>
              <Text size="xs">{data.groups_processed}</Text>
            </Flex>
          )}
        </Flex>
      </Box>
    );
  };

  const buildErrorStats = (data) => {
    return (
      <Box>
        <Flex direction="column" gap={2}>
          <Flex align="center">
            <Text size="xs" fw={500} color="red">
              Error:
            </Text>
          </Flex>
          <Text size="xs" color="red" style={{ lineHeight: 1.3 }}>
            {data.error || 'Unknown error occurred'}
          </Text>
        </Flex>
      </Box>
    );
  };

  const buildParsingStats = (data) => {
    if (data.progress == 100) {
      return 'Parsing complete!';
    }

    if (data.progress == 0) {
      return 'Parsing...';
    }

    // Format time displays
    const timeRemaining = data.time_remaining
      ? `${Math.floor(data.time_remaining / 60)}:${String(Math.floor(data.time_remaining % 60)).padStart(2, '0')}`
      : 'calculating...';

    const elapsedTime = data.elapsed_time
      ? `${Math.floor(data.elapsed_time / 60)}:${String(Math.floor(data.elapsed_time % 60)).padStart(2, '0')}`
      : '0:00';

    return (
      <Box>
        <Flex direction="column" gap={2}>
          <Flex justify="space-between" align="center">
            <Text size="xs" fw={500} style={{ width: '80px' }}>
              Parsing:
            </Text>
            <Text size="xs">{parseInt(data.progress)}%</Text>
          </Flex>
          {data.elapsed_time && (
            <Flex justify="space-between" align="center">
              <Text size="xs" fw={500} style={{ width: '80px' }}>
                Elapsed:
              </Text>
              <Text size="xs">{elapsedTime}</Text>
            </Flex>
          )}
          {data.time_remaining && (
            <Flex justify="space-between" align="center">
              <Text size="xs" fw={500} style={{ width: '60px' }}>
                Remaining:
              </Text>
              <Text size="xs">{timeRemaining}</Text>
            </Flex>
          )}
          {data.streams_processed && (
            <Flex justify="space-between" align="center">
              <Text size="xs" fw={500} style={{ width: '80px' }}>
                Streams:
              </Text>
              <Text size="xs">{data.streams_processed}</Text>
            </Flex>
          )}
        </Flex>
      </Box>
    );
  };

  const buildInitializingStats = () => {
    return (
      <Box>
        <Flex direction="column" gap={2}>
          <Flex align="center">
            <Text size="xs" fw={500}>
              Initializing refresh...
            </Text>
          </Flex>
        </Flex>
      </Box>
    );
  };

  const editPlaylist = async (playlist = null) => {
    setPlaylist(playlist);
    setPlaylistModalOpen(true);
  };

  const refreshPlaylist = async (id) => {
    // Provide immediate visual feedback before the API call
    setRefreshProgress(id, {
      action: 'initializing',
      progress: 0,
      account: id,
      type: 'm3u_refresh',
    });

    try {
      await API.refreshPlaylist(id);
      // No need to set again since WebSocket will update us once the task starts
    } catch (error) {
      // If the API call fails, show an error state
      setRefreshProgress(id, {
        action: 'error',
        progress: 0,
        account: id,
        type: 'm3u_refresh',
        error: 'Failed to start refresh task',
        status: 'error',
      });
    }
  };

  const deletePlaylist = async (id) => {
    // Get playlist details for the confirmation dialog
    const playlist = playlists.find((p) => p.id === id);
    setPlaylistToDelete(playlist);
    setDeleteTarget(id);

    // Fetch how many auto-created channels this playlist owns. Populates the
    // confirmation message so the user can decide whether to also delete
    // them. On failure, surface "unknown" so the user is not misled into
    // thinking there are zero auto-created channels.
    let info;
    try {
      const result = await API.getPlaylistAutoCreatedChannelsCount(id);
      info = result || { count: 0, sample_names: [] };
    } catch {
      info = {
        count: null,
        sample_names: [],
        countUnavailable: true,
      };
    }
    setAutoChannelsInfo(info);

    // Skip the warning when it has been suppressed AND the account has
    // no auto-created channels. When the account did create channels (or
    // the count could not be resolved), the dialog still opens so the
    // user sees and confirms what cascades.
    if (
      isWarningSuppressed('delete-m3u') &&
      info.count === 0 &&
      !info.countUnavailable
    ) {
      return executeDeletePlaylist(id);
    }

    setConfirmDeleteOpen(true);
  };

  const executeDeletePlaylist = async (id) => {
    setIsLoading(true);
    setDeleting(true);
    try {
      await API.deletePlaylist(id);
    } finally {
      setDeleting(false);
      setIsLoading(false);
      setConfirmDeleteOpen(false);
      setAutoChannelsInfo({ count: 0, sample_names: [] });
    }
  };

  const toggleActive = async (playlist) => {
    try {
      // Send only the is_active field to trigger our special handling
      await API.updatePlaylist(
        {
          id: playlist.id,
          is_active: !playlist.is_active,
        },
        true
      ); // Add a new parameter to indicate this is just a toggle
    } catch (error) {
      console.error('Error toggling active state:', error);
    }
  };

  const columns = useMemo(
    () => [
      {
        header: 'Name',
        accessorKey: 'name',
        size: 200,
        sortable: true,
      },
      {
        header: 'Type',
        accessorKey: 'account_type',
        sortable: true,
        size: 100,
        cell: ({ cell }) => {
          const value = cell.getValue();
          return value === 'XC' ? 'XC' : 'M3U';
        },
      },
      {
        header: 'URL / File',
        accessorKey: 'server_url',
        size: 250,
        cell: ({ cell, row }) => {
          const value = cell.getValue() || row.original.file_path || '';
          return (
            <Tooltip label={value} disabled={!value}>
              <div
                style={{
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  maxWidth: '100%',
                }}
              >
                {value}
              </div>
            </Tooltip>
          );
        },
      },
      {
        header: 'Status',
        accessorKey: 'status',
        size: 100,
        cell: ({ cell }) => {
          const value = cell.getValue();
          if (!value) return null;

          // Match EPG table styling with Text component - always use xs size
          return (
            <Text size="xs" c={getStatusColor(value)}>
              {formatStatusText(value)}
            </Text>
          );
        },
      },
      {
        header: 'Status Message',
        accessorKey: 'last_message',
        grow: true,
        minSize: 250,
        cell: ({ cell, row }) => {
          const value = cell.getValue();
          const data = row.original;

          // Get account id to check for refresh progress
          const accountId = data.id;
          const progressData = refreshProgress[accountId];

          // If we have active progress data for this account, show that instead
          if (progressData && progressData.progress < 100) {
            return (
              <Box
                style={{
                  // Use full height of the cell with proper spacing
                  height: '100%',
                  width: '100%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'flex-start',
                  // Add some padding to give content room to breathe
                  padding: '4px 0',
                }}
              >
                {generateStatusString(progressData)}
              </Box>
            );
          }

          // No progress data, display normal status message
          if (!value) return null;

          // Show error message with red styling for errors
          if (data.status === 'error') {
            return (
              <Tooltip label={value} multiline width={300}>
                <Text
                  c="dimmed"
                  size="xs"
                  lineClamp={2}
                  style={{ color: theme.colors.red[6], lineHeight: 1.3 }}
                >
                  {value}
                </Text>
              </Tooltip>
            );
          }

          // Show success message with green styling for success
          if (data.status === 'success') {
            return (
              <Tooltip label={value} multiline width={300}>
                <Text
                  c="dimmed"
                  size="xs"
                  style={{
                    color: theme.colors.green[6],
                    lineHeight: 1.3,
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                  }}
                >
                  {value}
                </Text>
              </Tooltip>
            );
          }

          // For all other status values, just use dimmed text
          return (
            <Tooltip label={value} multiline width={300}>
              <Text
                c="dimmed"
                size="xs"
                lineClamp={2}
                style={{ lineHeight: 1.1 }}
              >
                {value}
              </Text>
            </Tooltip>
          );
        },
      },
      {
        header: 'Max Streams',
        id: 'max_streams',
        accessorFn: (row) => {
          const activeProfiles = (row.profiles || []).filter(
            (p) => p.is_active
          );
          if (activeProfiles.length === 0) return row.max_streams;
          if (activeProfiles.some((p) => p.max_streams === 0)) return Infinity;
          return activeProfiles.reduce((sum, p) => sum + p.max_streams, 0);
        },
        sortable: true,
        size: 125,
        cell: ({ row }) => {
          const profiles = row.original.profiles || [];
          const activeProfiles = profiles.filter((p) => p.is_active);

          if (activeProfiles.length <= 1) {
            const val = row.original.max_streams;
            return <Text size="xs">{val === 0 ? '∞' : val}</Text>;
          }

          const hasUnlimited = activeProfiles.some((p) => p.max_streams === 0);
          const total = hasUnlimited
            ? null
            : activeProfiles.reduce((sum, p) => sum + p.max_streams, 0);

          const tooltipLines = activeProfiles
            .map(
              (p) =>
                `${p.name}: ${p.max_streams === 0 ? 'Unlimited' : p.max_streams}`
            )
            .join('\n');

          return (
            <Tooltip
              label={tooltipLines}
              multiline
              width={220}
              style={{ whiteSpace: 'pre-line' }}
            >
              <Text
                size="xs"
                style={{
                  cursor: 'default',
                  textDecoration: 'underline dotted',
                }}
              >
                {hasUnlimited ? '∞' : total}
              </Text>
            </Tooltip>
          );
        },
      },
      {
        header: 'Expiration',
        accessorKey: 'earliest_expiration',
        sortable: true,
        size: 110,
        cell: ({ cell, row }) => {
          const data = row.original;

          const earliest = cell.getValue();
          if (!earliest) {
            return null;
          }

          const now = getNow();
          const daysLeft = diff(earliest, now, 'day');
          let color;
          let label;
          if (daysLeft < 0) {
            color = 'red.7';
            label = 'Expired';
          } else if (daysLeft === 0) {
            color = 'red.5';
            label = 'Expires today';
          } else if (daysLeft <= 7) {
            color = 'orange.5';
            label = `${daysLeft}d left`;
          } else if (daysLeft <= 30) {
            color = 'yellow.5';
            label = `${daysLeft}d left`;
          } else {
            label = format(earliest, fullDateFormat);
          }

          const allExpirations = data.all_expirations || [];
          const tooltipContent =
            allExpirations.length > 0
              ? allExpirations
                  .map(
                    (e) =>
                      `${e.profile_name}: ${format(e.exp_date, fullDateTimeFormat)}${!e.is_active ? ' (inactive)' : ''}`
                  )
                  .join('\n')
              : label;

          return (
            <Tooltip
              label={tooltipContent}
              multiline
              width={300}
              style={{ whiteSpace: 'pre-line' }}
            >
              <Text size="xs" c={color} fw={daysLeft <= 7 ? 600 : 400}>
                {label}
              </Text>
            </Tooltip>
          );
        },
      },
      {
        header: 'Updated',
        accessorKey: 'updated_at',
        size: 175,
        cell: ({ cell }) => {
          const value = cell.getValue();
          if (!value) {
            return <Text size="xs">Never</Text>;
          }
          const formatted = format(value, fullDateTimeFormat);
          return <Text size="xs">{formatted}</Text>;
        },
      },
      {
        header: 'Active',
        accessorKey: 'is_active',
        size: 50,
        cell: ({ cell, row }) => {
          return (
            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
              <Switch
                size="xs"
                checked={cell.getValue()}
                onChange={() => toggleActive(row.original)}
              />
            </Box>
          );
        },
      },
      {
        id: 'actions',
        header: 'Actions',
        size: tableSize == 'compact' ? 75 : 100,
      },
    ],
    [
      refreshPlaylist,
      editPlaylist,
      deletePlaylist,
      toggleActive,
      fullDateFormat,
      fullDateTimeFormat,
    ]
  );

  //optionally access the underlying virtualizer instance
  const rowVirtualizerInstanceRef = useRef(null);

  const [isLoading, setIsLoading] = useState(true);

  const closeModal = (newPlaylist = null) => {
    if (newPlaylist) {
      setPlaylistCreated(true);
      setPlaylist(newPlaylist);
    } else {
      setPlaylistModalOpen(false);
      setPlaylist(null);
      setPlaylistCreated(false);
    }
  };

  useEffect(() => {
    //scroll to the top of the table when the sorting changes
    try {
      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
    } catch (error) {
      console.error(error);
    }
  }, [sorting]);

  // Listen for edit playlist requests from notifications
  useEffect(() => {
    setData(processedData);

    if (editPlaylistId) {
      const playlistToEdit = playlists.find((p) => p.id === editPlaylistId);
      if (playlistToEdit) {
        editPlaylist(playlistToEdit);
        // Reset the ID after handling
        setEditPlaylistId(null);
      }
    }
  }, [editPlaylistId, processedData, playlists, setEditPlaylistId]);

  const onSortingChange = (column) => {
    console.log(column);
    const sortField = sorting[0]?.id;
    const sortDirection = sorting[0]?.desc;

    const newSorting = [];
    if (sortField == column) {
      if (sortDirection == false) {
        newSorting[0] = {
          id: column,
          desc: true,
        };
      }
    } else {
      newSorting[0] = {
        id: column,
        desc: false,
      };
    }

    setSorting(newSorting);
    if (newSorting.length > 0) {
      const compareColumn = newSorting[0].id;
      const compareDesc = newSorting[0].desc;

      setData(
        playlists
          .filter((playlist) => playlist.locked === false)
          .sort((a, b) => {
            const aVal = a[compareColumn];
            const bVal = b[compareColumn];

            // Always sort nulls/undefined to the end regardless of direction
            if (aVal == null && bVal == null) return 0;
            if (aVal == null) return 1;
            if (bVal == null) return -1;

            let comparison;
            if (typeof aVal === 'string') {
              comparison = aVal.localeCompare(bVal);
            } else {
              comparison = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
            }

            return compareDesc ? -comparison : comparison;
          })
      );
    }
  };

  const renderHeaderCell = (header) => {
    let sortingIcon = ArrowUpDown;
    if (sorting[0]?.id == header.id) {
      if (sorting[0].desc === false) {
        sortingIcon = ArrowUpNarrowWide;
      } else {
        sortingIcon = ArrowDownWideNarrow;
      }
    }

    switch (header.id) {
      default:
        return (
          <Group>
            <Text size="sm" name={header.id}>
              {header.column.columnDef.header}
            </Text>
            {header.column.columnDef.sortable && (
              <Center>
                {React.createElement(sortingIcon, {
                  onClick: () => onSortingChange(header.id),
                  size: 14,
                })}
              </Center>
            )}
          </Group>
        );
    }
  };

  const renderBodyCell = useCallback(({ cell, row }) => {
    switch (cell.column.id) {
      case 'actions':
        return (
          <RowActions
            tableSize={tableSize}
            editPlaylist={editPlaylist}
            deletePlaylist={deletePlaylist}
            row={row}
            refreshPlaylist={refreshPlaylist}
          />
        );
    }
  }, []);

  const table = useTable({
    columns,
    // Sort data before passing to table: active first, then by name
    data,
    allRowIds: data.map((playlist) => playlist.id),
    enablePagination: false,
    enableRowVirtualization: true,
    enableRowSelection: false,
    onRowSelectionChange: setRowSelection,
    renderTopToolbar: false,
    sorting,
    manualSorting: true,
    rowVirtualizerInstanceRef, //optional
    rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
    bodyCellRenderFns: {
      actions: renderBodyCell,
    },
    headerCellRenderFns: {
      name: renderHeaderCell,
      account_type: renderHeaderCell,
      server_url: renderHeaderCell,
      max_streams: renderHeaderCell,
      status: renderHeaderCell,
      last_message: renderHeaderCell,
      updated_at: renderHeaderCell,
      earliest_expiration: renderHeaderCell,
      is_active: renderHeaderCell,
      actions: renderHeaderCell,
    },
    mantineTableContainerProps: {
      style: {
        height: 'calc(40vh - 10px)',
        overflowX: 'auto', // Ensure horizontal scrolling works
      },
    },
    mantineTableProps: {
      ...TableHelper.defaultProperties.mantineTableProps,
      className: `table-size-${tableSize}`,
    },
    // Add custom cell styles to match CustomTable's sizing
    tableCellProps: ({ cell }) => {
      return {
        fontSize:
          tableSize === 'compact'
            ? 'var(--mantine-font-size-xs)'
            : 'var(--mantine-font-size-sm)',
        padding: tableSize === 'compact' ? '2px 8px' : '4px 10px',
      };
    },
    // Additional text styling to match ChannelsTable
    tableBodyProps: () => ({
      fontSize:
        tableSize === 'compact'
          ? 'var(--mantine-font-size-xs)'
          : 'var(--mantine-font-size-sm)',
    }),
  });

  return (
    <Box>
      <Flex
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          paddingBottom: 10,
        }}
        gap={15}
      >
        <Text
          h={24}
          style={{
            fontFamily: 'Inter, sans-serif',
            fontWeight: 500,
            fontSize: '20px',
            lineHeight: 1,
            letterSpacing: '-0.3px',
            color: 'gray.6', // Adjust this to match MUI's theme.palette.text.secondary
            marginBottom: 0,
          }}
        >
          M3U Accounts
        </Text>
        <Button
          leftSection={<SquarePlus size={14} />}
          variant="light"
          size="xs"
          onClick={() => editPlaylist()}
          p={5}
          color="green"
          style={{
            borderWidth: '1px',
            borderColor: 'green',
            color: 'white',
          }}
        >
          Add M3U
        </Button>
      </Flex>

      <Paper
        style={{
          bgcolor: theme.palette.background.paper,
          borderRadius: 2,
        }}
      >
        {/* Top toolbar with Remove, Assign, Auto-match, and Add buttons */}
        <Box
          style={{
            display: 'flex',
            // alignItems: 'center',
            // backgroundColor: theme.palette.background.paper,
            justifyContent: 'flex-end',
            padding: 0,
            // gap: 1,
          }}
        ></Box>
      </Paper>

      <Box
        style={{
          display: 'flex',
          flexDirection: 'column',
          height: 'calc(40vh - 15px)',
        }}
      >
        <Box
          style={{
            flex: 1,
            overflowY: 'auto',
            overflowX: 'auto',
            border: 'solid 1px rgb(68,68,68)',
            borderRadius: 'var(--mantine-radius-default)',
          }}
        >
          <CustomTable table={table} />
        </Box>
      </Box>

      <M3UForm
        m3uAccount={playlist}
        isOpen={playlistModalOpen}
        onClose={closeModal}
        playlistCreated={playlistCreated}
      />

      <ConfirmationDialog
        opened={confirmDeleteOpen}
        onClose={() => setConfirmDeleteOpen(false)}
        onConfirm={() => executeDeletePlaylist(deleteTarget)}
        loading={deleting}
        title="Confirm M3U Account Deletion"
        message={
          playlistToDelete ? (
            <div>
              <div style={{ whiteSpace: 'pre-line', marginBottom: 12 }}>
                {`Delete the following M3U account?

Name: ${playlistToDelete.name}
Type: ${playlistToDelete.account_type === 'XC' ? 'Xtream Codes' : 'Standard'}
Server: ${playlistToDelete.server_url || 'Local file'}

Streams owned by this provider will be removed. Manual channels that include those streams will lose them, but the channels and any other streams on them survive.

This action cannot be undone.`}
              </div>
              {autoChannelsInfo.countUnavailable ? (
                <div
                  style={{
                    background: 'rgba(234,179,8,0.08)',
                    border: '1px solid rgba(234,179,8,0.3)',
                    borderRadius: 4,
                    padding: 10,
                    marginTop: 6,
                  }}
                >
                  <Text size="sm" fw={600}>
                    Auto-synced channel count is unavailable; any channels
                    auto-created by this provider will be deleted with the
                    account.
                  </Text>
                </div>
              ) : autoChannelsInfo.count > 0 ? (
                <div
                  style={{
                    background: 'rgba(234,179,8,0.08)',
                    border: '1px solid rgba(234,179,8,0.3)',
                    borderRadius: 4,
                    padding: 10,
                    marginTop: 6,
                  }}
                >
                  <Text size="sm" fw={600}>
                    {`${autoChannelsInfo.count} auto-synced channel${autoChannelsInfo.count === 1 ? '' : 's'} created by this provider will also be deleted.`}
                  </Text>
                </div>
              ) : null}
            </div>
          ) : (
            'Are you sure you want to delete this M3U account? This action cannot be undone.'
          )
        }
        confirmLabel="Delete"
        cancelLabel="Cancel"
        actionKey="delete-m3u"
        onSuppressChange={suppressWarning}
        size="lg"
      />
    </Box>
  );
};

export default M3UTable;
