"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { ChevronDown, Loader2, Plus, Split, Trash2, Wand2 } from "lucide-react";
import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";
import { Controller, useFieldArray, useForm, useWatch, type Resolver } from "react-hook-form";
import { toast } from "sonner";
import { IconBadge } from "@/components/appearance/swatch";
import { MoneyInput } from "@/components/money-input";
import { ResponsiveDialog } from "@/components/responsive-dialog";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { tr } from "@/i18n/tr";
import { cn } from "@/lib/utils";
import { todayIstanbul } from "@/shared/dates";
import { formatMoney } from "@/shared/format";
import { formatMoneyInput, parseMoney } from "@/shared/money";
import { allowedAttachmentKinds } from "@/shared/attachments";
import { AttachmentPicker } from "@/features/attachments/components/attachment-picker";
import type { AttachmentInfo } from "@/features/attachments/service";
import { transactionFormSchema, type TransactionForm } from "@/shared/schemas/transaction";
import { MAX_SPLITS, TRANSACTION_TYPES, type TransactionType } from "@/shared/transactions";
import {
  createTransactionAction,
  getTransactionFormOptionsAction,
  searchPayeesAction,
  updateTransactionAction,
} from "../actions";
import type { PayeeSuggestion, TransactionDetail, TransactionFormOptions } from "../service";

const t = tr.transactions;
const f = t.fields;
const INSTALLMENT_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15, 18, 24, 36];

export type TransactionFormMode =
  | {
      kind: "create";
      type: TransactionType;
      /** Ön doldurma (ör. kart borcu ödemesi, KMH faiz kaydı). */
      prefill?: {
        accountId?: string;
        toAccountId?: string;
        amountMinor?: number;
        categoryId?: string;
        date?: string;
        description?: string;
      };
    }
  | { kind: "edit"; transaction: TransactionDetail }
  | { kind: "copy"; transaction: TransactionDetail };

type SplitValue = { categoryId: string; amount: string; note: string };
type FormValues = {
  type: TransactionType;
  amount: string;
  date: string;
  accountId: string;
  toAccountId: string;
  categoryId: string;
  splits: SplitValue[];
  payee: string;
  description: string;
  tags: string;
  /** Önizleme bilgisiyle ekler; sunucuya yalnızca kimlikleri gider. */
  attachments: AttachmentInfo[];
  /** Taksit sayısı (yalnızca yeni kredi kartı gideri). */
  installments: string;
};

function toValues(mode: TransactionFormMode, options: TransactionFormOptions | null): FormValues {
  if (mode.kind === "create") {
    const p = mode.prefill ?? {};
    return {
      type: mode.type,
      amount: p.amountMinor ? formatMoneyInput(p.amountMinor) : "",
      date: p.date ?? todayIstanbul(),
      accountId: p.accountId ?? options?.accounts[0]?.id ?? "",
      toAccountId: p.toAccountId ?? "",
      categoryId: p.categoryId ?? "",
      splits: [],
      payee: "",
      description: p.description ?? "",
      tags: "",
      attachments: [],
      installments: "1",
    };
  }
  const x = mode.transaction;
  return {
    type: x.type,
    amount: formatMoneyInput(x.amountMinor),
    date: mode.kind === "copy" ? todayIstanbul() : x.date,
    accountId: x.account?.id ?? "",
    toAccountId: x.toAccount?.id ?? "",
    categoryId: x.categoryId ?? "",
    splits: x.splits.map((s) => ({
      categoryId: s.categoryId,
      amount: formatMoneyInput(s.amountMinor),
      note: s.note,
    })),
    payee: x.payeeName,
    description: x.description,
    tags: x.tags.join(", "),
    // Kopyada ekler taşınmaz (fiş o işleme aittir).
    attachments: mode.kind === "edit" ? x.attachments : [],
    installments: "1",
  };
}

