openchamber/packages/ui/src/components/sections/usage/UsageSidebar.tsx

import React from 'react';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { ProviderLogo } from '@/components/ui/ProviderLogo';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useDeviceInfo } from '@/lib/device';
import { isVSCodeRuntime } from '@/lib/desktop';
import { cn } from '@/lib/utils';
import { QUOTA_PROVIDERS, resolveUsageTone } from '@/lib/quota';
import { useQuotaStore } from '@/stores/useQuotaStore';
import { updateDesktopSettings } from '@/lib/persistence';
import { RiRefreshLine } from '@remixicon/react';

interface UsageSidebarProps {
  onItemSelect?: () => void;
}

const getUsagePercent = (usage: { windows?: Record<string, { usedPercent: number | null }> } | null | undefined) => {
  const windows = usage?.windows ?? {};
  const values = Object.values(windows)
    .map((window) => window.usedPercent)
    .filter((value): value is number => typeof value === 'number');
  if (values.length === 0) {
    return null;
  }
  return Math.max(...values);
};

export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
  const results = useQuotaStore((state) => state.results);
  const selectedProviderId = useQuotaStore((state) => state.selectedProviderId);
  const setSelectedProvider = useQuotaStore((state) => state.setSelectedProvider);
  const fetchAllQuotas = useQuotaStore((state) => state.fetchAllQuotas);
  const isLoading = useQuotaStore((state) => state.isLoading);
  const usageAutoRefresh = useQuotaStore((state) => state.autoRefresh);
  const usageRefreshIntervalMs = useQuotaStore((state) => state.refreshIntervalMs);
  const setUsageAutoRefresh = useQuotaStore((state) => state.setAutoRefresh);
  const setUsageRefreshInterval = useQuotaStore((state) => state.setRefreshInterval);
  const loadUsageSettings = useQuotaStore((state) => state.loadSettings);
  const { isMobile } = useDeviceInfo();

  const [isDesktopRuntime, setIsDesktopRuntime] = React.useState<boolean>(() => {
    if (typeof window === 'undefined') return false;
    return typeof window.opencodeDesktop !== 'undefined';
  });

  const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);

  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    setIsDesktopRuntime(typeof window.opencodeDesktop !== 'undefined');
  }, []);

  React.useEffect(() => {
    void loadUsageSettings();
  }, [loadUsageSettings]);

  const persistUsageSettings = React.useCallback(async (changes: { usageAutoRefresh?: boolean; usageRefreshIntervalMs?: number }) => {
    try {
      await updateDesktopSettings(changes);
    } catch (error) {
      console.warn('Failed to save usage settings:', error);
    }
  }, []);

  const handleUsageAutoRefreshChange = React.useCallback((enabled: boolean) => {
    setUsageAutoRefresh(enabled);
    void persistUsageSettings({ usageAutoRefresh: enabled });
  }, [persistUsageSettings, setUsageAutoRefresh]);

  const handleUsageRefreshIntervalChange = React.useCallback((value: string) => {
    const next = Number(value);
    if (!Number.isFinite(next)) {
      return;
    }
    setUsageRefreshInterval(next);
    void persistUsageSettings({ usageRefreshIntervalMs: next });
  }, [persistUsageSettings, setUsageRefreshInterval]);

  const bgClass = isDesktopRuntime
    ? 'bg-transparent'
    : isVSCode
      ? 'bg-background'
      : 'bg-sidebar';

  return (
    <div className={cn('flex h-full flex-col', bgClass)}>
      <div className={cn('border-b px-3', isMobile ? 'mt-2 py-3' : 'py-3')}>
        <div className="flex items-center justify-between gap-2">
          <span className="typography-meta text-muted-foreground">Total {QUOTA_PROVIDERS.length}</span>
          <div className="flex items-center gap-2">
            <Switch
              checked={usageAutoRefresh}
              onCheckedChange={handleUsageAutoRefreshChange}
              aria-label="Toggle auto refresh"
            />
            <Select
              value={String(usageRefreshIntervalMs)}
              onValueChange={handleUsageRefreshIntervalChange}
              disabled={!usageAutoRefresh}
            >
              <SelectTrigger size="sm" className="min-w-[72px]">
                <SelectValue placeholder="Interval" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="30000" className="pr-2 [&>span:first-child]:hidden">30s</SelectItem>
                <SelectItem value="60000" className="pr-2 [&>span:first-child]:hidden">1m</SelectItem>
                <SelectItem value="300000" className="pr-2 [&>span:first-child]:hidden">5m</SelectItem>
              </SelectContent>
            </Select>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className="h-7 w-7 -my-1 text-muted-foreground"
              onClick={() => fetchAllQuotas()}
              aria-label="Refresh usage"
              title="Refresh usage"
              disabled={isLoading}
            >
              <RiRefreshLine className={cn('size-4', isLoading && 'animate-spin')} />
            </Button>
          </div>
        </div>
      </div>

      <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2 overflow-x-hidden">
        {QUOTA_PROVIDERS.map((provider) => {
          const result = results.find((entry) => entry.providerId === provider.id);
          const percent = getUsagePercent(result?.usage);
          const tone = resolveUsageTone(percent);
          const isSelected = provider.id === selectedProviderId;
          const configured = result?.configured ?? false;

          const statusClass = !configured
            ? 'bg-muted-foreground/40'
            : tone === 'critical'
              ? 'bg-rose-500'
              : tone === 'warn'
                ? 'bg-amber-500'
                : 'bg-emerald-500';

          return (
            <div
              key={provider.id}
              className={cn(
                'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
                isSelected ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6'
              )}
            >
              <button
                type="button"
                onClick={() => {
                  setSelectedProvider(provider.id);
                  onItemSelect?.();
                }}
                className="flex min-w-0 flex-1 items-center gap-2 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
              >
                <span className={cn('h-2.5 w-2.5 rounded-full flex-shrink-0', statusClass)} />
                <ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />
                <span className="typography-ui-label font-normal truncate flex-1 min-w-0 text-foreground">
                  {provider.name}
                </span>
                {!configured && (
                  <span className="typography-micro text-muted-foreground/60 flex-shrink-0">Not set</span>
                )}
              </button>
            </div>
          );
        })}
      </ScrollableOverlay>
    </div>
  );
};