import { useState, useEffect } from 'react';

function setCookie(name: string, value: string, days = 365) {
  const expires = new Date(Date.now() + days * 864e5).toUTCString();
  document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires};path=/;SameSite=Lax`;
}

export default function AccountIcon() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [watchlistCount, setWatchlistCount] = useState(0);

  useEffect(() => {
    const getSession = (window as any).__spSession || (() => fetch('/api/auth/session').then(r => r.json()));
    getSession()
      .then((data: any) => {
        if (data.user) {
          setLoggedIn(true);
          // Set gender preference cookie if user has one
          if (data.user.gender_preference && data.user.gender_preference !== 'all') {
            setCookie('sp_gender', data.user.gender_preference);
          }
          fetch('/api/watchlist', { credentials: 'include' })
            .then(r => r.json())
            .then(wl => setWatchlistCount(wl.items?.length || 0))
            .catch(() => {});
        }
      })
      .catch(() => {});
  }, []);

  return (
    <div className="flex items-center">
      {/* Watchlist icon — always visible */}
      <a
        href="/watchlist"
        className="relative rounded-full p-2 text-text-secondary transition-colors hover:bg-bg-elevated hover:text-text"
        aria-label="Watchlist"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={loggedIn && watchlistCount > 0 ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth={2} className="h-5 w-5">
          <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
        </svg>
        {loggedIn && watchlistCount > 0 && (
          <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-[#00FF6A] text-[10px] font-bold text-black">
            {watchlistCount > 9 ? '9+' : watchlistCount}
          </span>
        )}
      </a>

      {/* Profile icon */}
      <a
        href="/profiel"
        className="relative rounded-full p-2 text-text-secondary transition-colors hover:bg-bg-elevated hover:text-text"
        aria-label="Mijn profiel"
        title={loggedIn ? 'Mijn profiel' : 'Inloggen'}
      >
        {loggedIn ? (
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5 text-accent">
            <path fillRule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clipRule="evenodd" />
          </svg>
        ) : (
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="h-5 w-5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
          </svg>
        )}
      </a>
    </div>
  );
}
