/**
 * Form UI components for PixieSprout.
 * FormTextField, FormImagePicker, ContextPhotoStack, SaveCancelActions.
 */
import React from 'react';
import {
  ActivityIndicator,
  Image,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

import { green, dark, haptic, pressWithHaptic } from '../constants/theme';
import type { GardenContextPhoto } from '../types/garden';

// ---- FormTextField ----
export function FormTextField({
  value,
  onChangeText,
  placeholder,
  multiline = false,
  minHeight,
}: {
  value: string;
  onChangeText: (value: string) => void;
  placeholder: string;
  multiline?: boolean;
  minHeight?: number;
}) {
  return (
    <TextInput
      value={value}
      onChangeText={onChangeText}
      placeholder={placeholder}
      placeholderTextColor="#7A704D"
      style={[s.input, multiline && s.notesInput, minHeight != null && { minHeight }]}
      multiline={multiline}
    />
  );
}

// ---- FormImagePicker ----
export function FormImagePicker({
  photoUri,
  onPick,
}: {
  photoUri?: string;
  onPick: () => void;
}) {
  return (
    <>
      {photoUri ? <Image source={{ uri: photoUri }} style={s.formPhoto} resizeMode="cover" /> : null}
      <TouchableOpacity style={s.secondaryButton} activeOpacity={0.86} onPress={pressWithHaptic(onPick)}>
        <Text style={s.secondaryButtonText}>{photoUri ? 'Change Photo' : 'Add Photo'}</Text>
      </TouchableOpacity>
    </>
  );
}

// ---- ContextPhotoStack ----
export function ContextPhotoStack({ photos, label }: { photos: GardenContextPhoto[]; label: string }) {
  if (!photos.length) return null;
  const cover = photos[0];
  const showStack = photos.length > 1;
  return (
    <View style={s.photoStackRow}>
      <View style={s.photoStack}>
        {showStack ? <View style={[s.photoStackLayer, s.photoStackLayerBack]} /> : null}
        {photos.length > 2 ? <View style={[s.photoStackLayer, s.photoStackLayerMid]} /> : null}
        <Image source={{ uri: cover.uri }} style={s.photoStackImage} resizeMode="cover" />
      </View>
      <View style={s.photoStackCopy}>
        <Text style={s.photoStackLabel}>{label}</Text>
        <Text style={s.photoStackCount}>{photos.length} photo{photos.length !== 1 ? 's' : ''}</Text>
      </View>
    </View>
  );
}

// ---- SaveCancelActions ----
export function SaveCancelActions({
  saveLabel,
  onSave,
  disabled = false,
  saving = false,
}: {
  saveLabel: string;
  onSave: () => void;
  onCancel?: () => void;
  disabled?: boolean;
  saving?: boolean;
}) {
  return (
    <TouchableOpacity
      style={[s.button, (disabled || saving) && s.buttonDisabled]}
      activeOpacity={0.86}
      onPress={pressWithHaptic(onSave, haptic.success)}
      disabled={disabled || saving}
    >
      {saving ? <ActivityIndicator color="#fff" /> : <Text style={s.buttonText}>{saveLabel}</Text>}
    </TouchableOpacity>
  );
}

// ---- Styles ----
const s = StyleSheet.create({
  input: { backgroundColor: '#FFFDF7', borderWidth: 1, borderColor: 'rgba(191,217,180,0.95)', borderRadius: 14, paddingHorizontal: 14, paddingVertical: 10, fontSize: 15, color: '#2E6B3F', marginBottom: 10 },
  notesInput: { minHeight: 80, textAlignVertical: 'top' },
  formPhoto: { width: '100%', height: 180, borderRadius: 14, marginBottom: 10 },
  secondaryButton: { minHeight: 44, borderRadius: 14, borderWidth: 1, borderColor: 'rgba(191,217,180,0.95)', backgroundColor: '#FFFDF7', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 16, marginBottom: 8 },
  secondaryButtonText: { color: dark, fontSize: 15, fontWeight: '700' },
  cancelButton: { alignSelf: 'center', minHeight: 36, paddingHorizontal: 14, borderRadius: 18, borderWidth: 1, borderColor: '#C8B9AE', backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center' },
  cancelButtonText: { color: '#7A6A5E', fontSize: 14, fontWeight: '600' },
  buttonRow: { flexDirection: 'row', gap: 10, marginBottom: 8 },
  button: { minHeight: 48, borderRadius: 24, backgroundColor: green, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 20 },
  buttonDisabled: { opacity: 0.5 },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '900' },
  photoStackRow: { flexDirection: 'row', alignItems: 'center', gap: 10, borderRadius: 16, borderWidth: 1, borderColor: '#D6E7BE', backgroundColor: '#FFF9EE', padding: 9, marginBottom: 8 },
  photoStack: { width: 48, height: 48 },
  photoStackLayer: { position: 'absolute', width: 40, height: 40, borderRadius: 10, borderWidth: 1, borderColor: '#D6E7BE', backgroundColor: '#F3F7E6' },
  photoStackLayerBack: { top: 0, left: 6, transform: [{ rotate: '6deg' }] },
  photoStackLayerMid: { top: 2, left: 3, transform: [{ rotate: '-3deg' }] },
  photoStackImage: { width: 44, height: 44, borderRadius: 10 },
  photoStackCopy: { flex: 1 },
  photoStackLabel: { color: dark, fontSize: 14, fontWeight: '700' },
  photoStackCount: { color: '#78694B', fontSize: 12 },
});