"use client";

import * as React from "react";

import { zodResolver } from "@hookform/resolvers/zod";
import { Building2, CircleDollarSign, ClipboardList, Layers3 } from "lucide-react";
import { FormProvider, useForm, type Control } from "react-hook-form";

import { withServerValidationErrors } from "@/app/customer/_lib/apply-yii-validation-errors";

import { AssetDetailsSection } from "@/components/form/sections/asset-details-section";
import { BrokerDetailsSection } from "@/components/form/sections/broker-details-section";
import { PricingDetailsSection } from "@/components/form/sections/pricing-details-section";
import { TransactionDetailsSection } from "@/components/form/sections/transaction-details-section";
import type { CommonTransactionFormValues } from "@/components/form/schemas/transaction-schema";
import {
  defaultModuleTransactionValues,
  moduleTransactionFormSchema,
  type ModuleTransactionFormValues,
} from "@/components/form/schemas/module-transaction-schema";

import { AdditionalModuleFields } from "./additional-module-fields";
import { transactionFormGridClass } from "./form-layout";
import { TransactionFormSection } from "./form-section";
import { TransactionFormSummarySidebar } from "./form-summary-sidebar";
import type { TransactionModuleFormConfig } from "./types";

type ModuleTransactionFormProps = {
  config: Pick<TransactionModuleFormConfig, "formId" | "executionOptions" | "transactionOptions">;
  initialValues?: ModuleTransactionFormValues;
  onSubmit?: (values: ModuleTransactionFormValues) => void | Promise<void>;
};

export function ModuleTransactionForm({ config, initialValues, onSubmit }: ModuleTransactionFormProps) {
  const form = useForm<ModuleTransactionFormValues>({
    resolver: zodResolver(moduleTransactionFormSchema),
    defaultValues: initialValues ?? defaultModuleTransactionValues,
    mode: "onBlur",
  });

  React.useEffect(() => {
    form.reset(initialValues ?? defaultModuleTransactionValues);
  }, [form, initialValues]);

  const commonControl = form.control as unknown as Control<CommonTransactionFormValues>;

  return (
    <FormProvider {...form}>
      <form
        id={config.formId}
        noValidate
        onSubmit={form.handleSubmit(withServerValidationErrors(form.setError, onSubmit))}
        className="w-full min-w-0"
      >
        <div className="grid w-full min-w-0 grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_17.5rem] xl:gap-8">
          <div className="flex min-w-0 flex-col gap-5 lg:gap-6">
            <TransactionFormSection
              title="Transaction & order"
              description="Trade dates, references, bank, workflow, and execution details."
              icon={<ClipboardList className="size-4" />}
            >
              <div className="flex flex-col gap-8">
                <div className={transactionFormGridClass}>
                  <TransactionDetailsSection control={commonControl} />
                </div>
                <div className="border-t border-border/50 pt-8">
                  <p className="mb-5 font-medium text-muted-foreground text-[11px] uppercase tracking-wider">
                    Execution & currency
                  </p>
                  <div className={transactionFormGridClass}>
                    <AdditionalModuleFields
                      control={form.control}
                      executionOptions={config.executionOptions}
                      transactionOptions={config.transactionOptions}
                    />
                  </div>
                </div>
              </div>
            </TransactionFormSection>

            <TransactionFormSection
              title="Asset"
              description="Security identifiers and classification."
              icon={<Layers3 className="size-4" />}
              contentClassName={transactionFormGridClass}
            >
              <AssetDetailsSection control={commonControl} />
            </TransactionFormSection>

            <TransactionFormSection
              title="Pricing & settlement"
              description="Quantity, pricing, commissions, and currency."
              icon={<CircleDollarSign className="size-4" />}
              contentClassName={transactionFormGridClass}
            >
              <PricingDetailsSection control={commonControl} />
            </TransactionFormSection>

            <TransactionFormSection
              title="Broker & counterparty"
              description="Broker details, relationship manager, and notes."
              icon={<Building2 className="size-4" />}
              contentClassName={transactionFormGridClass}
            >
              <BrokerDetailsSection control={commonControl} />
            </TransactionFormSection>
          </div>

          <TransactionFormSummarySidebar />
        </div>
      </form>
    </FormProvider>
  );
}

export type { ModuleTransactionFormValues };