'use client'

import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'

import { useLocalStorage } from 'usehooks-ts'
import { useQueryClient } from '@tanstack/react-query'
import { Swiper, SwiperSlide } from 'swiper/react'

import { useSideNavState } from '@/store/sideNavState'
import { useHeaderStore } from '@/store/header'
import { useSessionStore } from '@/store/session'
import { usePopupController } from '@/store/popupController'

import { useTitle } from '@/hooks/useTitle'
import { useAxios } from '@/hooks/useAxios'
import 'swiper/css'

export default function Header() {
  const router = useRouter()
  const pathname = usePathname()
  const { axiosInstance } = useAxios()
  const [value, setValue, removeValue] = useLocalStorage<{ indivisualData: string }>('hanasysIndivisualState', { indivisualData: '' })
  const { sideNavIsOpen, setSideNavIsOpen } = useSideNavState()
  const { backBtn } = useHeaderStore()
  const { getTitle } = useTitle()

  const { session, reset } = useSessionStore()
  const queryClient = useQueryClient()

  const popupController = usePopupController()

  if (pathname === '/login') {
    return null
  }

  const handleLogout = async () => {
    reset()
    removeValue()
    const { data } = await axiosInstance(null).get('/api/auth/logout')
    if (data.code === 200) {
      queryClient.clear()
      router.push('/login')
    }
  }

  return (
    <>
      <div className="header-warp">
        <header>
          <div className="header-inner">
            {backBtn && (
              <div className="back-button-wrap">
                <button className="back-button" onClick={() => router.back()}></button>
              </div>
            )}
            <h2 className="logo">
              <Link href={'/'}>{getTitle(pathname)}</Link>
            </h2>
            <div className="side-button-wrap">
              <button className="side-button" onClick={() => setSideNavIsOpen(true)}></button>
            </div>
          </div>
          <div className={`side-nav ${sideNavIsOpen ? 'active' : ''}`}>
            <div className="side-nav-inner">
              <div className="side-nav-header">
                <div className="side-header-profile">
                  <div className="profile-img">
                    <img src="/assets/images/layout/side_nav_profile.svg" alt="profile" />
                  </div>
                  <div className="profile-group">
                    <div className="profile-name">{session.userNm}</div>
                    <div className="profile-company">{session.storeNm}</div>
                  </div>
                </div>
                <div className="side-close-wrap">
                  <button className="side-close-btn" onClick={() => setSideNavIsOpen(false)}></button>
                </div>
              </div>
              <div className="side-swiper-wrap">
                <Swiper slidesPerView={1.6} spaceBetween={12} className="mySwiper">
                  <SwiperSlide>
                    <div
                      className="side-swiper-card"
                      onClick={() => {
                        router.push('/survey-sale?isMySurvey=true')
                        setSideNavIsOpen(false)
                      }}
                    >
                      <div className="side-swiper-icon icon01"></div>
                      <div className="side-swiper-infor">私は作成した物件</div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div
                      className="side-swiper-card"
                      onClick={() => {
                        router.push('/inquiry/list?isMyInquiry=true')
                        setSideNavIsOpen(false)
                      }}
                    >
                      <div className="side-swiper-icon icon02"></div>
                      <div className="side-swiper-infor">私は作成したお問 い合わせ</div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="side-swiper-card" onClick={() => router.push('/suitable')}>
                      <div className="side-swiper-icon icon01"></div>
                      <div className="side-swiper-infor">屋根材適合性の確認</div>
                    </div>
                  </SwiperSlide>
                </Swiper>
              </div>
              <nav className="side-nav-wrap">
                <ul className="side-nav-list">
                  <li className="side-nav-item">
                    <button
                      onClick={() => {
                        router.push('/survey-sale?isMySurvey=false')
                      }}
                    >
                      調査物件一覧
                    </button>
                  </li>
                  <li className="side-nav-item">
                    <button onClick={() => router.push('/survey-sale/regist')}>調査物件登録</button>
                  </li>
                  <li className="side-nav-item">
                    <button onClick={() => router.push('/inquiry/list?isMyInquiry=false')}>お問い合わせ</button>
                  </li>
                  <li className="side-nav-item">
                    <button onClick={() => router.push('/inquiry/regist')}>お問い合わせ登録</button>
                  </li>
                  {session.role !== 'Partner' && (
                    <li className="side-nav-item">
                      <button onClick={() => router.push('/pw-reset')}>パスワードリセット</button>
                    </li>
                  )}
                </ul>
              </nav>
              <div className="side-nav-footer">
                <ul className="side-footer-list">
                  <li className="side-footer-item">
                    <button className="bold" onClick={handleLogout}>
                      LOGOUT
                    </button>
                  </li>
                  <li className="side-footer-item">
                    <button onClick={() => popupController.setMemberInfomationPopup(true)}>MY ADMIN</button>
                  </li>
                  <li className="side-footer-item">
                    <button onClick={() => router.push('/')}>HOME</button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </header>
      </div>
    </>
  )
}