/**
 * VendorModeToggle - toggles between customer and vendor mode (FDS §1.5).
 *
 * Styled as a prominent pill — used in VendorTopbar (vendor mode active)
 * and customer TopBar (switch-to-vendor CTA).
 *
 * Mode is route-based — redirects to the appropriate dashboard.
 * Uses `vendor_mode_pill` namespace for i18n strings.
 */

'use client';

import { useState } from 'react';
import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';

export interface VendorModeToggleProps {
  /** Current mode. Determines which action/label to show. */
  currentMode: 'customer' | 'vendor';
  /** Additional class names. */
  className?: string;
}

export function VendorModeToggle({ currentMode, className }: VendorModeToggleProps) {
  const t = useT('vendor_mode_pill');
  const [loading, setLoading] = useState(false);

  function toggle() {
    if (loading) return;
    setLoading(true);
    window.location.href = currentMode === 'customer' ? '/vendor/dashboard' : '/';
  }

  const isVendorActive = currentMode === 'vendor';

  return (
    <Button
      variant="ghost"
      size="sm"
      onClick={toggle}
      disabled={loading}
      aria-label={isVendorActive ? t('switch_to_customer') : t('switch_to_vendor')}
      className={cn(
        // Pill shape
        'inline-flex h-8 items-center gap-1.5 rounded-full px-3',
        'select-none text-xs font-semibold',
        'transition-colors',
        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
        'disabled:pointer-events-none disabled:opacity-60',
        isVendorActive
          ? [
              'bg-mode-vendor-600 text-white',
              'hover:bg-mode-vendor-700',
              'focus-visible:ring-mode-vendor-500',
            ]
          : [
              'bg-mode-vendor-50 text-mode-vendor-800 border-mode-vendor-200 border',
              'hover:bg-mode-vendor-100',
              'focus-visible:ring-mode-vendor-500',
            ],
        className,
      )}
    >
      <Icon name="Store" size="xs" aria-hidden />
      <span>{isVendorActive ? t('vendor_active') : t('switch_to_vendor')}</span>
    </Button>
  );
}