"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Loader2 } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { Controller, useForm, useWatch, type Resolver } from "react-hook-form";
import { toast } from "sonner";
import { MoneyInput } from "@/components/money-input";
import { ResponsiveDialog } from "@/components/responsive-dialog";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
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 { getTransactionFormOptionsAction } from "@/features/transactions/actions";
import {
  AccountSelect,
  CategorySelect,
  PayeeInput,
} from "@/features/transactions/components/transaction-form";
import type { TransactionFormOptions } from "@/features/transactions/service";
import { tr } from "@/i18n/tr";
import { todayIstanbul } from "@/shared/dates";
import { formatDate } from "@/shared/format";
import { formatMoneyInput } from "@/shared/money";
import {
  describeRecurrence,
  FREQUENCIES,
  listOccurrences,
  MONTHLY_MODES,
  type Frequency,
  type MonthlyMode,
} from "@/shared/recurrence";
import {
  END_KINDS,
  recurringRuleFormSchema,
  type RecurringRuleForm,
} from "@/shared/schemas/recurring";
import { TRANSACTION_TYPES, type TransactionType } from "@/shared/transactions";
import { createRuleAction, updateRuleAction } from "../actions";
import type { RuleFormValues } from "../service";

const t = tr.recurring;
const tf = tr.transactions.fields;

export type RuleFormMode =
  | { kind: "create" }
  | {
      kind: "edit";
      rule: RuleFormValues;
      scope: "all" | "following";
      /** "Bu ve sonrakiler" için başlangıç tekrarı ve onun tarihi / kalan tekrar sayısı. */
      fromTransactionId?: string;
      fromDate?: string;
      remainingCount?: number | null;
    };

type FormValues = {
  type: TransactionType;
  amount: string;
  isEstimate: boolean;
  accountId: string;
  toAccountId: string;
  categoryId: string;
  payee: string;
  description: string;
  tags: string;
  startDate: string;
  frequency: Frequency;
  interval: string;
  monthlyMode: MonthlyMode;
  endKind: (typeof END_KINDS)[number];
  count: string;
  endDate: string;
};

function toValues(mode: RuleFormMode, options: TransactionFormOptions | null): FormValues {
  if (mode.kind === "create") {
    return {
      type: "expense",
      amount: "",
      isEstimate: false,
      accountId: options?.accounts[0]?.id ?? "",
      toAccountId: "",
      categoryId: "",
      payee: "",
      description: "",
      tags: "",
      startDate: todayIstanbul(),
      frequency: "monthly",
      interval: "1",
      monthlyMode: "day",
      endKind: "never",
      count: "",
      endDate: "",
    };
  }
  const r = mode.rule;
  const following = mode.scope === "following" && mode.fromDate;
  const count = following ? (mode.remainingCount ?? null) : r.count;
  return {
    type: r.type,
    amount: formatMoneyInput(r.amountMinor),
    isEstimate: r.isEstimate,
    accountId: r.accountId,
    toAccountId: r.toAccountId ?? "",
    categoryId: r.categoryId ?? "",
    payee: r.payee,
    description: r.description,
    tags: r.tags.join(", "),
    startDate: following ? mode.fromDate! : r.startDate,
    frequency: r.frequency,
    interval: String(r.interval),
    monthlyMode: r.monthlyMode,
    endKind: count ? "count" : r.endDate ? "date" : "never",
    count: count ? String(count) : "",
    endDate: r.endDate ?? "",
  };
}

