import { router, useLocalSearchParams } from 'expo-router';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { ImageBackground, Linking, Share, 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 { useLocale } from '../../../src/state/locale';
import { naviAssets } from '../../../src/assets/naviAssets';
import { color, radius, spacing, typography } from '../../../src/theme';

export default function TripResult() {
  const { t } = useTranslation();
  const { tripId } = useLocalSearchParams<{ tripId: string }>();
  const locale = useLocale((s) => s.locale);
  const queryClient = useQueryClient();
  const trip = useQuery({
    queryKey: ['trip', tripId],
    queryFn: () => api.tripPlanner.byId(String(tripId)),
    enabled: !!tripId,
  });

  const saveTrip = useMutation({
    mutationFn: async () => {
      if (!trip.data) return;
      await api.saved.add('TRIP', trip.data.id);
    },
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['saved'] }),
  });

  if (trip.isLoading) {
    return (
      <Screen>
        <NaviHeader variant="center" title={t('itinerary.title')} showBack onBack={() => router.replace('/trip-planner/1')} />
        <StateView tone="loading" title={t('itinerary.loading')} />
      </Screen>
    );
  }

  if (trip.isError) {
    return (
      <Screen>
        <NaviHeader variant="center" title={t('itinerary.title')} showBack onBack={() => router.replace('/trip-planner/1')} />
        <StateView tone="error" title={t('itinerary.unavailableTitle')} body={t('itinerary.unavailableBody')} />
      </Screen>
    );
  }

  if (!trip.data) {
    return (
      <Screen>
        <NaviHeader variant="center" title={t('itinerary.title')} showBack onBack={() => router.replace('/trip-planner/1')} />
        <StateView tone="empty" title={t('itinerary.notFoundTitle')} body={t('itinerary.notFoundBody')} />
      </Screen>
    );
  }

  const currentTrip = trip.data;
  const days = [...new Set(currentTrip.steps.map((step) => step.dayIndex))].sort((a, b) => a - b);

  return (
    <Screen>
      <ImageBackground source={naviAssets.tripPlanner.itineraryHero} style={styles.hero} imageStyle={styles.heroImage}>
        <NaviHeader
          variant="transparentImage"
          showBack
          onBack={() => router.replace('/trip-planner/1')}
          actions={[
            {
              kind: 'share',
              label: t('itinerary.share'),
              onPress: () => {
                void Share.share({ message: t('itinerary.plannedWith', { name: currentTrip.name }) });
              },
            },
            { kind: 'heart', label: t('itinerary.save'), onPress: () => saveTrip.mutate(), active: saveTrip.isSuccess },
          ]}
        />
        <View style={styles.heroOverlay}>
          <Text style={styles.crumb}>{t('itinerary.dateRange', { start: currentTrip.startDate, end: currentTrip.endDate })}</Text>
          <Text style={styles.h1}>{currentTrip.name}</Text>
          <Text style={styles.body}>
            {t('itinerary.summary', {
              party: currentTrip.party.toLowerCase(),
              budget: currentTrip.budget.toLowerCase(),
              pace: currentTrip.pace.toLowerCase(),
            })}
          </Text>
          <Text style={styles.total}>{formatMoney(currentTrip.totalEstimate, locale)}</Text>
        </View>
      </ImageBackground>

      <PrimaryButton
        label={saveTrip.isPending ? t('actions.saving') : t('itinerary.saveDestination')}
        onPress={() => saveTrip.mutate()}
        disabled={saveTrip.isPending}
      />

      {days.map((day) => (
        <View key={day} style={styles.dayGroup}>
          <Text style={styles.dayTitle}>{t('itinerary.day', { day: day + 1 })}</Text>
          {currentTrip.steps
            .filter((step) => step.dayIndex === day)
            .map((step) => (
              <View key={step.id} style={styles.stepCard}>
                <Text style={styles.stepKind}>{step.kind}</Text>
                <Text style={styles.stepTitle}>{step.title}</Text>
                {step.price ? <Text style={styles.stepPrice}>{formatMoney(step.price, locale)}</Text> : null}
              </View>
            ))}
        </View>
      ))}

      <View style={styles.actions}>
        <PrimaryButton label={t('actions.editItinerary')} variant="secondary" onPress={() => router.push('/trip-planner/1')} />
        <PrimaryButton label={t('actions.openLiveMap')} variant="ghost" onPress={() => Linking.openURL('https://maps.apple.com/?q=Dubai%2C%20United%20Arab%20Emirates')} />
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  hero: {
    borderRadius: radius.xl,
    height: 320,
    overflow: 'hidden',
  },
  heroImage: {
    borderRadius: radius.xl,
  },
  heroOverlay: {
    backgroundColor: 'rgba(11,18,32,0.36)',
    flex: 1,
    gap: spacing[2],
    justifyContent: 'flex-end',
    padding: spacing[5],
  },
  crumb: {
    color: color.bg[0],
    fontSize: typography.scale.caption.size,
    fontWeight: '900',
    opacity: 0.9,
  },
  h1: {
    color: color.bg[0],
    fontSize: 30,
    fontWeight: '900',
    lineHeight: 36,
  },
  body: {
    color: color.bg[0],
    fontSize: typography.scale.body.size,
    lineHeight: 22,
    opacity: 0.92,
  },
  total: {
    color: color.bg[0],
    fontSize: typography.scale.h2.size,
    fontWeight: '900',
    marginTop: spacing[2],
  },
  dayGroup: {
    gap: spacing[3],
  },
  dayTitle: {
    color: color.ink[900],
    fontSize: typography.scale.h3.size,
    fontWeight: '900',
  },
  stepCard: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.lg,
    borderWidth: 1,
    gap: spacing[1],
    padding: spacing[4],
  },
  stepKind: {
    color: color.blue[600],
    fontSize: typography.scale.caption.size,
    fontWeight: '900',
  },
  stepTitle: {
    color: color.ink[900],
    fontSize: typography.scale.bodyStrong.size,
    fontWeight: '900',
  },
  stepPrice: {
    color: color.ink[500],
    fontWeight: '700',
  },
  actions: {
    gap: spacing[3],
  },
});