"use client";

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

import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

import { loadReportBankSettings, saveReportBankSettings } from "../_lib/tenant-settings-api";
import type { ReportBankSettingsData } from "../_lib/tenant-settings-server-api";

const MODE_HELP: Record<string, string> = {
  parent_only: "Show master parent banks. Child accounts roll up under their parent in reports.",
  children_only: "Show only mapped child bank accounts.",
  parent_plus_children: "Show parents and children. Selecting a parent still expands to its children.",
};

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(result.report_bank_filter_mode);
      })
      .catch((loadError) => {
        if (!cancelled) setError(loadError instanceof Error ? loadError.message : "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);
      setMode(result.report_bank_filter_mode);
      toast.success("Report Bank Settings saved");
    } catch (saveError) {
      toast.error(saveError instanceof Error ? saveError.message : "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.fromEntries(
    Object.entries(data.modeOptions).filter(([value]) => value !== "all"),
  );

  return (
    <div className="max-w-3xl space-y-5">
      <div className="rounded-xl border bg-card p-5">
        <div className="mb-5 flex items-start gap-3">
          <div className="rounded-lg bg-primary/10 p-2 text-primary"><Landmark className="size-5" /></div>
          <div>
            <h2 className="font-semibold">Consolidated Select Bank Mode</h2>
            <p className="mt-1 text-muted-foreground text-sm">
              Controls which accounts appear in consolidated report bank pickers.
            </p>
          </div>
        </div>
        <Select value={mode} onValueChange={setMode} disabled={data.isReadOnly}>
          <SelectTrigger className="max-w-md"><SelectValue /></SelectTrigger>
          <SelectContent>
            {Object.entries(modeOptions).map(([value, label]) => (
              <SelectItem key={value} value={value}>{label}</SelectItem>
            ))}
          </SelectContent>
        </Select>
        <div className="mt-4 space-y-2">
          {Object.entries(modeOptions).map(([value, label]) => (
            <div key={value} className={`rounded-lg border p-3 text-sm ${mode === value ? "border-primary/40 bg-primary/5" : ""}`}>
              <span className="font-medium">{label}</span>
              <span className="ml-2 text-muted-foreground">{MODE_HELP[value] ?? ""}</span>
            </div>
          ))}
        </div>
      </div>
      {!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>
      )}
    </div>
  );
}