'use client';

import React from 'react';
import { useRegion, Region, REGION_CONFIGS } from '@/contexts/region-context';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
  DropdownMenuLabel,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { ChevronDown, Globe, Check } from 'lucide-react';
import { cn } from '@/lib/utils';

interface RegionSwitcherProps {
  className?: string;
  variant?: 'default' | 'compact' | 'icon-only';
  showLabel?: boolean;
}

/**
 * 区域切换器组件
 * 
 * 显示当前区域，并允许用户切换到其他可访问的区域
 */
export function RegionSwitcher({ 
  className, 
  variant = 'default',
  showLabel = true,
}: RegionSwitcherProps) {
  const {
    currentRegion,
    currentRegionConfig,
    accessibleRegionConfigs,
    canSwitchRegion,
    switchRegion,
  } = useRegion();

  // 如果只能访问一个区域，显示为静态文本
  if (!canSwitchRegion) {
    return (
      <div className={cn('flex items-center gap-2 text-sm text-muted-foreground', className)}>
        <span className="text-base">{currentRegionConfig.flag}</span>
        {variant !== 'icon-only' && (
          <span>{currentRegionConfig.name}</span>
        )}
      </div>
    );
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button 
          variant="ghost" 
          size={variant === 'compact' ? 'sm' : 'default'}
          className={cn('gap-2', className)}
        >
          <span className="text-base">{currentRegionConfig.flag}</span>
          {variant !== 'icon-only' && (
            <>
              {showLabel && <span>{currentRegionConfig.name}</span>}
              <ChevronDown className="h-4 w-4 opacity-50" />
            </>
          )}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        <DropdownMenuLabel className="flex items-center gap-2">
          <Globe className="h-4 w-4" />
          切换区域
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        {accessibleRegionConfigs.map((config) => (
          <DropdownMenuItem
            key={config.code}
            onClick={() => switchRegion(config.code)}
            className="flex items-center justify-between cursor-pointer"
          >
            <div className="flex items-center gap-2">
              <span className="text-base">{config.flag}</span>
              <div className="flex flex-col">
                <span>{config.name}</span>
                <span className="text-xs text-muted-foreground">{config.nameEn}</span>
              </div>
            </div>
            {currentRegion === config.code && (
              <Check className="h-4 w-4 text-primary" />
            )}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

/**
 * 区域指示器组件
 * 
 * 简单显示当前区域，不可交互
 */
export function RegionIndicator({ className }: { className?: string }) {
  const { currentRegionConfig } = useRegion();

  return (
    <div className={cn('flex items-center gap-1.5 text-sm', className)}>
      <span>{currentRegionConfig.flag}</span>
      <span className="text-muted-foreground">{currentRegionConfig.code}</span>
    </div>
  );
}

/**
 * 区域徽章组件
 * 
 * 显示区域的小徽章
 */
export function RegionBadge({ 
  region, 
  className,
  showName = false,
}: { 
  region: Region; 
  className?: string;
  showName?: boolean;
}) {
  const config = REGION_CONFIGS[region];

  return (
    <span 
      className={cn(
        'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium',
        'bg-secondary text-secondary-foreground',
        className
      )}
    >
      <span>{config.flag}</span>
      {showName ? config.name : config.code}
    </span>
  );
}