import { useEffect, useMemo, useState } from "react";
import type { Material } from "../../lib/types";
import { normalize } from "../../lib/normalize";
import { useMaterials } from "../../hooks";
import { specsKey } from "../../lib/quoteUtils";
import { Combobox } from "../../components/Combobox";
import { NumberInput } from "../../components/NumberInput";
import { MultiSelectCombobox } from "../../components/MultiSelectCombobox";
import { api, apiV26 } from "../../lib/api";

export interface ItemDraft {
  tempId: string;
  cat: string;
  brand: string;
  specs: string[];
  qty: number | null;
  unit: string;
  price: number | null;
  total: number | null;
}

export interface MaterialRec {
  topic: string;
  category: string;
  brand: string;
  specs: string[];
}

export interface Step2Props {
  items: ItemDraft[];
  onItemsChange: (items: ItemDraft[]) => void;
  selectedTopic: string;
  onRemember: (rec: MaterialRec) => void;
}

// برچسب انسانی یک قلم (برای termsheet، درگ‌اندروپ و بازبینی)
export function itemRowLabel(it: ItemDraft): string {
  const parts = [it.cat, it.brand, it.specs.join(" - ")].filter(Boolean);
  const name = parts.length ? parts.join(" - ") : "(قلم بدون‌نام)";
  const qtyPart = it.qty != null && it.unit ? `${it.qty} ${it.unit}` : it.qty != null ? String(it.qty) : "";
  return qtyPart ? `${name} -- ${qtyPart}` : name;
}

// نام پایه‌ی متریال از نامِ ذخیره‌شده.
// متریال‌های جدید فقط نامِ خودِ متریال را در name دارند (برند در brand_ids و
// مشخصه‌ها در attributes ذخیره می‌شوند) و دست‌نخورده برمی‌گردند. رکوردهای قدیمی
// name را به شکل «برند + دسته + مشخصه» ذخیره کرده‌اند؛ آن قطعات جدا می‌شوند تا
// نامِ پایه باقی بماند.
function materialBaseName(name: string, brand: string, specs: string[], category = ""): string {
  const fallback = (name || "").trim();
  if (!fallback) return "";
  let base = fallback;
  // بلندترین قطعه اول حذف می‌شود تا حذف‌های جزئی، رشته را ناقص نکنند
  const parts = [brand, category, ...specs]
    .map((p) => (p || "").trim())
    .filter(Boolean)
    .sort((a, b) => b.length - a.length);
  for (const p of parts) {
    if (!base.includes(p)) continue;
    const next = base.split(p).join(" ").replace(/\s+/g, " ").trim();
    // اگر حذفِ این قطعه کلِ نام را خالی کند، یعنی همان نامِ متریال بوده — نگهش دار
    if (!next) continue;
    base = next;
  }
  // شکلِ قدیمیِ خراب می‌تواند فقط یک مشخصه باقی بگذارد؛ آن دیگر نامِ متریال نیست
  if (parts.some((p) => p === base)) return fallback;
  return base || fallback;
}

// مقادیر مجزای category/brand/spec داخل تاپیک
export function materialOptions(
  materials: Material[],
  topic: string,
  item: ItemDraft,
  field: "cat" | "brand" | "spec",
  allItems: ItemDraft[] = [],
  apiBrands: string[] = [],
  apiSpecs: string[] = [],
): string[] {
  let list = materials.filter((m) => topic && normalize(m.topic) === normalize(topic));
  const cat = item.cat.trim();

  const fromRows = (sel: (it: ItemDraft) => string | string[]): string[] => {
    const out = new Set<string>();
    allItems.forEach((it) => {
      if (it.tempId === item.tempId) return;
      const v = sel(it);
      if (Array.isArray(v)) v.forEach((x) => x && out.add(x));
      else if (v) out.add(v);
    });
    return [...out];
  };

  if (field === "cat") {
    const base = new Set(list.map((m) => m.category).filter(Boolean));
    fromRows((it) => it.cat).forEach((c) => base.add(c));
    return [...base].sort((a, b) => a.localeCompare(b, "fa"));
  }
  if (field === "brand") {
    // برند سراسری است — مستقل از تاپیک و دسته
    const allBrands = new Set(materials.map((m) => m.brand).filter(Boolean));
    apiBrands.forEach((b) => b && allBrands.add(b));
    fromRows((it) => it.brand).forEach((b) => allBrands.add(b));
    return [...allBrands].sort((a, b) => a.localeCompare(b, "fa"));
  }
  if (cat) list = list.filter((m) => normalize(m.category) === normalize(cat));
  // مشخصه‌ها سراسری هستند: رجیستری attribute-definitions + مشخصه‌های همه‌ی
  // متریال‌ها + مشخصه‌های تایپ‌شده در سایر ردیف‌ها. به تاپیک/دسته/برندِ قلمِ
  // فعلی گره نمی‌خورند تا هنگام افزودن پیشنهاد جدید همیشه در دسترس باشند.
  const base = new Set<string>();
  apiSpecs.forEach((s) => s && base.add(s));
  materials.forEach((m) => (m.specs || []).forEach((s) => s && base.add(s)));
  list.forEach((m) => (m.specs || []).forEach((s) => s && base.add(s)));
  fromRows((it) => it.specs).forEach((s) => base.add(s));
  return [...base].sort((a, b) => a.localeCompare(b, "fa"));
}

