import { Text } from '@/aesthetics/Text';
import { font, radius, spacing, useColors } from '@/aesthetics/styles';
import { useStrings } from '@/common/hooks/useStrings';
import React from 'react';
import { ActivityIndicator, Linking, Pressable, StyleSheet, View } from 'react-native';

export function Section({
  title,
  subtitle,
  children,
  action,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  action?: React.ReactNode;
}) {
  const c = useColors();
  return (
    <View style={styles.section}>
      <View style={styles.sectionHeader}>
        <View>
          <Text style={[styles.sectionTitle, { color: c.text, fontWeight: '600' }]}>{title}</Text>
          {subtitle && (
            <Text style={[styles.sectionSubtitle, { color: c.tertiaryText }]}>{subtitle}</Text>
          )}
        </View>
        {action}
      </View>
      {children}
    </View>
  );
}

export function IngredientChip({ name }: { name: string }) {
  const c = useColors();
  const strings = useStrings();
  const onPress = () => {
    const query = strings.seeLog.castle.ingredientQuery(name);
    Linking.openURL(`https://chatgpt.com/?q=${encodeURIComponent(query)}`);
  };

  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.chip,
        { backgroundColor: c.sageSubtle, borderColor: c.sageMuted },
        pressed && { opacity: 0.7 },
      ]}
    >
      <Text style={[styles.chipText, { color: c.sage }]}>{name}</Text>
    </Pressable>
  );
}

export function EmptyState({ text }: { text: string }) {
  const c = useColors();
  return (
    <View style={[styles.emptyState, { backgroundColor: c.tagBg }]}>
      <Text style={[styles.emptyText, { color: c.tertiaryText }]}>{text}</Text>
    </View>
  );
}

export function PendingBanner({ count }: { count: number }) {
  const c = useColors();
  const strings = useStrings();
  return (
    <View style={[styles.pendingBanner, { backgroundColor: c.pendingSubtle }]}>
      <ActivityIndicator size="small" color={c.pending} />
      <Text style={[styles.pendingText, { color: c.pending }]}>
        {strings.seeLog.analyzingItems(count)}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  section: {
    gap: spacing.lg,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
  },
  sectionTitle: {
    fontSize: font.xl,
    letterSpacing: 0.3,
  },
  sectionSubtitle: {
    fontSize: font.xs,
    marginTop: 2,
  },
  chip: {
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.md,
    borderRadius: radius.pill,
    borderWidth: 1,
  },
  chipText: {
    fontSize: font.md,
    fontWeight: '500',
  },
  emptyState: {
    paddingVertical: spacing.xxl,
    paddingHorizontal: spacing.xl,
    borderRadius: radius.lg,
    alignItems: 'center',
  },
  emptyText: {
    fontSize: font.sm,
    fontStyle: 'italic',
  },
  pendingBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.sm,
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.md,
    borderRadius: radius.md,
    marginBottom: spacing.md,
  },
  pendingText: {
    fontSize: font.sm,
    fontWeight: '500',
  },
});