import { useEffect, useMemo, useState } from 'react'
import {
  ActivityIndicator,
  Dimensions,
  FlatList,
  Modal,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native'
import Ionicons from '@expo/vector-icons/Ionicons'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { api } from '../../src/lib/api'
import type { CatalogFilters, Genre, Release, ValueDescription } from '../../src/lib/types'
import { colors, radius, spacing } from '../../src/lib/theme'
import AnimeCard from '../../src/components/AnimeCard'
import Loader from '../../src/components/Loader'
import Chip from '../../src/components/Chip'

type SortOpt = ValueDescription & { label: string }

const LIMIT = 24
const DEFAULT_SORTING = 'FRESH_AT_DESC'

function getColumns() {
  const width = Dimensions.get('window').width
  return Math.max(2, Math.floor(width / 180))
}

export default function CatalogScreen() {
  const insets = useSafeAreaInsets()
  const router = useRouter()

  const [columns, setColumns] = useState(getColumns)
  useEffect(() => {
    const sub = Dimensions.addEventListener('change', () => setColumns(getColumns()))
    return () => sub.remove()
  }, [])

  const [query, setQuery] = useState('')
  const [debouncedQuery, setDebouncedQuery] = useState('')
  useEffect(() => {
    const t = setTimeout(() => setDebouncedQuery(query.trim()), 400)
    return () => clearTimeout(t)
  }, [query])
  const isSearching = debouncedQuery.length > 0

  const [refGenres, setRefGenres] = useState<Genre[]>([])
  const [refTypes, setRefTypes] = useState<ValueDescription[]>([])
  const [refSeasons, setRefSeasons] = useState<ValueDescription[]>([])
  const [refSorting, setRefSorting] = useState<SortOpt[]>([])

  useEffect(() => {
    api.refGenres().then(setRefGenres).catch(() => {})
    api.refTypes().then(setRefTypes).catch(() => {})
    api.refSeasons().then(setRefSeasons).catch(() => {})
    api.refSorting().then(setRefSorting).catch(() => {})
  }, [])

  const [sorting, setSorting] = useState(DEFAULT_SORTING)
  const [selectedGenres, setSelectedGenres] = useState<number[]>([])
  const [selectedTypes, setSelectedTypes] = useState<string[]>([])
  const [selectedSeasons, setSelectedSeasons] = useState<string[]>([])

  const [filtersVisible, setFiltersVisible] = useState(false)
  const [draftSorting, setDraftSorting] = useState(DEFAULT_SORTING)
  const [draftGenres, setDraftGenres] = useState<number[]>([])
  const [draftTypes, setDraftTypes] = useState<string[]>([])
  const [draftSeasons, setDraftSeasons] = useState<string[]>([])

  function openFilters() {
    setDraftSorting(sorting)
    setDraftGenres(selectedGenres)
    setDraftTypes(selectedTypes)
    setDraftSeasons(selectedSeasons)
    setFiltersVisible(true)
  }

  function applyFilters() {
    setSorting(draftSorting)
    setSelectedGenres(draftGenres)
    setSelectedTypes(draftTypes)
    setSelectedSeasons(draftSeasons)
    setFiltersVisible(false)
  }

  function resetFilters() {
    setDraftSorting(DEFAULT_SORTING)
    setDraftGenres([])
    setDraftTypes([])
    setDraftSeasons([])
    setSorting(DEFAULT_SORTING)
    setSelectedGenres([])
    setSelectedTypes([])
    setSelectedSeasons([])
    setFiltersVisible(false)
  }

  function toggleDraftGenre(id: number) {
    setDraftGenres((prev) => (prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]))
  }
  function toggleDraftType(value: string) {
    setDraftTypes((prev) => (prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]))
  }
  function toggleDraftSeason(value: string) {
    setDraftSeasons((prev) => (prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]))
  }

  const activeFilterCount = selectedGenres.length + selectedTypes.length + selectedSeasons.length

  const filters: CatalogFilters = useMemo(
    () => ({
      genres: selectedGenres.length ? selectedGenres : undefined,
      types: selectedTypes.length ? selectedTypes : undefined,
      seasons: selectedSeasons.length ? selectedSeasons : undefined,
      sorting,
    }),
    [selectedGenres, selectedTypes, selectedSeasons, sorting]
  )

  const [results, setResults] = useState<Release[] | null>(null)
  const [loading, setLoading] = useState(true)
  const [loadingMore, setLoadingMore] = useState(false)
  const [page, setPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)

  useEffect(() => {
    let cancelled = false
    setLoading(true)
    setResults(null)
    setPage(1)

    if (isSearching) {
      api
        .search(debouncedQuery)
        .then((data) => {
          if (cancelled) return
          setResults(data)
          setTotalPages(1)
        })
        .catch(() => {
          if (!cancelled) setResults([])
        })
        .finally(() => {
          if (!cancelled) setLoading(false)
        })
    } else {
      api
        .catalog(filters, 1, LIMIT)
        .then((res) => {
          if (cancelled) return
          setResults(res.data)
          setTotalPages(res.meta.pagination.total_pages)
        })
        .catch(() => {
          if (!cancelled) setResults([])
        })
        .finally(() => {
          if (!cancelled) setLoading(false)
        })
    }

    return () => {
      cancelled = true
    }
  }, [filters, isSearching, debouncedQuery])

  function loadMore() {
    if (isSearching || loading || loadingMore || page >= totalPages) return
    const nextPage = page + 1
    setLoadingMore(true)
    api
      .catalog(filters, nextPage, LIMIT)
      .then((res) => {
        setResults((prev) => (prev ? [...prev, ...res.data] : res.data))
        setPage(nextPage)
        setTotalPages(res.meta.pagination.total_pages)
      })
      .catch(() => {})
      .finally(() => setLoadingMore(false))
  }

  const paddedResults = useMemo(() => {
    if (!results) return []
    const remainder = results.length % columns
    if (remainder === 0) return results
    return [...results, ...Array(columns - remainder).fill(null)]
  }, [results, columns])

  return (
    <View style={[styles.root, { paddingTop: insets.top }]}>
      <Text style={styles.headerTitle}>{isSearching ? `Поиск: "${debouncedQuery}"` : 'Каталог'}</Text>

      <View style={styles.searchRow}>
        <View style={styles.searchBox}>
          <Ionicons name="search" size={16} color={colors.textFaint} />
          <TextInput
            value={query}
            onChangeText={setQuery}
            placeholder="Поиск аниме..."
            placeholderTextColor={colors.textFaint}
            style={styles.searchInput}
            autoCapitalize="none"
            autoCorrect={false}
            returnKeyType="search"
          />
          {query.length > 0 && (
            <Pressable hitSlop={8} onPress={() => setQuery('')}>
              <Ionicons name="close-circle" size={16} color={colors.textFaint} />
            </Pressable>
          )}
        </View>

        {!isSearching && (
          <Pressable style={styles.filterButton} onPress={openFilters}>
            <Ionicons name="options" size={18} color={colors.text} />
            <Text style={styles.filterButtonText}>Фильтры</Text>
            {activeFilterCount > 0 && (
              <View style={styles.filterBadge}>
                <Text style={styles.filterBadgeText}>{activeFilterCount}</Text>
              </View>
            )}
          </Pressable>
        )}
      </View>

      {loading ? (
        <Loader label="Загрузка..." />
      ) : results && results.length === 0 ? (
        <View style={styles.emptyWrap}>
          <Ionicons name="file-tray-outline" size={40} color={colors.textFaint} />
          <Text style={styles.emptyText}>Ничего не найдено</Text>
        </View>
      ) : (
        <FlatList
          key={`grid-${columns}`}
          data={paddedResults}
          keyExtractor={(item, index) => (item ? String(item.id) : `filler-${index}`)}
          numColumns={columns}
          columnWrapperStyle={styles.row}
          contentContainerStyle={[styles.listContent, { paddingBottom: insets.bottom + spacing(6) }]}
          showsVerticalScrollIndicator={false}
          keyboardShouldPersistTaps="handled"
          keyboardDismissMode="on-drag"
          onEndReachedThreshold={0.4}
          onEndReached={loadMore}
          renderItem={({ item }) => (
            <View style={styles.cardCell}>
              {item && (
                <AnimeCard release={item} onPress={() => router.push(`/title/${item.alias || item.id}`)} />
              )}
            </View>
          )}
          ListFooterComponent={
            loadingMore ? (
              <View style={styles.footerLoader}>
                <ActivityIndicator color={colors.accent} />
              </View>
            ) : (
              <View style={{ height: spacing(4) }} />
            )
          }
        />
      )}

      <Modal
        visible={filtersVisible}
        transparent
        animationType="slide"
        onRequestClose={() => setFiltersVisible(false)}
      >
        <View style={styles.modalOverlay}>
          <Pressable style={StyleSheet.absoluteFill} onPress={() => setFiltersVisible(false)} />
          <View style={[styles.sheet, { paddingBottom: insets.bottom + spacing(4) }]}>
            <View style={styles.sheetHandle} />
            <View style={styles.sheetHeader}>
              <Text style={styles.sheetTitle}>Фильтры</Text>
              <Pressable hitSlop={8} onPress={() => setFiltersVisible(false)}>
                <Ionicons name="close" size={22} color={colors.textDim} />
              </Pressable>
            </View>

            <ScrollView style={styles.sheetBody} showsVerticalScrollIndicator={false}>
              <FilterSection title="Сортировка">
                <View style={styles.chipsWrap}>
                  {refSorting.map((s) => (
                    <Pressable key={s.value} onPress={() => setDraftSorting(s.value)}>
                      <Chip accent={draftSorting === s.value}>{s.label}</Chip>
                    </Pressable>
                  ))}
                </View>
              </FilterSection>

              <FilterSection title="Тип">
                <View style={styles.chipsWrap}>
                  {refTypes.map((t) => (
                    <Pressable key={t.value} onPress={() => toggleDraftType(t.value)}>
                      <Chip accent={draftTypes.includes(t.value)}>{t.description}</Chip>
                    </Pressable>
                  ))}
                </View>
              </FilterSection>

              <FilterSection title="Сезон">
                <View style={styles.chipsWrap}>
                  {refSeasons.map((s) => (
                    <Pressable key={s.value} onPress={() => toggleDraftSeason(s.value)}>
                      <Chip accent={draftSeasons.includes(s.value)}>{s.description}</Chip>
                    </Pressable>
                  ))}
                </View>
              </FilterSection>

              <FilterSection title="Жанры">
                <View style={styles.chipsWrap}>
                  {refGenres.map((g) => (
                    <Pressable key={g.id} onPress={() => toggleDraftGenre(g.id)}>
                      <Chip accent={draftGenres.includes(g.id)}>{g.name}</Chip>
                    </Pressable>
                  ))}
                </View>
              </FilterSection>
            </ScrollView>

            <View style={styles.sheetFooter}>
              <Pressable style={styles.resetButton} onPress={resetFilters}>
                <Text style={styles.resetButtonText}>Сбросить</Text>
              </Pressable>
              <Pressable style={styles.applyButton} onPress={applyFilters}>
                <Text style={styles.applyButtonText}>Применить</Text>
              </Pressable>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  )
}

