import React from 'react';
import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import CountdownRow from '../components/CountdownRow';
import TopControls from '../components/TopControls';

export default function TimeUntilScreen({
  styles,
  theme,
  now,
  darkMode,
  pinkMode,
  isFullscreen,
  targetTime,
  tuHour,
  tuMinute,
  tuIsOver,
  tuCountdown,
  onChangeHour,
  onChangeMinute,
  onSetTimer,
  onResetTimer,
  onBackToMenu,
  onToggleDark,
  onTogglePink,
  onToggleFullscreen,
  onFocus,
}) {
  const isCountingDown = Boolean(tuCountdown) && !tuIsOver;

  const pinkOutlineText = pinkMode
    ? {
        borderColor: theme.pink,
        borderWidth: 2,
        borderRadius: 12,
        paddingHorizontal: 20,
        paddingVertical: 8,
      }
    : {};

  return (
    <View style={[styles.root, { backgroundColor: theme.bg }]}>
      <ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
        <Text
          style={[
            styles.title,
            { color: theme.accent },
            pinkMode && {
              borderColor: theme.accent,
              borderWidth: 2,
              borderRadius: 10,
              paddingHorizontal: 16,
              paddingVertical: 4,
            },
          ]}
        >
          Time Until
        </Text>

        <TopControls
          styles={styles}
          accent={theme.accent}
          pink={theme.pink}
          darkMode={darkMode}
          pinkMode={pinkMode}
          isFullscreen={isFullscreen}
          showBackToMenu
          showFocus={targetTime !== null || tuIsOver}
          onBackToMenu={onBackToMenu}
          onToggleDark={onToggleDark}
          onTogglePink={onTogglePink}
          onToggleFullscreen={onToggleFullscreen}
          onFocus={onFocus}
        />

        <View style={[styles.card, { backgroundColor: theme.cardBg, borderColor: theme.border }]}>
          {!isCountingDown && (
            <>
              <Text style={[styles.inputLabel, { color: theme.subText }]}>Set target time (24h)</Text>
              <View style={styles.inputRow}>
                <TextInput
                  style={[
                    styles.timeInput,
                    { color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
                  ]}
                  placeholder="HH"
                  placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
                  value={tuHour}
                  onChangeText={onChangeHour}
                  keyboardType="numeric"
                  maxLength={2}
                />
                <Text style={[styles.colon, { color: theme.accent }]}>:</Text>
                <TextInput
                  style={[
                    styles.timeInput,
                    { color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
                  ]}
                  placeholder="MM"
                  placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
                  value={tuMinute}
                  onChangeText={onChangeMinute}
                  keyboardType="numeric"
                  maxLength={2}
                />
              </View>

              <View style={styles.btnRow}>
                <TouchableOpacity style={[styles.setBtn, { backgroundColor: theme.accent }]} onPress={onSetTimer}>
                  <Text style={styles.setBtnText}>Set Timer</Text>
                </TouchableOpacity>
                {targetTime && (
                  <TouchableOpacity
                    style={[styles.resetBtn, { borderColor: theme.accent }]}
                    onPress={onResetTimer}
                  >
                    <Text style={[styles.resetBtnText, { color: theme.accent }]}>Reset</Text>
                  </TouchableOpacity>
                )}
              </View>
            </>
          )}

          {isCountingDown && targetTime && (
            <View style={styles.btnRow}>
              <TouchableOpacity
                style={[styles.resetBtn, { borderColor: theme.accent }]}
                onPress={onResetTimer}
              >
                <Text style={[styles.resetBtnText, { color: theme.accent }]}>Reset</Text>
              </TouchableOpacity>
            </View>
          )}

          {tuIsOver ? (
            <View style={styles.overContainer}>
              <Text style={[styles.overText, { color: pinkMode ? theme.pink : theme.danger }, pinkOutlineText]}>
                Time's Up!
              </Text>
              <Text style={[styles.overSub, { color: theme.subText }]}>
                {targetTime?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} has been reached
              </Text>
            </View>
          ) : tuCountdown ? (
            <View style={styles.countdownContainer}>
              <Text style={[styles.countdownLabel, { color: theme.subText }]}> 
                until {targetTime?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
              </Text>
              <CountdownRow
                styles={styles}
                cd={tuCountdown}
                accent={theme.accent}
                subText={theme.subText}
                pinkMode={pinkMode}
                numStyle={styles.countdownNum}
                sepStyle={styles.sep}
              />
            </View>
          ) : (
            <Text style={[styles.placeholder, { color: theme.subText }]}>Enter a time above to start counting down</Text>
          )}
        </View>

        <Text style={[styles.clock, { color: theme.subText }]}>
          {now.toLocaleTimeString([], {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
          })}
        </Text>
      </ScrollView>
    </View>
  );
}