import styled from 'styled-components';
import { Card, type CardProps } from '@/shared/components/ui/Card/Card';

/** Elevated shell for data tables — separates table from page background */
export const TableWrap = styled(Card).attrs<Partial<CardProps>>({
  variant: 'elevated',
  padding: 'none',
})`
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
`;

/** Filter/action row above admin tables */
export const AdminListToolbar = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: ${({ theme }) => theme.layout.toolbarGap};
  margin-bottom: ${({ theme }) => theme.layout.cardGap};
`;

export const Table = styled.table`
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
`;

export const Th = styled.th`
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: start;
  padding: ${({ theme }) => theme.layout.table.headerPadding};
  font-size: ${({ theme }) => theme.typography.fontSize.xs};
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  letter-spacing: ${({ theme }) => theme.typography.letterSpacing.wider};
  text-transform: uppercase;
  color: ${({ theme }) => theme.colors.text.tertiary};
  background-color: ${({ theme }) => theme.colors.surface};
  border-bottom: 1px solid ${({ theme }) => theme.colors.borderSoft};
  white-space: nowrap;
`;

export const Td = styled.td`
  padding: ${({ theme }) => theme.layout.table.rowPadding};
  border-bottom: 1px solid ${({ theme }) => theme.colors.borderSoft};
  text-align: start;
  color: ${({ theme }) => theme.colors.text.primary};
  vertical-align: middle;
  line-height: ${({ theme }) => theme.typography.lineHeight.relaxed};
`;

export const Tr = styled.tr`
  transition: background-color ${({ theme }) => theme.transitions.fast};

  &:hover td {
    background-color: ${({ theme }) => theme.colors.surfaceMuted};
  }

  &:last-child td {
    border-bottom: none;
  }
`;

export const TableToolbar = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: ${({ theme }) => theme.layout.toolbarGap};
  padding: ${({ theme }) => theme.layout.table.toolbarPadding};
  border-bottom: 1px solid ${({ theme }) => theme.colors.borderSoft};
`;

export const TablePagination = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: ${({ theme }) => theme.layout.toolbarGap};
  padding: ${({ theme }) => theme.layout.table.toolbarPadding};
  border-top: 1px solid ${({ theme }) => theme.colors.borderSoft};
  background-color: ${({ theme }) => theme.colors.surfaceInset};
`;

/** Card shell for admin list pages (loading, empty, errors) */
export const AdminPanel = styled(Card).attrs({
  variant: 'elevated',
  padding: 'lg',
})``;

export const TdMuted = styled(Td)`
  color: ${({ theme }) => theme.colors.text.secondary};
  font-size: ${({ theme }) => theme.typography.fontSize.xs};
`;

export const ActionsTh = styled(Th)`
  text-align: end;
  width: 7.5rem;
`;

export const ActionsTd = styled(Td)`
  text-align: end;
  white-space: nowrap;
`;