function FilterSection({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <View style={styles.filterSection}>
      <Text style={styles.filterSectionTitle}>{title}</Text>
      {children}
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: colors.background,
  },
  headerTitle: {
    color: colors.text,
    fontSize: 24,
    fontWeight: '800',
    paddingHorizontal: spacing(4),
    paddingTop: spacing(3),
  },
  searchRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing(2),
    paddingHorizontal: spacing(4),
    paddingTop: spacing(3),
    paddingBottom: spacing(2),
  },
  searchBox: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing(2),
    backgroundColor: colors.surfaceRaised,
    borderRadius: radius.full,
    paddingHorizontal: spacing(3),
    height: 40,
  },
  searchInput: {
    flex: 1,
    color: colors.text,
    fontSize: 14,
    padding: 0,
  },
  filterButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing(1),
    backgroundColor: colors.surfaceRaised,
    borderRadius: radius.full,
    paddingHorizontal: spacing(3),
    height: 40,
  },
  filterButtonText: {
    color: colors.text,
    fontSize: 13,
    fontWeight: '600',
  },
  filterBadge: {
    backgroundColor: colors.accent,
    borderRadius: radius.full,
    minWidth: 18,
    height: 18,
    paddingHorizontal: spacing(1),
    alignItems: 'center',
    justifyContent: 'center',
  },
  filterBadgeText: {
    color: colors.text,
    fontSize: 10,
    fontWeight: '700',
  },
  emptyWrap: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: spacing(3),
    paddingBottom: spacing(24),
  },
  emptyText: {
    color: colors.textFaint,
    fontSize: 14,
  },
  listContent: {
    paddingHorizontal: spacing(4),
    paddingTop: spacing(2),
    gap: spacing(4),
  },
  row: {
    gap: spacing(3),
  },
  cardCell: {
    flex: 1,
  },
  footerLoader: {
    paddingVertical: spacing(6),
    alignItems: 'center',
  },
  modalOverlay: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: colors.overlay,
  },
  sheet: {
    backgroundColor: colors.surface,
    borderTopLeftRadius: radius.lg,
    borderTopRightRadius: radius.lg,
    maxHeight: '85%',
    paddingHorizontal: spacing(4),
  },
  sheetHandle: {
    width: 36,
    height: 4,
    borderRadius: radius.full,
    backgroundColor: colors.border,
    alignSelf: 'center',
    marginTop: spacing(2),
  },
  sheetHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: spacing(3),
  },
  sheetTitle: {
    color: colors.text,
    fontSize: 18,
    fontWeight: '700',
  },
  sheetBody: {
    marginBottom: spacing(2),
  },
  filterSection: {
    marginBottom: spacing(4),
  },
  filterSectionTitle: {
    color: colors.textFaint,
    fontSize: 12,
    fontWeight: '700',
    textTransform: 'uppercase',
    marginBottom: spacing(2),
  },
  chipsWrap: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: spacing(2),
  },
  sheetFooter: {
    flexDirection: 'row',
    gap: spacing(3),
    paddingTop: spacing(3),
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: colors.border,
  },
  resetButton: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 46,
    borderRadius: radius.md,
    backgroundColor: colors.surfaceRaised,
  },
  resetButtonText: {
    color: colors.textDim,
    fontSize: 14,
    fontWeight: '700',
  },
  applyButton: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 46,
    borderRadius: radius.md,
    backgroundColor: colors.accent,
  },
  applyButtonText: {
    color: colors.text,
    fontSize: 14,
    fontWeight: '700',
  },
})