rfunds-online/components/SpaceSwitcher.tsx

'use client';

import { useState, useRef, useEffect } from 'react';

interface SpaceInfo {
  slug: string;
  name: string;
  icon?: string;
  role?: string;
}

interface SpaceSwitcherProps {
  /** Current app domain, e.g. 'rfunds.online'. Space links become <space>.<domain> */
  domain?: string;
}

export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
  const [open, setOpen] = useState(false);
  const [spaces, setSpaces] = useState<SpaceInfo[]>([]);
  const [loaded, setLoaded] = useState(false);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  // Derive domain from window.location if not provided
  const appDomain = domain || (typeof window !== 'undefined'
    ? window.location.hostname.split('.').slice(-2).join('.')
    : 'rspace.online');

  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener('click', handleClick);
    return () => document.removeEventListener('click', handleClick);
  }, []);

  // Check auth status on mount
  useEffect(() => {
    fetch('/api/me')
      .then((r) => r.json())
      .then((data) => {
        if (data.authenticated) setIsAuthenticated(true);
      })
      .catch(() => {});
  }, []);

  const loadSpaces = async () => {
    if (loaded) return;
    try {
      const res = await fetch('/api/spaces');
      if (res.ok) {
        const data = await res.json();
        setSpaces(data.spaces || []);
      }
    } catch {
      // API not available
    }
    setLoaded(true);
  };

  const handleOpen = async () => {
    const nowOpen = !open;
    setOpen(nowOpen);
    if (nowOpen && !loaded) {
      await loadSpaces();
    }
  };

  /** Build URL for a space: <space>.<current-app-domain> */
  const spaceUrl = (slug: string) => `https://${slug}.${appDomain}`;

  const mySpaces = spaces.filter((s) => s.role);
  const publicSpaces = spaces.filter((s) => !s.role);

  return (
    <div className="relative" ref={ref}>
      <button
        onClick={(e) => { e.stopPropagation(); handleOpen(); }}
        className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm font-medium text-slate-400 hover:bg-white/[0.05] transition-colors"
      >
        <span className="opacity-40 font-light mr-0.5">/</span>
        <span className="max-w-[160px] truncate">personal</span>
        <span className="text-[0.7em] opacity-50">&#9662;</span>
      </button>

      {open && (
        <div className="absolute top-full left-0 mt-1.5 min-w-[240px] max-h-[400px] overflow-y-auto rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]">
          {!loaded ? (
            <div className="px-4 py-4 text-center text-sm text-slate-400">Loading spaces...</div>
          ) : spaces.length === 0 ? (
            <>
              <div className="px-4 py-4 text-center text-sm text-slate-400">
                {isAuthenticated ? 'No spaces yet' : 'Sign in to see your spaces'}
              </div>
              <a
                href="https://rspace.online/new"
                className="flex items-center px-3.5 py-2.5 text-sm font-semibold text-cyan-400 hover:bg-cyan-500/[0.08] transition-colors no-underline"
                onClick={() => setOpen(false)}
              >
                + Create new space
              </a>
            </>
          ) : (
            <>
              {mySpaces.length > 0 && (
                <>
                  <div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
                    Your spaces
                  </div>
                  {mySpaces.map((s) => (
                    <a
                      key={s.slug}
                      href={spaceUrl(s.slug)}
                      className="flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors hover:bg-white/[0.05]"
                      onClick={() => setOpen(false)}
                    >
                      <span className="text-base">{s.icon || '🌐'}</span>
                      <span className="text-sm font-medium flex-1">{s.name}</span>
                      {s.role && (
                        <span className="text-[0.6rem] font-bold uppercase bg-cyan-500/15 text-cyan-300 px-1.5 py-0.5 rounded tracking-wide">
                          {s.role}
                        </span>
                      )}
                    </a>
                  ))}
                </>
              )}

              {publicSpaces.length > 0 && (
                <>
                  {mySpaces.length > 0 && <div className="h-px bg-white/[0.08] my-1" />}
                  <div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
                    Public spaces
                  </div>
                  {publicSpaces.map((s) => (
                    <a
                      key={s.slug}
                      href={spaceUrl(s.slug)}
                      className="flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors hover:bg-white/[0.05]"
                      onClick={() => setOpen(false)}
                    >
                      <span className="text-base">{s.icon || '🌐'}</span>
                      <span className="text-sm font-medium flex-1">{s.name}</span>
                    </a>
                  ))}
                </>
              )}

              <div className="h-px bg-white/[0.08] my-1" />
              <a
                href="https://rspace.online/new"
                className="flex items-center px-3.5 py-2.5 text-sm font-semibold text-cyan-400 hover:bg-cyan-500/[0.08] transition-colors no-underline"
                onClick={() => setOpen(false)}
              >
                + Create new space
              </a>
            </>
          )}
        </div>
      )}
    </div>
  );
}