'use client'

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

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

import { useSideNavState } from '@/store/sideNavState'
import { useHeaderStore } from '@/store/header'
import { useSessionStore } from '@/store/session'
import { useTitle } from '@/hooks/useTitle'

import { axiosInstance } from '@/libs/axios'

import 'swiper/css'

export default function Header() {
  const router = useRouter()
  const pathname = usePathname()
  const { sideNavIsOpen, setSideNavIsOpen } = useSideNavState()
  const { backBtn } = useHeaderStore()
  const { getTitle } = useTitle()

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

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

  const handleLogout = async () => {
    reset()
    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.category}</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">
                      <div className="side-swiper-icon icon01"></div>
                      <div className="side-swiper-infor">私は作成した物件</div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="side-swiper-card">
                      <div className="side-swiper-icon icon02"></div>
                      <div className="side-swiper-infor">私は作成したお問 い合わせ</div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="side-swiper-card">
                      <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')}>調査物件一覧</button>
                  </li>
                  <li className="side-nav-item">
                    <button onClick={() => router.push('/survey-sale/basic-info')}>調査物件登録</button>
                  </li>
                  <li className="side-nav-item">
                    <button onClick={() => router.push('/inquiry/list')}>1:1お問い合わせ</button>
                  </li>
                  <li className="side-nav-item">
                    <button onClick={() => router.push('/inquiry/regist')}>1:1お問い合わせ登録</button>
                  </li>
                  <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>{session.userId}</button>
                  </li>
                  <li className="side-footer-item">
                    <button onClick={() => router.push('/')}>HOME</button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </header>
      </div>
    </>
  )
}