common-availability/frontend/src/components/TimezoneSelector.tsx

import { useState, useEffect, useRef } from 'react';
import { Input } from '@/components/ui/input';
import { Search, Globe, ChevronDown } from 'lucide-react';
import { cn } from '@/lib/utils';

interface TimezoneSelectorProps {
  value: string;
  onChange: (timezone: string) => void;
  className?: string;
}

// Get all IANA timezones
const getAllTimezones = (): string[] => {
  try {
    return Intl.supportedValuesOf('timeZone');
  } catch {
    // Fallback for older browsers
    return [
      'UTC',
      'America/New_York',
      'America/Chicago',
      'America/Denver',
      'America/Los_Angeles',
      'America/Toronto',
      'America/Vancouver',
      'Europe/London',
      'Europe/Paris',
      'Europe/Berlin',
      'Asia/Tokyo',
      'Asia/Shanghai',
      'Asia/Singapore',
      'Australia/Sydney',
      'Pacific/Auckland',
    ];
  }
};

// Get UTC offset for a timezone
const getTimezoneOffset = (timezone: string): string => {
  try {
    const now = new Date();
    const formatter = new Intl.DateTimeFormat('en-US', {
      timeZone: timezone,
      timeZoneName: 'shortOffset',
    });
    const parts = formatter.formatToParts(now);
    const offsetPart = parts.find((p) => p.type === 'timeZoneName');
    return offsetPart?.value || '';
  } catch {
    return '';
  }
};

// Get current time in a timezone
const getCurrentTimeInTimezone = (timezone: string): string => {
  try {
    return new Intl.DateTimeFormat('en-US', {
      timeZone: timezone,
      hour: 'numeric',
      minute: '2-digit',
      hour12: true,
    }).format(new Date());
  } catch {
    return '';
  }
};

// Format timezone for display (e.g., "America/New_York" -> "New York")
const formatTimezoneLabel = (timezone: string): string => {
  const parts = timezone.split('/');
  const city = parts[parts.length - 1];
  return city.replace(/_/g, ' ');
};

const ALL_TIMEZONES = getAllTimezones();

export const TimezoneSelector = ({
  value,
  onChange,
  className,
}: TimezoneSelectorProps) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [hoveredTimezone, setHoveredTimezone] = useState<string | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsDropdownOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const filteredTimezones = ALL_TIMEZONES.filter((tz) => {
    const query = searchQuery.toLowerCase();
    const tzLower = tz.toLowerCase();
    const labelLower = formatTimezoneLabel(tz).toLowerCase();
    const offset = getTimezoneOffset(tz).toLowerCase();

    return (
      tzLower.includes(query) ||
      labelLower.includes(query) ||
      offset.includes(query)
    );
  });

  const selectTimezone = (timezone: string) => {
    onChange(timezone);
    setSearchQuery('');
    setIsDropdownOpen(false);
  };

  const selectedOffset = getTimezoneOffset(value);
  const selectedLabel = formatTimezoneLabel(value);

  return (
    <div ref={containerRef} className={cn('relative', className)}>
      <button
        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
        className={cn(
          'flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm',
          'bg-muted hover:bg-accent transition-colors',
          'border border-transparent hover:border-border'
        )}
      >
        <Globe className="w-4 h-4 text-muted-foreground" />
        <span className="text-foreground font-medium">{selectedLabel}</span>
        <span className="text-muted-foreground">{selectedOffset}</span>
        <ChevronDown className={cn(
          'w-4 h-4 text-muted-foreground transition-transform',
          isDropdownOpen && 'rotate-180'
        )} />
      </button>

      {isDropdownOpen && (
        <div className="absolute z-20 right-0 mt-2 w-80 bg-popover border border-border rounded-lg shadow-popover animate-scale-in overflow-hidden">
          <div className="p-2 border-b border-border">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              <Input
                placeholder="Search timezone..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 h-9 bg-background border-border"
                autoFocus
              />
            </div>
          </div>

          <div className="max-h-64 overflow-y-auto">
            {filteredTimezones.length === 0 ? (
              <div className="px-4 py-3 text-sm text-muted-foreground text-center">
                No timezones found
              </div>
            ) : (
              filteredTimezones.slice(0, 50).map((timezone) => {
                const isSelected = timezone === value;
                const offset = getTimezoneOffset(timezone);
                const label = formatTimezoneLabel(timezone);
                const isHovered = hoveredTimezone === timezone;

                return (
                  <button
                    key={timezone}
                    onClick={() => selectTimezone(timezone)}
                    onMouseEnter={() => setHoveredTimezone(timezone)}
                    onMouseLeave={() => setHoveredTimezone(null)}
                    className={cn(
                      'w-full px-4 py-2.5 flex items-center justify-between text-left transition-colors',
                      isSelected ? 'bg-primary/10 text-primary' : 'hover:bg-accent'
                    )}
                  >
                    <div className="flex items-center gap-3">
                      <span className={cn(
                        'text-xs font-mono w-16',
                        isSelected ? 'text-primary' : 'text-muted-foreground'
                      )}>
                        {offset}
                      </span>
                      <div>
                        <div className={cn(
                          'font-medium',
                          isSelected ? 'text-primary' : 'text-foreground'
                        )}>
                          {label}
                        </div>
                        <div className="text-xs text-muted-foreground">
                          {timezone}
                        </div>
                      </div>
                    </div>
                    {isHovered && (
                      <span className="text-xs text-muted-foreground animate-fade-in">
                        {getCurrentTimeInTimezone(timezone)}
                      </span>
                    )}
                  </button>
                );
              })
            )}
          </div>

          {filteredTimezones.length > 50 && (
            <div className="px-4 py-2 text-xs text-muted-foreground text-center border-t border-border">
              Showing 50 of {filteredTimezones.length} results
            </div>
          )}
        </div>
      )}
    </div>
  );
};