/** Düzenli işlem kuralı formu (oluştur / tümünü düzenle / bu ve sonrakileri düzenle). */
export function RuleFormDialog({
  mode,
  onOpenChange,
}: {
  mode: RuleFormMode | null;
  onOpenChange: (open: boolean) => void;
}) {
  const [options, setOptions] = useState<TransactionFormOptions | null>(null);
  const [loadError, setLoadError] = useState<string | null>(null);
  const form = useForm<FormValues, unknown, RecurringRuleForm>({
    resolver: zodResolver(recurringRuleFormSchema) as unknown as Resolver<
      FormValues,
      unknown,
      RecurringRuleForm
    >,
    defaultValues: toValues({ kind: "create" }, null),
  });

  useEffect(() => {
    if (!mode) return;
    let cancelled = false;
    getTransactionFormOptionsAction().then((res) => {
      if (cancelled) return;
      if (!res.ok) return setLoadError(res.error);
      setLoadError(null);
      setOptions(res.data);
      form.reset(toValues(mode, res.data));
    });
    return () => {
      cancelled = true;
    };
  }, [mode, form]);

  const w = useWatch({ control: form.control });
  const type = w.type ?? "expense";
  const categories = useMemo(() => {
    const kind = type === "income" ? "income" : "expense";
    return (options?.categories ?? []).filter((c) => c.kind === kind);
  }, [options, type]);

  // Önizleme: açıklama ve ilk 3 tarih (istemcide aynı saf fonksiyonla).
  const preview = useMemo(() => {
    const interval = Math.min(12, Math.max(1, Number(w.interval) || 1));
    const r = {
      frequency: w.frequency ?? "monthly",
      interval,
      monthlyMode: w.monthlyMode ?? "day",
      startDate: w.startDate ?? todayIstanbul(),
      endDate: w.endKind === "date" && w.endDate ? w.endDate : null,
      count: w.endKind === "count" && Number(w.count) > 0 ? Number(w.count) : null,
    } as const;
    if (!/^\d{4}-\d{2}-\d{2}$/.test(r.startDate)) return null;
    return {
      text: describeRecurrence(r),
      dates: listOccurrences(r, "9999-12-31")
        .slice(0, 3)
        .map((o) => o.date),
    };
  }, [w]);

  function changeType(next: TransactionType) {
    form.setValue("type", next);
    form.setValue("categoryId", "");
    if (next !== "transfer") form.setValue("toAccountId", "");
    form.clearErrors();
  }

  async function onSubmit() {
    if (!mode) return;
    const values = form.getValues();
    const payload = {
      ...values,
      toAccountId: values.type === "transfer" ? values.toAccountId : "",
      categoryId: values.type === "transfer" ? "" : values.categoryId,
      count: values.endKind === "count" ? values.count : null,
      endDate: values.endKind === "date" ? values.endDate : null,
    };
    const result =
      mode.kind === "edit"
        ? await updateRuleAction(mode.rule.id, payload, mode.scope, mode.fromTransactionId)
        : await createRuleAction(payload);
    if (result.ok) {
      toast.success(mode.kind === "edit" ? t.toast.updated : t.toast.created);
      onOpenChange(false);
      return;
    }
    for (const [name, message] of Object.entries(result.fieldErrors ?? {})) {
      if (message) form.setError(name as keyof FormValues, { message });
    }
    if (!result.fieldErrors) form.setError("root", { message: result.error });
  }

  const loading = Boolean(mode) && !options && !loadError;
  const errors = form.formState.errors;
  const title = mode?.kind === "edit" ? `${t.editTitle} · ${t.scopes[mode.scope]}` : t.createTitle;

  return (
    <ResponsiveDialog
      open={Boolean(mode)}
      onOpenChange={onOpenChange}
      title={title}
      description={mode?.kind === "edit" ? t.scopeHints[mode.scope] : undefined}
      footer={
        loadError ? null : (
          <>
            <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
              {tr.common.cancel}
            </Button>
            <Button
              type="submit"
              form="rule-form"
              disabled={form.formState.isSubmitting || loading}
            >
              {form.formState.isSubmitting ? <Loader2 className="animate-spin" /> : null}
              {tr.common.save}
            </Button>
          </>
        )
      }
    >
      {loadError ? (
        <p className="text-sm text-destructive">{loadError}</p>
      ) : loading || !options ? (
        <div className="flex flex-col gap-4" role="status" aria-label={tr.common.loading}>
          <Skeleton className="h-9 w-full" />
          <Skeleton className="h-9 w-full" />
          <Skeleton className="h-9 w-full" />
        </div>
      ) : (
        <form id="rule-form" onSubmit={form.handleSubmit(onSubmit)} noValidate>
          <FieldGroup>
            <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">
                    {tr.transactions.types[x]}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>

            <Controller
              name="amount"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel htmlFor="rule-amount">{tf.amount}</FieldLabel>
                  <MoneyInput
                    id="rule-amount"
                    value={field.value}
                    onChange={field.onChange}
                    onBlur={field.onBlur}
                    aria-invalid={fieldState.invalid}
                  />
                  {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                </Field>
              )}
            />
            <Controller
              name="isEstimate"
              control={form.control}
              render={({ field }) => (
                <label className="-mt-2 flex items-center gap-2 text-sm">
                  <Checkbox
                    checked={field.value}
                    onCheckedChange={(v) => field.onChange(v === true)}
                  />
                  {t.fields.estimate}
                </label>
              )}
            />

            <Controller
              name="accountId"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel htmlFor="rule-account">
                    {type === "transfer" ? tf.fromAccount : tf.account}
                  </FieldLabel>
                  <AccountSelect
                    id="rule-account"
                    value={field.value}
                    onChange={field.onChange}
                    accounts={options.accounts}
                    invalid={fieldState.invalid}
                  />
                  {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                </Field>
              )}
            />
            {type === "transfer" ? (
              <Controller
                name="toAccountId"
                control={form.control}
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor="rule-to">{tf.toAccount}</FieldLabel>
                    <AccountSelect
                      id="rule-to"
                      value={field.value}
                      onChange={field.onChange}
                      accounts={options.accounts}
                      exclude={w.accountId}
                      invalid={fieldState.invalid}
                    />
                    {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                  </Field>
                )}
              />
            ) : (
              <Controller
                name="categoryId"
                control={form.control}
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor="rule-category">{tf.category}</FieldLabel>
                    <CategorySelect
                      id="rule-category"
                      value={field.value}
                      onChange={field.onChange}
                      options={categories}
                      appearance={options.categoryAppearance}
                      invalid={fieldState.invalid}
                    />
                    {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                  </Field>
                )}
              />
            )}
            <Controller
              name="payee"
              control={form.control}
              render={({ field }) => (
                <Field>
                  <FieldLabel htmlFor="tx-payee">{tf.payee}</FieldLabel>
                  <PayeeInput value={field.value} onChange={field.onChange} onPick={() => {}} />
                </Field>
              )}
            />
            <Controller
              name="description"
              control={form.control}
              render={({ field }) => (
                <Field>
                  <FieldLabel htmlFor="rule-description">{tf.description}</FieldLabel>
                  <Input {...field} id="rule-description" />
                </Field>
              )}
            />

            <div className="grid grid-cols-2 gap-3">
              <Controller
                name="startDate"
                control={form.control}
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor="rule-start">{t.fields.startDate}</FieldLabel>
                    <Input
                      {...field}
                      id="rule-start"
                      type="date"
                      aria-invalid={fieldState.invalid}
                    />
                    {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                  </Field>
                )}
              />
              <Controller
                name="frequency"
                control={form.control}
                render={({ field }) => (
                  <Field>
                    <FieldLabel htmlFor="rule-frequency">{t.fields.frequency}</FieldLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <SelectTrigger id="rule-frequency" className="w-full">
                        <SelectValue>{t.frequencies[field.value]}</SelectValue>
                      </SelectTrigger>
                      <SelectContent>
                        {FREQUENCIES.map((x) => (
                          <SelectItem key={x} value={x}>
                            {t.frequencies[x]}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </Field>
                )}
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <Controller
                name="interval"
                control={form.control}
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel htmlFor="rule-interval">
                      {t.fields.interval} ({t.units[w.frequency ?? "monthly"]})
                    </FieldLabel>
                    <Input
                      {...field}
                      id="rule-interval"
                      type="number"
                      inputMode="numeric"
                      min={1}
                      max={12}
                      aria-invalid={fieldState.invalid}
                    />
                    {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                  </Field>
                )}
              />
              {w.frequency === "monthly" ? (
                <Controller
                  name="monthlyMode"
                  control={form.control}
                  render={({ field }) => (
                    <Field>
                      <FieldLabel htmlFor="rule-monthly">{t.fields.monthlyMode}</FieldLabel>
                      <Select value={field.value} onValueChange={field.onChange}>
                        <SelectTrigger id="rule-monthly" className="w-full">
                          <SelectValue>{t.monthlyModes[field.value]}</SelectValue>
                        </SelectTrigger>
                        <SelectContent>
                          {MONTHLY_MODES.map((x) => (
                            <SelectItem key={x} value={x}>
                              {t.monthlyModes[x]}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </Field>
                  )}
                />
              ) : null}
            </div>
            <div className="grid grid-cols-2 gap-3">
              <Controller
                name="endKind"
                control={form.control}
                render={({ field }) => (
                  <Field>
                    <FieldLabel htmlFor="rule-end">{t.fields.end}</FieldLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <SelectTrigger id="rule-end" className="w-full">
                        <SelectValue>{t.endKinds[field.value]}</SelectValue>
                      </SelectTrigger>
                      <SelectContent>
                        {END_KINDS.map((x) => (
                          <SelectItem key={x} value={x}>
                            {t.endKinds[x]}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </Field>
                )}
              />
              {w.endKind === "count" ? (
                <Controller
                  name="count"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel htmlFor="rule-count">{t.fields.count}</FieldLabel>
                      <Input
                        {...field}
                        id="rule-count"
                        type="number"
                        inputMode="numeric"
                        min={1}
                        aria-invalid={fieldState.invalid}
                      />
                      {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                    </Field>
                  )}
                />
              ) : w.endKind === "date" ? (
                <Controller
                  name="endDate"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel htmlFor="rule-enddate">{t.fields.endDate}</FieldLabel>
                      <Input
                        {...field}
                        id="rule-enddate"
                        type="date"
                        aria-invalid={fieldState.invalid}
                      />
                      {fieldState.invalid ? <FieldError errors={[fieldState.error]} /> : null}
                    </Field>
                  )}
                />
              ) : null}
            </div>
            {preview ? (
              <FieldDescription>
                {preview.text} · {t.fields.preview}:{" "}
                {preview.dates.map((d) => formatDate(`${d}T12:00:00+03:00`)).join(", ")}
              </FieldDescription>
            ) : null}
            {errors.root ? <FieldError>{errors.root.message}</FieldError> : null}
          </FieldGroup>
        </form>
      )}
    </ResponsiveDialog>
  );
}