import { useMemo, useState } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';

import {
  CategoryTabs,
  CommunityGrid,
  FeatureCarousel,
  Header,
  PageLayout,
  SectionHeader,
  StatusBarSpacer,
  type CommunityItem,
  type FeatureItem,
} from '@/components/bestai';

const categories = [
  { id: 'visual-effects', label: 'Visual Effects' },
  { id: 'higgsfield-soul', label: 'Higgsfield Soul' },
  { id: 'higgsfield-apps', label: 'Higgsfield Apps' },
  { id: 'king', label: 'King' },
];

const baseFeatureItems: FeatureItem[] = [
  {
    id: 'sketch-video',
    title: 'UNLIMITED SKETCH TO VIDEO',
    subtitle: 'Bring your imagination to life with Sora 2',
    image: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80',
  },
  {
    id: 'portrait-video',
    title: 'UNLIMITED PORTRAIT TO VIDEO',
    subtitle: 'Transform portraits into motion-driven stories',
    image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80',
  },
  {
    id: 'water-simulation',
    title: 'FLUID SIMULATION PACK',
    subtitle: 'Realistic water physics for cinematic scenes',
    image: 'https://images.unsplash.com/photo-1505744386214-51dba16a26fc?auto=format&fit=crop&w=800&q=80',
  },
];

const baseCommunityItems: CommunityItem[] = [
  {
    id: 'community-1',
    chip: '64/10',
    title: 'OBJECTS AROUND',
    image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80',
    actionLabel: 'Generate',
  },
  {
    id: 'community-2',
    chip: '64/10',
    title: 'OBJECTS AROUND',
    image: 'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=800&q=80',
    actionLabel: 'Generate',
  },
  {
    id: 'community-3',
    chip: '64/10',
    title: 'OBJECTS AROUND',
    image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80',
    actionLabel: 'Generate',
  },
  {
    id: 'community-4',
    chip: '64/10',
    title: 'OBJECTS AROUND',
    image: 'https://images.unsplash.com/photo-1531259683007-016a7b628fc4?auto=format&fit=crop&w=800&q=80',
    actionLabel: 'Generate',
  },
];

export default function ExploreScreen() {
  const [activeCategory, setActiveCategory] = useState(categories[0]?.id ?? 'visual-effects');

  const featureItems = useMemo(() => {
    return baseFeatureItems.map((item, index) => ({
      ...item,
      id: `${activeCategory}-${index}`,
    }));
  }, [activeCategory]);

  const communityItems = useMemo(() => {
    return baseCommunityItems.map((item, index) => ({
      ...item,
      id: `${activeCategory}-${index}`,
    }));
  }, [activeCategory]);

  return (
    <PageLayout backgroundColor="#050505">
      <ScrollView
        style={styles.scroll}
        contentContainerStyle={styles.contentContainer}
        showsVerticalScrollIndicator={false}
      >
        <StatusBarSpacer />
        <Header />
        <CategoryTabs categories={categories} activeId={activeCategory} onChange={setActiveCategory} />
        <FeatureCarousel items={featureItems} />
        <SectionHeader title="WAN 2.5 COMMUNITY" />
        <CommunityGrid items={communityItems} />
        <View style={styles.bottomSpacer} />
      </ScrollView>
    </PageLayout>
  );
}

const styles = StyleSheet.create({
  scroll: {
    flex: 1,
  },
  contentContainer: {
    paddingTop: 16,
    paddingBottom: 48,
  },
  bottomSpacer: {
    height: 32,
  },
});