import React, { useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  Image,
  Dimensions,
  StyleSheet,
  ActivityIndicator,
} from 'react-native';
import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { Feather, Ionicons } from '@expo/vector-icons';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming,
} from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const CARD_IMAGE_HEIGHT = 300;

// ── Types ─────────────────────────────────────────────────────────────────────

interface Category {
  id: string;
  label: string;
  icon: string;
}

interface Listing {
  id: string;
  location: string;
  distance: string;
  dates: string;
  price: number;
  rating: number;
  reviewCount: number;
  isSuperhost: boolean;
  isFavorited: boolean;
  tag?: string;
}

interface NavItem {
  id: string;
  label: string;
  icon: string;
}

// ── Data ──────────────────────────────────────────────────────────────────────

const CATEGORIES: Category[] = [
  { id: '1',  label: 'Trending',   icon: '🏆' },
  { id: '2',  label: 'Beachfront', icon: '🏖️' },
  { id: '3',  label: 'Cabins',     icon: '🏕️' },
  { id: '4',  label: 'Mansions',   icon: '🏛️' },
  { id: '5',  label: 'Islands',    icon: '🏝️' },
  { id: '6',  label: 'Tiny homes', icon: '🏠' },
  { id: '7',  label: 'Lakefront',  icon: '🚣' },
  { id: '8',  label: 'Castles',    icon: '🏰' },
  { id: '9',  label: 'Design',     icon: '🪴' },
  { id: '10', label: 'Arctic',     icon: '❄️' },
];

const LISTINGS: Listing[] = [
  {
    id: '1',
    location: 'Malibu, California',
    distance: '42 miles away',
    dates: 'Jun 12–17',
    price: 385,
    rating: 4.97,
    reviewCount: 214,
    isSuperhost: true,
    isFavorited: false,
    tag: 'Guest favourite',
  },
  {
    id: '2',
    location: 'Tulum, Mexico',
    distance: '1,204 miles away',
    dates: 'Jul 3–8',
    price: 210,
    rating: 4.92,
    reviewCount: 87,
    isSuperhost: false,
    isFavorited: true,
  },
  {
    id: '3',
    location: 'Sedona, Arizona',
    distance: '478 miles away',
    dates: 'Jun 28–Jul 4',
    price: 295,
    rating: 4.99,
    reviewCount: 352,
    isSuperhost: true,
    isFavorited: false,
    tag: 'Guest favourite',
  },
  {
    id: '4',
    location: 'Lake Tahoe, Nevada',
    distance: '198 miles away',
    dates: 'Aug 1–6',
    price: 440,
    rating: 4.88,
    reviewCount: 129,
    isSuperhost: false,
    isFavorited: false,
  },
  {
    id: '5',
    location: 'Aspen, Colorado',
    distance: '1,088 miles away',
    dates: 'Sep 15–20',
    price: 620,
    rating: 4.96,
    reviewCount: 74,
    isSuperhost: true,
    isFavorited: false,
  },
  {
    id: '6',
    location: 'Amalfi Coast, Italy',
    distance: '6,318 miles away',
    dates: 'Oct 4–9',
    price: 530,
    rating: 4.95,
    reviewCount: 188,
    isSuperhost: true,
    isFavorited: false,
    tag: 'Guest favourite',
  },
  {
    id: '7',
    location: 'Kyoto, Japan',
    distance: '5,478 miles away',
    dates: 'Nov 1–6',
    price: 175,
    rating: 4.91,
    reviewCount: 63,
    isSuperhost: false,
    isFavorited: false,
  },
];

