'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { createBrowserClient } from '@supabase/ssr';
import { User } from '@supabase/supabase-js';

export default function Header() {
  const [user, setUser] = useState<User | null>(null);
  const [tokens, setTokens] = useState<number>(0);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );

  useEffect(() => {
    const getUser = async () => {
      const { data: { user } } = await supabase.auth.getUser();
      setUser(user);

      if (user) {
        // 토큰 정보 가져오기
        const { data: profile } = await supabase
          .from('user_profiles')
          .select('tokens')
          .eq('user_id', user.id)
          .single();

        if (profile) {
          setTokens(profile.tokens || 0);
        }
      }
    };

    getUser();

    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null);
      if (!session?.user) {
        setTokens(0);
      }
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return (
    <header className="glass-nav fixed top-0 left-0 right-0 z-50">
      <nav className="container-custom">
        <div className="flex items-center justify-between h-16 md:h-20">
          {/* 로고 */}
          <Link href="/" className="flex items-center space-x-2 group">
            <div className="w-10 h-10 bg-gradient-to-br from-[#d4af37] to-[#F3E7E3] rounded-lg flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
              <span className="text-[#173658] text-xl font-bold">사</span>
            </div>
            <span className="text-white text-xl md:text-2xl font-bold hidden sm:block">
              사주포춘
            </span>
          </Link>

          {/* 데스크탑 메뉴 */}
          <div className="hidden md:flex items-center space-x-1">
            <Link
              href="/saju"
              className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
            >
              사주 분석
            </Link>
            <Link
              href="/compatibility"
              className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
            >
              궁합
            </Link>
            <Link
              href="/tojeong"
              className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
            >
              토정비결
            </Link>
            <Link
              href="/fortune"
              className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
            >
              오늘의 운세
            </Link>
          </div>

          {/* 우측 사용자 메뉴 */}
          <div className="flex items-center space-x-3">
            {user ? (
              <>
                {/* 토큰 표시 */}
                <div className="hidden sm:flex items-center space-x-2 bg-[#F3E7E3] px-3 py-1.5 rounded-full">
                  <svg className="w-5 h-5 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
                  </svg>
                  <span className="text-[#173658] font-bold text-sm">{tokens}</span>
                </div>

                {/* 프로필 버튼 */}
                <Link
                  href="/mypage"
                  className="bg-[#F3E7E3] hover:bg-[#d4af37] text-[#173658] px-4 py-2 rounded-lg transition-all font-medium text-sm shadow-md hover:shadow-lg"
                >
                  <span className="hidden sm:inline">마이페이지</span>
                  <span className="sm:hidden">MY</span>
                </Link>
              </>
            ) : (
              <Link
                href="/login"
                className="bg-[#F3E7E3] hover:bg-[#d4af37] text-[#173658] px-5 py-2 rounded-lg transition-all font-bold text-sm shadow-md hover:shadow-lg"
              >
                로그인
              </Link>
            )}

            {/* 모바일 메뉴 버튼 */}
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="md:hidden text-white p-2"
              aria-label="메뉴 열기"
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {isMenuOpen ? (
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                ) : (
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                )}
              </svg>
            </button>
          </div>
        </div>

        {/* 모바일 메뉴 */}
        {isMenuOpen && (
          <div className="md:hidden pb-4 space-y-2">
            <Link
              href="/saju"
              className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              사주 분석
            </Link>
            <Link
              href="/compatibility"
              className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              궁합
            </Link>
            <Link
              href="/tojeong"
              className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              토정비결
            </Link>
            <Link
              href="/fortune"
              className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              오늘의 운세
            </Link>
            {user && (
              <div className="sm:hidden flex items-center space-x-2 bg-[#F3E7E3] px-4 py-2 rounded-lg mt-2">
                <svg className="w-5 h-5 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
                </svg>
                <span className="text-[#173658] font-bold">토큰: {tokens}개</span>
              </div>
            )}
          </div>
        )}
      </nav>
    </header>
  );
}
