wulf-pulse/components/mobile/profile/ProfileTimezoneSection.tsx

'use client';

import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { ChevronsUpDown, Check } from 'lucide-react';
import { toast } from 'sonner';
import ProfileSectionSkeleton from './ProfileSectionSkeleton';

const EXTRA_ALLOWED_TIMEZONES = ['UTC', 'Etc/UTC', 'GMT', 'Etc/GMT'];

function formatCurrentTime(zone: string): string {
  try {
    return new Intl.DateTimeFormat('en-US', {
      dateStyle: 'short',
      timeStyle: 'short',
      timeZone: zone,
    }).format(new Date());
  } catch {
    return '';
  }
}

export function ProfileTimezoneSection() {
  const [loading, setLoading] = useState(true);
  const [selectedZone, setSelectedZone] = useState<string>('UTC');
  const [open, setOpen] = useState(false);
  const [saveError, setSaveError] = useState<string | null>(null);
  // Tick state to force re-render every minute for live clock
  const [, setTick] = useState(0);
  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  // Build sorted, de-duplicated timezone list once
  const timezones = useMemo(() => {
    let zones: string[] = [];
    try {
      zones = Intl.supportedValuesOf('timeZone');
    } catch {
      zones = [];
    }
    const combined = new Set([...zones, ...EXTRA_ALLOWED_TIMEZONES]);
    return Array.from(combined).sort();
  }, []);

  // Fetch current timezone on mount
  useEffect(() => {
    fetch('/api/me/timezone')
      .then((r) => r.json())
      .then((data: { timezone: string }) => {
        setSelectedZone(data.timezone);
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  }, []);

  // Re-tick every 60s so the "current time" line stays fresh
  useEffect(() => {
    const interval = setInterval(() => {
      setTick((t) => t + 1);
    }, 60000);
    return () => clearInterval(interval);
  }, []);

  const handleSelect = useCallback(
    (zone: string) => {
      setOpen(false);
      setSaveError(null);

      const previousZone = selectedZone;
      setSelectedZone(zone);

      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current);
      }

      debounceTimerRef.current = setTimeout(async () => {
        try {
          const res = await fetch('/api/me/timezone', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ timezone: zone }),
          });
          if (!res.ok) {
            throw new Error(`HTTP ${res.status}`);
          }
          const data: { timezone: string } = await res.json();
          setSelectedZone(data.timezone);
          toast.success('Timezone updated');
        } catch {
          setSelectedZone(previousZone);
          setSaveError("Couldn't save. Try again.");
          toast.error('Failed to update timezone');
        }
      }, 400);
    },
    [selectedZone],
  );

  if (loading) {
    return <ProfileSectionSkeleton />;
  }

  return (
    <Card>
      <CardHeader className="px-4 pt-4 pb-0">
        <CardTitle className="text-xl font-semibold">Timezone</CardTitle>
      </CardHeader>
      <CardContent className="px-4 py-4">
        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              role="combobox"
              aria-expanded={open}
              className="w-full justify-between"
            >
              <span className="truncate">{selectedZone}</span>
              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
            <Command>
              <CommandInput placeholder="Search timezones…" />
              <CommandEmpty>No matches.</CommandEmpty>
              <CommandList>
                {timezones.map((zone) => (
                  <CommandItem
                    key={zone}
                    value={zone}
                    onSelect={handleSelect}
                  >
                    <span className="flex-1">{zone}</span>
                    {selectedZone === zone && (
                      <Check className="h-4 w-4 shrink-0" />
                    )}
                  </CommandItem>
                ))}
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>

        {saveError && (
          <p className="mt-1 text-xs text-destructive">{saveError}</p>
        )}

        <p className="mt-2 text-xs text-muted-foreground">
          Your current time:{' '}
          <span className="font-mono tabular-nums">{formatCurrentTime(selectedZone)}</span>{' '}
          in {selectedZone}
        </p>
      </CardContent>
    </Card>
  );
}