export function AccountSelect({
  id,
  value,
  onChange,
  accounts,
  invalid,
  exclude,
}: {
  id: string;
  value: string;
  onChange: (v: string) => void;
  accounts: {
    id: string;
    name: string;
    icon?: TransactionFormOptions["accounts"][number]["icon"];
    color?: TransactionFormOptions["accounts"][number]["color"];
  }[];
  invalid?: boolean;
  exclude?: string;
}) {
  const current = accounts.find((a) => a.id === value);
  return (
    <Select value={value || undefined} onValueChange={onChange}>
      <SelectTrigger id={id} className="w-full" aria-invalid={invalid}>
        <SelectValue placeholder={f.selectAccount}>{current?.name}</SelectValue>
      </SelectTrigger>
      <SelectContent className="max-h-72">
        {accounts
          .filter((a) => a.id !== exclude)
          .map((a) => (
            <SelectItem key={a.id} value={a.id}>
              {a.icon && a.color ? (
                <IconBadge
                  icon={a.icon}
                  color={a.color}
                  size="sm"
                  className="size-5 [&_svg]:size-3"
                />
              ) : null}
              {a.name}
            </SelectItem>
          ))}
      </SelectContent>
    </Select>
  );
}

export function CategorySelect({
  id,
  value,
  onChange,
  options,
  appearance,
  invalid,
  className,
}: {
  id: string;
  value: string;
  onChange: (v: string) => void;
  options: TransactionFormOptions["categories"];
  appearance: TransactionFormOptions["categoryAppearance"];
  invalid?: boolean;
  className?: string;
}) {
  const current = options.find((o) => o.id === value);
  return (
    <Select value={value || undefined} onValueChange={onChange}>
      <SelectTrigger id={id} className={cn("w-full", className)} aria-invalid={invalid}>
        <SelectValue placeholder={f.selectCategory}>{current?.path}</SelectValue>
      </SelectTrigger>
      <SelectContent className="max-h-80">
        {options.map((o) => {
          const look = appearance[o.id];
          return (
            <SelectItem key={o.id} value={o.id}>
              <span
                className="flex items-center gap-2"
                style={{ paddingInlineStart: `${o.depth * 1}rem` }}
              >
                {look ? (
                  <IconBadge
                    icon={look.icon}
                    color={look.color}
                    size="sm"
                    className="size-5 [&_svg]:size-3"
                  />
                ) : null}
                <span className={o.depth === 0 ? "font-medium" : undefined}>{o.label}</span>
              </span>
            </SelectItem>
          );
        })}
      </SelectContent>
    </Select>
  );
}

