import { useMemo, useState } from 'react';
import { router } from 'expo-router';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { Alert, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import type { ListingKind } from '@navi/types';
import { DestinationCard, FilterChip, ListingCard } from '../../src/components/cards/CatalogCard';
import { NaviHeader } from '../../src/components/layout/NaviHeader';
import { SectionHeader } from '../../src/components/layout/SectionHeader';
import { PrimaryButton } from '../../src/components/PrimaryButton';
import { Screen } from '../../src/components/Screen';
import { StateView } from '../../src/components/StateView';
import { api } from '../../src/api/client';
import { useAuth } from '../../src/state/auth';
import { useLocale } from '../../src/state/locale';
import { color, radius, spacing, typography } from '../../src/theme';

const FILTERS: Array<{ labelKey: string; kind: ListingKind | 'ALL' }> = [
  { labelKey: 'discover.filterAll', kind: 'ALL' },
  { labelKey: 'discover.filterStays', kind: 'STAY' },
  { labelKey: 'discover.filterActivities', kind: 'ACTIVITY' },
  { labelKey: 'discover.filterFood', kind: 'RESTAURANT' },
  { labelKey: 'discover.filterSim', kind: 'SIM_PLAN' },
];

export default function Discover() {
  const { t } = useTranslation();
  const locale = useLocale((s) => s.locale);
  const user = useAuth((s) => s.user);
  const queryClient = useQueryClient();
  const [query, setQuery] = useState('');
  const [activeKind, setActiveKind] = useState<ListingKind | 'ALL'>('ALL');

  const search = useQuery({
    queryKey: ['discover', 'search', query.trim(), activeKind],
    queryFn: () =>
      api.search.search({
        q: query.trim() || undefined,
        kind: activeKind === 'ALL' ? undefined : activeKind,
        limit: 30,
      }),
  });
  const saved = useQuery({
    queryKey: ['saved'],
    queryFn: () => api.saved.list(),
    enabled: !!user,
  });

  const savedListingIds = useMemo(
    () => new Set((saved.data ?? []).filter((item) => item.refType === 'LISTING').map((item) => item.refId)),
    [saved.data],
  );

  const visible = search.data?.listings ?? [];
  const destinations = search.data?.destinations ?? [];

  const toggleSave = useMutation({
    mutationFn: async (listingId: string) => {
      if (!user) {
        Alert.alert(t('discover.signInRequired'), t('discover.signInToSave'));
        router.push('/(auth)/login');
        return;
      }
      if (savedListingIds.has(listingId)) {
        await api.saved.remove('LISTING', listingId);
      } else {
        await api.saved.add('LISTING', listingId);
      }
    },
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['saved'] }),
  });

  return (
    <Screen>
      <NaviHeader variant="center" title={t('discover.title')} />
      <Text style={styles.h1}>{t('discover.title')}</Text>
      <Text style={styles.sub}>{t('discover.subtitle')}</Text>

      <TextInput
        value={query}
        onChangeText={setQuery}
        placeholder={t('discover.searchPlaceholder')}
        autoCorrect={false}
        returnKeyType="search"
        style={styles.search}
      />

      {(search.data?.suggestions ?? []).length ? (
        <View style={styles.suggestions}>
          {(search.data?.suggestions ?? []).map((suggestion) => (
            <Pressable
              key={suggestion.id}
              style={styles.suggestionPill}
              accessibilityRole="button"
              onPress={() => {
                void api.engagement.track({
                  eventType: 'search.suggestion_clicked',
                  screen: 'discover',
                  entityType: suggestion.kind,
                  entityId: suggestion.entityId ?? undefined,
                  query: query.trim() || undefined,
                  metadata: { label: suggestion.label, reason: suggestion.reason },
                }).catch(() => undefined);
                if (suggestion.kind === 'LISTING' && suggestion.entityId) {
                  router.push(`/listing/${suggestion.entityId}`);
                } else {
                  setQuery(suggestion.label.replace(/^Search for "(.+)"$/, '$1'));
                }
              }}
            >
              <Text style={styles.suggestionText}>{suggestion.label}</Text>
              <Text style={styles.suggestionReason}>{suggestion.reason}</Text>
            </Pressable>
          ))}
        </View>
      ) : null}

      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.filters}>
        {FILTERS.map((filter) => (
          <FilterChip
            key={filter.kind}
            label={t(filter.labelKey)}
            active={activeKind === filter.kind}
            onPress={() => setActiveKind(filter.kind)}
          />
        ))}
      </ScrollView>

      <PrimaryButton label={t('actions.startPlanning')} variant="secondary" rightIcon onPress={() => router.push('/trip-planner/1')} />

      <SectionHeader title={t('discover.trending')} />
      {search.isLoading ? <StateView tone="loading" title={t('discover.loadingCatalog')} /> : null}
      {search.isError ? <StateView tone="error" title={t('discover.catalogUnavailable')} body={t('discover.catalogUnavailableBody')} /> : null}
      {!search.isLoading && !visible.length ? (
        <StateView tone="empty" title={t('discover.noMatches')} body={t('discover.noMatchesBody')} />
      ) : null}
      {visible.map((item) => (
        <ListingCard
          key={item.id}
          listing={item}
          locale={locale}
          saved={savedListingIds.has(item.id)}
          onSave={() => toggleSave.mutate(item.id)}
          onPress={() => {
            void api.engagement.track({
              eventType: 'listing.clicked',
              screen: 'discover',
              entityType: 'LISTING',
              entityId: item.id,
              query: query.trim() || undefined,
              metadata: { kind: item.kind, title: item.title },
            }).catch(() => undefined);
            router.push(`/listing/${item.id}`);
          }}
        />
      ))}

      <SectionHeader title={t('discover.featuredDestinations')} />
      {destinations.map((destination) => (
        <DestinationCard
          key={destination.id}
          destination={destination}
          onPress={() => {
            void api.engagement.track({
              eventType: 'destination.clicked',
              screen: 'discover',
              entityType: 'DESTINATION',
              entityId: destination.id,
              query: query.trim() || undefined,
              metadata: { title: destination.title },
            }).catch(() => undefined);
            setQuery(destination.title);
          }}
        />
      ))}
    </Screen>
  );
}

const styles = StyleSheet.create({
  h1: {
    color: color.ink[900],
    fontSize: typography.scale.h1.size,
    fontWeight: '900',
  },
  sub: {
    color: color.ink[500],
    fontSize: typography.scale.body.size,
    lineHeight: 22,
  },
  search: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.lg,
    borderWidth: 1,
    color: color.ink[900],
    fontSize: typography.scale.body.size,
    height: 56,
    paddingHorizontal: spacing[4],
  },
  filters: {
    gap: spacing[2],
    paddingRight: spacing[6],
  },
  suggestions: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: spacing[2],
  },
  suggestionPill: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.pill,
    borderWidth: 1,
    paddingHorizontal: spacing[4],
    paddingVertical: spacing[3],
  },
  suggestionText: {
    color: color.ink[900],
    fontWeight: '900',
  },
  suggestionReason: {
    color: color.ink[500],
    fontSize: typography.scale.caption.size,
    marginTop: 2,
  },
});