import React, { useState } from 'react';
import { View, Text, TouchableOpacity, TextInput, Modal, KeyboardAvoidingView, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Plus } from 'lucide-react-native';
import * as Haptics from 'expo-haptics';

interface TopBarProps {
  mode: 'camera' | 'library';
  recipeName: string;
  onSaveRecipe: (name: string) => void;
}

export default function TopBar({ mode, recipeName, onSaveRecipe }: TopBarProps) {
  const insets = useSafeAreaInsets();
  const [modalVisible, setModalVisible] = useState(false);
  const [newRecipeName, setNewRecipeName] = useState('');

  const handleSavePress = () => {
    const name = newRecipeName.trim();
    if (!name) return;
    onSaveRecipe(name);
    setNewRecipeName('');
    setModalVisible(false);
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  };

  return (
    <>
      <View
        style={{ paddingTop: insets.top + 6 }}
        className="absolute top-0 left-0 right-0 z-20 flex-row items-start justify-between px-4"
      >
        <View className="max-w-[62%] rounded-xl border border-zinc-800/80 bg-black/45 px-3 py-2">
          <Text className="text-amber-500 font-mono text-[9px] font-bold tracking-[0.2em]">
            {mode === 'camera' ? 'LIVE' : 'LIBRARY'}
          </Text>
          <Text
            numberOfLines={1}
            className="text-white font-mono text-sm font-bold tracking-wide"
          >
            {recipeName}
          </Text>
        </View>

        <TouchableOpacity
          onPress={() => setModalVisible(true)}
          className="flex-row items-center rounded-full border border-zinc-700/80 bg-black/45 px-4 py-2.5"
          activeOpacity={0.7}
        >
          <Plus size={14} color="#f59e0b" />
          <Text className="ml-1 font-mono text-xs font-bold tracking-widest text-amber-500">
            SAVE
          </Text>
        </TouchableOpacity>
      </View>

      <Modal
        transparent
        animationType="slide"
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View className="absolute inset-0 bg-black/60" />
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        >
          <View style={{ paddingBottom: insets.bottom + 16 }} className="mt-auto bg-titan border-t border-zinc-800 rounded-t-3xl p-6">
            <Text className="text-white font-mono text-sm font-bold tracking-wider mb-4">
              SAVE CURRENT AS RECIPE
            </Text>
            <TextInput
              value={newRecipeName}
              onChangeText={setNewRecipeName}
              placeholder="Recipe name (e.g. Fuji Retro)"
              placeholderTextColor="#71717a"
              className="bg-carbon border border-zinc-800 rounded-lg p-3 text-white font-mono text-sm mb-4"
              autoFocus
              onSubmitEditing={handleSavePress}
            />
            <View className="flex-row space-x-3">
              <TouchableOpacity
                onPress={() => setModalVisible(false)}
                className="flex-1 bg-zinc-800 py-3 rounded-lg items-center"
              >
                <Text className="text-zinc-300 font-mono text-xs font-semibold">CANCEL</Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={handleSavePress}
                className="flex-1 bg-amber-500 py-3 rounded-lg items-center"
              >
                <Text className="text-black font-mono text-xs font-bold">SAVE RECIPE</Text>
              </TouchableOpacity>
            </View>
          </View>
        </KeyboardAvoidingView>
      </Modal>
    </>
  );
}