import React, { useMemo, useState } from 'react';
import {
  ActivityIndicator,
  Modal,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  useWindowDimensions,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { green, dark, line } from '../constants/theme';
import type { SavedPlantProfile } from '../types/plantScan';
import type { SeedIdentificationResult } from '../services/plantIdentification/types';

/**
 * PlantSeedModal — Phase 3 (2026-09-07).
 *
 * The "Plant" flow for a saved seed. Shows the seed's own propagation methods
 * (from the AI scan), lets the user pick which method they're actually doing
 * (like the cutting modal), and adds it to the Garden as a seed plant.
 *
 * The guidance is per-seed — not a generic guide — because people don't know
 * terms like "orthodox" vs "recalcitrant" (Bekky, 2026-09-07).
 */
export function PlantSeedModal({
  visible,
  plant,
  seed,
  onPlant,
  onClose,
}: {
  visible: boolean;
  plant: SavedPlantProfile;
  seed: SeedIdentificationResult;
  /** Add the seed to the Garden with the chosen method (Bekky, 2026-09-07). */
  onPlant: (method: string) => void;
  onClose: () => void;
}) {
  const [selectedMethod, setSelectedMethod] = useState<string | null>(null);

  // Guard: `seed` can be undefined when the modal is closed (plantingSeed is
  // null → seed={plantingSeed?.seed!} is undefined). Accessing .propagationMethods
  // on undefined would throw and crash the Garden tab (Bekky, 2026-09-07).
  const methods = useMemo(() => seed?.propagationMethods || [], [seed]);

  const insets = useSafeAreaInsets();
  const { height: windowHeight } = useWindowDimensions();
  const cardMaxHeight = Math.max(320, windowHeight - (insets.top + 24) - (insets.bottom + 24));

  if (!visible) return null;

  const name = plant?.commonName || seed?.commonName || 'Unknown seed';

  return (
    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
      <View style={s.overlay}>
        <View style={[s.card, { maxHeight: cardMaxHeight }]}>
          <View style={s.header}>
            <Text style={s.emoji}>🌱</Text>
            <Text style={s.title}>Plant Seed</Text>
            <Text style={s.subtitle}>{name}</Text>
            <TouchableOpacity style={s.headerClose} activeOpacity={0.7} onPress={onClose} accessibilityRole="button" accessibilityLabel="Close">
              <Text style={s.headerCloseText}>✕</Text>
            </TouchableOpacity>
          </View>

          {methods.length === 0 ? (
            <View style={s.loadingWrap}>
              <Text style={s.loadingText}>No specific planting methods were found for this seed.</Text>
              <Text style={s.noteText}>
                You can still add it to your Garden — Pixie will use the general seed-starting guidance.
              </Text>
              <TouchableOpacity style={s.primaryButton} activeOpacity={0.86} onPress={() => onPlant('direct_sow')}>
                <Text style={s.primaryButtonText}>Add to Garden</Text>
              </TouchableOpacity>
            </View>
          ) : (
            <ScrollView
              style={[s.methodsList, { maxHeight: Math.max(180, cardMaxHeight - 118) }]}
              contentContainerStyle={s.methodsListContent}
              showsVerticalScrollIndicator={false}
            >
              <Text style={s.sectionLabel}>Choose how you're planting it</Text>
              {methods.map((method, i) => {
                const isOpen = selectedMethod === method.method;
                return (
                  <TouchableOpacity
                    key={`${method.method}_${i}`}
                    style={[s.methodCard, isOpen && s.methodCardSelected]}
                    activeOpacity={0.86}
                    onPress={() => setSelectedMethod(isOpen ? null : method.method)}
                  >
                    <View style={s.methodHeader}>
                      <Text style={s.methodIcon}>🌱</Text>
                      <View style={s.methodInfo}>
                        <Text style={s.methodName}>{method.method}</Text>
                        {method.timeframe ? <Text style={s.methodTimeframe}>{method.timeframe}</Text> : null}
                        {method.difficulty ? <Text style={s.methodDifficulty}>Difficulty: {method.difficulty}</Text> : null}
                      </View>
                    </View>
                    {isOpen && method.instructions && method.instructions.length ? (
                      <View style={s.methodBody}>
                        {method.instructions.map((step, j) => (
                          <Text key={`step_${j}`} style={s.stepText}>- {step}</Text>
                        ))}
                      </View>
                    ) : null}
                  </TouchableOpacity>
                );
              })}

              <TouchableOpacity
                style={[s.primaryButton, !selectedMethod && s.primaryButtonDisabled]}
                activeOpacity={0.86}
                disabled={!selectedMethod}
                onPress={() => selectedMethod && onPlant(selectedMethod)}
              >
                <Text style={s.primaryButtonText}>Add to Garden</Text>
              </TouchableOpacity>
            </ScrollView>
          )}
        </View>
      </View>
    </Modal>
  );
}

const s = StyleSheet.create({
  overlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', alignItems: 'center', justifyContent: 'center', padding: 20 },
  card: { width: '100%', maxWidth: 420, borderRadius: 24, backgroundColor: '#F8F4E8', padding: 18, overflow: 'hidden' },
  header: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
  emoji: { fontSize: 26, marginRight: 8 },
  title: { color: dark, fontSize: 18, fontWeight: '900' },
  subtitle: { flex: 1, minWidth: 0, color: '#7A704D', fontSize: 13, fontWeight: '700', marginLeft: 8, marginRight: 8 },
  headerClose: { minWidth: 32, height: 32, borderRadius: 16, backgroundColor: '#E8E0C8', alignItems: 'center', justifyContent: 'center' },
  headerCloseText: { color: dark, fontSize: 14, fontWeight: '900' },
  loadingWrap: { alignItems: 'center', paddingVertical: 24, paddingHorizontal: 8 },
  loadingText: { color: dark, fontSize: 14, fontWeight: '800', textAlign: 'center', marginBottom: 8 },
  noteText: { color: '#7A704D', fontSize: 12, lineHeight: 17, fontWeight: '600', textAlign: 'center', marginBottom: 16 },
  methodsList: { flex: 1 },
  methodsListContent: { paddingBottom: 8 },
  sectionLabel: { color: dark, fontSize: 13, fontWeight: '900', marginBottom: 8 },
  methodCard: { borderRadius: 16, borderWidth: 1, borderColor: line, backgroundColor: '#FFFDF7', padding: 12, marginBottom: 8 },
  methodCardSelected: { borderColor: green, borderWidth: 1.5 },
  methodHeader: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  methodIcon: { fontSize: 20 },
  methodInfo: { flex: 1, minWidth: 0 },
  methodName: { color: dark, fontSize: 14, fontWeight: '900' },
  methodTimeframe: { color: '#6B7E6E', fontSize: 12, fontWeight: '600', marginTop: 1 },
  methodDifficulty: { color: '#8A783D', fontSize: 11, fontWeight: '700', marginTop: 1 },
  methodBody: { borderTopWidth: 1, borderTopColor: line, marginTop: 10, paddingTop: 8 },
  stepText: { color: '#2F302A', fontSize: 12, lineHeight: 17, fontWeight: '600', marginBottom: 3 },
  primaryButton: { minHeight: 48, borderRadius: 24, backgroundColor: green, alignItems: 'center', justifyContent: 'center', marginTop: 8 },
  primaryButtonDisabled: { opacity: 0.5 },
  primaryButtonText: { color: '#fff', fontSize: 15, fontWeight: '900' },
});