import { useEffect, useMemo, useState } from 'react';
import { Loader2, Package, RefreshCw, Ruler, Save, Tags, Trash2 } from 'lucide-react';
import {
  deleteCatalogCategory,
  deleteCatalogProduct,
  deleteConsumptionReference,
  fetchCatalogSummary,
  saveCatalogCategory,
  saveCatalogProduct,
  saveConsumptionReference
} from '../dataService';
import type { CatalogCategory, CatalogProduct, CatalogProductType, CatalogSummary, ConsumptionReference } from '../types';
import { formatColorLabel } from '../displayFormatters';

type RegistrationTab = 'products' | 'categories' | 'references';
type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';

const emptyCatalog: CatalogSummary = {
  categories: [],
  products: [],
  consumptionReferences: []
};

const sizeOptions = ['2', '4', '6', '8', '10', '12', '14', '16', 'PP', 'P', 'M', 'G', 'GG', 'XG', 'G1', 'G2', 'G3', 'G4', 'G5'];
const defaultSizeAreas: Record<string, string> = {
  P: '0.78',
  M: '0.85',
  G: '0.92',
  GG: '1.00',
  XG: '1.08',
  G1: '1.08',
  G2: '1.16',
  G3: '1.24',
  G4: '1.32',
  G5: '1.40'
};

const rawMaterialSubcategories = [
  { value: 'fio', label: 'Fio' },
  { value: 'malha', label: 'Malha' },
  { value: 'ribana', label: 'Ribana' },
  { value: 'malha_fria', label: 'Malha Fria' },
  { value: 'meia_malha', label: 'Meia Malha 100% Algodao' },
  { value: 'moletom', label: 'Moletom' },
  { value: 'dry_fit', label: 'Dry Fit' },
  { value: 'piquet', label: 'Piquet / Polo' },
  { value: 'pima', label: 'Pima' },
  { value: 'poliamida', label: 'Poliamida' },
  { value: 'outra', label: 'Outra' }
];

const listPanelClassName = 'rounded-2xl border border-dark-border bg-dark-card shadow-sm';
const listHeaderClassName = 'flex min-h-[73px] flex-col gap-3 border-b border-dark-border p-4 md:flex-row md:items-center md:justify-between';
const formPanelClassName = 'rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm';
const emptyStateClassName = 'flex min-h-[280px] items-center justify-center px-4 py-10 text-center text-sm font-semibold text-dark-muted';
const labelClassName = 'text-xs font-bold text-dark-muted';
const inputClassName = 'mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none focus:border-brand-primary';

const formatNumber = (value: number | null | undefined, maximumFractionDigits = 2) => (
  value === null || value === undefined
    ? '-'
    : new Intl.NumberFormat('pt-BR', { maximumFractionDigits }).format(value)
);

const numericMapFromStrings = (values: Record<string, string>) => (
  Object.entries(values).reduce<Record<string, number>>((normalized, [key, value]) => {
    const number = Number(value.replace(',', '.'));
    if (Number.isFinite(number) && number > 0) normalized[key] = number;
    return normalized;
  }, {})
);

const getAverageYield = (reference: ConsumptionReference) => {
  const yields = Object.values(reference.sizeYields || {});
  if (yields.length) return yields.reduce((total, value) => total + value, 0) / yields.length;
  return reference.generalYield;
};

