import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, ScrollView } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { ImagePickerComponent } from './ImagePicker';
import { createCar } from '@/lib/database';
import { useGlobalContext } from '@/lib/globalProvider';
import { router } from 'expo-router';

const FUEL_TYPES = ['Petrol', 'Diesel', 'Electric', 'Hybrid'] as const;
const TRANSMISSIONS = ['Manual', 'Automatic'] as const;

export const CarForm = () => {
    const { user } = useGlobalContext();
    const [images, setImages] = useState<string[]>([]);
    const [formData, setFormData] = useState({
        title: '',
        description: '',
        price: '',
        make: '',
        model: '',
        year: '',
        fuelType: 'Petrol' as const,
        transmission: 'Automatic' as const,
        location: ''
    });

    const handleSubmit = async () => {
        try {
            if (!user) throw new Error('User not authenticated');

            await createCar({
                ...formData,
                price: Number(formData.price),
                year: Number(formData.year),
                images: images,
                postedBy: user.$id,
                featured: false
            });

            router.back();
        } catch (error) {
            console.error('Error creating car listing:', error);
            alert('Failed to create car listing');
        }
    };

    return (
        <ScrollView className="p-4">
            <Text className="text-lg font-bold mb-4">Add New Car</Text>
            
            <View className="mb-4">
                <ImagePickerComponent 
                    onImageSelected={setImages}
                    images={images}
                />
            </View>

            {/* Basic Info */}
            <TextInput
                className="border border-gray-300 rounded-lg p-2 mb-4"
                placeholder="Title"
                value={formData.title}
                onChangeText={(text) => setFormData({...formData, title: text})}
            />

            <TextInput
                className="border border-gray-300 rounded-lg p-2 mb-4"
                placeholder="Description"
                multiline
                numberOfLines={4}
                value={formData.description}
                onChangeText={(text) => setFormData({...formData, description: text})}
            />

            <TextInput
                className="border border-gray-300 rounded-lg p-2 mb-4"
                placeholder="Price"
                keyboardType="numeric"
                value={formData.price}
                onChangeText={(text) => setFormData({...formData, price: text})}
            />

            {/* Car Details */}
            <View className="flex-row gap-2 mb-4">
                <TextInput
                    className="flex-1 border border-gray-300 rounded-lg p-2"
                    placeholder="Make"
                    value={formData.make}
                    onChangeText={(text) => setFormData({...formData, make: text})}
                />
                <TextInput
                    className="flex-1 border border-gray-300 rounded-lg p-2"
                    placeholder="Model"
                    value={formData.model}
                    onChangeText={(text) => setFormData({...formData, model: text})}
                />
            </View>

            <View className="flex-row gap-2 mb-4">
                <TextInput
                    className="flex-1 border border-gray-300 rounded-lg p-2"
                    placeholder="Year"
                    keyboardType="numeric"
                    value={formData.year}
                    onChangeText={(text) => setFormData({...formData, year: text})}
                />
                <TextInput
                    className="flex-1 border border-gray-300 rounded-lg p-2"
                    placeholder="Location"
                    value={formData.location}
                    onChangeText={(text) => setFormData({...formData, location: text})}
                />
            </View>

            {/* Pickers */}
            <View className="border border-gray-300 rounded-lg mb-4 px-2">
                <Picker
                    selectedValue={formData.fuelType}
                    onValueChange={(value) => setFormData({...formData, fuelType: value})}
                >
                    {FUEL_TYPES.map((type) => (
                        <Picker.Item key={type} label={type} value={type} />
                    ))}
                </Picker>
            </View>

            <View className="border border-gray-300 rounded-lg mb-4 px-2">
                <Picker
                    selectedValue={formData.transmission}
                    onValueChange={(value) => setFormData({...formData, transmission: value})}
                >
                    {TRANSMISSIONS.map((type) => (
                        <Picker.Item key={type} label={type} value={type} />
                    ))}
                </Picker>
            </View>

            {/* Submit Button */}
            <TouchableOpacity
                onPress={handleSubmit}
                className="bg-blue-500 p-4 rounded-full"
            >
                <Text className="text-white text-center font-semibold">Add Car</Text>
            </TouchableOpacity>
        </ScrollView>
    );
};