"use client";

import * as React from "react";
import { Save } from "lucide-react";
import { toast } from "sonner";

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

import {
  dispatchReportBankModeChanged,
  normalizeReportBankFilterMode,
} from "@/app/customer/_lib/report-bank-mode-events";

import { loadReportBankSettings, saveReportBankSettings } from "../_lib/tenant-settings-api";
import type { ReportBankSettingsData } from "../_lib/tenant-settings-server-api";
import { errorMessageOr, toastApiError } from "@/lib/toast-api-error";

import { SettingsSection } from "./settings-section";

const MODE_HELP: Record<string, string> = {
  parent_only: "Show master parent banks. Child accounts roll up under their parent in reports.",
  children_only:
    "Show every child bank account in filters and reports, including accounts with no parent assigned.",
};

const MODE_LABELS: Record<string, string> = {
  parent_only: "Parent",
  children_only: "Child",
};

export function SettingsPanelReportBanks({ tenant }: { tenant: string }) {
  const [data, setData] = React.useState<ReportBankSettingsData | null>(null);
  const [mode, setMode] = React.useState("");
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  React.useEffect(() => {
    let cancelled = false;
    void loadReportBankSettings(tenant)
      .then((result) => {
        if (cancelled) return;
        setData(result);
        setMode(normalizeReportBankFilterMode(result.report_bank_filter_mode));
      })
      .catch((loadError) => {
        if (!cancelled) setError(errorMessageOr(loadError, "Report Bank Settings could not be loaded."));
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [tenant]);

  async function save() {
    if (!mode) return;
    setSaving(true);
    try {
      const result = await saveReportBankSettings(tenant, mode);
      setData(result);
      const savedMode = normalizeReportBankFilterMode(result.report_bank_filter_mode);
      setMode(savedMode);
      dispatchReportBankModeChanged(savedMode);
      toast.success("Report Bank Settings saved");
    } catch (saveError) {
      toastApiError(saveError, "Settings could not be saved.");
    } finally {
      setSaving(false);
    }
  }

  if (loading) return <p className="py-12 text-center text-muted-foreground text-sm">Loading Report Bank Settings…</p>;
  if (error || !data) {
    return (
      <p className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-destructive text-sm">{error}</p>
    );
  }

  const modeOptions = Object.entries(data.modeOptions).filter(
    ([value]) => value !== "all" && value !== "parent_plus_children",
  );

  return (
    <div className="space-y-8">
      <SettingsSection
        title="Consolidated Select Bank Mode"
        description="Controls which accounts appear in consolidated report bank pickers."
      >
        <RadioGroup
          value={mode}
          onValueChange={setMode}
          disabled={data.isReadOnly}
          className="gap-3"
        >
          {modeOptions.map(([value, apiLabel]) => {
            const label = MODE_LABELS[value] ?? apiLabel;
            const optionId = `report-bank-mode-${value}`;
            return (
              <label
                key={value}
                htmlFor={optionId}
                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={optionId} value={value} className="mt-0.5" />
                <div className="min-w-0 space-y-0.5">
                  <Label htmlFor={optionId} className="cursor-pointer font-medium text-sm">
                    {label}
                  </Label>
                  <p className="text-muted-foreground text-xs leading-relaxed">{MODE_HELP[value] ?? ""}</p>
                </div>
              </label>
            );
          })}
        </RadioGroup>

        {!data.isReadOnly ? (
          <div className="flex justify-end">
            <Button
              className="gap-2"
              disabled={saving || mode === data.report_bank_filter_mode}
              onClick={() => void save()}
            >
              <Save className="size-4" /> {saving ? "Saving…" : "Save changes"}
            </Button>
          </div>
        ) : null}

        <p className="text-muted-foreground text-xs">
          Bank mode is saved for this tenant and applies to consolidated report bank pickers.
        </p>
      </SettingsSection>
    </div>
  );
}