// مرحله ۲ — جدول پویای اقلام سفارش
export function Step2LineItems({ items, onItemsChange, selectedTopic, onRemember }: Step2Props) {
  const materials = useMaterials();

  const [unitOptions, setUnitOptions] = useState<string[]>(() => {
    const all = new Set<string>();
    items.forEach((it) => { if (it.unit) all.add(it.unit); });
    return [...all];
  });

  const allUnits = useMemo(() => {
    const out = new Set(unitOptions);
    items.forEach((it) => { if (it.unit) out.add(it.unit); });
    return [...out];
  }, [items, unitOptions]);

  const allMaterialNames = useMemo(() => {
    const set = new Set<string>();
    materials.forEach((m) => {
      const base = materialBaseName(m.name, m.brand, m.specs, m.category);
      if (base) set.add(base);
    });
    return [...set].sort((a, b) => a.localeCompare(b, "fa"));
  }, [materials]);

  const [brandOptions, setBrandOptions] = useState<string[]>([]);
  const [specOptions, setSpecOptions] = useState<string[]>([]);

  useEffect(() => {
    let alive = true;
    void api
      .unitsList()
      .then((list) => alive && setUnitOptions((prev) => {
        const merged = new Set(prev);
        list.forEach((u) => { if (u.name_fa || u.code) merged.add(u.name_fa || u.code); });
        return [...merged];
      }))
      .catch(() => {});
    void api
      .brandsList()
      .then((list) => alive && setBrandOptions(list.map((b) => b.name).filter(Boolean)))
      .catch(() => {});
    void api
      .specsList()
      .then((list) => alive && setSpecOptions(list))
      .catch(() => {});
    return () => { alive = false; };
  }, []);

  const patch = (tempId: string, p: Partial<ItemDraft>) => {
    onItemsChange(items.map((it) => (it.tempId === tempId ? { ...it, ...p } : it)));
  };

  const remove = (tempId: string) => {
    onItemsChange(items.filter((it) => it.tempId !== tempId));
  };

  const add = () => {
    onItemsChange([
      ...items,
      { tempId: "it" + Date.now() + Math.random().toString(36).slice(2, 6), cat: "", brand: "", specs: [], qty: null, unit: "", price: null, total: null },
    ]);
  };

  const rememberField = (field: "i-cat" | "i-brand" | "i-spec", it: ItemDraft) => {
    if (!selectedTopic) return;
    let rec: MaterialRec;
    if (field === "i-cat") {
      if (!it.cat.trim()) return;
      rec = { topic: selectedTopic, category: it.cat.trim(), brand: "", specs: [] };
    } else if (field === "i-brand") {
      if (!it.brand.trim()) return;
      rec = { topic: selectedTopic, category: it.cat.trim(), brand: it.brand.trim(), specs: [] };
    } else {
      if (!it.specs.length) return;
      rec = { topic: selectedTopic, category: it.cat.trim(), brand: it.brand.trim(), specs: it.specs };
    }
    const dup = materials.some(
      (m) =>
        normalize(m.topic) === normalize(rec.topic) &&
        normalize(m.category) === normalize(rec.category) &&
        normalize(m.brand) === normalize(rec.brand) &&
        specsKey(m.specs) === specsKey(rec.specs),
    );
    if (dup) return;
    onRemember(rec);
  };

  return (
    <div>
      <h3 className="mb-1 text-[15px] font-bold">
        <span className="me-1 inline-flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-[12px] font-bold text-white">۲</span>
        اقلام سفارش
      </h3>
      <div className="mb-3 text-[12px] text-gray-500" dangerouslySetInnerHTML={{ __html: 'هر سطر یک <b>قلم</b> است (متریال + برند + مشخصه + واحد + تعداد + قیمت). متریال، برند و مشخصه را می‌توان از گزینه‌ها انتخاب کرد یا تایپ کرد تا به‌عنوان گزینه‌ی جدید اضافه شود. شرایط پرداخت هر قلم را در مرحله‌ی بعد مشخص می‌کنید.' }} />

      <div className="item-row wizard-item-row item-row-head mb-1 pe-7">
        <span>متریال</span>
        <span>برند</span>
        <span>مشخصه</span>
        <span>تعداد</span>
        <span>واحد</span>
        <span>قیمت واحد</span>
        <span>قیمت کل</span>
      </div>

      <div className="flex flex-col gap-2">
        {items.map((it) => (
          <div key={it.tempId} className="item-row wizard-item-row items-center">
            <Combobox
              value={it.cat}
              onChange={(x) => patch(it.tempId, { cat: x.label })}
              items={allMaterialNames}
              allowAdd
              addSuffix="به عنوان متریال جدید"
              placeholder="متریال"
              onInputChange={(v) => patch(it.tempId, { cat: v })}
              onBlur={() => rememberField("i-cat", it)}
              inputClassName="!text-[12px] !h-9"
              className="min-w-0"
            />
            <Combobox
              value={it.brand}
              onChange={(x) => patch(it.tempId, { brand: x.label })}
              items={materialOptions(materials, selectedTopic, it, "brand", items, brandOptions)}
              allowAdd
              addSuffix="به عنوان برند جدید"
              placeholder="برند"
              onInputChange={(v) => patch(it.tempId, { brand: v })}
              onBlur={() => rememberField("i-brand", it)}
              inputClassName="!text-[12px] !h-9"
              className="min-w-0"
            />
            <MultiSelectCombobox
              values={it.specs}
              onChange={(specs) => patch(it.tempId, { specs })}
              options={materialOptions(materials, selectedTopic, it, "spec", items, [], specOptions)}
              placeholder="مشخصه"
              className="min-w-0"
            />
            <NumberInput
              value={it.qty}
              onChange={(qty) => {
                patch(it.tempId, {
                  qty,
                  total: qty != null && it.price != null ? Math.round(qty * it.price * 100) / 100 : it.total,
                });
              }}
              placeholder="تعداد"
              showWords
            />
            <Combobox
              value={it.unit}
              onChange={(x) => patch(it.tempId, { unit: x.label })}
              items={allUnits.filter((u) => normalize(u) !== normalize(it.unit))}
              allowAdd
              addSuffix="به عنوان واحد جدید"
              placeholder="واحد"
              onInputChange={(v) => patch(it.tempId, { unit: v })}
              onAdd={(v) => {
                const name = v.trim();
                if (!name) return;
                void apiV26.catalog
                  .createUnit(name)
                  .then(() => {
                    setUnitOptions((prev) =>
                      prev.some((u) => normalize(u) === normalize(name)) ? prev : [...prev, name],
                    );
                  })
                  .catch(() => {});
              }}
              inputClassName="!text-[12px] !h-9"
              className="min-w-0"
            />
            <NumberInput
              value={it.price}
              onChange={(price) => {
                patch(it.tempId, {
                  price,
                  total: it.qty != null && price != null ? Math.round(it.qty * price * 100) / 100 : it.total,
                });
              }}
              placeholder="قیمت واحد"
              showWords
              maxDecimals={2}
            />
            <NumberInput
              value={it.total}
              onChange={(total) => {
                patch(it.tempId, {
                  total,
                  price:
                    total != null && it.qty != null && it.qty > 0 ? Math.round((total / it.qty) * 100) / 100 : it.price,
                });
              }}
              placeholder="قیمت کل"
              showWords
            />
            
            {/* دکمه حذف مدرن با آیکون سطل زباله */}
            <button
              type="button"
              className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 hover:bg-red-50 hover:text-red-500 transition-colors"
              title="حذف قلم"
              onClick={() => remove(it.tempId)}
            >
              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
            </button>
          </div>
        ))}
      </div>

      {/* دکمه افزودن قلم با استایل برجسته و خط‌چین */}
      <button
        type="button"
        className="mt-3 flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-blue-300 bg-blue-50/40 py-2.5 px-4 text-[13px] font-semibold text-blue-600 hover:border-blue-500 hover:bg-blue-100/70 transition-all duration-150"
        onClick={add}
      >
        <span className="text-base font-bold leading-none">+</span>
        <span>افزودن قلم جدید</span>
      </button>
    </div>
  );
}