"use client"

/*
 * File: SignUpScreen.tsx
 * Description: Main signup screen that manages the onboarding flow through multiple steps.
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import type React from "react"
import { useEffect, useState } from "react"
import { View, StyleSheet, StatusBar, Platform, Keyboard} from "react-native"
import { Colors } from "../../../../shared/src/theme"
import { useAppDispatch } from "../../../redux/hooks"
import { showError, showSuccess } from "../../../../shared/src/utils/helpers/Toast"

// Import all onboarding screens
import EmailScreen from "../components/EmailScreen"
import PasswordScreen from "../components/PasswordScreen"
import NameScreen from "../components/NameScreen"
import DocumentUploadScreen from "../components/DocumentUploadScreen"
import HospitalSelectionScreen from "../components/HospitalSelectionScreen"
import EmailAlreadyRegisteredModal from "../components/EmailAlreadyRegisteredModal"
import { authAPI } from "../services/authAPI"
import { setHospitals } from "../redux/hospitalSlice"

interface SignUpDataInterface {
  email: string
  password: string
  first_name: string
  last_name: string
  username:string
  id_photo_url: {}|null
  hospital_id: string
}

interface SignUpScreenProps {
    navigation: any
}

const SignUpScreen: React.FC<SignUpScreenProps> = ({ navigation }) => {
  const [currentStep, setCurrentStep] = useState(0)
  const [showEmailRegisteredModal, setShowEmailRegisteredModal] = useState(false)
  const [signUpData, setSignUpData] = useState<Partial<SignUpDataInterface>>({
  email: '',
  password: '',
  first_name: '',
  last_name: '',
  username:'',
  id_photo_url: null,
  hospital_id: ''
  })
  const dispatch = useAppDispatch()

  const steps = ["email", "password", "name", "document", "hospital"]

  const handleEmailContinue = async (email: string) => {
    setSignUpData((prev) => ({ ...prev, email }))
    try {
      const response:any=await authAPI.validatemail({email});
      console.log('response',response)
      if(response.status==409&&response.data.message){
        // Show modal instead of toast for already registered email
        setShowEmailRegisteredModal(true)
      }
      if(response.status==200&&response.data.message){
        setCurrentStep(1);
      }
    } catch (error) {
      showError('error while validating your email')
    }
  }

  const handleCloseModal = () => {
    setShowEmailRegisteredModal(false)
  }

  const handleGoToLogin = () => {
    setShowEmailRegisteredModal(false)
    navigation.navigate('Login')
  }

  useEffect(()=>{
    fetchHospitals();
  },[])
  console.log('signup called')
  const fetchHospitals= async ()=>{

      try {

        const response:any = await  authAPI.gethospitals();
        console.log('hospital response',response)
        if(response.ok && response.data &&response.data.data) {
          //@ts-ignore
          dispatch(setHospitals(response.data.data))
        } else {
        showError('error while fetching hospital list')
        }
      } catch (error: any) {
       console.log('error',error)
      }
    
  }
  const onSignUpComplete=async (payload:SignUpData)=>{
    console.log('final payload',payload);
    try {
      const formData = new FormData();
      let role='radiologist'

      formData.append('email',payload.email);
      formData.append('password', payload.password);
      formData.append('first_name', payload.first_name);
      formData.append('last_name', payload.last_name);
      formData.append('username', payload.username);
      formData.append('dashboard_role',role);
      formData.append('hospital_id', payload.hospital_id);
      
      // Attach file (Node.js or React Native: use File or Blob API accordingly)
      const filePath = payload.id_photo_url.uri;
      const file = {
        uri: Platform.OS === 'android' ? filePath! : filePath!.replace('file://', ''), // for React Native
        name: 'id_photo',
        type: 'image/jpg',
      };
      formData.append('id_photo_url', file);
      console.log('payload prepared',formData);
      const response:any = await  authAPI.signup(formData);
      console.log('signup response',response)
      if(response.ok && response.data && response.data.success ) {
        //@ts-ignore
        showSuccess('Sign Up Successfully')
        navigation.navigate('Login');
        // dispatch(setHospitals(response.data.data))
      } else {
        showError('error while signup');
        if( response.data && response.data.message ) {
          //@ts-ignore
          showError(response.data.message)
        } 
      
      }
    } catch (error: any) {
     console.log('error',error)
    }
  }
  const onBack=()=>{
   navigation.goBack()
  }
  const handlePasswordContinue = (password: string) => {
    setSignUpData((prev) => ({ ...prev, password }))
    setCurrentStep(2)
  }

  const handleNameContinue = async (firstName: string, lastName: string,userName:string) => {
    setSignUpData((prev) => ({ ...prev, first_name : firstName, last_name : lastName ,username: userName}))
    try {
      const response:any=await authAPI.validateusername(userName);
      console.log('response',response)
      if(response.status==409&&response.data.message){
        showError(response.data.message);
      }
      if(response.status==200&&response.data.message){
        setCurrentStep(3);
      }
    } catch (error) {
      showError('error while validating your email')
    }
    
  }

  const handleDocumentContinue = (documentUri: string) => {
    setSignUpData((prev) => ({ ...prev, id_photo_url:documentUri }))
    setCurrentStep(4)
  }

  const handleHospitalContinue = (hospitalId: string) => {
    const finalData: SignUpData = {
      ...signUpData,
      hospital_id:hospitalId,
    } as SignUpData

    setSignUpData(finalData)

    // Show success message

    // Call completion handler
    if (onSignUpComplete) {
      onSignUpComplete(finalData)
    }

    // Here you would typically dispatch a signup action
    // dispatch(signUp(finalData))
  }

  const handleBack = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    } else if (onBack) {
        onBack()
    }
  }

  const renderCurrentStep = () => {
    console.log('signupdate',signUpData)
    switch (currentStep) {
      case 0:
        return <EmailScreen onContinue={handleEmailContinue} onBack={handleBack} Data={signUpData} />
      case 1:
        return <PasswordScreen onContinue={handlePasswordContinue} onBack={handleBack} Data={signUpData} />
      case 2:
        return <NameScreen onContinue={handleNameContinue} onBack={handleBack} Data={signUpData} />
      case 3:
        return <DocumentUploadScreen onContinue={handleDocumentContinue} onBack={handleBack} Data={signUpData} />
      case 4:
        return <HospitalSelectionScreen onContinue={handleHospitalContinue} onBack={handleBack} Data={signUpData} />
      default:
        return <EmailScreen onContinue={handleEmailContinue} onBack={handleBack}  Data={signUpData}/>
    }
  }

  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor={Colors.background} />
      {renderCurrentStep()}
      
      <EmailAlreadyRegisteredModal
        visible={showEmailRegisteredModal}
        onClose={handleCloseModal}
        onGoToLogin={handleGoToLogin}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.background,
  },
})

export default SignUpScreen

/*
 * End of File: SignUpScreen.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */