import { connectionStatusText } from "@t3tools/client-runtime/connection";

import {
  useClientSettings,
  useClientSettingsHydrated,
  useUpdateClientSettings,
} from "~/hooks/useSettings";
import type { EnvironmentPresentation } from "~/state/environments";
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
import { Switch } from "../ui/switch";
import { SettingsRow, SettingsSection } from "./settingsLayout";
import { searchableSetting } from "./settingsSearch";

const preferences = [
  { value: 100, label: "Prefer" },
  { value: 50, label: "Normal" },
  { value: 25, label: "Less often" },
  { value: 0, label: "Manual only" },
];

export function LoadBalancingSettings({
  environments,
}: {
  environments: ReadonlyArray<EnvironmentPresentation>;
}) {
  const settings = useClientSettings();
  const settingsHydrated = useClientSettingsHydrated();
  const updateSettings = useUpdateClientSettings();

  if (environments.length < 2) {
    return (
      <SettingsSection {...searchableSetting("load-balancing")} variant="plain">
        <p className="px-3 text-sm text-muted-foreground sm:px-4">
          Connect another machine to automatically balance load across environments.
        </p>
      </SettingsSection>
    );
  }

  return (
    <SettingsSection {...searchableSetting("load-balancing")}>
      <SettingsRow
        title="Automatically balance load"
        description="Choose a machine automatically for new threads in shared projects."
        control={
          <Switch
            aria-label="Automatically balance load"
            checked={settings.loadBalancingEnabled}
            disabled={!settingsHydrated}
            onCheckedChange={(loadBalancingEnabled) => updateSettings({ loadBalancingEnabled })}
          />
        }
      />
      {environments.map((environment) => {
        const weight = settings.loadBalancingWeights[environment.environmentId] ?? 50;
        // Keep saved slider weights until the user chooses a different preference.
        const preference = weight === 0 ? 0 : weight < 50 ? 25 : weight === 50 ? 50 : 100;

        return (
          <SettingsRow
            key={environment.environmentId}
            title={environment.label}
            description={connectionStatusText(environment.connection)}
            control={
              <Select
                items={preferences}
                value={preference}
                disabled={!settingsHydrated || !settings.loadBalancingEnabled}
                onValueChange={(value) => {
                  if (value !== null) {
                    updateSettings({
                      loadBalancingWeights: {
                        ...settings.loadBalancingWeights,
                        [environment.environmentId]: value,
                      },
                    });
                  }
                }}
              >
                <SelectTrigger
                  size="sm"
                  className="w-full sm:w-40"
                  aria-label={`${environment.label} load preference`}
                >
                  <SelectValue />
                </SelectTrigger>
                <SelectPopup align="end" alignItemWithTrigger={false}>
                  {preferences.map(({ value, label }) => (
                    <SelectItem key={value} value={value}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectPopup>
              </Select>
            }
          />
        );
      })}
    </SettingsSection>
  );
}