import { Card, Flex, Space, Typography, Button } from 'antd';
import { useThemeMode } from '../hooks/useThemeMode';
import { FilterBar } from './FilterBar';

interface PageContainerProps {
  title: string;
  subtitle?: string;
  filters?: React.ReactNode;
  onResetFilters?: () => void;
  filterExtra?: React.ReactNode;
  actions?: React.ReactNode;
  batchActions?: React.ReactNode;
  selectedCount?: number;
  onClearSelection?: () => void;
  onBack?: () => void;
  children: React.ReactNode;
  loading?: boolean;
}

export function PageContainer({
  title,
  subtitle,
  filters,
  onResetFilters,
  filterExtra,
  actions,
  batchActions,
  selectedCount,
  onClearSelection,
  onBack,
  children,
  loading,
}: PageContainerProps) {
  const isDark = useThemeMode();

  return (
    <div style={{ padding: 24 }}>
      <Flex justify="space-between" align="center" style={{ marginBottom: 16 }}>
        <div>
          <Typography.Title level={4} style={{ margin: 0 }}>
            {onBack && (
              <Button type="text" size="small" onClick={onBack} style={{ marginRight: 8 }}>
                ←
              </Button>
            )}
            {title}
          </Typography.Title>
          {subtitle && (
            <Typography.Text type="secondary" style={{ fontSize: 13 }}>
              {subtitle}
            </Typography.Text>
          )}
        </div>
        <Space>
          {selectedCount ? batchActions : actions}
          {selectedCount ? (
            <Button size="small" onClick={onClearSelection}>
              取消选择 ({selectedCount})
            </Button>
          ) : null}
        </Space>
      </Flex>

      {filters && (
        <FilterBar onReset={onResetFilters} extra={filterExtra}>
          {filters}
        </FilterBar>
      )}

      <Card
        styles={{ body: { padding: 0 } }}
        style={{ background: isDark ? '#141414' : '#fff' }}
        loading={loading}
      >
        {children}
      </Card>
    </div>
  );
}
