'use client';

import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { ArrowLeft } from 'lucide-react';

type BackButtonProps = {
  className?: string;
  ariaLabel?: string;
  hrefFallback?: string; // default '/'
  children?: React.ReactNode; // custom icon/content; defaults to ArrowLeft
};

/**
 * BackButton
 * - Primary: attempts to close the current window/tab (window.close())
 * - Fallback: if close fails (e.g., not opened by script), navigates to '/'
 * - Uses <Link> so that Ctrl/Cmd-click or middle-click opens the fallback URL in a new tab naturally
 */
export default function BackButton({ className, ariaLabel = '返回', hrefFallback = '/', children }: BackButtonProps) {
  const router = useRouter();

  const onClick = React.useCallback<React.MouseEventHandler<HTMLAnchorElement>>((e) => {
    // Respect modifier clicks (new tab/window) and non-left clicks
    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;

    e.preventDefault();
    
    // Try to close the window first
    if (typeof window !== 'undefined') {
      window.close();
      
      // If window.close() didn't work (window still open after a short delay),
      // navigate to the fallback URL
      setTimeout(() => {
        if (!document.hidden) {
          router.push(hrefFallback);
        }
      }, 80);
    }
  }, [router, hrefFallback]);

  return (
    <Link
      href={hrefFallback}
      aria-label={ariaLabel}
      onClick={onClick}
      className={className}
    >
      {children ?? <ArrowLeft size={18} />}
    </Link>
  );
}