"use client";

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

import type { AumCalcMode, AumModeOption } from "../_lib/aum-mode-api";
import { SettingsSection } from "./settings-section";

const FALLBACK_OPTIONS: AumModeOption[] = [
  { value: "net", label: "Net (include deductions)" },
  { value: "gross", label: "Gross (exclude deductions)" },
];

export function SettingsPanelGeneral({
  aumCalcMode,
  modeOptions,
  isReadOnly,
  isLoading,
  errorMessage,
  onAumModeChange,
}: {
  aumCalcMode: AumCalcMode;
  modeOptions: AumModeOption[];
  isReadOnly: boolean;
  isLoading: boolean;
  errorMessage: string | null;
  onAumModeChange: (mode: AumCalcMode) => void;
}) {
  const options = modeOptions.length > 0 ? modeOptions : FALLBACK_OPTIONS;

  return (
    <div className="space-y-8">
      <SettingsSection
        title="AUM calculation mode"
        description="Controls how portfolio totals treat negative Cash and Leverage. Net includes those deductions; Gross excludes them from totals."
      >
        {isLoading ? (
          <p className="text-muted-foreground text-sm">Loading AUM mode…</p>
        ) : null}
        {errorMessage ? <p className="text-destructive text-sm">{errorMessage}</p> : null}

        <RadioGroup
          value={aumCalcMode}
          onValueChange={(value) => onAumModeChange(value === "gross" ? "gross" : "net")}
          disabled={isLoading || isReadOnly}
          className="gap-3"
        >
          {options.map((option) => (
            <label
              key={option.value}
              htmlFor={`aum-mode-${option.value}`}
              className="flex cursor-pointer items-start gap-3 rounded-lg border border-border/80 bg-background px-4 py-3 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60"
            >
              <RadioGroupItem
                id={`aum-mode-${option.value}`}
                value={option.value}
                className="mt-0.5"
              />
              <div className="min-w-0 space-y-0.5">
                <Label htmlFor={`aum-mode-${option.value}`} className="cursor-pointer font-medium text-sm">
                  {option.label}
                </Label>
                <p className="text-muted-foreground text-xs leading-relaxed">
                  {option.value === "gross"
                    ? "Negative Cash and Leverage stay visible in the list but are excluded from header totals."
                    : "Portfolio totals include negative Cash and Leverage (true net exposure)."}
                </p>
              </div>
            </label>
          ))}
        </RadioGroup>
      </SettingsSection>
    </div>
  );
}