import { useState } from 'react'
import { Box, UnstyledButton, Group, Text } from '@mantine/core'
import { IconChevronDown, IconChevronRight } from '@tabler/icons-react'
import { WidgetRenderer } from './WidgetRenderer'
import type { SectionDef, QueryDef } from '../types'
import type { FilterValues } from '../hooks/useFilterState'

interface SectionProps {
  section: SectionDef
  queries: Record<string, QueryDef>
  filters: FilterValues
  globalColumns: number
  getData: (widgetID: string, filters: FilterValues) => Promise<Record<string, unknown>[]>
  fillHeight?: boolean
}

export function Section({ section, queries, filters, globalColumns, getData, fillHeight }: SectionProps) {
  const [collapsed, setCollapsed] = useState(false)
  const columns = section.columns || globalColumns

  return (
    <Box style={fillHeight ? { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', gap: 'var(--mantine-spacing-xs)' } : { display: 'flex', flexDirection: 'column', gap: 'var(--mantine-spacing-xs)' }}>
      <UnstyledButton
        onClick={() => section.collapsible && setCollapsed(c => !c)}
        style={{ flexShrink: 0, cursor: section.collapsible ? 'pointer' : 'default', userSelect: 'none' }}
      >
        <Group gap="xs">
          {section.collapsible && (
            collapsed
              ? <IconChevronRight size={16} style={{ color: 'var(--mantine-color-dimmed)' }} />
              : <IconChevronDown size={16} style={{ color: 'var(--mantine-color-dimmed)' }} />
          )}
          <Text size="xs" fw={500} c="dimmed" tt="uppercase" style={{ letterSpacing: '0.05em' }}>
            {section.title}
          </Text>
        </Group>
      </UnstyledButton>

      {!collapsed && (
        <Box
          style={{
            display: 'grid',
            gap: 'var(--mantine-spacing-xs)',
            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
            ...(fillHeight ? { flex: 1, minHeight: 0 } : {}),
          }}
        >
          {section.widgets.map(widget => (
            <Box
              key={widget.id}
              style={{
                gridColumn: `span ${Math.min(widget.span || 1, columns)}`,
                gridRow: widget.rowSpan ? `span ${widget.rowSpan}` : undefined,
                ...(fillHeight ? { minHeight: 0, overflow: 'hidden' } : {}),
              }}
            >
              <WidgetRenderer
                widget={widget}
                queryDef={queries[widget.query]}
                filters={filters}
                getData={getData}
              />
            </Box>
          ))}
        </Box>
      )}
    </Box>
  )
}