"use client";

import { useEffect } from "react";

import { zodResolver } from "@hookform/resolvers/zod";
import { Star } from "lucide-react";
import { Controller, useForm } from "react-hook-form";

import { useDashboardFormSubmit } from "@/app/dashboard/_components/use-dashboard-form-submit";

import {
  FormPageHeader,
  FormPanel,
  FormSaveBar,
  FormSelect,
} from "@/app/dashboard/_components/form";
import { FormField } from "@/components/form/form-field";
import { Input } from "@/components/ui/input";

import { MODULE_LABEL_BY_VALUE, PARENT_TO_SALE, type ModuleUsageMap } from "../constants";
import { ActiveReviewBadge } from "@/components/shared/status-pill";
import type { MacroAssetClassRow } from "../schema";
import { MACRO_ASSET_STATUS_FORM_OPTIONS } from "./constants";
import { ModuleMultiSelect } from "./module-multi-select";
import {
  macroAssetClassFormDefaults,
  macroAssetClassFormSchema,
  type MacroAssetClassFormValues,
} from "./schema";

const LIST_HREF = "/dashboard/master/macro-asset-class";
const CREATE_SUBMIT_HREF = "/dashboard/master/macro-asset-class/create/submit";
const UPDATE_SUBMIT_HREF = "/dashboard/master/macro-asset-class/update";

const SALE_CODES = new Set(Object.values(PARENT_TO_SALE));

type Props = {
  mode: "create" | "update";
  initial?: MacroAssetClassRow;
  /** Modules already linked on other macros — disabled for exclusive mapping. */
  moduleUsage?: ModuleUsageMap;
};

function withParentSales(codes: string[]): string[] {
  const next = [...codes];
  for (const code of codes) {
    const sale = PARENT_TO_SALE[code];
    if (sale && !next.includes(sale)) next.push(sale);
  }
  return [...new Set(next)];
}

function rowToFormValues(row: MacroAssetClassRow): MacroAssetClassFormValues {
  return {
    master_name: row.masterName,
    master_generated: withParentSales(row.masterGenerated),
    status: row.status,
  };
}

function MacroAssetClassPreview({ values }: { values: MacroAssetClassFormValues }) {
  const visibleCodes = values.master_generated.filter((code) => !SALE_CODES.has(code));
  const moduleLabels = visibleCodes
    .map((code) => MODULE_LABEL_BY_VALUE[code] ?? code)
    .join(", ");

  return (
    <div className="overflow-hidden rounded-xl border bg-card shadow-sm">
      <div className="border-b bg-linear-to-br from-violet-500/10 via-primary/5 to-card px-4 py-3">
        <div className="flex items-center justify-between gap-2">
          <Star className="size-5 text-primary" />
          <ActiveReviewBadge
            status={values.status}
            label={
              values.status === "A"
                ? "Active"
                : values.status === "I"
                  ? "Inactive"
                  : "Under review"
            }
          />
        </div>
      </div>
      <div className="space-y-3 p-4">
        <div className="font-semibold text-lg leading-tight">
          {values.master_name?.trim() || "Macro asset class name"}
        </div>
        <p className="text-muted-foreground text-xs leading-relaxed">
          {moduleLabels || "No modules selected"}
        </p>
        <p className="text-muted-foreground text-[11px]">
          {visibleCodes.length} module
          {visibleCodes.length === 1 ? "" : "s"} linked
        </p>
      </div>
    </div>
  );
}

export function MacroAssetClassForm({ mode, initial, moduleUsage = {} }: Props) {
  const isUpdate = mode === "update";

  const form = useForm<MacroAssetClassFormValues>({
    resolver: zodResolver(macroAssetClassFormSchema),
    defaultValues: initial ? rowToFormValues(initial) : macroAssetClassFormDefaults,
  });

  const watchValues = form.watch();

  useEffect(() => {
    if (initial) {
      form.reset(rowToFormValues(initial));
    }
  }, [initial, form]);

  const { isSaving, submit } = useDashboardFormSubmit<MacroAssetClassFormValues>({
    mode: isUpdate ? "update" : "create",
    id: initial?.id,
    createUrl: CREATE_SUBMIT_HREF,
    updateUrl: UPDATE_SUBMIT_HREF,
    listHref: LIST_HREF,
    saveFailMessage: "Macro asset class could not be saved.",
    messages: {
      createFail: "Macro asset class could not be created.",
      updateFail: "Macro asset class could not be updated.",
      createSuccess: "Macro asset class created",
      updateSuccess: "Macro asset class updated",
    },
  });

  const onSubmit = form.handleSubmit(submit);

  return (
    <form onSubmit={onSubmit} className="pb-4">
      <FormPageHeader
        backHref={LIST_HREF}
        breadcrumb={[
          { label: "Master" },
          { label: "Macro asset class", href: LIST_HREF },
          { label: isUpdate ? "Update" : "Create new" },
        ]}
        titleIcon={<Star className="size-5 text-primary" />}
        title={
          isUpdate
            ? `Update ${initial?.masterName ?? "macro asset class"}`
            : "Create macro asset class"
        }
        description="Define macro asset class names and link portfolio modules for reporting and analytics."
      />

      <div className="grid gap-6 lg:grid-cols-[1fr_280px]">
        <div className="space-y-6">
          <FormPanel
            title="Details"
            description="Matches the legacy form: name, linked modules, and status."
          >
            <div className="grid gap-5 sm:grid-cols-2">
              <Controller
                name="master_name"
                control={form.control}
                render={({ field, fieldState }) => (
                  <FormField
                    label="Macro asset class name"
                    htmlFor="master_name"
                    required
                    error={fieldState.error}
                    className="sm:col-span-2"
                  >
                    <Input id="master_name" placeholder="e.g. Equities" {...field} />
                  </FormField>
                )}
              />

              <Controller
                name="status"
                control={form.control}
                render={({ field, fieldState }) => (
                  <FormField
                    label="Status"
                    htmlFor="status"
                    required
                    error={fieldState.error}
                  >
                    <FormSelect
                      id="status"
                      value={field.value}
                      onChange={field.onChange}
                      placeholder="Select status"
                      options={MACRO_ASSET_STATUS_FORM_OPTIONS}
                    />
                  </FormField>
                )}
              />
            </div>
          </FormPanel>

          <FormPanel
            title="Linked modules"
            description="Pick available modules. Sales are linked automatically with their parent. Already mapped modules are unavailable."
          >
            <Controller
              name="master_generated"
              control={form.control}
              render={({ field, fieldState }) => (
                <FormField
                  label="Modules"
                  htmlFor="master_generated"
                  required
                  error={fieldState.error}
                >
                  <ModuleMultiSelect
                    id="master_generated"
                    value={field.value}
                    onChange={field.onChange}
                    moduleUsage={moduleUsage}
                  />
                </FormField>
              )}
            />
          </FormPanel>
        </div>

        <aside className="lg:sticky lg:top-4 lg:self-start">
          <MacroAssetClassPreview values={watchValues} />
        </aside>
      </div>

      <FormSaveBar
        cancelHref={LIST_HREF}
        isSaving={isSaving}
        saveLabel="Save changes"
        onReset={() =>
          form.reset(initial ? rowToFormValues(initial) : macroAssetClassFormDefaults)
        }
      />
    </form>
  );
}