import { createFileRoute } from '@tanstack/react-router'
import { useState } from 'react'
import { m } from '@/i18n/messages'
import { useLocale } from '@/i18n/config'
import { asI18n } from '@pikku/react'
import {
  Badge,
  Container,
  Group,
  Paper,
  Stack,
  Text,
  TextInput,
} from '@pikku/mantine/core'
import { usePikkuQuery } from '@project/functions-sdk/pikku/api.gen'
import { MarketingShell } from '../components/MarketingShell'
import { EventCard } from '../components/EventCard'
import { PageTitle } from '../components/AppLayout'

type Filter = 'this_year' | 'next_year' | 'all'

function FilterChip({
  active,
  children,
  onClick,
}: {
  active: boolean
  children: React.ReactNode
  onClick: () => void
}) {
  return (
    <Badge
      variant={active ? 'filled' : 'light'}
      color={active ? 'plum' : 'gray'}
      style={{ cursor: 'pointer', textTransform: 'none' }}
      onClick={onClick}
    >
      {asI18n(`${children}`)}
    </Badge>
  )
}

function EventsPage() {
  useLocale()
  const [filter, setFilter] = useState<Filter>('all')
  const [search, setSearch] = useState('')

  const { data, isLoading, error } = usePikkuQuery('getEventsListing', {
    venueSlug: 'drawehn',
    filter,
    search: search.trim() || undefined,
  })

  if (isLoading) return <MarketingShell><Container py="xl"><Text>{m.common_states_loading()}</Text></Container></MarketingShell>
  if (error) return <MarketingShell><Container py="xl"><Text c="red">{m.common_states_error()}</Text></Container></MarketingShell>
  if (!data) return null

  return (
    <MarketingShell>
    <Container size="lg" py="xl">
      <Stack gap="lg">
        <PageTitle title={m.common_pages_events_title()} />
        <Paper withBorder radius="md" p="md">
          <Stack gap="md">
            <TextInput
              placeholder={m.common_pages_events_search_placeholder()}
              value={search}
              onChange={(e) => setSearch(e.currentTarget.value)}
            />
            <Group gap="xs">
              <FilterChip active={filter === 'this_year'} onClick={() => setFilter('this_year')}>
                {m.common_pages_events_filters_this_year()}
              </FilterChip>
              <FilterChip active={filter === 'next_year'} onClick={() => setFilter('next_year')}>
                {m.common_pages_events_filters_next_year()}
              </FilterChip>
              <FilterChip active={filter === 'all'} onClick={() => setFilter('all')}>
                {m.common_pages_events_filters_all()}
              </FilterChip>
            </Group>
          </Stack>
        </Paper>

        {data.events.length === 0 ? (
          <Paper withBorder radius="md" p="xl">
            <Text size="sm" c="dimmed" ta="center">{m.common_pages_events_empty()}</Text>
          </Paper>
        ) : (
          <Stack gap="md">
            {data.events.map((e) => (
              <EventCard
                key={e.bookingId}
                eventName={e.eventName}
                startDate={e.startDate}
                endDate={e.endDate}
                clientName={e.clientName}
                coverImageUrl={e.coverImageUrl}
                eventOutline={e.eventOutline}
                description={e.description}
                organiserWebsite={e.organiserWebsite}
              />
            ))}
          </Stack>
        )}
      </Stack>
    </Container>
    </MarketingShell>
  )
}

export const Route = createFileRoute('/events')({
  component: EventsPage,
})