/**
 * Base UI primitives for PixieSprout.
 * Pill, Card, Section, EmptyState, UiIcon, GardenChoiceChips, GardenMultiChips.
 */
import React from 'react';
import {
  StyleProp,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';

import { green, dark, pressWithHaptic } from '../constants/theme';

// ---- UiIcon ----
export function UiIcon({ label, size = 22, color = dark }: { label: string; size?: number; color?: string }) {
  return <Text style={{ fontSize: size, lineHeight: size + 2, color, fontWeight: '900' }}>{label}</Text>;
}

// ---- Pill ----
export function Pill({ children, active = false }: { children: React.ReactNode; active?: boolean }) {
  return (
    <View style={[s.pill, active && s.pillActive]}>
      <Text style={[s.pillText, active && s.pillTextActive]}>{children}</Text>
    </View>
  );
}

// ---- Card ----
export function Card({ children, style }: { children: React.ReactNode; style?: StyleProp<ViewStyle> }) {
  return <View style={[s.card, style]}>{children}</View>;
}

// ---- Section ----
export function Section({ title, badge, info }: { title: string; badge?: string; info?: boolean }) {
  return (
    <View style={s.sectionRow}>
      <View style={s.sectionTitleWrap}>
        <Text style={s.section}>{title}</Text>
      </View>
      <View style={s.sectionActions}>
        {badge ? <Pill>{badge}</Pill> : null}
        {info ? <UiIcon label="i" size={20} color={green} /> : null}
      </View>
    </View>
  );
}

// ---- EmptyState ----
export function EmptyState({ text }: { text: string }) {
  return (
    <Card>
      <Text style={s.body}>{text}</Text>
    </Card>
  );
}

// ---- GardenChoiceChips ----
export function GardenChoiceChips<T extends string>({ options, value, onChange }: { options: { value: T; label: string }[]; value: T | null; onChange: (value: T) => void }) {
  return (
    <View style={s.choiceWrap}>
      {options.map(option => (
        <TouchableOpacity
          key={option.value}
          style={[s.choiceChip, value !== null && value === option.value && s.choiceChipActive]}
          activeOpacity={0.82}
          onPress={pressWithHaptic(() => onChange(option.value))}
        >
          <Text style={[s.choiceText, value !== null && value === option.value && s.choiceTextActive]}>{option.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

// ---- GardenMultiChips ----
export function GardenMultiChips({ options, values, onToggle }: { options: { value: string; label: string }[]; values: string[]; onToggle: (value: string) => void }) {
  return (
    <View style={s.choiceWrap}>
      {options.map(option => {
        const active = values.includes(option.value);
        return (
          <TouchableOpacity
            key={option.value}
            style={[s.choiceChip, active && s.choiceChipActive]}
            activeOpacity={0.82}
            onPress={pressWithHaptic(() => onToggle(option.value))}
          >
            <Text style={[s.choiceText, active && s.choiceTextActive]}>{option.label}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

// ---- Styles ----
const s = StyleSheet.create({
  pill: { backgroundColor: '#F3F7E6', borderRadius: 999, paddingHorizontal: 10, paddingVertical: 3 },
  pillActive: { backgroundColor: green },
  pillText: { color: '#5B7553', fontSize: 12, fontWeight: '700' },
  pillTextActive: { color: '#fff' },
  card: { backgroundColor: 'rgba(255,253,247,0.96)', borderRadius: 18, borderWidth: 1, borderColor: 'rgba(191,217,180,0.95)', padding: 14, marginBottom: 10 },
  sectionRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 7, gap: 8 },
  sectionTitleWrap: { flexDirection: 'row', alignItems: 'center', gap: 7, flex: 1, minWidth: 0 },
  section: { color: dark, fontSize: 18, fontWeight: '900' },
  sectionActions: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  body: { color: '#5B7553', fontSize: 14, lineHeight: 20 },
  choiceWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginBottom: 10 },
  choiceChip: { paddingHorizontal: 11, paddingVertical: 6, borderRadius: 999, borderWidth: 1, borderColor: 'rgba(191,217,180,0.95)', backgroundColor: '#FFFDF7' },
  choiceChipActive: { backgroundColor: green, borderColor: green },
  choiceText: { color: '#5B7553', fontSize: 13, fontWeight: '600' },
  choiceTextActive: { color: '#fff' },
});