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

import {
  CategoryTabs,
  CommunityGrid,
  FeatureCarousel,
  Header,
  PageLayout,
  SectionHeader,
  StatusBarSpacer,
  type CommunityItem,
  type FeatureItem,
} from '@/components/bestai';
import { useAuth } from '@/hooks/use-auth';
import { useAuthGuard } from '@/hooks/use-auth-guard';

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 { isAuthenticated } = useAuth();
  const { requireAuth } = useAuthGuard();
  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]);

  const handleGeneratePress = () => {
    requireAuth(() => {
      console.log('用户已登录，执行生成操作');
    });
  };

  if (!isAuthenticated) {
    return (
      <PageLayout backgroundColor="#050505">
        <ScrollView
          style={styles.scroll}
          contentContainerStyle={styles.contentContainer}
          showsVerticalScrollIndicator={false}
        >
          <StatusBarSpacer />
          <Header />
          <View style={styles.loginPrompt}>
            <View style={styles.lockIconContainer}>
              <Text style={styles.lockIcon}>🔒</Text>
            </View>
            <Text style={styles.loginTitle}>需要登录</Text>
            <Text style={styles.loginSubtitle}>
              登录后即可浏览和使用所有功能
            </Text>
            <TouchableOpacity
              style={styles.loginButton}
              onPress={() => requireAuth()}
              activeOpacity={0.8}
            >
              <Text style={styles.loginButtonText}>立即登录</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.bottomSpacer} />
        </ScrollView>
      </PageLayout>
    );
  }

  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,
  },
  loginPrompt: {
    alignItems: 'center',
    paddingVertical: 60,
    paddingHorizontal: 32,
  },
  lockIconContainer: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 24,
  },
  lockIcon: {
    fontSize: 40,
  },
  loginTitle: {
    fontSize: 24,
    fontWeight: '700',
    color: '#ffffff',
    marginBottom: 12,
  },
  loginSubtitle: {
    fontSize: 16,
    color: 'rgba(255, 255, 255, 0.6)',
    textAlign: 'center',
    lineHeight: 24,
    marginBottom: 32,
  },
  loginButton: {
    backgroundColor: '#d7ff1f',
    paddingHorizontal: 32,
    paddingVertical: 16,
    borderRadius: 12,
  },
  loginButtonText: {
    color: '#050505',
    fontSize: 16,
    fontWeight: '700',
  },
});