"use client";

import Link from "next/link";
import { FormProvider } from "react-hook-form";
import { ArrowLeft, Building2 } from "lucide-react";

import { interestDividendFormConfig } from "@/components/form/transaction-workspace/module-configs";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

import { InterestDividendFormBody } from "./interest-dividend-form-sections";
import { useInterestDividendFormPage } from "./use-interest-dividend-form-page";

export function InterestDividendFormPage() {
  const { form, formOptions, enabledDate, isLoading, loadError, isEdit, listPath, onSubmit } =
    useInterestDividendFormPage();

  return (
    <div className="flex min-h-full w-full min-w-0 flex-1 flex-col bg-muted/20">
      <div className="flex w-full min-w-0 flex-1 flex-col gap-6 px-4 pt-6 pb-24 lg:gap-8 lg:px-6 lg:pt-8">
        <header className="flex w-full min-w-0 flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div className="flex min-w-0 items-start gap-4">
            <div className="flex size-11 shrink-0 items-center justify-center rounded-xl border border-primary/20 bg-primary/10 text-primary shadow-xs">
              <Building2 className="size-5" />
            </div>
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-2">
                <h1 className="font-semibold text-2xl tracking-tight text-foreground">
                  {isEdit ? "Edit interest / dividend" : "New interest / dividend transaction"}
                </h1>
                <Badge variant={isEdit ? "secondary" : "outline"} className="font-normal">
                  {isEdit ? "Editing" : "Draft"}
                </Badge>
              </div>
              <p className="mt-1.5 max-w-2xl text-muted-foreground text-sm leading-relaxed">
                Record dividend, coupon, or cash interest receipts with linked transaction context, fee breakdown,
                and a live net payout summary.
              </p>
            </div>
          </div>
          <Button variant="outline" size="sm" className="shrink-0 gap-1.5" asChild>
            <Link href={listPath}>
              <ArrowLeft className="size-3.5" />
              Back to list
            </Link>
          </Button>
        </header>

        {isLoading ? (
          <p className="text-muted-foreground text-sm">Loading form…</p>
        ) : loadError ? (
          <p className="text-destructive text-sm">{loadError}</p>
        ) : (
          <FormProvider {...form}>
            <form id={interestDividendFormConfig.formId} onSubmit={onSubmit} className={cn("space-y-6")}>
              <InterestDividendFormBody formOptions={formOptions} enabledDate={enabledDate} />
            </form>
          </FormProvider>
        )}
      </div>

      <div className="sticky bottom-0 z-20 border-t border-border/60 bg-background/90 shadow-[0_-4px_24px_-8px_rgba(0,0,0,0.08)] backdrop-blur-md">
        <div className="flex w-full flex-wrap items-center justify-between gap-3 px-4 py-3.5 lg:px-6">
          <p className="text-muted-foreground text-xs sm:text-sm">
            {isEdit ? "Changes apply on save" : "All required fields must be valid before saving"}
          </p>
          <div className="flex flex-wrap items-center gap-2">
            <Button variant="ghost" size="sm" className="text-muted-foreground" asChild>
              <Link href={listPath}>Cancel</Link>
            </Button>
            <Button
              type="submit"
              form={interestDividendFormConfig.formId}
              size="sm"
              className="min-w-[7.5rem] px-6 shadow-sm"
              disabled={isLoading || Boolean(loadError)}
            >
              {isEdit ? "Save changes" : "Create transaction"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}