const EXTRA_IMAGES: Record<string, string[]> = {
  '1': [
    'https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?w=800&q=80',
    'https://images.unsplash.com/photo-1484154218962-a197022b5858?w=800&q=80',
    'https://images.unsplash.com/photo-1502005229762-cf1b2da7c5d6?w=800&q=80',
  ],
  '2': [
    'https://images.unsplash.com/photo-1518733057094-95b53143d2a7?w=800&q=80',
    'https://images.unsplash.com/photo-1510798831971-661eb04b3739?w=800&q=80',
    'https://images.unsplash.com/photo-1540541338287-41700207dee6?w=800&q=80',
  ],
  '3': [
    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80',
    'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&q=80',
    'https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=800&q=80',
  ],
  '4': [
    'https://images.unsplash.com/photo-1449158743715-0a90ebb6d2d8?w=800&q=80',
    'https://images.unsplash.com/photo-1470770903676-69b98201ea1c?w=800&q=80',
    'https://images.unsplash.com/photo-1501854140801-50d01698950b?w=800&q=80',
  ],
  '5': [
    'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?w=800&q=80',
    'https://images.unsplash.com/photo-1548704806-0c2b2b4f06d6?w=800&q=80',
    'https://images.unsplash.com/photo-1551524358-f35f42b82db0?w=800&q=80',
  ],
  '6': [
    'https://images.unsplash.com/photo-1533104816931-20fa691ff6ca?w=800&q=80',
    'https://images.unsplash.com/photo-1516483638261-f4dbaf036963?w=800&q=80',
    'https://images.unsplash.com/photo-1523531294919-4bcd7c65e216?w=800&q=80',
  ],
  '7': [
    'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?w=800&q=80',
    'https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=800&q=80',
    'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=800&q=80',
  ],
};

const NAV_ITEMS: NavItem[] = [
  { id: 'explore',   label: 'Explore',   icon: 'search'         },
  { id: 'wishlists', label: 'Wishlists', icon: 'heart'          },
  { id: 'trips',     label: 'Trips',     icon: 'map'            },
  { id: 'inbox',     label: 'Inbox',     icon: 'message-circle' },
  { id: 'profile',   label: 'Profile',   icon: 'user'           },
];

// ── CategoryPill ──────────────────────────────────────────────────────────────

interface CategoryPillProps {
  item: Category;
  isSelected: boolean;
  onPress: () => void;
}

function CategoryPill({ item, isSelected, onPress }: CategoryPillProps) {
  const scale = useSharedValue(1);
  const animStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));

  const handlePress = () => {
    scale.value = withSpring(0.9, {}, () => { scale.value = withSpring(1); });
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    onPress();
  };

  return (
    <Animated.View style={animStyle}>
      <TouchableOpacity
        style={styles.categoryPill}
        onPress={handlePress}
        activeOpacity={0.8}
      >
        <Text style={styles.categoryEmoji}>{item.icon}</Text>
        <Text style={[styles.categoryLabel, isSelected && styles.categoryLabelActive]}>
          {item.label}
        </Text>
        {isSelected && <View style={styles.categoryUnderline} />}
      </TouchableOpacity>
    </Animated.View>
  );
}

// ── ImageCarousel ─────────────────────────────────────────────────────────────

interface ImageCarouselProps {
  uris: string[];
  isFavorited: boolean;
  tag?: string;
  onFavorite: () => void;
}

function ImageCarousel({ uris, isFavorited, tag, onFavorite }: ImageCarouselProps) {
  const [activeIndex, setActiveIndex] = useState(0);
  const [loaded, setLoaded] = useState(false);

  const heartScale = useSharedValue(1);
  const heartStyle = useAnimatedStyle(() => ({ transform: [{ scale: heartScale.value }] }));

  const handleFavorite = () => {
    heartScale.value = withSpring(1.45, {}, () => { heartScale.value = withSpring(1); });
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
    onFavorite();
  };

  const handleScroll = (e: { nativeEvent: { contentOffset: { x: number } } }) => {
    const idx = Math.round(e.nativeEvent.contentOffset.x / (SCREEN_WIDTH - 32));
    setActiveIndex(idx);
  };

  return (
    <View style={styles.carouselContainer}>
      <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onScroll={handleScroll}
        scrollEventThrottle={16}
        style={styles.carouselScroll}
      >
        {uris.map((uri, i) => (
          <View key={i} style={styles.carouselPage}>
            {!loaded && (
              <View style={styles.imagePlaceholder}>
                <ActivityIndicator color="#a1a1aa" />
              </View>
            )}
            <Image
              source={{ uri }}
              style={styles.cardImage}
              onLoad={() => setLoaded(true)}
              resizeMode="cover"
            />
          </View>
        ))}
      </ScrollView>

      {tag && (
        <View style={styles.tagBadge}>
          <Text style={styles.tagText}>{tag}</Text>
        </View>
      )}

      <Animated.View style={[styles.heartBtn, heartStyle]}>
        <TouchableOpacity
          onPress={handleFavorite}
          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
        >
          <Ionicons
            name={isFavorited ? 'heart' : 'heart-outline'}
            size={24}
            color={isFavorited ? '#ff385c' : '#fff'}
            style={styles.heartIcon}
          />
        </TouchableOpacity>
      </Animated.View>

      {uris.length > 1 && (
        <View style={styles.dotsRow}>
          {uris.map((_, i) => (
            <View key={i} style={[styles.dot, i === activeIndex && styles.dotActive]} />
          ))}
        </View>
      )}
    </View>
  );
}

