import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import {
  Building2,
  ChevronDown,
  Link2,
  Pencil,
  Plus,
  Repeat,
  Scale,
  Search,
  Trash2,
  TriangleAlert,
} from "lucide-react";
import type { StandardConversion } from "../../lib/types";
import { api, apiV26, nextId, type BrandLinkRow, type MaterialSupplier, type MaterialUnitRow } from "../../lib/api";
import {
  refreshProcurementStore,
  useDeleteStandardConversion,
  useMaterials,
  useQuotes,
  useSaveStandardConversion,
  useStoreData,
} from "../../hooks";
import { normalize } from "../../lib/normalize";
import { uniqueUnits } from "../../lib/units";
import { useAppStore } from "../../store";
import { faNum } from "../../lib/formatters";
import { parseNum } from "../../lib/numutil";
import { Header, PageLayout } from "../../components/layout/Header";
import { Combobox } from "../../components/Combobox";
import { NumberInput } from "../../components/NumberInput";
import { cn } from "../../lib/utils";
import { Button } from "../../components/ui/button";

type UnitLite = import("../../lib/units").UnitLike;

function unitDisplay(u: { code: string; name_fa: string | null } | null | undefined): string {
  if (!u) return "";
  return u.name_fa || u.code;
}

// نام متریال‌های کامپوزیت «برند + نام + مشخصه» (مثل «راجین سیم مسی») را به
// «نام پایه» (سیم) و «نام نمایشی قلم» (سیم مسی) می‌شکند — بدون پیشوند برند.
function splitMaterialName(name: string, brand: string, specs: string[]): { base: string; variant: string } {
  let base = (name || "").trim();
  const cleanedSpecs = specs.filter((s) => s && s.trim());
  if (!base) return { base: "", variant: "" };

  if (brand) {
    if (base.startsWith(brand)) base = base.slice(brand.length);
    else if (base.includes(brand)) base = base.split(brand).join(" ");
  }
  cleanedSpecs.forEach((s) => {
    if (!base) return;
    if (base.includes(s)) base = base.split(s).join(" ");
  });
  base = base.replace(/\s+/g, " ").trim();
  if (!base) base = (name || "").trim(); // فقط برند/مشخصه بود — نام اصلی را نگه دار

  const variantParts = [base, ...cleanedSpecs].filter(Boolean);
  const unique: string[] = [];
  variantParts.forEach((p) => {
    if (!unique.some((x) => normalize(x) === normalize(p))) unique.push(p);
  });
  return { base, variant: unique.join(" ") };
}

interface VariantItem {
  id: string;
  label: string;
  refUnit: string;
  sourceName: string; // نام کامل متریال — برای انتخاب «نام دقیق» هنگام یکتاسازی
}

interface MaterialGroup {
  base: string;
  variants: VariantItem[]; // فقط ترکیب‌های متریال+مشخصه (بدون فرزند خودارجاع)
  repId: string; // متریال نماینده‌ی گروه (نام دقیقِ پایه ترجیح دارد)
  repRef: string;
  repExact?: boolean;
}