const Registrations = () => {
  const [catalog, setCatalog] = useState<CatalogSummary>(emptyCatalog);
  const [isLoading, setIsLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<RegistrationTab>('products');
  const [productFilter, setProductFilter] = useState<'all' | CatalogProductType>('all');
  const [status, setStatus] = useState<SaveStatus>('idle');
  const [feedback, setFeedback] = useState('');

  const [categoryForm, setCategoryForm] = useState({ name: '', description: '' });
  const [productForm, setProductForm] = useState({
    type: 'finished_product' as CatalogProductType,
    sku: '',
    name: '',
    categoryId: '',
    composition: '',
    notes: '',
    gramature: '',
    materialYield: '',
    widthCm: '',
    color: '',
    subcategory: 'malha',
    sizes: ['P', 'M', 'G', 'GG'] as string[]
  });
  const [referenceForm, setReferenceForm] = useState({
    productId: '',
    materialProductId: '',
    color: '',
    generalYield: '',
    gramature: '',
    efficiencyPercent: '85',
    ribGPerPiece: '',
    materialCostPerKg: ''
  });
  const [sizeAreas, setSizeAreas] = useState<Record<string, string>>(defaultSizeAreas);
  const [sizeYields, setSizeYields] = useState<Record<string, string>>({});

  const loadCatalog = async () => {
    setIsLoading(true);
    const summary = await fetchCatalogSummary();
    setCatalog(summary);
    setIsLoading(false);
  };

  useEffect(() => {
    let isMounted = true;
    fetchCatalogSummary().then(summary => {
      if (!isMounted) return;
      setCatalog(summary);
      setIsLoading(false);
    }).catch(error => {
      console.error('Initial catalog load failed', error);
      if (!isMounted) return;
      setIsLoading(false);
    });

    return () => {
      isMounted = false;
    };
  }, []);

  const finishedProducts = useMemo(
    () => catalog.products.filter(product => product.type === 'finished_product'),
    [catalog.products]
  );

  const rawMaterials = useMemo(
    () => catalog.products.filter(product => product.type === 'raw_material'),
    [catalog.products]
  );

  const selectedReferenceProduct = useMemo(
    () => catalog.products.find(product => String(product.id) === referenceForm.productId),
    [catalog.products, referenceForm.productId]
  );

  const referenceSizes = selectedReferenceProduct?.sizes?.length ? selectedReferenceProduct.sizes : ['P', 'M', 'G', 'GG'];

  const filteredProducts = useMemo(() => {
    if (productFilter === 'all') return catalog.products;
    return catalog.products.filter(product => product.type === productFilter);
  }, [catalog.products, productFilter]);

  const runAction = async (action: () => Promise<void>, successMessage: string) => {
    setStatus('saving');
    setFeedback('');
    try {
      await action();
      await loadCatalog();
      setStatus('saved');
      setFeedback(successMessage);
    } catch (error) {
      setStatus('error');
      setFeedback(error instanceof Error ? error.message : 'Nao foi possivel salvar.');
    }
  };

  const saveCategory = () => runAction(async () => {
    await saveCatalogCategory(categoryForm);
    setCategoryForm({ name: '', description: '' });
  }, 'Categoria salva.');

  const saveProduct = () => runAction(async () => {
    await saveCatalogProduct({
      ...productForm,
      categoryId: productForm.categoryId ? Number(productForm.categoryId) : null,
      sizes: productForm.type === 'finished_product' ? productForm.sizes : []
    });
    setProductForm(current => ({
      ...current,
      sku: '',
      name: '',
      composition: '',
      notes: '',
      gramature: '',
      materialYield: '',
      widthCm: '',
      color: ''
    }));
  }, 'Produto salvo.');

  const calculateSizeYields = () => {
    const gramature = Number(referenceForm.gramature.replace(',', '.'));
    const efficiency = Number(referenceForm.efficiencyPercent.replace(',', '.')) || 85;
    const rib = Number(referenceForm.ribGPerPiece.replace(',', '.')) || 0;

    if (!Number.isFinite(gramature) || gramature <= 0) {
      setStatus('error');
      setFeedback('Informe a gramatura para calcular o rendimento.');
      return;
    }

    const nextYields = referenceSizes.reduce<Record<string, string>>((values, size) => {
      const area = Number((sizeAreas[size] || '').replace(',', '.'));
      if (!Number.isFinite(area) || area <= 0) return values;
      const fabricGrams = gramature * area / (efficiency / 100);
      const pieceGrams = fabricGrams + rib;
      const yieldValue = pieceGrams > 0 ? 1000 / pieceGrams : 0;
      values[size] = yieldValue.toFixed(2);
      return values;
    }, {});

    setSizeYields(nextYields);
    setStatus('idle');
    setFeedback(`${Object.keys(nextYields).length} tamanhos calculados.`);
  };

  const saveReference = () => runAction(async () => {
    await saveConsumptionReference({
      ...referenceForm,
      productId: Number(referenceForm.productId),
      materialProductId: referenceForm.materialProductId ? Number(referenceForm.materialProductId) : null,
      sizeAreas: numericMapFromStrings(sizeAreas),
      sizeYields: numericMapFromStrings(sizeYields)
    });
    setReferenceForm(current => ({
      ...current,
      productId: '',
      materialProductId: '',
      color: '',
      generalYield: ''
    }));
    setSizeYields({});
  }, 'Referencia salva.');

  const removeCategory = (category: CatalogCategory) => runAction(
    () => deleteCatalogCategory(category.id),
    `Categoria ${category.name} excluida.`
  );

  const removeProduct = (product: CatalogProduct) => runAction(
    () => deleteCatalogProduct(product.id),
    `Produto ${product.sku} excluido.`
  );

  const removeReference = (reference: ConsumptionReference) => runAction(
    () => deleteConsumptionReference(reference.id),
    `Referencia ${reference.productSku} excluida.`
  );

  const toggleProductSize = (size: string) => {
    setProductForm(current => ({
      ...current,
      sizes: current.sizes.includes(size)
        ? current.sizes.filter(item => item !== size)
        : [...current.sizes, size]
    }));
  };

  const tabItems: Array<{ key: RegistrationTab; label: string; icon: typeof Package; count: number }> = [
    { key: 'products', label: 'Produtos', icon: Package, count: catalog.products.length },
    { key: 'categories', label: 'Categorias', icon: Tags, count: catalog.categories.length },
    { key: 'references', label: 'Referencia de Consumo', icon: Ruler, count: catalog.consumptionReferences.length }
  ];

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 2xl:flex-row 2xl:items-start 2xl:justify-between">
        <div>
          <h1 className="mb-2 text-2xl font-bold text-zinc-900 dark:text-dark-text">Cadastros</h1>
          <p className="font-medium text-zinc-500 dark:text-dark-muted">
            Base de produtos, categorias e referencias de consumo usadas pelo corte.
          </p>
        </div>
        <button
          type="button"
          onClick={() => void loadCatalog()}
          className="inline-flex items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-card px-4 py-2.5 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary cursor-pointer"
        >
          <RefreshCw className="h-4 w-4 text-brand-primary" />
          Atualizar
        </button>
      </div>

      <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
        {tabItems.map(item => {
          const Icon = item.icon;
          const isActive = activeTab === item.key;
          return (
            <button
              key={item.key}
              type="button"
              onClick={() => setActiveTab(item.key)}
              className={`flex items-center justify-between rounded-2xl border p-4 text-left transition-colors cursor-pointer ${isActive ? 'border-brand-primary/40 bg-brand-primary/10 text-brand-primary' : 'border-dark-border bg-dark-card text-dark-text hover:border-brand-primary/40'}`}
            >
              <span className="flex items-center gap-3">
                <span className="rounded-xl border border-dark-border bg-dark-input p-2">
                  <Icon className="h-5 w-5" />
                </span>
                <span className="font-bold">{item.label}</span>
              </span>
              <span className="rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-muted">
                {item.count}
              </span>
            </button>
          );
        })}
      </div>

      {feedback && (
        <div className={`rounded-2xl border px-4 py-3 text-sm font-bold ${status === 'error' ? 'border-red-400/30 bg-red-400/10 text-red-300' : 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300'}`}>
          {feedback}
        </div>
      )}

      {isLoading ? (
        <div className="flex h-48 items-center justify-center rounded-2xl border border-dark-border bg-dark-card text-brand-primary">
          <Loader2 className="h-7 w-7 animate-spin" />
        </div>
      ) : (
        <>
          {activeTab === 'products' && (
            <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_420px]">
              <div className={listPanelClassName}>
                <div className={listHeaderClassName}>
                  <div>
                    <h2 className="text-sm font-bold text-dark-text">Produtos cadastrados</h2>
                    <p className="mt-1 text-xs font-semibold text-dark-muted">Produtos acabados e materias-primas do corte.</p>
                  </div>
                  <select
                    value={productFilter}
                    onChange={(event) => setProductFilter(event.target.value as 'all' | CatalogProductType)}
                    className="h-10 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none focus:border-brand-primary cursor-pointer"
                  >
                    <option value="all">Todos</option>
                    <option value="finished_product">Produtos acabados</option>
                    <option value="raw_material">Materias-primas</option>
                  </select>
                </div>
                <div className="divide-y divide-dark-border">
                  {filteredProducts.map(product => (
                    <div key={product.id} className="flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between">
                      <div className="min-w-0">
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="font-mono text-xs font-bold text-brand-primary">{product.sku}</span>
                          <span className="rounded-full border border-dark-border bg-dark-input px-2 py-0.5 text-[10px] font-bold text-dark-muted">
                            {product.type === 'finished_product' ? 'Produto acabado' : 'Materia-prima'}
                          </span>
                        </div>
                        <h3 className="mt-1 truncate text-sm font-bold text-dark-text">{product.name}</h3>
                        <p className="mt-1 text-xs font-semibold text-dark-muted">
                          {[product.categoryName, product.composition, product.color ? formatColorLabel(product.color) : '']
                            .filter(Boolean)
                            .join(' · ') || 'Sem detalhes'}
                        </p>
                      </div>
                      <button
                        type="button"
                        onClick={() => void removeProduct(product)}
                        className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-red-400/40 hover:text-red-300 cursor-pointer"
                        title="Excluir produto"
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                  ))}
                  {!filteredProducts.length && (
                    <div className={emptyStateClassName}>Nenhum produto cadastrado.</div>
                  )}
                </div>
              </div>

              <div className={formPanelClassName}>
                <h2 className="text-sm font-bold text-dark-text">Cadastrar produto / materia-prima</h2>
                <div className="mt-4 space-y-3">
                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <label className={labelClassName}>
                      Tipo
                      <select
                        value={productForm.type}
                        onChange={(event) => setProductForm(current => ({ ...current, type: event.target.value as CatalogProductType }))}
                        className={inputClassName}
                      >
                        <option value="finished_product">Produto acabado</option>
                        <option value="raw_material">Materia-prima</option>
                      </select>
                    </label>
                    <label className={labelClassName}>
                      SKU
                      <input
                        value={productForm.sku}
                        onChange={(event) => setProductForm(current => ({ ...current, sku: event.target.value }))}
                        placeholder="ex: BLCS"
                        className={`${inputClassName} font-mono`}
                      />
                    </label>
                  </div>
                  <label className={`block ${labelClassName}`}>
                    Nome
                    <input
                      value={productForm.name}
                      onChange={(event) => setProductForm(current => ({ ...current, name: event.target.value }))}
                      placeholder="Nome do produto"
                      className={inputClassName}
                    />
                  </label>
                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <label className={labelClassName}>
                      Categoria
                      <select
                        value={productForm.categoryId}
                        onChange={(event) => setProductForm(current => ({ ...current, categoryId: event.target.value }))}
                        className={inputClassName}
                      >
                        <option value="">Sem categoria</option>
                        {catalog.categories.map(category => <option key={category.id} value={category.id}>{category.name}</option>)}
                      </select>
                    </label>
                    <label className={labelClassName}>
                      Composicao
                      <input
                        value={productForm.composition}
                        onChange={(event) => setProductForm(current => ({ ...current, composition: event.target.value }))}
                        placeholder="ex: 100% Algodao"
                        className={inputClassName}
                      />
                    </label>
                  </div>

                  {productForm.type === 'raw_material' ? (
                    <>
                      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
                        <label className={labelClassName}>
                          Gramatura
                          <input inputMode="decimal" value={productForm.gramature} onChange={(event) => setProductForm(current => ({ ...current, gramature: event.target.value }))} className={inputClassName} />
                        </label>
                        <label className={labelClassName}>
                          Rendimento m/kg
                          <input inputMode="decimal" value={productForm.materialYield} onChange={(event) => setProductForm(current => ({ ...current, materialYield: event.target.value }))} className={inputClassName} />
                        </label>
                        <label className={labelClassName}>
                          Largura cm
                          <input inputMode="decimal" value={productForm.widthCm} onChange={(event) => setProductForm(current => ({ ...current, widthCm: event.target.value }))} className={inputClassName} />
                        </label>
                      </div>
                      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <label className={labelClassName}>
                          Cor
                          <input value={productForm.color} onChange={(event) => setProductForm(current => ({ ...current, color: event.target.value }))} placeholder="ex: Preto" className={inputClassName} />
                        </label>
                        <label className={labelClassName}>
                          Subcategoria
                          <select value={productForm.subcategory} onChange={(event) => setProductForm(current => ({ ...current, subcategory: event.target.value }))} className={inputClassName}>
                            {rawMaterialSubcategories.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
                          </select>
                        </label>
                      </div>
                    </>
                  ) : (
                    <div>
                      <p className="mb-2 text-xs font-bold text-dark-muted">Tamanhos disponiveis</p>
                      <div className="flex flex-wrap gap-2">
                        {sizeOptions.map(size => (
                          <button
                            key={size}
                            type="button"
                            onClick={() => toggleProductSize(size)}
                            className={`rounded-full border px-3 py-1.5 text-xs font-bold transition-colors cursor-pointer ${productForm.sizes.includes(size) ? 'border-brand-primary bg-brand-primary/15 text-brand-primary' : 'border-dark-border bg-dark-input text-dark-muted hover:text-dark-text'}`}
                          >
                            {size}
                          </button>
                        ))}
                      </div>
                    </div>
                  )}

                  <label className={`block ${labelClassName}`}>
                    Observacoes
                    <input
                      value={productForm.notes}
                      onChange={(event) => setProductForm(current => ({ ...current, notes: event.target.value }))}
                      placeholder="Opcional"
                      className={inputClassName}
                    />
                  </label>
                  <button
                    type="button"
                    onClick={() => void saveProduct()}
                    disabled={status === 'saving'}
                    className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
                  >
                    <Save className="h-4 w-4" />
                    Salvar produto
                  </button>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'categories' && (
            <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_420px]">
              <div className={listPanelClassName}>
                <div className={listHeaderClassName}>
                  <div>
                    <h2 className="text-sm font-bold text-dark-text">Categorias cadastradas</h2>
                    <p className="mt-1 text-xs font-semibold text-dark-muted">Classificacao usada no cadastro de produtos.</p>
                  </div>
                </div>
                <div className="divide-y divide-dark-border">
                  {catalog.categories.map(category => (
                    <div key={category.id} className="flex items-center justify-between gap-3 p-4">
                      <div>
                        <h3 className="text-sm font-bold text-dark-text">{category.name}</h3>
                        <p className="mt-1 text-xs font-semibold text-dark-muted">{category.description || 'Sem descricao'}</p>
                      </div>
                      <button type="button" onClick={() => void removeCategory(category)} className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-red-400/40 hover:text-red-300 cursor-pointer">
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                  ))}
                  {!catalog.categories.length && <div className={emptyStateClassName}>Nenhuma categoria cadastrada.</div>}
                </div>
              </div>

              <div className={formPanelClassName}>
                <h2 className="text-sm font-bold text-dark-text">Nova categoria</h2>
                <div className="mt-4 space-y-3">
                  <label className={`block ${labelClassName}`}>
                    Nome
                    <input value={categoryForm.name} onChange={(event) => setCategoryForm(current => ({ ...current, name: event.target.value }))} placeholder="ex: Camiseta Regular" className={inputClassName} />
                  </label>
                  <label className={`block ${labelClassName}`}>
                    Descricao
                    <input value={categoryForm.description} onChange={(event) => setCategoryForm(current => ({ ...current, description: event.target.value }))} placeholder="Opcional" className={inputClassName} />
                  </label>
                  <button type="button" onClick={() => void saveCategory()} disabled={status === 'saving'} className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer">
                    <Save className="h-4 w-4" />
                    Salvar categoria
                  </button>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'references' && (
            <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_420px]">
              <div className={listPanelClassName}>
                <div className={listHeaderClassName}>
                  <div>
                    <h2 className="text-sm font-bold text-dark-text">Referencias cadastradas</h2>
                    <p className="mt-1 text-xs font-semibold text-dark-muted">Rendimento pç/kg por produto, malha, cor e tamanho.</p>
                  </div>
                  <span className="rounded-full border border-dark-border bg-dark-input px-3 py-1 text-xs font-bold text-dark-muted">
                    {catalog.consumptionReferences.length} referencias
                  </span>
                </div>
                <div className="divide-y divide-dark-border">
                  {catalog.consumptionReferences.map(reference => (
                    <div key={reference.id} className="flex flex-col gap-3 p-4 md:flex-row md:items-start md:justify-between">
                      <div className="min-w-0">
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="font-mono text-xs font-bold text-brand-primary">{reference.productSku}</span>
                          <span className="rounded-full border border-dark-border bg-dark-input px-2 py-0.5 text-[10px] font-bold text-dark-muted">
                            {Object.keys(reference.sizeYields || {}).length ? 'Por tamanho' : 'Geral'}
                          </span>
                        </div>
                        <h3 className="mt-1 truncate text-sm font-bold text-dark-text">{reference.productName}</h3>
                        <p className="mt-1 text-xs font-semibold text-dark-muted">
                          {[reference.materialName, reference.color ? formatColorLabel(reference.color) : 'todas as cores'].filter(Boolean).join(' · ')}
                        </p>
                        {!!Object.keys(reference.sizeYields || {}).length && (
                          <div className="mt-2 flex flex-wrap gap-1.5">
                            {Object.entries(reference.sizeYields).map(([size, value]) => (
                              <span key={size} className="rounded-full border border-dark-border bg-dark-input px-2 py-0.5 text-[10px] font-bold text-dark-muted">
                                {size}: {formatNumber(value)}
                              </span>
                            ))}
                          </div>
                        )}
                      </div>
                      <div className="flex shrink-0 items-start gap-3">
                        <div className="text-right">
                          <div className="text-lg font-bold text-emerald-300">{formatNumber(getAverageYield(reference), 3)} pç/kg</div>
                          <div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">
                            {Object.keys(reference.sizeYields || {}).length ? 'media' : 'geral'}
                          </div>
                        </div>
                        <button type="button" onClick={() => void removeReference(reference)} className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-red-400/40 hover:text-red-300 cursor-pointer">
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    </div>
                  ))}
                  {!catalog.consumptionReferences.length && (
                    <div className={emptyStateClassName}>
                      Nenhuma referencia cadastrada.
                    </div>
                  )}
                </div>
              </div>

              <div className={formPanelClassName}>
                <div>
                  <h2 className="text-sm font-bold text-dark-text">Nova referencia de consumo</h2>
                  <p className="mt-1 text-xs font-semibold text-dark-muted">
                    Defina pç/kg por produto, malha e cor para o calculo do corte.
                  </p>
                </div>
                <div className="mt-4 space-y-4">
                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <label className={labelClassName}>
                      Produto
                      <select value={referenceForm.productId} onChange={(event) => setReferenceForm(current => ({ ...current, productId: event.target.value }))} className={inputClassName}>
                        <option value="">Selecione...</option>
                        {finishedProducts.map(product => <option key={product.id} value={product.id}>{product.name} ({product.sku})</option>)}
                      </select>
                    </label>
                    <label className={labelClassName}>
                      Malha
                      <select value={referenceForm.materialProductId} onChange={(event) => setReferenceForm(current => ({ ...current, materialProductId: event.target.value }))} className={inputClassName}>
                        <option value="">Qualquer</option>
                        {rawMaterials.map(product => <option key={product.id} value={product.id}>{product.name}</option>)}
                      </select>
                    </label>
                  </div>
                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <label className={labelClassName}>
                      Cor
                      <input value={referenceForm.color} onChange={(event) => setReferenceForm(current => ({ ...current, color: event.target.value }))} placeholder="Todas as cores" className={inputClassName} />
                    </label>
                    <label className={labelClassName}>
                      Rendimento geral
                      <input inputMode="decimal" value={referenceForm.generalYield} onChange={(event) => setReferenceForm(current => ({ ...current, generalYield: event.target.value }))} placeholder="ex: 5,36" className={inputClassName} />
                    </label>
                  </div>

                  <div className="rounded-xl border border-dark-border bg-dark-input/45 p-3">
                    <div className="mb-3 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                      <div>
                        <h3 className="text-xs font-bold uppercase tracking-widest text-dark-text">Calculo por gramatura</h3>
                        <p className="mt-1 text-[11px] font-semibold text-dark-muted">Opcional. Preenche o pç/kg dos tamanhos abaixo.</p>
                      </div>
                      <button type="button" onClick={calculateSizeYields} className="inline-flex h-9 items-center justify-center gap-2 rounded-lg border border-dark-border bg-dark-card px-3 text-xs font-bold text-dark-text transition-colors hover:border-brand-primary cursor-pointer">
                        <Ruler className="h-3.5 w-3.5 text-brand-primary" />
                        Calcular
                      </button>
                    </div>
                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                      <label className={labelClassName}>Gramatura<input inputMode="decimal" value={referenceForm.gramature} onChange={(event) => setReferenceForm(current => ({ ...current, gramature: event.target.value }))} placeholder="ex: 180" className={inputClassName} /></label>
                      <label className={labelClassName}>Aproveitamento %<input inputMode="decimal" value={referenceForm.efficiencyPercent} onChange={(event) => setReferenceForm(current => ({ ...current, efficiencyPercent: event.target.value }))} className={inputClassName} /></label>
                      <label className={labelClassName}>Ribana g/peça<input inputMode="decimal" value={referenceForm.ribGPerPiece} onChange={(event) => setReferenceForm(current => ({ ...current, ribGPerPiece: event.target.value }))} placeholder="ex: 18" className={inputClassName} /></label>
                      <label className={labelClassName}>Custo R$/kg<input inputMode="decimal" value={referenceForm.materialCostPerKg} onChange={(event) => setReferenceForm(current => ({ ...current, materialCostPerKg: event.target.value }))} placeholder="opcional" className={inputClassName} /></label>
                    </div>
                  </div>

                  <div>
                    <div className="mb-2 flex items-center justify-between gap-3">
                      <p className="text-xs font-bold text-dark-muted">Rendimento por tamanho</p>
                      <span className="text-[11px] font-semibold text-dark-muted">area m² / pç/kg</span>
                    </div>
                    <div className="overflow-hidden rounded-xl border border-dark-border">
                      <div className="grid grid-cols-[56px_1fr_1fr] gap-2 border-b border-dark-border bg-dark-input px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-dark-muted">
                        <span>Tam.</span>
                        <span>Area</span>
                        <span>Rendimento</span>
                      </div>
                      {referenceSizes.map(size => (
                        <div key={size} className="grid grid-cols-[56px_1fr_1fr] items-center gap-2 border-b border-dark-border px-3 py-2 last:border-b-0">
                          <div className="text-xs font-bold text-dark-text">{size}</div>
                          <input value={sizeAreas[size] || ''} onChange={(event) => setSizeAreas(current => ({ ...current, [size]: event.target.value }))} placeholder="area" className="h-8 w-full rounded-lg border border-dark-border bg-dark-input px-2 text-xs font-bold text-dark-text outline-none focus:border-brand-primary" />
                          <input value={sizeYields[size] || ''} onChange={(event) => setSizeYields(current => ({ ...current, [size]: event.target.value }))} placeholder="pç/kg" className="h-8 w-full rounded-lg border border-dark-border bg-dark-input px-2 text-xs font-bold text-dark-text outline-none focus:border-brand-primary" />
                        </div>
                      ))}
                    </div>
                  </div>

                  <button type="button" onClick={() => void saveReference()} disabled={status === 'saving'} className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer">
                    <Save className="h-4 w-4" />
                    Salvar referencia
                  </button>
                </div>
              </div>

            </div>
          )}
        </>
      )}

    </div>
  );
};

export default Registrations;