import React from 'react';
import { Image, Pressable, Text, TextInput, View } from 'react-native';
import Field from '../components/Field';
import { styles } from '../styles';

function DateField({ label, value, onPress }) {
  return (
    <Field label={label}>
      <Pressable style={styles.dateInput} onPress={onPress}>
        <Text style={styles.dateInputText}>{value}</Text>
      </Pressable>
    </Field>
  );
}

export default function TripsTab({
  tripForm,
  updateTripForm,
  pickTripImage,
  templateTrip,
  createTrip,
  trips,
  selectedTripId,
  chooseTrip,
  setTripAsTemplate,
  deleteTrip,
  onInputFocus,
  defaultTemplateTripId,
  openDatePicker,
}) {
  return (
    <View style={styles.section}>
      <Text style={styles.sectionTitle}>Trips</Text>

      <View style={styles.cardSoft}>
        <Field label="Name">
          <TextInput
            style={styles.input}
            value={tripForm.name}
            onChangeText={(v) => updateTripForm('name', v)}
            placeholder="Summer Weekend"
            placeholderTextColor="#6b7280"
            onFocus={onInputFocus}
          />
        </Field>

        <Field label="Location">
          <TextInput
            style={styles.input}
            value={tripForm.location}
            onChangeText={(v) => updateTripForm('location', v)}
            placeholder="Berlin"
            placeholderTextColor="#6b7280"
            onFocus={onInputFocus}
          />
        </Field>

        <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
        <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />

        <Pressable style={styles.secondaryBtn} onPress={pickTripImage}>
          <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'Change trip image' : 'Add trip image'}</Text>
        </Pressable>

        {tripForm.imageUri ? <Image source={{ uri: tripForm.imageUri }} style={styles.previewImage} /> : null}

        {templateTrip ? (
          <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('copyDefaultTemplate', !tripForm.copyDefaultTemplate)}>
            <Text style={styles.inlineToggleText}>
              {tripForm.copyDefaultTemplate ? '☑' : '☐'} Copy items from template ({templateTrip.name})
            </Text>
          </Pressable>
        ) : null}

        <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('setAsDefaultTemplate', !tripForm.setAsDefaultTemplate)}>
          <Text style={styles.inlineToggleText}>{tripForm.setAsDefaultTemplate ? '☑' : '☐'} Set as default template</Text>
        </Pressable>

        <Pressable style={styles.primaryBtn} onPress={createTrip}>
          <Text style={styles.primaryBtnText}>Create Trip</Text>
        </Pressable>
      </View>

      {trips
        .slice()
        .sort((a, b) => b.startDate.localeCompare(a.startDate))
        .map((trip) => (
          <View key={trip.id} style={[styles.card, selectedTripId === trip.id && styles.cardActive]}>
            <View style={styles.cardRow}>
              <View style={styles.flex}>
                <Text style={styles.cardTitle}>{trip.name}</Text>
                <Text style={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
                <Text style={styles.cardMeta}>{defaultTemplateTripId === trip.id ? 'Default template' : ' '}</Text>
              </View>
              <View style={styles.stackButtons}>
                <Pressable style={styles.miniBtn} onPress={() => chooseTrip(trip.id)}>
                  <Text style={styles.miniBtnText}>Select</Text>
                </Pressable>
                <Pressable style={styles.miniBtn} onPress={() => setTripAsTemplate(trip.id)}>
                  <Text style={styles.miniBtnText}>Template</Text>
                </Pressable>
                <Pressable style={styles.miniBtnDanger} onPress={() => deleteTrip(trip.id)}>
                  <Text style={styles.miniBtnText}>Delete</Text>
                </Pressable>
              </View>
            </View>
            {trip.imageUri ? <Image source={{ uri: trip.imageUri }} style={styles.previewImageSmall} /> : null}
          </View>
        ))}
    </View>
  );
}