import { router } from 'expo-router';
import { useQuery } from '@tanstack/react-query';
import { StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { formatMoney } from '@navi/ui';
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 Bookings() {
  const { t } = useTranslation();
  const locale = useLocale((s) => s.locale);
  const user = useAuth((s) => s.user);
  const isGuest = useAuth((s) => s.isGuest);
  const bookings = useQuery({ queryKey: ['bookings'], queryFn: () => api.bookings.mine(), enabled: !!user });
  const listings = useQuery({ queryKey: ['bookings', 'listings'], queryFn: () => api.listings.list(), enabled: !!user });

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

  const listingById = new Map((listings.data ?? []).map((item) => [item.id, item]));

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

      {bookings.isLoading ? <StateView tone="loading" title={t('bookings.loading')} /> : null}
      {bookings.isError ? <StateView tone="error" title={t('bookings.unavailableTitle')} body={t('bookings.unavailableBody')} /> : null}
      {!bookings.isLoading && !(bookings.data ?? []).length ? (
        <StateView tone="empty" title={t('bookings.emptyTitle')} body={t('bookings.emptyBody')} />
      ) : null}

      {(bookings.data ?? []).map((booking) => {
        const listing = listingById.get(booking.listingId);
        return (
          <View key={booking.id} style={styles.card}>
            <View style={styles.cardRow}>
              <Text style={styles.cardTitle}>{listing?.title ?? booking.kind}</Text>
              <Text style={styles.status}>{booking.status.replace(/_/g, ' ')}</Text>
            </View>
            <Text style={styles.cardMeta}>{t('bookings.guest', { count: booking.guestCount, kind: booking.kind.replace(/_/g, ' ') })}</Text>
            <Text style={styles.total}>{formatMoney(booking.total, locale)}</Text>
          </View>
        );
      })}
    </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,
  },
  card: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.xl,
    borderWidth: 1,
    gap: spacing[2],
    padding: spacing[4],
  },
  cardRow: {
    alignItems: 'flex-start',
    flexDirection: 'row',
    gap: spacing[3],
    justifyContent: 'space-between',
  },
  cardTitle: {
    color: color.ink[900],
    flex: 1,
    fontSize: typography.scale.h3.size,
    fontWeight: '900',
  },
  status: {
    color: color.blue[600],
    fontSize: typography.scale.caption.size,
    fontWeight: '900',
    textAlign: 'right',
  },
  cardMeta: {
    color: color.ink[500],
    fontWeight: '700',
  },
  total: {
    color: color.ink[900],
    fontSize: typography.scale.h3.size,
    fontWeight: '900',
  },
});