// داشبورد ضرایب تبدیل — بدون صفحه‌ی تاپیک/دسته: سایدبار آکاردئونی از
// متریال‌های سراسری (نام پایه + واریانت‌ها) با نوار جستجو؛ پنل جزئیات هر
// متریال (واحد مرجع و ضریب‌هایش از material_units با قید برند اختیاری).
export function UnitsPage() {
  useStoreData();
  const materials = useMaterials();
  const quotes = useQuotes();
  const standardConversions = useAppStore((s) => s.standardConversions);
  const saveStd = useSaveStandardConversion();
  const deleteStd = useDeleteStandardConversion();

  // ---------- state ----------
  const [search, setSearch] = useState("");
  const [materialId, setMaterialId] = useState<string | null>(null);
  const [expanded, setExpanded] = useState<Set<string>>(new Set());
  const [refDraft, setRefDraft] = useState<string | null>(null);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editingStdId, setEditingStdId] = useState<string | null>(null);
  const [rows, setRows] = useState<MaterialUnitRow[]>([]);
  const [rowsLoading, setRowsLoading] = useState(false);
  const [brandLinks, setBrandLinks] = useState<BrandLinkRow[]>([]);

  // تأمین‌کننده‌های متریال انتخاب‌شده — type imported from api.ts
  const [materialSuppliers, setMaterialSuppliers] = useState<MaterialSupplier[]>([]);
  const [suppliersLoading, setSuppliersLoading] = useState(false);
  const [suppliersLoadedId, setSuppliersLoadedId] = useState<string | null>(null);

  // واحدها و برندهای سراسری (فهرست دیتابیس)
  const [units, setUnits] = useState<UnitLite[]>([]);
  const [allBrands, setAllBrands] = useState<string[]>([]);

  // فرم ضریب متریال
  const [formUnit, setFormUnit] = useState("");
  const [formFactor, setFormFactor] = useState("");
  const [formBrand, setFormBrand] = useState("");

  // فرم تبدیل ثابت
  const [stdFrom, setStdFrom] = useState("");
  const [stdFactor, setStdFactor] = useState("");
  const [stdTo, setStdTo] = useState("");

  // ---------- واحدها / برندهای سراسری ----------
  useEffect(() => {
    let alive = true;
    void api
      .unitsList()
      .then(
        (list) =>
          alive &&
          setUnits(
            uniqueUnits(list.map((u) => ({ id: u.id, code: u.code, name_fa: u.name_fa }))),
          ),
      )
      .catch(() => {});
    void api
      .brandsList()
      .then((list) => alive && setAllBrands(list.map((b) => b.name).filter(Boolean)))
      .catch(() => {});
    return () => { alive = false; };
  }, []);

  // ---------- متریال انتخاب‌شده ----------
  const material = useMemo(
    () => materials.find((m) => m.id === materialId) || null,
    [materials, materialId],
  );
  const ref = material?.base_unit || "";

  // ---------- گروه‌های آکاردئونی سایدبار ----------
  // والدها بر اساس «نام پایه» یکتا می‌شوند. فرزندِ آکاردئون فقط «ترکیب‌های
  // متریال + مشخصه» است (مثل «سیم مسی»)؛ فرزندِ خودارجاع (همان نام پایه
  // بدون مشخصه — مثل «سیم» زیرِ «سیم») هرگز نمایش داده نمی‌شود. اگر گروهی
  // مشخصه/واریانت نداشت، خودِ والد قابل انتخاب است (متریال نماینده).
  const groups = useMemo<MaterialGroup[]>(() => {
    const map = new Map<string, MaterialGroup>();
    const variantSeen = new Map<string, string>(); // normalize(label) → preferred materialId

    const addVariant = (group: MaterialGroup, v: VariantItem, exactName: boolean) => {
      const key = normalize(v.label);
      const existingId = variantSeen.get(key);
      if (existingId != null) {
        const existing = group.variants.find((x) => x.id === existingId);
        const existingExact = existing ? normalize(existing.label) === normalize(existing.sourceName) : false;
        // جایگزینی فقط وقتی مورد جدید «نام دقیق» دارد و مورد قبلی ندارد
        if (exactName && !existingExact) {
          group.variants = group.variants.filter((x) => x.id !== existingId);
          group.variants.push(v);
          variantSeen.set(key, v.id);
        }
        return;
      }
      variantSeen.set(key, v.id);
      group.variants.push(v);
    };

    materials.forEach((m) => {
      const { base, variant } = splitMaterialName(m.name, m.brand, m.specs);
      if (!base) return;
      const key = normalize(base);
      let group = map.get(key);
      if (!group) {
        group = { base, variants: [], repId: "", repRef: "" };
        map.set(key, group);
      }
      // متریال نماینده: نام دقیقِ برابر با پایه ترجیح دارد؛ وگرنه اولین مورد
      if (!group.repId) {
        group.repId = m.id;
        group.repRef = m.base_unit || "";
        group.repExact = normalize(m.name) === normalize(base);
      } else if (!group.repExact && normalize(m.name) === normalize(base)) {
        group.repId = m.id;
        group.repRef = m.base_unit || "";
        group.repExact = true;
      }
      // فرزند فقط وقتی مشخصه دارد که برچسبش با نام پایه فرق کند
      const label = variant || base;
      if (!label.trim()) return;
      if (normalize(label) === normalize(base)) return; // خودارجاع — حذف
      addVariant(group, { id: m.id, label, refUnit: m.base_unit, sourceName: m.name }, normalize(m.name) === normalize(label));
    });
    const list = [...map.values()];
    list.forEach((g) => g.variants.sort((a, b) => a.label.localeCompare(b.label, "fa")));
    return list.sort((a, b) => a.base.localeCompare(b.base, "fa"));
  }, [materials]);

  const filteredGroups = useMemo(() => {
    const q = normalize(search);
    if (!q) return groups;
    return groups
      .map((g) => ({
        ...g,
        variants: g.variants.filter((v) => normalize(v.label).includes(q)),
      }))
      .filter((g) => normalize(g.base).includes(q) || g.variants.length > 0);
  }, [groups, search]);

  const isOpen = (g: MaterialGroup) => expanded.has(normalize(g.base)) || search.trim().length > 0;

  const toggleGroup = (g: MaterialGroup) => {
    const key = normalize(g.base);
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  };

  // اگر متریالی از بیرون انتخاب شد، گروهش باز باشد
  useEffect(() => {
    if (!materialId) return;
    const g = groups.find((gr) => gr.variants.some((v) => v.id === materialId) || gr.repId === materialId);
    if (g) setExpanded((prev) => new Set(prev).add(normalize(g.base)));
  }, [materialId, groups]);

  // ---------- ردیف‌های واحد متریال + اتصال‌های برند ----------
  const loadRows = useCallback(async (mid: string) => {
    setRowsLoading(true);
    try {
      const [unitRows, links] = await Promise.all([
        api.materialUnits.list(mid),
        api.brandMaterials.listByMaterial(mid),
      ]);
      setRows(unitRows);
      setBrandLinks(links);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "خواندن ضریب‌های متریال ناموفق بود");
      setRows([]);
      setBrandLinks([]);
    } finally {
      setRowsLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!materialId) {
      setRows([]);
      setBrandLinks([]);
      setMaterialSuppliers([]);
      return;
    }
    void loadRows(materialId);
    setRefDraft(null);
    setEditingId(null);
    setFormUnit("");
    setFormFactor("");
    setFormBrand("");
  }, [materialId, loadRows]);

  // واکشی تأمین‌کننده‌های متصل به متریال انتخاب‌شده
  useEffect(() => {
    if (!materialId) {
      setMaterialSuppliers([]);
      setSuppliersLoadedId(null);
      return;
    }
    let alive = true;
    setSuppliersLoading(true);
    api.materials
      .listSuppliers(materialId)
      .then((list) => { 
        if (alive) {
          setMaterialSuppliers(list);
          setSuppliersLoadedId(materialId);
        }
      })
      .catch((err: unknown) => {
        if (!alive) return;
        setMaterialSuppliers([]);
        setSuppliersLoadedId(materialId);
        // Surface the real error so backend issues are not silently hidden
        const msg = err instanceof Error ? err.message : "خواندن تأمین‌کننده‌های متریال ناموفق بود";
        toast.error(msg);
      })
      .finally(() => { if (alive) setSuppliersLoading(false); });
    return () => { alive = false; };
  }, [materialId]);

  const brandNameFor = (row: MaterialUnitRow): string => {
    if (!row.brand_material_id) return "";
    return brandLinks.find((b) => b.id === row.brand_material_id)?.brand_name || "";
  };

  // واحدهای استفاده‌شده در پیشنهادهای همین متریال که ضریب ندارند
  const unknownUnits = useMemo(() => {
    if (!material || !ref) return [];
    const out = new Map<string, number>();
    quotes.forEach((q) =>
      (q.line_items || []).forEach((li) => {
        if (li.rejected || !li.unit) return;
        if (li.material_id !== material.id) return;
        if (normalize(li.unit) === normalize(ref)) return;
        if (rows.some((r) => normalize(unitDisplay(r.unit)) === normalize(li.unit))) return;
        const std = standardConversions.some(
          (c) => normalize(c.from_unit) === normalize(li.unit) && normalize(c.to_unit) === normalize(ref),
        );
        if (std) return;
        out.set(li.unit, (out.get(li.unit) || 0) + 1);
      }),
    );
    return [...out.entries()].map(([unit, count]) => ({ unit, count })).sort((a, b) => a.unit.localeCompare(b.unit, "fa"));
  }, [material, ref, rows, quotes, standardConversions]);

  // ---------- واحد مرجع متریال ----------
  const unitIdByName = (name: string): number | null => {
    const wanted = normalize(name);
    return units.find((u) => normalize(u.name_fa || u.code) === wanted)?.id ?? null;
  };

  const saveRef = async () => {
    if (!material) return;
    const val = (refDraft ?? ref).trim();
    if (!val) return;
    try {
      let uid = unitIdByName(val);
      if (uid == null) {
        const created = await apiV26.catalog.createUnit(val);
        uid = created.id;
        setUnits((prev) => uniqueUnits([...prev, { id: created.id, code: created.code, name_fa: created.name_fa }]));
      }
      await api.materials.updateCanonicalUnit(material.id, uid);
      toast.success("واحد مرجع متریال ذخیره شد");
      setRefDraft(null);
      refreshProcurementStore();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "ذخیره‌ی واحد مرجع ناموفق بود");
    }
  };

  // ---------- ضریب تبدیل متریال (با قید برند اختیاری) ----------
  const factorNum = (): number | null => {
    const n = parseNum(formFactor);
    return n != null && !Number.isNaN(n) && n > 0 ? n : null;
  };

  const convLive = useMemo(() => {
    const from = formUnit.trim();
    if (!from && !formFactor.trim() && !formBrand.trim())
      return 'مثلاً: واحد مرجع «کیلوگرم»، واحد پیشنهادشده «کیسه» و ضریب «۵۰» → یعنی هر کیلوگرم = ۵۰ کیسه';
    if (!from) return "واحد پیشنهادشده را بنویسید (مثلاً کیسه).";
    if (!ref) return "⚠️ این متریال واحد مرجع ندارد.";
    const f = factorNum();
    if (f == null) return "ضریب را وارد کنید (مثلاً ۵۰) تا معنی تبدیل مشخص شود.";
    // ترتیب درست: واحد مرجع اول، بعد برند، ضریب و واحد پیشنهادشده
    const brandPart = formBrand.trim() ? ` از برند «${formBrand.trim()}»` : "";
    return `✅ یعنی هر ${ref}${brandPart} برابر ${faNum(f)} ${from} است.`;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [formUnit, formFactor, formBrand, ref]);

  // برند انتخابی را به brand_material_id متریال تبدیل می‌کند (ساخت/اتصال خودکار)
  const ensureBrandLink = async (brandName: string): Promise<string | null> => {
    if (!material) return null;
    const wanted = normalize(brandName);
    const existing = brandLinks.find((b) => normalize(b.brand_name) === wanted);
    if (existing) return existing.id;
    const all = allBrands.find((b) => normalize(b) === wanted);
    let brandId: string | null = null;
    if (all) {
      const fresh = await api.brandsList();
      brandId = fresh.find((b) => normalize(b.name) === wanted)?.id ?? null;
    }
    if (!brandId) {
      brandId = (await api.brands.create(brandName)).id;
    }
    await api.brandMaterials.link(material.id, brandId);
    const links = await api.brandMaterials.listByMaterial(material.id);
    setBrandLinks(links);
    return links.find((b) => normalize(b.brand_name) === wanted)?.id ?? null;
  };

  const saveConv = async () => {
    if (!material) return;
    const from = formUnit.trim();
    if (!from) return;
    if (!ref) {
      toast.error("اول واحد مرجع این متریال را مشخص کنید.");
      return;
    }
    const factor = factorNum();
    if (factor == null) return;
    try {
      let uid = unitIdByName(from);
      if (uid == null) {
        const created = await apiV26.catalog.createUnit(from);
        uid = created.id;
        setUnits((prev) => uniqueUnits([...prev, { id: created.id, code: created.code, name_fa: created.name_fa }]));
      }
      const brandName = formBrand.trim();
      const brandMaterialId = brandName ? await ensureBrandLink(brandName) : null;
      if (editingId) {
        await api.materialUnits.update(material.id, editingId, { conversion_factor: factor });
        toast.success("ضریب تبدیل ویرایش شد");
      } else {
        await api.materialUnits.create(material.id, {
          brand_material_id: brandMaterialId,
          unit_id: uid,
          conversion_factor: factor,
        });
        toast.success("ضریب تبدیل افزوده شد");
      }
      setEditingId(null);
      setFormUnit("");
      setFormFactor("");
      setFormBrand("");
      await loadRows(material.id);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "ذخیره‌ی ضریب تبدیل ناموفق بود");
    }
  };

  const startEdit = (row: MaterialUnitRow) => {
    setEditingId(row.id);
    setFormUnit(unitDisplay(row.unit));
    setFormFactor(String(row.conversion_factor));
    setFormBrand(brandNameFor(row));
  };

  const deleteMu = async (row: MaterialUnitRow) => {
    if (!material) return;
    try {
      await api.materialUnits.remove(material.id, row.id);
      toast.success("ضریب تبدیل حذف شد");
      await loadRows(material.id);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "حذف ضریب تبدیل ناموفق بود");
    }
  };

  // ---------- تبدیل‌های ثابت (سراسری) ----------
  const saveStdConv = () => {
    const from = stdFrom.trim();
    const to = stdTo.trim();
    if (!from || !to) return;
    const n = parseNum(stdFactor);
    if (n == null || Number.isNaN(n) || n <= 0) return;
    if (editingStdId) {
      const c: StandardConversion = { id: editingStdId, from_unit: from, to_unit: to, factor: n };
      void saveStd.mutateAsync(c).catch((err) =>
        toast.error(err instanceof Error ? err.message : "ذخیره‌ی تبدیل ثابت ناموفق بود"),
      );
    } else {
      void saveStd
        .mutateAsync({ id: nextId("sc", standardConversions), from_unit: from, to_unit: to, factor: n })
        .catch((err) => toast.error(err instanceof Error ? err.message : "ذخیره‌ی تبدیل ثابت ناموفق بود"));
    }
    setEditingStdId(null);
    setStdFrom("");
    setStdFactor("");
    setStdTo("");
  };

  const startStdEdit = (id: string) => {
    const c = standardConversions.find((x) => x.id === id);
    if (!c) return;
    setEditingStdId(id);
    setStdFrom(c.from_unit);
    setStdFactor(String(c.factor));
    setStdTo(c.to_unit);
  };

  // ---------- render ----------
  return (
    <div className="min-h-screen">
      <Header
        title="ضرایب تبدیل"
        sub="متریال را انتخاب کنید — واحد مرجع و ضریب تبدیل همان متریال"
        backTo="/"
        backLabel="بازگشت به دفتر"
      />
      <PageLayout>
        <div className="units-layout">
          {/* آکاردئون متریال‌ها + نوار جستجو */}
          <aside className="units-tree">
            <div className="tree-head">
              <span className="text-[12px]">
                متریال‌های <b>کاتالوگ</b>
              </span>
            </div>
            <div className="mb-2 flex items-center gap-1.5 rounded-md border border-line bg-panel px-2.5 py-2">
              <Search className="h-3.5 w-3.5 shrink-0 text-muted" />
              <input
                type="text"
                className="w-full bg-transparent text-[13px] outline-none placeholder:text-muted"
                placeholder="جستجوی متریال…"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
            <div className="flex flex-col gap-1">
              {filteredGroups.length ? (
                filteredGroups.map((g) => {
                  const open = isOpen(g);
                  const groupActive =
                    materialId != null && (g.variants.some((v) => v.id === materialId) || g.repId === materialId);
                  const hasChildren = g.variants.length > 0;
                  return (
                    <div key={normalize(g.base)} className="rounded-lg border border-line bg-panel p-1.5">
                      <button
                        type="button"
                        className={cn("ut-cat w-full", groupActive && "selected")}
                        onClick={() => (hasChildren ? toggleGroup(g) : setMaterialId(g.repId))}
                      >
                        <span className="flex min-w-0 items-center gap-1">
                          {hasChildren && (
                            <ChevronDown
                              className={cn(
                                "h-3.5 w-3.5 shrink-0 text-muted transition-transform",
                                open && "rotate-180",
                              )}
                            />
                          )}
                          <span className="whitespace-normal break-words text-start">{g.base}</span>
                        </span>
                        <span className="ut-ref">{hasChildren ? faNum(g.variants.length) : g.repRef || "—"}</span>
                      </button>
                      {hasChildren && (
                        <div
                          className={cn(
                            "grid transition-[grid-template-rows] duration-200 ease-out",
                            open ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
                          )}
                        >
                          <div className="overflow-hidden">
                            <div className="mt-1 flex flex-col gap-0.5">
                              {g.variants.map((v) => (
                                <button
                                  key={v.id}
                                  type="button"
                                  className={cn(
                                    "flex cursor-pointer items-center justify-between gap-1 rounded-md px-3 py-1.5 text-[12.5px] transition-colors hover:bg-slate-bg",
                                    materialId === v.id && "bg-accent-bg font-bold text-accent-dark",
                                  )}
                                  onClick={() => setMaterialId(v.id)}
                                >
                                  <span className="whitespace-normal break-words text-start">{v.label}</span>
                                  <span className="ut-ref">{v.refUnit || "—"}</span>
                                </button>
                              ))}
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })
              ) : (
                <div className="text-[12px] text-muted">
                  {materials.length ? "متریالی با این نام پیدا نشد." : "متریالی در کاتالوگ ثبت نشده است."}
                </div>
              )}
            </div>
          </aside>

          {/* پنل اصلی */}
          <section className="units-panel">
            {!material ? (
              <div className="units-empty py-10 text-center text-sm text-muted">
                متریالی را از فهرست سمت راست انتخاب کنید
              </div>
            ) : (
              <>
                {/* تامین‌کنندگان متریال — پاسخ GET /materials/{id}/suppliers */}
                <div className="mb-6 flex flex-col overflow-hidden rounded-xl border border-line bg-panel shadow-sm">
                  <div className="shrink-0 border-b border-line bg-panel px-4 py-3">
                    <h4 className="flex items-center gap-2 text-[14px] font-bold text-accent">
                      <Building2 className="h-4 w-4" /> تامین‌کنندگان متریال
                    </h4>
                  </div>
                  <div className="flex w-full flex-1 flex-col p-4 transition-opacity duration-300 ease-in-out opacity-100 min-h-[80px] md:min-h-[100px]">
                    {suppliersLoading || materialId !== suppliersLoadedId ? (
                      <div className="flex flex-1 flex-col items-center justify-center text-center text-sm text-muted">
                        <div className="h-5 w-5 animate-spin rounded-full border-2 border-muted border-t-transparent"></div>
                      </div>
                    ) : materialSuppliers.length === 0 ? (
                      <div className="flex flex-1 flex-col items-center justify-center text-center text-sm text-gray-400 md:text-base">
                        تامین‌کننده‌ای برای این متریال ثبت نشده است
                      </div>
                    ) : (
                      <div className="flex flex-col gap-2 max-h-[200px] overflow-y-auto custom-scrollbar pr-1">
                        {materialSuppliers.map((s) => (
                          <div
                            key={s.id}
                            className="rounded-lg border border-line bg-slate-bg px-3 py-2.5 text-sm shrink-0"
                          >
                            {/* نام تأمین‌کننده — مستقیم از پاسخ API، بدون fallback */}
                            <div className="flex items-center gap-1.5 text-[13px] font-semibold">
                              <Building2 className="h-3.5 w-3.5 shrink-0 text-accent" />
                              {s.name}
                            </div>
                            {(s.location || s.phone || s.contact_person) && (
                              <div className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-[11.5px] text-muted">
                                {s.location && <span>{s.location}</span>}
                                {s.phone && <span dir="ltr">{s.phone}</span>}
                                {s.contact_person && <span>{s.contact_person}</span>}
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>

                {/* واحد مرجع متریال */}
                <div className="ref-unit-box">
                  <div className="ref-title">
                    <Scale className="me-1 inline h-4 w-4 text-accent" /> واحد مرجع متریال «{material.name}»
                  </div>
                  <div className="ref-hint">همه‌ی پیشنهادهای این متریال برای مقایسه به این واحد تبدیل می‌شوند</div>
                  <div className="ref-controls">
                    <Combobox
                      value={refDraft ?? ref}
                      items={units.map((u) => unitDisplay(u)).filter(Boolean)}
                      allowAdd
                      addSuffix="به عنوان واحد جدید"
                      placeholder="مثلاً متر"
                      className="w-56"
                      onInputChange={setRefDraft}
                      onChange={(it) => setRefDraft(it.label)}
                      onAdd={(v) => {
                        // ثبت فوری واحدِ جدیدِ تایپ‌شده و اعمال روی فیلد
                        const name = v.trim();
                        if (!name) return;
                        void apiV26.catalog
                          .createUnit(name)
                          .then((created) => {
                            setUnits((prev) =>
                              prev.some((u) => normalize(unitDisplay(u)) === normalize(name))
                                ? prev
                                : [...prev, { id: created.id, code: created.code, name_fa: created.name_fa }],
                            );
                            setRefDraft(name);
                          })
                          .catch((err) => {
                            toast.error(err instanceof Error ? err.message : "ثبت واحد جدید ناموفق بود");
                          });
                      }}
                    />
                    <Button size="sm" onClick={() => void saveRef()}>
                      ذخیره
                    </Button>
                  </div>
                </div>

                {/* واحدهای ناشناخته */}
                {unknownUnits.length > 0 && (
                  <>
                    <h4 className="sec-title">
                      <TriangleAlert className="me-1 inline h-4 w-4 text-amber" /> واحدهای استفاده‌شده بدون ضریب
                    </h4>
                    {unknownUnits.map((u) => (
                      <div key={u.unit} className="unknown-row">
                        <span className="uk-unit">⚠️ {u.unit}</span>
                        <span className="uk-count">{faNum(u.count)} پیشنهاد بدون ضریب</span>
                        <span className="ms-auto">
                          <Button
                            variant="line"
                            size="sm"
                            onClick={() => {
                              setEditingId(null);
                              setFormUnit(u.unit);
                              setFormFactor("");
                              setFormBrand("");
                            }}
                          >
                            ＋ افزودن ضریب
                          </Button>
                        </span>
                      </div>
                    ))}
                  </>
                )}

                {/* تبدیل‌های ثابت */}
                <h4 className="sec-title">
                  <Link2 className="me-1 inline h-4 w-4 text-accent" /> تبدیل‌های ثابت (همه‌ی متریال‌ها)
                </h4>
                {!standardConversions.length ? (
                  <div className="conv-empty">تبدیل ثابتی ثبت نشده است.</div>
                ) : (
                  standardConversions.map((c) => (
                    <div key={c.id} className="conv-row">
                      <span className="cv-unit">{c.from_unit}</span>
                      <span className="cv-arrow">←</span>
                      <span className="cv-factor">{faNum(c.factor)}</span>
                      <span className="cv-arrow">←</span>
                      <span className="cv-unit">{c.to_unit}</span>
                      <span className="cv-brand">ثابت</span>
                      <span className="conv-actions">
                        <button type="button" title="ویرایش" onClick={() => startStdEdit(c.id)}>
                          <Pencil className="h-3.5 w-3.5" />
                        </button>
                        <button
                          type="button"
                          title="حذف"
                          onClick={() => void deleteStd.mutateAsync(c.id)}
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                        </button>
                      </span>
                    </div>
                  ))
                )}

                {/* فرم تبدیل ثابت */}
                <div className="add-conv">
                  <h4 className="mb-2 text-[13.5px] font-bold">
                    {editingStdId ? (
                      <>
                        <Pencil className="me-1 inline h-3.5 w-3.5" /> ویرایش تبدیل ثابت
                      </>
                    ) : (
                      <>
                        <Plus className="me-1 inline h-3.5 w-3.5" /> افزودن تبدیل ثابت
                      </>
                    )}
                  </h4>
                  <div className="grid grid-cols-1 gap-2 sm:grid-cols-[1fr_0.8fr_1fr_auto] sm:items-end">
                    <div className="field">
                      <label>از واحد</label>
                      <input
                        type="text"
                        className="h-9 w-full rounded-lg border border-line bg-panel px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
                        placeholder="مثلاً تن"
                        autoComplete="off"
                        value={stdFrom}
                        onChange={(e) => setStdFrom(e.target.value)}
                      />
                    </div>
                    <div className="field">
                      <label>ضریب</label>
                      <NumberInput
                        value={parseNum(stdFactor)}
                        onChange={(n) => setStdFactor(n != null ? String(n) : "")}
                        placeholder="مثلاً 1000"
                        inputMode="decimal"
                      />
                    </div>
                    <div className="field">
                      <label>به واحد</label>
                      <input
                        type="text"
                        className="h-9 w-full rounded-lg border border-line bg-panel px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
                        placeholder="مثلاً کیلوگرم"
                        autoComplete="off"
                        value={stdTo}
                        onChange={(e) => setStdTo(e.target.value)}
                      />
                    </div>
                    <div className="flex items-center gap-1.5">
                      <Button size="sm" onClick={saveStdConv}>
                        {editingStdId ? "ذخیره تغییرات" : "افزودن"}
                      </Button>
                      {editingStdId && (
                        <Button
                          size="sm"
                          variant="slate"
                          onClick={() => {
                            setEditingStdId(null);
                            setStdFrom("");
                            setStdFactor("");
                            setStdTo("");
                          }}
                        >
                          انصراف
                        </Button>
                      )}
                    </div>
                  </div>
                  <div className="conv-hint">
                    تبدیل ثابت برای همه‌ی متریال‌ها اعمال می‌شود؛ ضریب یعنی: ۱ از واحد = ضریب × به واحد
                  </div>
                </div>


                {/* ضرایب متریال */}
                <h4 className="sec-title">
                  <Repeat className="me-1 inline h-4 w-4 text-accent" /> ضریب‌های تبدیل
                </h4>
                {rowsLoading ? (
                  <div className="conv-empty">در حال بارگذاری…</div>
                ) : !rows.length ? (
                  <div className="conv-empty">هنوز ضریبی برای این متریال ثبت نشده است.</div>
                ) : (
                  rows.map((r) => (
                    <div key={r.id}>
                      <div className="cg-head">
                        {unitDisplay(r.unit) || `واحد #${r.unit_id}`} ← {ref}
                      </div>
                      <div className="conv-row">
                        <span className="cv-brand">{brandNameFor(r) || "همه برندها"}</span>
                        <span className="cv-factor">{faNum(r.conversion_factor)}</span>
                        <span className="cv-arrow">×</span>
                        <span className="cv-unit">{ref}</span>
                        <span className="conv-actions">
                          <button type="button" title="ویرایش" onClick={() => startEdit(r)}>
                            <Pencil className="h-3.5 w-3.5" />
                          </button>
                          <button type="button" title="حذف" onClick={() => void deleteMu(r)}>
                            <Trash2 className="h-3.5 w-3.5" />
                          </button>
                        </span>
                      </div>
                    </div>
                  ))
                )}

                {/* فرم افزودن ضریب */}
                <div className="add-conv">
                  <h4 className="mb-2 text-[13.5px] font-bold">
                    {editingId ? (
                      <>
                        <Pencil className="me-1 inline h-3.5 w-3.5" /> ویرایش ضریب تبدیل
                      </>
                    ) : (
                      <>
                        <Plus className="me-1 inline h-3.5 w-3.5" /> افزودن ضریب تبدیل
                      </>
                    )}
                  </h4>
                  <div className="grid grid-cols-1 gap-2 sm:grid-cols-[1.2fr_0.6fr_1fr_0.8fr_auto] sm:items-end">
                    <div className="field">
                      <label>واحد پیشنهادشده</label>
                      <Combobox
                        value={formUnit}
                        onChange={(it) => setFormUnit(it.label)}
                        items={units.map((u) => unitDisplay(u)).filter(Boolean)}
                        allowAdd
                        addSuffix="به عنوان واحد جدید"
                        placeholder="مثلاً حلقه"
                        onInputChange={setFormUnit}
                      />
                    </div>
                    <div className="field">
                      <label>ضریب</label>
                      <NumberInput
                        value={factorNum()}
                        onChange={(n) => setFormFactor(n != null ? String(n) : "")}
                        placeholder="مثلاً 0.98"
                        inputMode="decimal"
                      />
                    </div>
                    <div className="field">
                      <label>برند (خالی = همه برندها)</label>
                      <Combobox
                        value={formBrand}
                        onChange={(it) => setFormBrand(it.label)}
                        items={allBrands}
                        allowAdd
                        disabled={!!editingId}
                        addSuffix="به عنوان برند جدید"
                        placeholder="مثلاً راجین"
                        onInputChange={setFormBrand}
                      />
                    </div>
                    <div className="field">
                      <label>به واحد (مرجع)</label>
                      <input
                        type="text"
                        className="h-9 w-full rounded-lg border border-line bg-slate-bg px-3 text-sm text-muted"
                        value={ref || "مرجع"}
                        placeholder="مرجع"
                        readOnly
                      />
                    </div>
                    <div className="flex items-center gap-1.5">
                      <Button size="sm" onClick={() => void saveConv()}>
                        {editingId ? "ذخیره تغییرات" : "افزودن"}
                      </Button>
                      {editingId && (
                        <Button
                          size="sm"
                          variant="slate"
                          onClick={() => {
                            setEditingId(null);
                            setFormUnit("");
                            setFormFactor("");
                            setFormBrand("");
                          }}
                        >
                          انصراف
                        </Button>
                      )}
                    </div>
                  </div>
                  <div className="conv-live">{convLive}</div>
                </div>

              </>
            )}
          </section>
        </div>
      </PageLayout>
    </div>
  );
}