import { Tabs, useLocalSearchParams } from 'expo-router';
import { Chrome as Home, ShoppingCart, Clock, CreditCard } from 'lucide-react-native';
import { StyleSheet, View, Modal, Text, TextInput, TouchableOpacity } from 'react-native';
import React, { useEffect, useState } from 'react';
import { useLanguage } from '@/contexts/LanguageContext';
import { useTranslation } from '@/hooks/useTranslation';
import { useSessionRefresh } from '@/hooks/useSessionRefresh';
import { useCustomerId } from '@/hooks/useCustomerId';
import { API_URL } from '@/config';
import { getLanguageLabel } from '@/utils/languages';

export default function TabLayout() {
  // セッション更新フックを使用
  useSessionRefresh();
  const { customerId } = useCustomerId();
  const [customer, setCustomer] = useState<any>(null);
  const [passcodeInput, setPasscodeInput] = useState('');
  const [confirmPasscode, setConfirmPasscode] = useState('');
  const [passcodeVerified, setPasscodeVerified] = useState(false);
  const [showSetupModal, setShowSetupModal] = useState(false);
  const [showVerifyModal, setShowVerifyModal] = useState(false);
  const [setupError, setSetupError] = useState('');
  const [verifyError, setVerifyError] = useState('');
  const { language, setLanguage, availableLanguages } = useLanguage();
  const { t } = useTranslation();
  const params = useLocalSearchParams();
  const passcodeParam = Array.isArray(params.passcode) ? params.passcode[0] : params.passcode;

  const toggleLanguage = () => {
    if (availableLanguages.length <= 1) return;
    const index = availableLanguages.indexOf(language);
    const next = availableLanguages[(index + 1) % availableLanguages.length];
    setLanguage(next);
  };

  useEffect(() => {
    const fetchCustomer = async () => {
      if (!customerId) return;
      try {
        const res = await fetch(`${API_URL}/customers/${customerId}`, {
          headers: { 'X-App-Type': 'front' },
          credentials: 'include',
        });
        if (res.ok) {
          const data = await res.json();
          setCustomer(data);
          if (!data.passcode) {
            setShowSetupModal(true);
          } else if (!passcodeParam) {
            // URLにパスコードが含まれていない場合のみ入力モーダルを表示
            setShowVerifyModal(true);
          }
        }
      } catch (e) {
        console.error('Error fetching customer', e);
      }
    };
    setPasscodeVerified(false);
    fetchCustomer();
  }, [customerId]);

  const handleSetPasscode = async () => {
    if (!customer) return;
    const trimmedPasscode = passcodeInput.trim();
    const trimmedConfirm = confirmPasscode.trim();
    setSetupError('');
    if (!trimmedPasscode) {
      setSetupError('パスコードを入力してください');
      return;
    }
    if (trimmedPasscode !== trimmedConfirm) {
      setSetupError('確認用のパスコードが一致しません');
      return;
    }
    try {
      const res = await fetch(`${API_URL}/customers/${customer.id}/passcode`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-App-Type': 'front' },
        credentials: 'include',
        body: JSON.stringify({ passcode: trimmedPasscode }),
      });
      if (res.ok) {
        setShowSetupModal(false);
        setPasscodeVerified(true);
        setCustomer((prev: any) =>
          prev ? { ...prev, passcode: trimmedPasscode } : prev
        );
        setPasscodeInput('');
        setConfirmPasscode('');
      } else {
        const data = await res.json().catch(() => null);
        setSetupError(data?.error || 'パスコードの設定に失敗しました');
      }
    } catch (e) {
      console.error('set passcode error', e);
      setSetupError('パスコードの設定に失敗しました');
    }
  };

  const handleVerifyPasscode = async (code?: string) => {
    if (!customer) return;
    setVerifyError('');
    const passcode = typeof code === 'string' ? code : passcodeInput;
    try {
      const res = await fetch(`${API_URL}/customers/${customer.id}/verify-passcode`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-App-Type': 'front' },
        credentials: 'include',
        body: JSON.stringify({ passcode }),
      });
      if (res.ok) {
        setShowVerifyModal(false);
        setPasscodeVerified(true);
      } else {
        setVerifyError('パスコードが正しくありません');
      }
    } catch (e) {
      console.error('verify passcode error', e);
      setVerifyError('パスコードの確認中にエラーが発生しました');
    }
  };

  useEffect(() => {
    if (customer && passcodeParam) {
      setPasscodeInput(passcodeParam);
      handleVerifyPasscode(passcodeParam);
    }
  }, [customer, passcodeParam]);

  return (
    <View style={{ flex: 1 }}>
      <Tabs
        key={language}
        screenOptions={{
          headerShown: false,
          tabBarActiveTintColor: '#3B82F6',
          tabBarInactiveTintColor: '#6B7280',
          tabBarStyle: styles.tabBar,
          tabBarLabelStyle: styles.tabBarLabel,
        }}>
      <Tabs.Screen
        name="index"
        options={{
          title: t('menu'),
          tabBarIcon: ({ size, color }) => (
            <Home size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="cart"
        options={{
          title: t('cart'),
          tabBarIcon: ({ size, color }) => (
            <ShoppingCart size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="orders"
        options={{
          title: t('orders'),
          tabBarIcon: ({ size, color }) => (
            <Clock size={size} color={color} />
          ),
        }}
      />

      <Tabs.Screen
        name="billing"
        options={{
          title: t('billing'),
          tabBarIcon: ({ size, color }) => (
            <CreditCard size={size} color={color} />
          ),
        }}
      />
      </Tabs>
      {availableLanguages.length > 1 && (
        <TouchableOpacity style={styles.langSwitch} onPress={toggleLanguage}>
          <Text style={styles.langSwitchText}>{getLanguageLabel(language)}</Text>
        </TouchableOpacity>
      )}
      {!passcodeVerified && (showSetupModal || showVerifyModal) && (
        <View style={styles.overlay} pointerEvents="auto" />
      )}
      {showSetupModal && (
        <Modal transparent>
          <View style={styles.modalContainer}>
            <View style={styles.modalContent}>
              <Text style={styles.modalTitle}>{t('passcodeSetup')}</Text>
              <TextInput
                secureTextEntry
                style={styles.input}
                value={passcodeInput}
                onChangeText={(text) => {
                  if (setupError) {
                    setSetupError('');
                  }
                  setPasscodeInput(text);
                }}
                placeholder={t('passcode')}
              />
              <TextInput
                secureTextEntry
                style={styles.input}
                value={confirmPasscode}
                onChangeText={(text) => {
                  if (setupError) {
                    setSetupError('');
                  }
                  setConfirmPasscode(text);
                }}
                placeholder={t('confirmPasscode')}
              />
              {setupError !== '' && <Text style={styles.errorText}>{setupError}</Text>}
              <TouchableOpacity style={styles.button} onPress={handleSetPasscode}>
                <Text style={styles.buttonText}>{t('save')}</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      )}
      {showVerifyModal && (
        <Modal transparent>
          <View style={styles.modalContainer}>
            <View style={styles.modalContent}>
              <Text style={styles.modalTitle}>{t('passcodeInput')}</Text>
              <TextInput
                secureTextEntry
                style={styles.input}
                value={passcodeInput}
                onChangeText={setPasscodeInput}
                placeholder={t('passcode')}
              />
              {verifyError !== '' && <Text style={styles.errorText}>{verifyError}</Text>}
              <TouchableOpacity style={styles.button} onPress={() => handleVerifyPasscode()}>
                <Text style={styles.buttonText}>{t('confirm')}</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: '#FFFFFF',
    borderTopWidth: 1,
    borderTopColor: '#E5E7EB',
    paddingBottom: 8,
    paddingTop: 8,
    height: 70,
  },
  tabBarLabel: {
    fontSize: 12,
    fontWeight: '600',
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.3)',
    zIndex: 100,
  },
  modalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 8,
    width: '80%',
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 12,
    textAlign: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    padding: 8,
    marginBottom: 12,
  },
  button: {
    backgroundColor: '#3B82F6',
    padding: 12,
    borderRadius: 4,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontWeight: '600',
  },
  errorText: {
    color: '#EF4444',
    marginBottom: 12,
    textAlign: 'center',
  },
  langSwitch: {
    position: 'absolute',
    top: 40,
    right: 20,
    backgroundColor: '#FFFFFF',
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#D1D5DB',
  },
  langSwitchText: {
    fontSize: 14,
    fontWeight: '600',
  },
});