"use client";

import { Plus, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { CustomSelect } from "@/components/ui/custom-select";
import {
  normalizeProductCustomFieldsConfig,
  ProductCustomFieldConfig,
  ProductCustomFieldType,
} from "@/lib/product-custom-fields";
import type { ProductVariation, ProductAttribute, ProductOption } from "@/components/products/product-variations";

type VariationChoice = {
  signature: string;
  attributeName: string;
  variationName: string;
};

function normalizeText(value: string) {
  return value.trim().toLowerCase();
}

function buildOptionSignature(attributeName: string, optionLabel: string) {
  return `option::${normalizeText(attributeName)}::${normalizeText(optionLabel)}`;
}

function optionLabel(option: ProductOption | string) {
  return typeof option === "string" ? option : option.label;
}

function buildVariationChoices(attributes: ProductAttribute[]): VariationChoice[] {
  const seen = new Set<string>();
  const list: VariationChoice[] = [];
  attributes.forEach((attribute) => {
    const attrName = String(attribute.name || "").trim();
    if (!attrName) return;
    (attribute.options || []).forEach((option) => {
      const variationName = String(optionLabel(option) || "").trim();
      if (!variationName) return;
      const signature = buildOptionSignature(attrName, variationName);
      if (seen.has(signature)) return;
      seen.add(signature);
      list.push({
        signature,
        attributeName: attrName,
        variationName,
      });
    });
  });
  return list;
}

function buildVariationGroupedOptions(choices: VariationChoice[]) {
  const grouped = new Map<string, VariationChoice[]>();
  choices.forEach((choice) => {
    const key = choice.attributeName;
    const list = grouped.get(key) || [];
    list.push(choice);
    grouped.set(key, list);
  });

  const options: Array<{
    value: string;
    label: string;
    selected_label?: string;
    description?: string;
    disabled?: boolean;
    group_header?: boolean;
  }> = [{ value: "", label: "Sem vínculo (sempre visível)" }];

  Array.from(grouped.entries()).forEach(([attributeName, rows], attrIndex) => {
    options.push({
      value: `__group_${attrIndex}_${normalizeText(attributeName)}`,
      label: attributeName,
      disabled: true,
      group_header: true,
    });
    rows.forEach((row, rowIndex) => {
      void rowIndex;
      options.push({
        value: row.signature,
        label: row.variationName,
        selected_label: `${row.attributeName} | ${row.variationName}`,
      });
    });
  });

  return options;
}

function createNewField(position: number): ProductCustomFieldConfig {
  const base = normalizeProductCustomFieldsConfig([
    {
      title: "Novo campo",
      field_type: "text",
      required: false,
      placeholder: "",
      variation_signature: null,
      position,
      active: true,
    },
  ]);
  return base[0];
}

export function ProductCustomFields({
  customFields,
  setCustomFields,
  variations,
  attributes,
}: {
  customFields: ProductCustomFieldConfig[];
  setCustomFields: (next: ProductCustomFieldConfig[]) => void;
  variations: ProductVariation[];
  attributes: ProductAttribute[];
}) {
  void variations;
  const variationChoices = buildVariationChoices(attributes);
  const variationSelectOptions = buildVariationGroupedOptions(variationChoices);
  const typeSelectOptions = [
    { value: "text", label: "Texto curto" },
    { value: "textarea", label: "Texto longo" },
    { value: "number", label: "Número" },
  ];

  const updateField = (id: string, patch: Partial<ProductCustomFieldConfig>) => {
    setCustomFields(
      customFields.map((field) => (field.id === id ? { ...field, ...patch } : field))
    );
  };

  const removeField = (id: string) => {
    setCustomFields(
      customFields
        .filter((field) => field.id !== id)
        .map((field, index) => ({ ...field, position: index }))
    );
  };

  const addField = () => {
    const next = [...customFields, createNewField(customFields.length)].map((field, index) => ({
      ...field,
      position: index,
    }));
    setCustomFields(next);
  };

  return (
    <div className="space-y-4">
      <div className="rounded-2xl border border-[rgba(198,203,224,0.65)] bg-white p-4 md:p-5 shadow-[0_12px_36px_-28px_rgba(17,24,39,0.45)]">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div>
            <h3 className="text-sm font-semibold text-[var(--ks-color-text-primary)]">Campos personalizados</h3>
            <p className="text-xs text-[var(--ks-color-text-muted)]">
              Configure campos extras para o cliente preencher no catálogo público.
            </p>
          </div>
          <Button type="button" size="sm" icon={<Plus size={14} />} onClick={addField}>
            Adicionar campo
          </Button>
        </div>
      </div>

      {customFields.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-[rgba(198,203,224,0.9)] bg-white p-6 text-sm text-[var(--ks-color-text-muted)]">
          Nenhum campo personalizado cadastrado ainda.
        </div>
      ) : null}

      {customFields.map((field) => (
        <div
          key={field.id}
          className="rounded-2xl border border-[rgba(198,203,224,0.65)] bg-white p-4 md:p-5 space-y-4"
        >
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div className="space-y-1">
              <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                Título
              </label>
              <input
                value={field.title}
                onChange={(e) => updateField(field.id, { title: e.target.value })}
                className="h-10 w-full rounded-lg border border-[rgba(198,203,224,0.9)] bg-white px-3 text-sm"
                placeholder="Ex: Nome para estampa"
              />
            </div>
            <div className="space-y-1">
              <CustomSelect
                value={field.field_type}
                onChange={(value) => updateField(field.id, { field_type: value as ProductCustomFieldType })}
                options={typeSelectOptions}
                label="Tipo"
              />
            </div>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div className="space-y-1">
              <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                Texto de exemplo
              </label>
              <input
                value={field.placeholder || ""}
                onChange={(e) => updateField(field.id, { placeholder: e.target.value || null })}
                className="h-10 w-full rounded-lg border border-[rgba(198,203,224,0.9)] bg-white px-3 text-sm"
                placeholder="Ex: Digite o texto desejado"
              />
            </div>
            <div className="space-y-1">
              <CustomSelect
                value={field.variation_signature || ""}
                onChange={(value) =>
                  updateField(field.id, {
                    variation_signature: value.trim() ? value : null,
                  })
                }
                options={variationSelectOptions}
                label="Vínculo de variação"
              />
            </div>
          </div>

          <div className="flex flex-wrap items-center justify-between gap-3 border-t border-[rgba(198,203,224,0.5)] pt-3">
            <label className="inline-flex items-center gap-2 text-sm text-[var(--ks-color-text-primary)]">
              <input
                type="checkbox"
                checked={field.required}
                onChange={(e) => updateField(field.id, { required: e.target.checked })}
              />
              Campo obrigatório
            </label>
            <div className="flex items-center gap-4">
              <label className="inline-flex items-center gap-2 text-sm text-[var(--ks-color-text-primary)]">
                <input
                  type="checkbox"
                  checked={field.active}
                  onChange={(e) => updateField(field.id, { active: e.target.checked })}
                />
                Ativo
              </label>
              <Button
                type="button"
                size="sm"
                variant="outline"
                icon={<Trash2 size={14} />}
                onClick={() => removeField(field.id)}
              >
                Remover
              </Button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}