/** Satıcı alanı: yazdıkça öneri; seçilince son kullanılan kategori/hesap önerilir. */
export function PayeeInput({
  value,
  onChange,
  onPick,
}: {
  value: string;
  onChange: (v: string) => void;
  onPick: (p: PayeeSuggestion) => void;
}) {
  const [items, setItems] = useState<PayeeSuggestion[]>([]);
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(-1);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  function query(v: string) {
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(async () => {
      const res = await searchPayeesAction(v);
      setItems(
        res.filter(
          (p) =>
            p.name.toLocaleLowerCase("tr-TR") !== v.trim().toLocaleLowerCase("tr-TR") ||
            res.length > 1,
        ),
      );
      setActive(-1);
    }, 150);
  }

  function pick(p: PayeeSuggestion) {
    onChange(p.name);
    onPick(p);
    setOpen(false);
  }

  return (
    <div className="relative">
      <Input
        id="tx-payee"
        value={value}
        placeholder={f.payeePlaceholder}
        autoComplete="off"
        role="combobox"
        aria-expanded={open && items.length > 0}
        aria-controls="tx-payee-list"
        aria-autocomplete="list"
        onChange={(e) => {
          onChange(e.target.value);
          setOpen(true);
          query(e.target.value);
        }}
        onFocus={() => {
          setOpen(true);
          query(value);
        }}
        onBlur={() => setTimeout(() => setOpen(false), 150)}
        onKeyDown={(e) => {
          if (!open || !items.length) return;
          if (e.key === "ArrowDown") {
            e.preventDefault();
            setActive((i) => Math.min(i + 1, items.length - 1));
          } else if (e.key === "ArrowUp") {
            e.preventDefault();
            setActive((i) => Math.max(i - 1, 0));
          } else if (e.key === "Enter" && active >= 0) {
            e.preventDefault();
            pick(items[active]!);
          } else if (e.key === "Escape") setOpen(false);
        }}
      />
      {open && items.length > 0 ? (
        <ul
          id="tx-payee-list"
          role="listbox"
          className="absolute z-50 mt-1 max-h-56 w-full overflow-y-auto rounded-lg border bg-popover p-1 text-popover-foreground shadow-md"
        >
          {items.map((p, i) => (
            <li
              key={p.name}
              role="option"
              aria-selected={i === active}
              onMouseDown={(e) => {
                e.preventDefault();
                pick(p);
              }}
              className="cursor-pointer rounded-md px-2 py-1.5 text-sm hover:bg-accent aria-selected:bg-accent"
            >
              {p.name}
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  );
}

export function TransactionFormDialog({
  mode,
  onOpenChange,
}: {
  mode: TransactionFormMode | null;
  onOpenChange: (open: boolean) => void;
}) {
  const [options, setOptions] = useState<TransactionFormOptions | null>(null);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [advancedOpen, setAdvancedOpen] = useState(false);
  const [suggested, setSuggested] = useState(false);
  const [uploadBusy, setUploadBusy] = useState(false);
  const form = useForm<FormValues, unknown, TransactionForm>({
    // FormValues, şemanın giriş şekliyle birebir (tutarlar string; zod kuruşa çevirir).
    resolver: zodResolver(transactionFormSchema) as unknown as Resolver<
      FormValues,
      unknown,
      TransactionForm
    >,
    defaultValues: toValues({ kind: "create", type: "expense" }, null),
  });
  const splits = useFieldArray({ control: form.control, name: "splits" });

  // Form her açıldığında seçenekleri sunucudan al (hesaplar/kategoriler güncel olsun).
  useEffect(() => {
    if (!mode) return;
    let cancelled = false;
    getTransactionFormOptionsAction().then((res) => {
      if (cancelled) return;
      if (!res.ok) {
        setLoadError(res.error);
        return;
      }
      setLoadError(null);
      setOptions(res.data);
      form.reset(toValues(mode, res.data));
    });
    return () => {
      cancelled = true;
    };
  }, [mode, form]);

  const type = useWatch({ control: form.control, name: "type" });
  const amount = useWatch({ control: form.control, name: "amount" });
  const accountId = useWatch({ control: form.control, name: "accountId" });
  const splitValues = useWatch({ control: form.control, name: "splits" });
  const attachmentCount = useWatch({ control: form.control, name: "attachments" })?.length ?? 0;
  const splitMode = splits.fields.length > 0;

  // Düzenlemede arşivli/kapalı hesap veya kategori seçenek listesinde yoksa ekle (kaybolmasın).
  const accounts = useMemo(() => {
    const list = [...(options?.accounts ?? [])];
    if (mode && mode.kind !== "create") {
      for (const a of [mode.transaction.account, mode.transaction.toAccount]) {
        if (a && !list.some((x) => x.id === a.id))
          list.push({ ...a, type: "bank", icon: "wallet", color: "slate" });
      }
    }
    return list;
  }, [options, mode]);
  const categories = useMemo(() => {
    const kind = type === "income" ? "income" : "expense";
    const list = (options?.categories ?? []).filter((c) => c.kind === kind);
    if (mode && mode.kind !== "create") {
      const extra = [
        ...(mode.transaction.category
          ? [{ id: mode.transaction.category.id, path: mode.transaction.category.path }]
          : []),
        ...mode.transaction.splits.map((s) => ({ id: s.categoryId, path: s.path })),
      ];
      for (const c of extra) {
        if (!list.some((x) => x.id === c.id))
          list.push({ id: c.id, label: c.path, path: c.path, depth: 0, kind });
      }
    }
    return list;
  }, [options, type, mode]);

  const totalMinor = parseMoney(amount ?? "") ?? 0;
  const selectedAccountType = options?.accounts.find((a) => a.id === accountId)?.type;
  // Taksit: yeni (veya kopya) kredi kartı gideri, bölünmemiş.
  const showInstallments =
    mode?.kind !== "edit" &&
    type === "expense" &&
    selectedAccountType === "credit_card" &&
    !splitMode;
  const splitSum = (splitValues ?? []).reduce((a, s) => a + (parseMoney(s.amount ?? "") ?? 0), 0);
  const remaining = totalMinor - splitSum;

  function handleOpenChange(open: boolean) {
    if (!open) {
      setAdvancedOpen(false);
      setSuggested(false);
    }
    onOpenChange(open);
  }

  function changeType(next: TransactionType) {
    form.setValue("type", next);
    // Kategoriler türe bağlıdır; tür değişince temizlenir.
    form.setValue("categoryId", "");
    splits.replace([]);
    if (next !== "transfer") form.setValue("toAccountId", "");
    form.clearErrors();
  }

  function toggleSplit() {
    if (splitMode) {
      splits.replace([]);
      return;
    }
    const first = form.getValues("categoryId");
    splits.replace([
      { categoryId: first, amount: form.getValues("amount"), note: "" },
      { categoryId: "", amount: "", note: "" },
    ]);
    form.setValue("categoryId", "");
    setAdvancedOpen(true);
  }

  function fillRemaining() {
    const last = splits.fields.length - 1;
    if (last < 0) return;
    const current = parseMoney(form.getValues(`splits.${last}.amount`) ?? "") ?? 0;
    const next = current + remaining;
    if (next > 0)
      form.setValue(`splits.${last}.amount`, formatMoneyInput(next), { shouldValidate: true });
  }

  function onPayeePicked(p: PayeeSuggestion) {
    let changed = false;
    // Kullanıcı seçimini ezme: yalnızca boş alanları doldur.
    if (p.lastAccountId && !form.getValues("accountId")) {
      form.setValue("accountId", p.lastAccountId);
      changed = true;
    } else if (p.lastAccountId && form.formState.dirtyFields.accountId === undefined) {
      form.setValue("accountId", p.lastAccountId);
      changed = true;
    }
    if (
      p.lastCategoryId &&
      !splitMode &&
      !form.getValues("categoryId") &&
      p.lastType === form.getValues("type")
    ) {
      form.setValue("categoryId", p.lastCategoryId);
      changed = true;
    }
    setSuggested(changed);
  }

  async function onSubmit() {
    if (!mode) return;
    if (uploadBusy) {
      form.setError("root", { message: tr.attachments.waitForUploads });
      return;
    }
    const { attachments, ...values } = form.getValues();
    const payload = {
      ...values,
      installments: showInstallments ? values.installments : "1",
      attachmentIds: attachments.map((a) => a.id),
      toAccountId: values.type === "transfer" ? values.toAccountId : "",
      categoryId: values.type === "transfer" || values.splits.length ? "" : values.categoryId,
      splits: values.type === "transfer" ? [] : values.splits,
    };
    const result =
      mode.kind === "edit"
        ? await updateTransactionAction(mode.transaction.id, payload)
        : await createTransactionAction(payload);
    if (result.ok) {
      toast.success(mode.kind === "edit" ? t.toast.updated : t.toast.created);
      handleOpenChange(false);
      return;
    }
    for (const [name, message] of Object.entries(result.fieldErrors ?? {})) {
      if (!message) continue;
      form.setError(name as keyof FormValues, { message });
      if (name.startsWith("splits") || name === "tags") setAdvancedOpen(true);
    }
    if (!result.fieldErrors) form.setError("root", { message: result.error });
  }

  const title =
    mode?.kind === "edit"
      ? t.editTitle
      : mode?.kind === "copy"
        ? t.copyTitle
        : t.createTitle[mode?.type ?? "expense"];
  const loading = Boolean(mode) && !options && !loadError;
  const noAccounts = options && options.accounts.length === 0;
  const errors = form.formState.errors;

  return (
    <ResponsiveDialog
      open={Boolean(mode)}
      onOpenChange={handleOpenChange}
      title={title}
      footer={
        noAccounts || loadError ? null : (
          <>
            <Button variant="outline" type="button" onClick={() => handleOpenChange(false)}>
              {tr.common.cancel}
            </Button>
            <Button
              type="submit"
              form="transaction-form"
              disabled={form.formState.isSubmitting || loading || uploadBusy}
            >
              {form.formState.isSubmitting ? <Loader2 className="animate-spin" /> : null}
              {tr.common.save}
            </Button>
          </>
        )
      }
    >
      {loadError ? (
        <p className="text-sm text-destructive">{loadError}</p>
      ) : loading ? (
        <div className="flex flex-col gap-4" role="status" aria-label={tr.common.loading}>
          <Skeleton className="h-9 w-full" />
          <Skeleton className="h-12 w-full" />
          <Skeleton className="h-9 w-full" />
          <Skeleton className="h-9 w-full" />
        </div>
      ) : noAccounts ? (
        <div className="flex flex-col items-start gap-3 text-sm">
          <p className="text-muted-foreground">{t.noAccounts}</p>
          <Button asChild size="sm" onClick={() => handleOpenChange(false)}>
            <Link href="/hesaplar">{t.noAccountsLink}</Link>
          </Button>
        </div>
      ) : (
        <form id="transaction-form" onSubmit={form.handleSubmit(onSubmit)} noValidate>
          <FieldGroup>
            {mode?.kind !== "edit" ? (
              <Tabs value={type} onValueChange={(v) => changeType(v as TransactionType)}>
                <TabsList className="w-full">
                  {TRANSACTION_TYPES.map((x) => (
                    <TabsTrigger key={x} value={x} className="flex-1">
                      {t.types[x]}
                    </TabsTrigger>
                  ))}
                </TabsList>
              </Tabs>
            ) : null}

            <div className="grid gap-4 sm:grid-cols-[1fr_auto]">
              <Controller
                name="amount"
                control={form.control}
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor="tx-amount">{f.amount}</FieldLabel>
                    <MoneyInput
                      id="tx-amount"
                      name={field.name}
                      value={field.value}
                      onChange={field.onChange}
                      onBlur={field.onBlur}
                      placeholder="0,00"
                      className="h-11 text-lg"
                      autoFocus={mode?.kind === "create"}
                      aria-invalid={fieldState.invalid}
                    />
                    {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                  </Field>
                )}
              />
              <Controller
                name="date"
                control={form.control}
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor="tx-date">{f.date}</FieldLabel>
                    <Input
                      {...field}
                      id="tx-date"
                      type="date"
                      className="h-11"
                      aria-invalid={fieldState.invalid}
                    />
                    {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                  </Field>
                )}
              />
            </div>

            <div className={cn("grid gap-4", type === "transfer" && "sm:grid-cols-2")}>
              <Controller
                name="accountId"
                control={form.control}
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor="tx-account">
                      {type === "transfer" ? f.fromAccount : f.account}
                    </FieldLabel>
                    <AccountSelect
                      id="tx-account"
                      value={field.value}
                      onChange={field.onChange}
                      accounts={accounts}
                      invalid={fieldState.invalid}
                    />
                    {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                  </Field>
                )}
              />
              {showInstallments ? (
                <Controller
                  name="installments"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel htmlFor="tx-installments">{f.installments}</FieldLabel>
                      <Select value={field.value} onValueChange={field.onChange}>
                        <SelectTrigger id="tx-installments" className="w-full">
                          <SelectValue>
                            {field.value === "1"
                              ? f.singlePayment
                              : f.installmentCount(Number(field.value))}
                          </SelectValue>
                        </SelectTrigger>
                        <SelectContent className="max-h-72">
                          {INSTALLMENT_OPTIONS.map((n) => (
                            <SelectItem key={n} value={String(n)}>
                              {n === 1 ? f.singlePayment : f.installmentCount(n)}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      {Number(field.value) > 1 && totalMinor > 0 ? (
                        <FieldDescription>
                          {f.installmentHint(
                            Number(field.value),
                            formatMoney(Math.ceil(totalMinor / Number(field.value))),
                          )}
                        </FieldDescription>
                      ) : null}
                      {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                    </Field>
                  )}
                />
              ) : null}
              {type === "transfer" ? (
                <Controller
                  name="toAccountId"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel htmlFor="tx-to-account">{f.toAccount}</FieldLabel>
                      <AccountSelect
                        id="tx-to-account"
                        value={field.value}
                        onChange={field.onChange}
                        accounts={accounts}
                        exclude={accountId}
                        invalid={fieldState.invalid}
                      />
                      {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                    </Field>
                  )}
                />
              ) : null}
            </div>

            {type !== "transfer" && !splitMode ? (
              <Controller
                name="categoryId"
                control={form.control}
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor="tx-category">{f.category}</FieldLabel>
                    <div className="flex gap-2">
                      <CategorySelect
                        id="tx-category"
                        value={field.value}
                        onChange={field.onChange}
                        options={categories}
                        appearance={options?.categoryAppearance ?? {}}
                        invalid={fieldState.invalid}
                      />
                      <Button
                        type="button"
                        variant="outline"
                        size="icon"
                        onClick={toggleSplit}
                        title={f.split}
                        aria-label={f.split}
                      >
                        <Split />
                      </Button>
                    </div>
                    {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                  </Field>
                )}
              />
            ) : null}

            <Controller
              name="payee"
              control={form.control}
              render={({ field }) => (
                <Field>
                  <FieldLabel htmlFor="tx-payee">{f.payee}</FieldLabel>
                  <PayeeInput
                    value={field.value}
                    onChange={field.onChange}
                    onPick={onPayeePicked}
                  />
                  {suggested ? <FieldDescription>{f.suggested}</FieldDescription> : null}
                </Field>
              )}
            />
            <Controller
              name="description"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel htmlFor="tx-description">{f.description}</FieldLabel>
                  <Input {...field} id="tx-description" aria-invalid={fieldState.invalid} />
                  {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                </Field>
              )}
            />

            <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
              <CollapsibleTrigger asChild>
                <Button type="button" variant="ghost" className="-ml-2 w-fit">
                  <ChevronDown
                    className={cn("transition-transform", advancedOpen && "rotate-180")}
                  />
                  {f.advanced}
                  {splitMode ? (
                    <span className="text-xs text-muted-foreground">
                      · {t.list.split(splits.fields.length)}
                    </span>
                  ) : null}
                  {attachmentCount ? (
                    <span className="text-xs text-muted-foreground">
                      · {tr.attachments.count(attachmentCount)}
                    </span>
                  ) : null}
                </Button>
              </CollapsibleTrigger>
              <CollapsibleContent className="pt-3">
                <FieldGroup>
                  <Controller
                    name="attachments"
                    control={form.control}
                    render={({ field }) => (
                      <Field>
                        <FieldLabel>{tr.attachments.title}</FieldLabel>
                        <AttachmentPicker
                          value={field.value}
                          onChange={field.onChange}
                          allowedKinds={allowedAttachmentKinds(type)}
                          onBusyChange={setUploadBusy}
                        />
                      </Field>
                    )}
                  />
                  <Controller
                    name="tags"
                    control={form.control}
                    render={({ field, fieldState }) => (
                      <Field data-invalid={fieldState.invalid}>
                        <FieldLabel htmlFor="tx-tags">{f.tags}</FieldLabel>
                        <Input {...field} id="tx-tags" aria-describedby="tx-tags-hint" />
                        <FieldDescription id="tx-tags-hint">{f.tagsHint}</FieldDescription>
                      </Field>
                    )}
                  />

                  {type !== "transfer" ? (
                    <div className="flex flex-col gap-3 rounded-xl border p-3">
                      <div className="flex items-center justify-between gap-2">
                        <div>
                          <p className="text-sm font-medium">{f.split}</p>
                          <p className="text-xs text-muted-foreground">{f.splitHint}</p>
                        </div>
                        <Button
                          type="button"
                          variant={splitMode ? "outline" : "secondary"}
                          size="sm"
                          onClick={toggleSplit}
                        >
                          <Split />
                          {splitMode ? tr.common.cancel : f.split}
                        </Button>
                      </div>
                      {splits.fields.map((row, i) => (
                        <div
                          key={row.id}
                          className="grid grid-cols-[1fr_8rem_auto] items-start gap-2"
                        >
                          <Controller
                            name={`splits.${i}.categoryId`}
                            control={form.control}
                            render={({ field, fieldState }) => (
                              <div>
                                <CategorySelect
                                  id={`tx-split-${i}-category`}
                                  value={field.value}
                                  onChange={field.onChange}
                                  options={categories}
                                  appearance={options?.categoryAppearance ?? {}}
                                  invalid={fieldState.invalid}
                                />
                                {fieldState.invalid ? (
                                  <FieldError errors={[fieldState.error]} />
                                ) : null}
                              </div>
                            )}
                          />
                          <Controller
                            name={`splits.${i}.amount`}
                            control={form.control}
                            render={({ field, fieldState }) => (
                              <MoneyInput
                                id={`tx-split-${i}-amount`}
                                aria-label={`${f.amount} ${i + 1}`}
                                name={field.name}
                                value={field.value}
                                onChange={field.onChange}
                                onBlur={field.onBlur}
                                placeholder="0,00"
                                aria-invalid={fieldState.invalid}
                              />
                            )}
                          />
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            onClick={() => splits.remove(i)}
                            disabled={splits.fields.length <= 2}
                            aria-label={f.removeSplit}
                          >
                            <Trash2 />
                          </Button>
                          <Controller
                            name={`splits.${i}.note`}
                            control={form.control}
                            render={({ field }) => (
                              <Input
                                {...field}
                                placeholder={f.splitNote}
                                aria-label={`${f.splitNote} ${i + 1}`}
                                className="col-span-2 h-8 text-sm"
                              />
                            )}
                          />
                        </div>
                      ))}
                      {splitMode ? (
                        <div className="flex flex-wrap items-center gap-2">
                          <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => splits.append({ categoryId: "", amount: "", note: "" })}
                            disabled={splits.fields.length >= MAX_SPLITS}
                          >
                            <Plus />
                            {f.addSplit}
                          </Button>
                          <span
                            role="status"
                            className={cn(
                              "ml-auto text-sm tabular-nums",
                              remaining === 0 ? "text-income" : "text-expense",
                            )}
                          >
                            {remaining === 0
                              ? f.remainingOk
                              : `${f.remaining}: ${formatMoney(remaining)}`}
                          </span>
                          {remaining !== 0 ? (
                            <Button type="button" variant="ghost" size="sm" onClick={fillRemaining}>
                              <Wand2 />
                              {f.fillRemaining}
                            </Button>
                          ) : null}
                        </div>
                      ) : null}
                      {errors.splits?.message || errors.splits?.root?.message ? (
                        <FieldError>
                          {errors.splits.message ?? errors.splits.root?.message}
                        </FieldError>
                      ) : null}
                    </div>
                  ) : null}
                </FieldGroup>
              </CollapsibleContent>
            </Collapsible>
            {errors.root ? <FieldError>{errors.root.message}</FieldError> : null}
          </FieldGroup>
        </form>
      )}
    </ResponsiveDialog>
  );
}