// ── ListingCard ───────────────────────────────────────────────────────────────

interface ListingCardProps {
  item: Listing;
  onFavorite: (id: string) => void;
}

function ListingCard({ item, onFavorite }: ListingCardProps) {
  const images = EXTRA_IMAGES[item.id] ?? [];

  return (
    <View style={styles.card}>
      <ImageCarousel
        uris={images}
        isFavorited={item.isFavorited}
        tag={item.tag}
        onFavorite={() => onFavorite(item.id)}
      />

      <View style={styles.cardInfo}>
        {/* Row 1: location + rating */}
        <View style={styles.cardRowSpaced}>
          <Text style={styles.cardLocation} numberOfLines={1}>{item.location}</Text>
          <View style={styles.ratingPill}>
            <Ionicons name="star" size={11} color="#18181b" />
            <Text style={styles.ratingText}>{item.rating}</Text>
            <Text style={styles.reviewCount}>({item.reviewCount})</Text>
          </View>
        </View>

        {/* Row 2: distance · dates  |  superhost badge */}
        <View style={styles.cardRowSpaced}>
          <View style={styles.metaRow}>
            <Text style={styles.metaText}>{item.distance}</Text>
            <View style={styles.metaDot} />
            <Text style={styles.metaText}>{item.dates}</Text>
          </View>
          {item.isSuperhost && (
            <View style={styles.superhostBadge}>
              <Text style={styles.superhostText}>Superhost</Text>
            </View>
          )}
        </View>

        {/* Row 3: price */}
        <View style={styles.priceRow}>
          <Text style={styles.priceAmount}>${item.price}</Text>
          <Text style={styles.priceNight}> / night</Text>
        </View>
      </View>
    </View>
  );
}

// ── NavBar ────────────────────────────────────────────────────────────────────

interface NavBarProps {
  activeTab: string;
  onTabPress: (id: string) => void;
}

