import { useMemo } from 'react';
import { router } from 'expo-router';
import { useQuery } from '@tanstack/react-query';
import { StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { DestinationCard, ListingCard } from '../../src/components/cards/CatalogCard';
import { NaviHeader } from '../../src/components/layout/NaviHeader';
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';

export default function Saved() {
  const { t } = useTranslation();
  const locale = useLocale((s) => s.locale);
  const user = useAuth((s) => s.user);
  const isGuest = useAuth((s) => s.isGuest);
  const saved = useQuery({ queryKey: ['saved'], queryFn: () => api.saved.list(), enabled: !!user });
  const listings = useQuery({ queryKey: ['saved', 'listings'], queryFn: () => api.listings.list(), enabled: !!user });
  const destinations = useQuery({ queryKey: ['saved', 'destinations'], queryFn: () => api.destinations.listFeatured(), enabled: !!user });

  const savedListingIds = useMemo(
    () => new Set((saved.data ?? []).filter((item) => item.refType === 'LISTING').map((item) => item.refId)),
    [saved.data],
  );
  const savedDestinationIds = useMemo(
    () => new Set((saved.data ?? []).filter((item) => item.refType === 'DESTINATION').map((item) => item.refId)),
    [saved.data],
  );
  const savedListings = (listings.data ?? []).filter((item) => savedListingIds.has(item.id));
  const savedDestinations = (destinations.data ?? []).filter((item) => savedDestinationIds.has(item.id));

  if (!user || isGuest) {
    return (
      <Screen>
        <NaviHeader variant="center" title={t('saved.title')} />
        <Text style={styles.h1}>{t('saved.title')}</Text>
        <StateView tone="denied" title={t('saved.signInTitle')} body={t('saved.signInBody')} />
        <PrimaryButton label={t('actions.signIn')} onPress={() => router.push('/(auth)/login')} />
      </Screen>
    );
  }

  const loading = saved.isLoading || listings.isLoading || destinations.isLoading;

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

      {loading ? <StateView tone="loading" title={t('saved.loading')} /> : null}
      {saved.isError ? <StateView tone="error" title={t('saved.unavailableTitle')} body={t('saved.unavailableBody')} /> : null}
      {!loading && !savedListings.length && !savedDestinations.length ? (
        <StateView tone="empty" title={t('saved.emptyTitle')} body={t('saved.emptyBody')} />
      ) : null}

      {savedListings.length ? <Text style={styles.sectionTitle}>{t('saved.listings')}</Text> : null}
      {savedListings.map((listing) => (
        <ListingCard
          key={listing.id}
          listing={listing}
          locale={locale}
          saved
          ctaLabel={t('actions.open')}
          onPress={() => router.push(`/listing/${listing.id}`)}
        />
      ))}

      {savedDestinations.length ? <Text style={styles.sectionTitle}>{t('saved.destinations')}</Text> : null}
      {savedDestinations.map((destination) => (
        <DestinationCard
          key={destination.id}
          destination={destination}
          onPress={() => router.push('/(tabs)/discover')}
        />
      ))}

      {(saved.data ?? []).filter((item) => item.refType === 'TRIP').length ? (
        <View style={styles.tripNote}>
          <Text style={styles.tripNoteText}>{t('saved.tripNote')}</Text>
        </View>
      ) : null}
    </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,
  },
  sectionTitle: {
    color: color.ink[900],
    fontSize: typography.scale.h3.size,
    fontWeight: '900',
    marginTop: spacing[2],
  },
  tripNote: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.lg,
    borderWidth: 1,
    padding: spacing[4],
  },
  tripNoteText: {
    color: color.ink[700],
    fontWeight: '700',
  },
});