import { router, useLocalSearchParams } from 'expo-router';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { Image, StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { formatMoney } from '@navi/ui';
import type { Room } from '@navi/types';
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 { naviAssets } from '../../src/assets/naviAssets';
import { color, radius, spacing, typography } from '../../src/theme';
import { naviTheme } from '../../src/theme/naviTheme';

export default function SelectRoom() {
  const { t } = useTranslation();
  const { listingId } = useLocalSearchParams<{ listingId: string }>();
  const locale = useLocale((s) => s.locale);
  const user = useAuth((s) => s.user);
  const queryClient = useQueryClient();
  const listing = useQuery({
    queryKey: ['listing', listingId],
    queryFn: () => api.listings.byId(String(listingId)),
    enabled: !!listingId,
  });

  const createBooking = useMutation({
    mutationFn: async (room: Room) => {
      if (!user) {
        router.push('/(auth)/login');
        return null;
      }
      return api.bookings.create({
        listingId: String(listingId),
        kind: 'STAY',
        guestCount: Math.max(1, room.capacity),
      });
    },
    onSuccess: (booking) => {
      if (!booking) return;
      queryClient.invalidateQueries({ queryKey: ['bookings'] });
      router.push('/(tabs)/bookings');
    },
  });

  if (listing.isLoading) {
    return (
      <Screen>
        <NaviHeader variant="center" title={t('rooms.title')} showBack onBack={() => router.replace(`/listing/${listingId}`)} />
        <StateView tone="loading" title={t('rooms.loading')} />
      </Screen>
    );
  }

  if (listing.isError || !listing.data) {
    return (
      <Screen>
        <NaviHeader variant="center" title={t('rooms.title')} showBack onBack={() => router.replace(`/listing/${listingId}`)} />
        <StateView tone="error" title={t('rooms.unavailableTitle')} body={t('rooms.unavailableBody')} />
      </Screen>
    );
  }

  return (
    <Screen>
      <NaviHeader variant="center" title={t('rooms.title')} showBack onBack={() => router.replace(`/listing/${listingId}`)} />
      <Image source={naviAssets.hotels.selectRoomHero} style={styles.hero} resizeMode="cover" />
      <View style={styles.summaryCard}>
        <Text style={styles.eyebrow}>{t('rooms.summary')}</Text>
        <Text style={styles.title}>{listing.data.title}</Text>
        <Text style={styles.body}>{listing.data.summary}</Text>
      </View>

      <Text style={styles.sectionTitle}>{t('rooms.available')}</Text>
      {listing.data.rooms.length ? null : (
        <StateView tone="empty" title={t('rooms.emptyTitle')} body={t('rooms.emptyBody')} />
      )}
      {listing.data.rooms.map((room, index) => (
        <View key={room.id} style={styles.roomCard}>
          <Image
            source={index % 2 === 0 ? naviAssets.hotels.skyViewSuite : naviAssets.hotels.palmVista}
            style={styles.roomImage}
            resizeMode="cover"
          />
          <Text style={styles.roomTitle}>{room.name}</Text>
          <Text style={styles.body}>{t('rooms.meta', { guests: room.capacity, sqm: room.sqm, bed: room.bedConfig })}</Text>
          <Text style={styles.price}>{t('rooms.perNight', { price: formatMoney(room.price, locale) })}</Text>
          <PrimaryButton
            label={createBooking.isPending ? t('actions.selecting') : t('actions.select')}
            onPress={() => createBooking.mutate(room)}
            disabled={createBooking.isPending}
            rightIcon
          />
        </View>
      ))}
    </Screen>
  );
}

const styles = StyleSheet.create({
  hero: {
    borderRadius: radius.xl,
    height: 220,
    width: '100%',
  },
  summaryCard: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.xl,
    borderWidth: 1,
    gap: spacing[2],
    padding: spacing[5],
  },
  eyebrow: {
    color: color.blue[600],
    fontSize: typography.scale.caption.size,
    fontWeight: '900',
  },
  title: {
    color: color.ink[900],
    fontSize: typography.scale.h2.size,
    fontWeight: '900',
  },
  body: {
    color: color.ink[500],
    lineHeight: 22,
  },
  sectionTitle: {
    color: color.ink[900],
    fontSize: typography.scale.h3.size,
    fontWeight: '900',
  },
  roomCard: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.xl,
    borderWidth: 1,
    gap: spacing[2],
    overflow: 'hidden',
    padding: spacing[4],
    ...naviTheme.shadows.card,
  },
  roomImage: {
    borderRadius: radius.lg,
    height: 190,
    width: '100%',
  },
  roomTitle: {
    color: color.ink[900],
    fontSize: typography.scale.h3.size,
    fontWeight: '900',
  },
  price: {
    color: color.blue[600],
    fontSize: typography.scale.bodyStrong.size,
    fontWeight: '900',
  },
});