function NavBar({ activeTab, onTabPress }: NavBarProps) {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.navBar, { paddingBottom: insets.bottom + 4 }]}>
      {NAV_ITEMS.map((item) => {
        const isActive = activeTab === item.id;
        const iconName = item.icon as keyof typeof Feather.glyphMap;
        return (
          <TouchableOpacity
            key={item.id}
            style={styles.navItem}
            onPress={() => {
              Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
              onTabPress(item.id);
            }}
            activeOpacity={0.7}
          >
            <Feather name={iconName} size={22} color={isActive ? '#ff385c' : '#71717a'} />
            <Text style={[styles.navLabel, isActive && styles.navLabelActive]}>
              {item.label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

// ── Main Screen ───────────────────────────────────────────────────────────────

export default function AirbnbHomeScreen() {
  const [selectedCategory, setSelectedCategory] = useState('1');
  const [activeTab, setActiveTab] = useState('explore');
  const [listings, setListings] = useState<Listing[]>(LISTINGS);
  const [searchFocused, setSearchFocused] = useState(false);

  const searchScale = useSharedValue(1);
  const searchAnimStyle = useAnimatedStyle(() => ({
    transform: [{ scale: searchScale.value }],
  }));

  const handleSearchPress = () => {
    searchScale.value = withTiming(0.98, { duration: 100 }, () => {
      searchScale.value = withTiming(1, { duration: 100 });
    });
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  };

  const toggleFavorite = (id: string) => {
    setListings((prev) =>
      prev.map((l) => (l.id === id ? { ...l, isFavorited: !l.isFavorited } : l))
    );
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.root} edges={['top']}>

        {/* ── Header: search + filter ── */}
        <View style={styles.header}>
          <Animated.View style={[styles.searchBarWrapper, searchAnimStyle]}>
            <TouchableOpacity
              style={styles.searchMain}
              onPress={handleSearchPress}
              activeOpacity={0.85}
            >
              <View style={styles.searchIconCircle}>
                <Feather name="search" size={16} color="#18181b" />
              </View>
              <View style={styles.searchTextBlock}>
                <Text style={styles.searchTitle}>Where to?</Text>
                <Text style={styles.searchSub}>Anywhere · Any week · Add guests</Text>
              </View>
            </TouchableOpacity>

            <View style={styles.searchDivider} />

            <TouchableOpacity
              style={styles.filterBtn}
              onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
            >
              <Feather name="sliders" size={15} color="#3f3f46" />
              <Text style={styles.filterBtnLabel}>Filters</Text>
            </TouchableOpacity>
          </Animated.View>
        </View>

        {/* ── Categories ── */}
        <View style={styles.categoriesRow}>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.categoriesContent}
          >
            {CATEGORIES.map((cat) => (
              <CategoryPill
                key={cat.id}
                item={cat}
                isSelected={selectedCategory === cat.id}
                onPress={() => setSelectedCategory(cat.id)}
              />
            ))}
          </ScrollView>
        </View>

        {/* ── Listings ── */}
        <ScrollView
          style={styles.listingsScroll}
          contentContainerStyle={styles.listingsContent}
          showsVerticalScrollIndicator={false}
        >
          <Text style={styles.sectionCount}>300+ stays</Text>

          {listings.map((item) => (
            <ListingCard key={item.id} item={item} onFavorite={toggleFavorite} />
          ))}

          <TouchableOpacity
            style={styles.showMoreBtn}
            onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
          >
            <Text style={styles.showMoreText}>Show more stays</Text>
          </TouchableOpacity>

          <View style={{ height: 40 }} />
        </ScrollView>

        {/* ── Bottom Nav ── */}
        <NavBar activeTab={activeTab} onTabPress={setActiveTab} />

      </SafeAreaView>
    </SafeAreaProvider>
  );
}

// ── Styles ────────────────────────────────────────────────────────────────────

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#fff',
  },

  // ── Header ──
  header: {
    paddingHorizontal: 16,
    paddingTop: 8,
    paddingBottom: 12,
    backgroundColor: '#fff',
  },
  searchBarWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 40,
    paddingLeft: 8,
    paddingRight: 8,
    paddingVertical: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.13,
    shadowRadius: 10,
    elevation: 5,
    borderWidth: 1,
    borderColor: '#e4e4e7',
  },
  searchMain: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingRight: 4,
  },
  searchIconCircle: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: '#f4f4f5',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 10,
  },
  searchTextBlock: {
    flex: 1,
  },
  searchTitle: {
    fontSize: 14,
    fontWeight: '700',
    color: '#18181b',
    lineHeight: 14 * 1.2,
  },
  searchSub: {
    fontSize: 11,
    fontWeight: '400',
    color: '#71717a',
    marginTop: 2,
    lineHeight: 11 * 1.4,
  },
  searchDivider: {
    width: StyleSheet.hairlineWidth,
    height: 28,
    backgroundColor: '#e4e4e7',
    marginHorizontal: 8,
  },
  filterBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#e4e4e7',
  },
  filterBtnLabel: {
    fontSize: 12,
    fontWeight: '600',
    color: '#3f3f46',
  },

  // ── Categories ──
  categoriesRow: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#e4e4e7',
  },
  categoriesContent: {
    paddingHorizontal: 16,
    gap: 4,
    paddingBottom: 0,
  },
  categoryPill: {
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingTop: 8,
    paddingBottom: 12,
    position: 'relative',
    minWidth: 64,
  },
  categoryEmoji: {
    fontSize: 24,
    marginBottom: 5,
  },
  categoryLabel: {
    fontSize: 11,
    fontWeight: '500',
    color: '#a1a1aa',
  },
  categoryLabelActive: {
    color: '#18181b',
    fontWeight: '600',
  },
  categoryUnderline: {
    position: 'absolute',
    bottom: 0,
    left: 8,
    right: 8,
    height: 2,
    backgroundColor: '#18181b',
    borderRadius: 1,
  },

  // ── Listings ──
  listingsScroll: {
    flex: 1,
  },
  listingsContent: {
    paddingHorizontal: 16,
    paddingTop: 16,
  },
  sectionCount: {
    fontSize: 13,
    fontWeight: '400',
    color: '#71717a',
    marginBottom: 20,
  },

  // ── Carousel ──
  carouselContainer: {
    borderRadius: 16,
    overflow: 'hidden',
    position: 'relative',
    width: SCREEN_WIDTH - 32,
    height: CARD_IMAGE_HEIGHT,
  },
  carouselScroll: {
    width: SCREEN_WIDTH - 32,
    height: CARD_IMAGE_HEIGHT,
  },
  carouselPage: {
    width: SCREEN_WIDTH - 32,
    height: CARD_IMAGE_HEIGHT,
  },
  imagePlaceholder: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#f4f4f5',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardImage: {
    width: SCREEN_WIDTH - 32,
    height: CARD_IMAGE_HEIGHT,
  },
  tagBadge: {
    position: 'absolute',
    top: 16,
    left: 16,
    backgroundColor: '#fff',
    borderRadius: 6,
    paddingHorizontal: 10,
    paddingVertical: 5,
    zIndex: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  tagText: {
    fontSize: 12,
    fontWeight: '700',
    color: '#18181b',
  },
  heartBtn: {
    position: 'absolute',
    top: 14,
    right: 14,
    zIndex: 10,
    width: 36,
    height: 36,
    justifyContent: 'center',
    alignItems: 'center',
  },
  heartIcon: {
    textShadowColor: 'rgba(0,0,0,0.35)',
    textShadowOffset: { width: 0, height: 1 },
    textShadowRadius: 4,
  },
  dotsRow: {
    position: 'absolute',
    bottom: 12,
    left: 0,
    right: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 5,
    zIndex: 10,
  },
  dot: {
    width: 5,
    height: 5,
    borderRadius: 3,
    backgroundColor: 'rgba(255,255,255,0.5)',
  },
  dotActive: {
    backgroundColor: '#fff',
    width: 7,
  },

  // ── Card info ──
  card: {
    marginBottom: 36,
  },
  cardInfo: {
    paddingTop: 10,
    gap: 5,
  },
  cardRowSpaced: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  cardLocation: {
    fontSize: 15,
    fontWeight: '600',
    color: '#18181b',
    flex: 1,
    marginRight: 12,
    lineHeight: 15 * 1.2,
  },

  // rating
  ratingPill: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 3,
  },
  ratingText: {
    fontSize: 13,
    fontWeight: '600',
    color: '#18181b',
  },
  reviewCount: {
    fontSize: 12,
    fontWeight: '400',
    color: '#71717a',
  },

  // meta row
  metaRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    flex: 1,
    marginRight: 8,
  },
  metaText: {
    fontSize: 13,
    fontWeight: '400',
    color: '#71717a',
    lineHeight: 13 * 1.4,
  },
  metaDot: {
    width: 3,
    height: 3,
    borderRadius: 1.5,
    backgroundColor: '#a1a1aa',
  },

  // superhost badge
  superhostBadge: {
    borderWidth: 1,
    borderColor: '#e4e4e7',
    borderRadius: 6,
    paddingHorizontal: 8,
    paddingVertical: 3,
  },
  superhostText: {
    fontSize: 11,
    fontWeight: '600',
    color: '#3f3f46',
  },

  // price
  priceRow: {
    flexDirection: 'row',
    alignItems: 'baseline',
    marginTop: 2,
  },
  priceAmount: {
    fontSize: 15,
    fontWeight: '700',
    color: '#18181b',
  },
  priceNight: {
    fontSize: 13,
    fontWeight: '400',
    color: '#3f3f46',
  },

  // ── Show more ──
  showMoreBtn: {
    alignSelf: 'center',
    borderWidth: 1.5,
    borderColor: '#18181b',
    borderRadius: 10,
    paddingVertical: 14,
    paddingHorizontal: 28,
    marginTop: 8,
  },
  showMoreText: {
    fontSize: 14,
    fontWeight: '700',
    color: '#18181b',
  },

  // ── Nav ──
  navBar: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: '#e4e4e7',
    paddingTop: 12,
  },
  navItem: {
    flex: 1,
    alignItems: 'center',
    gap: 4,
    paddingVertical: 4,
  },
  navLabel: {
    fontSize: 11,
    fontWeight: '500',
    color: '#71717a',
  },
  navLabelActive: {
    color: '#ff385c',
    fontWeight: '600',
  },
});
Rental Application
