import React, { useState } from 'react'
import { Text, View } from 'react-native'
import { useGlobal } from 'reactn'
import { background } from '../assets'
import GradientButton from '../components/GradientButton'
import { Input } from '../components/Input'
import ItemContainer from '../components/ItemContainer/ItemContainer'
import firebase, { usersRef } from '../config/firebase'
import Page from '../layouts/Page'
import { isWeb } from '../hooks/useLayoutType'
import { Routes } from '../navigation'
import { navigate } from '../navigation/NavigationService'
import { Palette } from '../styles'
import { FONT_FAMILY } from '../styles/Fonts'

const CreatePseudo = () => {
  const [userName, setUserName] = useState('')
  const [loading, setLoading] = useState(false)
  const [, setTooltip] = useGlobal('_tooltip')

  const onCreate = async () => {
    const raw = userName || ''
    const val = raw.trim()
    if (!val) return
    try {
      setLoading(true)
      const uid = firebase.auth().currentUser?.uid
      if (!uid) {
        return navigate(Routes.Login)
      }
      // Check uniqueness (case-insensitive)
      const lower = val.toLowerCase()
      const snap = await usersRef.where('userNameLower', '==', lower).limit(1).get()
      if (!snap.empty && snap.docs[0].id !== uid) {
        setTooltip({ text: 'Ce pseudo est déjà pris', type: 'error' })
        return
      }

      await usersRef.doc(uid).set(
        {
          userName: val,
          userNameLower: lower,
          updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
          createdAt: firebase.firestore.FieldValue.serverTimestamp(),
          email: firebase.auth().currentUser?.email || null,
        },
        { merge: true }
      )
      setTooltip({ text: `Bienvenue ${val}`, type: 'success' })
      navigate(Routes.BottomTab)
    } catch (e) {
      console.log('CreatePseudo error', e?.message)
      setTooltip({
        text: e?.message || 'Enregistrement impossible',
        type: 'error',
      })
    } finally {
      setLoading(false)
    }
  }

  return (
    <Page
      width={isWeb ? 600 : null}
      backgroundImg={isWeb ? background.loginBgWeb : background.homeBG}
      headerType="NAVIGATION"
      title="Ton pseudo"
      hideBackButton
    >
      <View style={{ flex: 1, paddingTop: 20 }}>
        <ItemContainer height={275}>
          <View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
            <View style={{ gap: 16 }}>
              <View style={{ gap: 2 }}>
                <Text
                  style={{
                    fontSize: 22,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterSemiBold,
                  }}
                >
                  Choisis ton pseudo
                </Text>
                <Text
                  style={{
                    fontSize: 14,
                    color: Palette.gray,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  Visible par les autres utilisateurs.
                </Text>
              </View>
              <Input
                placeholder="Pseudo"
                label="Pseudo"
                isBlur
                value={userName}
                setValue={setUserName}
              />
            </View>
            <GradientButton
              title={loading ? 'Chargement...' : 'Valider'}
              containerStyle={{
                width: '80%',
                alignSelf: 'center',
              }}
              onPress={onCreate}
              disabled={loading || !userName?.trim()}
            />
          </View>
        </ItemContainer>
      </View>
    </Page>
  )
}

export default CreatePseudo