// ============================
// LELUSA — Inventory Page
// src/pages/inventory-page.jsx
// ============================

const STATUS_COLOR = {
  disponible:    { bg: '#E8F5E9', text: '#2E7D32' },
  reservado:     { bg: '#FFF8E1', text: '#F57F17' },
  danado:        { bg: '#FFE8E8', text: '#C62828' },
  'no disponible': { bg: '#F0F0F0', text: '#757575' },
};

function AssetCard({ asset, designs, onEdit, onDelete, onGoScene }) {
  const { navigate } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const [confirmDelete, setConfirmDelete] = React.useState(false);

  // Designs that include this asset
  const usedInDesigns = designs.filter(d =>
    (d.assetIds || []).some(aid => String(aid) === String(asset.id))
  );
  const inScene = designs.filter(d =>
    (d.scene_assets || []).some(sa => String(sa.assetId) === String(asset.id))
  );

  const statusStyle = STATUS_COLOR[asset.status] || STATUS_COLOR['no disponible'];

  return (
    <div style={{
      background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 18,
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
      boxShadow: '0 4px 16px rgba(58,42,32,0.06)',
      transition: 'box-shadow 0.2s',
    }}
      onMouseEnter={e => e.currentTarget.style.boxShadow = '0 8px 28px rgba(58,42,32,0.12)'}
      onMouseLeave={e => e.currentTarget.style.boxShadow = '0 4px 16px rgba(58,42,32,0.06)'}
    >
      {/* Image */}
      <div style={{ position: 'relative', aspectRatio: '4/3', background: 'var(--bg-soft)', overflow: 'hidden' }}>
        {asset.image ? (
          <img src={asset.image} alt={asset.name}
            style={{ width: '100%', height: '100%', objectFit: 'contain', padding: 12 }} />
        ) : (
          <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 40 }}>📦</div>
        )}
        {/* Status badge */}
        <div style={{
          position: 'absolute', top: 10, right: 10,
          background: statusStyle.bg, color: statusStyle.text,
          fontSize: 10, fontWeight: 700, padding: '3px 9px',
          borderRadius: 20, letterSpacing: 0.3,
        }}>{window.LelusaStatusLabel(asset.status)}</div>
        {/* Category badge */}
        <div style={{
          position: 'absolute', top: 10, left: 10,
          background: 'rgba(255,255,255,0.9)', color: 'var(--muted)',
          fontSize: 10, fontWeight: 600, padding: '3px 9px',
          borderRadius: 20,
        }}>{asset.category}</div>
      </div>

      {/* Info */}
      <div style={{ padding: '14px 16px', flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)', lineHeight: 1.3 }}>{asset.name}</div>

        <div style={{ display: 'flex', gap: 12, fontSize: 12, color: 'var(--muted)' }}>
          {asset.color && <span>🎨 {asset.color}</span>}
          {asset.size && <span>📐 {asset.size}</span>}
        </div>

        <div style={{ display: 'flex', gap: 10, fontSize: 12 }}>
          <span style={{ color: Number(asset.quantity) <= 3 ? '#C8881A' : 'var(--text)', fontWeight: 700 }}>
            {asset.quantity} {t('admin_inv_unit_short')}
          </span>
          <span style={{ color: 'var(--muted)' }}>·</span>
          <span style={{ color: 'var(--text)', fontWeight: 600 }}>${Number(asset.basePrice || 0).toLocaleString()}</span>
          <span style={{ color: 'var(--muted)', fontSize: 11 }}>{t('admin_inv_cost_prefix')} ${Number(asset.internalCost || 0).toLocaleString()}</span>
        </div>

        {/* Usage */}
        {(usedInDesigns.length > 0 || inScene.length > 0) && (
          <div style={{ marginTop: 4, display: 'flex', flexWrap: 'wrap', gap: 4 }}>
            {usedInDesigns.map(d => (
              <span key={d.id} style={{
                fontSize: 10, background: 'var(--primary-light)', color: 'var(--primary-dark)',
                borderRadius: 10, padding: '2px 8px', fontWeight: 600,
              }}>📦 {d.name}</span>
            ))}
            {inScene.map(d => (
              <span key={`s-${d.id}`}
                onClick={() => navigate('admin-scene-editor', { designId: d.id })}
                style={{
                  fontSize: 10, background: 'var(--accent-light)', color: 'var(--primary-dark)',
                  borderRadius: 10, padding: '2px 8px', fontWeight: 600,
                  cursor: 'pointer', textDecoration: 'underline',
                }}>✨ {d.name}</span>
            ))}
          </div>
        )}
      </div>

      {/* Actions */}
      <div style={{ padding: '10px 16px', borderTop: '1px solid var(--border)', display: 'flex', gap: 8, alignItems: 'center' }}>
        <Btn size="sm" variant="ghost" onClick={() => onEdit(asset)} style={{ flex: 1 }}>
          ✏️ {t('admin_inv_edit')}
        </Btn>
        {confirmDelete ? (
          <>
            <Btn size="sm" onClick={() => { onDelete(asset.id); setConfirmDelete(false); }}
              style={{ background: '#C83A3A', color: 'white', flex: 1 }}>
              {t('admin_inv_confirm')}
            </Btn>
            <Btn size="sm" variant="ghost" onClick={() => setConfirmDelete(false)}>{t('admin_inv_no')}</Btn>
          </>
        ) : (
          <button onClick={() => setConfirmDelete(true)} style={{
            background: 'none', border: 'none', cursor: 'pointer', color: '#C83A3A',
            fontSize: 16, padding: '4px 6px', borderRadius: 6,
            transition: 'background 0.1s',
          }}
            onMouseEnter={e => e.currentTarget.style.background = '#FFE8E8'}
            onMouseLeave={e => e.currentTarget.style.background = 'none'}
            title={t('admin_inv_delete_asset_title')}
          >🗑</button>
        )}
      </div>
    </div>
  );
}

function InventoryPage() {
  const { pageData, navigate } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const { assets, designs } = window.LelusaStore.useBusinessData();
  const [search, setSearch] = React.useState('');
  const [categoryFilter, setCategoryFilter] = React.useState('all');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [formOpen, setFormOpen] = React.useState(false);
  const [editingId, setEditingId] = React.useState(null);
  const [view, setView] = React.useState('grid');

  const emptyForm = {
    name: '',
    category: ASSET_CATEGORIES[0],
    image: '',
    basePrice: '',
    internalCost: '',
    quantity: '',
    color: '',
    size: '',
    variants: [],
    tags: [],
    status: 'disponible',
  };
  const [form, setForm] = React.useState({ ...emptyForm });

  const isMobile = window.LelusaGestures.useIsMobile();
  const ASSET_STATUS_COLOR = {
    'disponible':    '#2A8A50',
    'reservado':     '#3A62C8',
    'danado':        '#C83A3A',
    'no disponible': '#8B7068',
  };
  const CATEGORY_PRESETS = {
    Globos: {
      roles: ['Arco', 'Guirnalda', 'Columna', 'Bouquet'],
      sizes: ['5 pulg', '12 pulg', '18 pulg', '36 pulg'],
      tags: ['helio', 'latex', 'metalizado', 'orgánico'],
    },
    Flores: {
      roles: ['Centro de mesa', 'Arreglo alto', 'Guirnalda floral', 'Ramo'],
      sizes: ['Chico', 'Mediano', 'Grande', 'XL'],
      tags: ['natural', 'artificial', 'preservada', 'premium'],
    },
    Mesas: {
      roles: ['Mesa principal', 'Mesa de dulces', 'Mesa auxiliar'],
      sizes: ['120 cm', '180 cm', 'Redonda', 'Rectangular'],
      tags: ['madera', 'plegable', 'infantil', 'premium'],
    },
    Manteles: {
      roles: ['Mantel base', 'Camino', 'Faldón', 'Overlay'],
      sizes: ['Redondo', 'Rectangular', 'Mesa alta', 'Mesa baja'],
      tags: ['lino', 'satín', 'terciopelo', 'lavable'],
    },
    Backdrops: {
      roles: ['Panel principal', 'Arco', 'Muro floral', 'Photo spot'],
      sizes: ['1.5 m', '2 m', '2.4 m', '3 m'],
      tags: ['modular', 'personalizable', 'con luz', 'estructura'],
    },
    Pedestales: {
      roles: ['Set de 3', 'Cilindro', 'Base para pastel', 'Display'],
      sizes: ['Chico', 'Mediano', 'Grande', 'Alto'],
      tags: ['acrílico', 'madera', 'dorado', 'blanco'],
    },
    'Letras luminosas': {
      roles: ['Iniciales', 'Nombre', 'Número', 'Mensaje'],
      sizes: ['60 cm', '90 cm', '1.2 m', '1.5 m'],
      tags: ['led', 'batería', 'cálida', 'fría'],
    },
    Luces: {
      roles: ['Ambiental', 'Spot', 'Cortina', 'Neón'],
      sizes: ['3 m', '5 m', '10 m', 'Set'],
      tags: ['led', 'cálida', 'rgb', 'exterior'],
    },
    Accesorios: {
      roles: ['Señalética', 'Props', 'Base', 'Detalle'],
      sizes: ['Chico', 'Mediano', 'Grande', 'Set'],
      tags: ['temático', 'personalizable', 'infantil', 'elegante'],
    },
  };
  const activePreset = CATEGORY_PRESETS[form.category] || { roles: [], sizes: [], tags: [] };

  const lowStock = assets.filter(a => Number(a.quantity) <= 3);
  const unavailable = assets.filter(a => a.status !== 'disponible');

  const filtered = assets.filter(a => {
    const text = `${a.name} ${a.category} ${(a.tags || []).join(' ')}`.toLowerCase();
    const matchSearch = !search || text.includes(search.toLowerCase());
    const matchCat = categoryFilter === 'all' || a.category === categoryFilter;
    const matchStatus = statusFilter === 'all' || a.status === statusFilter;
    return matchSearch && matchCat && matchStatus;
  });

  const set = (key, value) => setForm(cur => ({ ...cur, [key]: value }));
  const addTag = (tag) => {
    if (!tag || form.tags.includes(tag)) return;
    set('tags', [...form.tags, tag]);
  };
  const addVariant = (variant) => {
    if (!variant || form.variants.includes(variant)) return;
    set('variants', [...form.variants, variant]);
  };

  const openNew = () => {
    setEditingId(null);
    setForm({ ...emptyForm });
    setFormOpen(true);
  };

  const openEdit = (asset) => {
    setEditingId(asset.id);
    setForm({
      name: asset.name || '',
      category: asset.category || ASSET_CATEGORIES[0],
      image: asset.image || '',
      basePrice: asset.basePrice ?? '',
      internalCost: asset.internalCost ?? '',
      quantity: asset.quantity ?? '',
      color: asset.color || '',
      size: asset.size || '',
      variants: asset.variants || [],
      tags: asset.tags || [],
      status: asset.status || 'disponible',
    });
    setFormOpen(true);
  };

  const submit = (e) => {
    e.preventDefault();
    if (!form.name.trim()) return;
    const payload = {
      name: form.name.trim(),
      category: form.category,
      image: form.image.trim() || '',
      basePrice: Number(form.basePrice) || 0,
      internalCost: Number(form.internalCost) || 0,
      quantity: Number(form.quantity) || 0,
      color: form.color.trim(),
      size: form.size.trim(),
      status: form.status,
      variants: form.variants,
      tags: form.tags,
    };
    if (editingId) window.LelusaStore.updateAsset(editingId, payload);
    else window.LelusaStore.addAsset(payload);
    setForm({ ...emptyForm });
    setEditingId(null);
    setFormOpen(false);
  };

  const handleDelete = (id) => {
    window.LelusaStore.deleteAsset(id);
  };

  React.useEffect(() => {
    if (pageData.action === 'new') openNew();
  }, [pageData.action]);

  const inputStyle = ADMIN_INPUT_STYLE;

  return (
    <AdminLayout title={t('admin_inv_title')} subtitle={t('admin_inv_subtitle', { count: assets.length })}>

      {/* Stats */}
      <div className="lel-stat-grid" style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, minmax(0, 1fr))' : 'repeat(auto-fill, minmax(180px, 1fr))', gap: isMobile ? 10 : 14, marginBottom: isMobile ? 18 : 22 }}>
        <StatCard icon="package" label={t('admin_inv_stat_total_label')} value={assets.length} sub={t('admin_inv_stat_total_sub')} color="var(--primary)" />
        <StatCard icon="barChart" label={t('admin_inv_stat_low_label')} value={lowStock.length} sub={t('admin_inv_stat_low_sub')} color="#C8881A" />
        <StatCard icon="settings" label={t('admin_inv_stat_unavailable_label')} value={unavailable.length} sub={t('admin_inv_stat_unavailable_sub')} color="#C83A3A" />
      </div>

      {/* Toolbar */}
      <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 20, overflow: 'hidden', marginBottom: 20 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
          <input
            value={search} onChange={e => setSearch(e.target.value)}
            placeholder={t('admin_inv_search_placeholder')}
            style={{ ...inputStyle, flex: 1, minWidth: 200 }}
          />
          <select value={categoryFilter} onChange={e => setCategoryFilter(e.target.value)} style={{ ...inputStyle, width: 170 }}>
            <option value="all">{t('admin_inv_filter_all_categories')}</option>
            {ASSET_CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
          <select value={statusFilter} onChange={e => setStatusFilter(e.target.value)} style={{ ...inputStyle, width: 160 }}>
            <option value="all">{t('admin_inv_filter_all_statuses')}</option>
            {['disponible', 'reservado', 'danado', 'no disponible'].map(s => <option key={s} value={s}>{window.LelusaStatusLabel(s)}</option>)}
          </select>
          <div style={{ display: 'flex', gap: 4 }}>
            {['grid', 'list'].map(v => (
              <button key={v} onClick={() => setView(v)} style={{
                background: view === v ? 'var(--primary)' : 'var(--bg-soft)',
                color: view === v ? 'white' : 'var(--muted)',
                border: 'none', borderRadius: 8, padding: '8px 12px',
                cursor: 'pointer', fontSize: 14,
              }}>{v === 'grid' ? '⊞' : '☰'}</button>
            ))}
          </div>
          <Btn onClick={openNew}>
            <Icon name="plus" size={15} color="#fff" />
            {t('admin_inv_new_asset')}
          </Btn>
        </div>

        {filtered.length === 0 && (
          <div style={{ padding: '60px 20px', textAlign: 'center', color: 'var(--muted)' }}>
            <div style={{ fontSize: 36, marginBottom: 10 }}>📦</div>
            <div style={{ fontWeight: 600, marginBottom: 6 }}>{t('admin_inv_empty_title')}</div>
            <div style={{ fontSize: 13 }}>{t('admin_inv_empty_sub')}</div>
          </div>
        )}
      </div>

      {/* Mobile: compact list */}
      {isMobile && (
        filtered.length === 0 ? (
          <div style={{ padding: '40px', textAlign: 'center', color: 'var(--muted)', fontSize: '14px' }}>{t('admin_inv_empty_mobile')}</div>
        ) : (
          <div className="lel-admin-list">
            {filtered.map(asset => {
              const badgeColor = ASSET_STATUS_COLOR[asset.status] || 'var(--muted)';
              return (
                <AdminListRow key={asset.id} icon="package" title={asset.name}
                  subtitle={asset.category}
                  value={`x${asset.quantity}`} badge={window.LelusaStatusLabel(asset.status)} badgeColor={badgeColor}
                  onClick={() => openEdit(asset)} />
              );
            })}
          </div>
        )
      )}

      {/* Grid view */}
      {!isMobile && view === 'grid' && filtered.length > 0 && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 16 }}>
          {filtered.map(asset => (
            <AssetCard
              key={asset.id}
              asset={asset}
              designs={designs}
              onEdit={openEdit}
              onDelete={handleDelete}
            />
          ))}
        </div>
      )}

      {/* List view */}
      {!isMobile && view === 'list' && filtered.length > 0 && (
        <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 20, overflow: 'hidden' }}>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead>
                <tr style={{ borderBottom: '1px solid var(--border)' }}>
                  {[
                    { id: 'asset', label: t('admin_inv_th_asset') },
                    { id: 'category', label: t('admin_inv_th_category') },
                    { id: 'quantity', label: t('admin_inv_th_quantity') },
                    { id: 'price', label: t('admin_inv_th_price') },
                    { id: 'designs', label: t('admin_inv_th_designs') },
                    { id: 'status', label: t('admin_inv_th_status') },
                    { id: 'actions', label: t('admin_inv_th_actions') },
                  ].map(h => (
                    <th key={h.id} style={{ padding: '12px 16px', fontSize: 11, color: 'var(--muted)', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', textAlign: 'left', whiteSpace: 'nowrap' }}>{h.label}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {filtered.map((asset, idx) => {
                  const usedIn = designs.filter(d => (d.assetIds || []).some(aid => String(aid) === String(asset.id)));
                  const inScene = designs.filter(d => (d.scene_assets || []).some(sa => String(sa.assetId) === String(asset.id)));
                  const statusStyle = STATUS_COLOR[asset.status] || STATUS_COLOR['no disponible'];
                  return (
                    <tr key={asset.id} style={{ borderBottom: idx < filtered.length - 1 ? '1px solid var(--border)' : 'none' }}>
                      <td style={{ padding: '12px 16px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                          {asset.image ? (
                            <img src={asset.image} alt="" style={{ width: 38, height: 38, objectFit: 'contain', borderRadius: 8, background: 'var(--bg-soft)', flexShrink: 0 }} />
                          ) : (
                            <div style={{ width: 38, height: 38, background: 'var(--bg-soft)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 }}>📦</div>
                          )}
                          <div>
                            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>{asset.name}</div>
                            <div style={{ fontSize: 11, color: 'var(--muted)' }}>{[asset.color, asset.size].filter(Boolean).join(' · ') || '—'}</div>
                          </div>
                        </div>
                      </td>
                      <td style={{ padding: '12px 16px', fontSize: 12, color: 'var(--muted)' }}>{asset.category}</td>
                      <td style={{ padding: '12px 16px', fontSize: 13, fontWeight: 700, color: Number(asset.quantity) <= 3 ? '#C8881A' : 'var(--text)' }}>{asset.quantity}</td>
                      <td style={{ padding: '12px 16px', fontSize: 13, color: 'var(--text)' }}>${Number(asset.basePrice || 0).toLocaleString()}</td>
                      <td style={{ padding: '12px 16px' }}>
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
                          {usedIn.length === 0 && inScene.length === 0
                            ? <span style={{ fontSize: 11, color: 'var(--light)' }}>—</span>
                            : <>
                                {usedIn.map(d => (
                                  <span key={d.id} style={{ fontSize: 10, background: 'var(--primary-light)', color: 'var(--primary-dark)', borderRadius: 10, padding: '2px 7px', fontWeight: 600 }}>{d.name}</span>
                                ))}
                                {inScene.map(d => (
                                  <span key={`s-${d.id}`}
                                    onClick={() => navigate('admin-scene-editor', { designId: d.id })}
                                    style={{ fontSize: 10, background: 'var(--accent-light)', color: 'var(--primary-dark)', borderRadius: 10, padding: '2px 7px', fontWeight: 600, cursor: 'pointer', textDecoration: 'underline' }}>
                                    ✨ {d.name}
                                  </span>
                                ))}
                              </>
                          }
                        </div>
                      </td>
                      <td style={{ padding: '12px 16px' }}>
                        <select
                          value={asset.status}
                          onChange={e => window.LelusaStore.updateAssetStatus(asset.id, e.target.value)}
                          style={{ ...inputStyle, padding: '6px 10px', fontSize: 12, color: statusStyle.text, background: statusStyle.bg, border: 'none', borderRadius: 10, fontWeight: 600 }}
                        >
                          {['disponible', 'reservado', 'danado', 'no disponible'].map(s => <option key={s} value={s}>{window.LelusaStatusLabel(s)}</option>)}
                        </select>
                      </td>
                      <td style={{ padding: '12px 16px' }}>
                        <div style={{ display: 'flex', gap: 6 }}>
                          <Btn size="sm" variant="ghost" onClick={() => openEdit(asset)}>{t('admin_inv_edit')}</Btn>
                          <button
                            onClick={() => { if (window.confirm(t('admin_inv_delete_confirm', { name: asset.name }))) handleDelete(asset.id); }}
                            style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#C83A3A', fontSize: 14, padding: '4px 6px', borderRadius: 6 }}
                            title={t('admin_inv_delete')}
                          >🗑</button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Edit / Create Modal */}
      <AdminModal
        open={formOpen}
        title={editingId ? t('admin_inv_modal_edit_title') : t('admin_inv_modal_new_title')}
        subtitle={t('admin_inv_modal_subtitle')}
        onClose={() => { setFormOpen(false); setEditingId(null); setForm({ ...emptyForm }); }}
        footer={
          <>
            <Btn type="button" variant="ghost" onClick={() => { setFormOpen(false); setEditingId(null); setForm({ ...emptyForm }); }}>{t('admin_inv_cancel')}</Btn>
            <Btn type="submit" onClick={submit}>{editingId ? t('admin_inv_save_changes') : t('admin_inv_create_asset')}</Btn>
          </>
        }
      >
        <form onSubmit={submit}>
          <AdminFormSection title={t('admin_inv_section_basic_title')} subtitle={t('admin_inv_section_basic_sub')}>
            <AdminField label={t('admin_inv_field_name')}>
              <input required value={form.name} onChange={e => set('name', e.target.value)} placeholder={t('admin_inv_field_name_ph')} style={inputStyle} />
            </AdminField>
            <AdminField label={t('admin_inv_field_category')}>
              <select value={form.category} onChange={e => set('category', e.target.value)} style={inputStyle}>
                {ASSET_CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </AdminField>
            <AdminFileField
              label={t('admin_inv_field_image')}
              value={form.image}
              onChange={value => set('image', value)}
              hint={t('admin_inv_field_image_hint')}
              full
            />
            <div style={{ gridColumn: '1 / -1', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 12 }}>
              <div style={{ border: '1px solid var(--border)', borderRadius: 14, padding: 12, background: 'var(--bg-soft)' }}>
                <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--text)', marginBottom: 8 }}>Presets por tipo de activo</div>
                <div style={{ display: 'grid', gap: 8 }}>
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    {activePreset.roles.map(role => (
                      <button key={role} type="button" onClick={() => set('size', role)}
                        style={{ border: '1px solid var(--border)', background: form.size === role ? 'var(--primary)' : 'var(--card)', color: form.size === role ? '#fff' : 'var(--text)', borderRadius: 999, padding: '5px 9px', cursor: 'pointer', fontSize: 11, fontWeight: 700 }}>
                        {role}
                      </button>
                    ))}
                  </div>
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    {activePreset.sizes.map(size => (
                      <button key={size} type="button" onClick={() => addVariant(size)}
                        style={{ border: '1px solid var(--border)', background: 'var(--card)', color: 'var(--muted)', borderRadius: 999, padding: '5px 9px', cursor: 'pointer', fontSize: 11, fontWeight: 700 }}>
                        + {size}
                      </button>
                    ))}
                  </div>
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    {activePreset.tags.map(tag => (
                      <button key={tag} type="button" onClick={() => addTag(tag)}
                        style={{ border: 'none', background: form.tags.includes(tag) ? 'var(--accent-light)' : 'var(--card)', color: form.tags.includes(tag) ? 'var(--primary)' : 'var(--muted)', borderRadius: 999, padding: '5px 9px', cursor: 'pointer', fontSize: 11, fontWeight: 800 }}>
                        #{tag}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
              <div style={{ border: '1px solid var(--border)', borderRadius: 14, padding: 12, background: 'var(--card)', display: 'grid', gridTemplateColumns: '74px 1fr', gap: 12, alignItems: 'center' }}>
                <div style={{ width: 74, height: 74, borderRadius: 12, overflow: 'hidden', background: 'var(--bg-soft)', border: '1px solid var(--border)', display: 'grid', placeItems: 'center' }}>
                  {form.image ? <img src={form.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <Icon name="package" size={24} color="var(--muted)" />}
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{form.name || 'Nuevo activo'}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 3 }}>{form.category} · {window.LelusaStatusLabel(form.status)}</div>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8, fontSize: 11, color: 'var(--muted)' }}>
                    <span>${Number(form.basePrice || 0).toLocaleString()} venta</span>
                    <span>${Number(form.internalCost || 0).toLocaleString()} costo</span>
                    <span>x{Number(form.quantity || 0)}</span>
                  </div>
                </div>
              </div>
            </div>
            <AdminField label={t('admin_inv_field_status')}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 6 }}>
                {['disponible', 'reservado', 'danado', 'no disponible'].map(s => (
                  <button key={s} type="button" onClick={() => set('status', s)}
                    style={{ border: `1px solid ${form.status === s ? ASSET_STATUS_COLOR[s] : 'var(--border)'}`, background: form.status === s ? `${ASSET_STATUS_COLOR[s]}18` : 'var(--bg-soft)', color: form.status === s ? ASSET_STATUS_COLOR[s] : 'var(--muted)', borderRadius: 10, padding: '9px 8px', cursor: 'pointer', fontSize: 12, fontWeight: 800 }}>
                    {window.LelusaStatusLabel(s)}
                  </button>
                ))}
              </div>
            </AdminField>
          </AdminFormSection>

          <AdminFormSection title={t('admin_inv_section_costs_title')} subtitle={t('admin_inv_section_costs_sub')}>
            <AdminField label={t('admin_inv_field_base_price')}>
              <input type="number" min="0" value={form.basePrice} onChange={e => set('basePrice', e.target.value)} placeholder="65" style={inputStyle} />
            </AdminField>
            <AdminField label={t('admin_inv_field_internal_cost')}>
              <input type="number" min="0" value={form.internalCost} onChange={e => set('internalCost', e.target.value)} placeholder="18" style={inputStyle} />
            </AdminField>
            <AdminField label={t('admin_inv_field_quantity')}>
              <input type="number" min="0" value={form.quantity} onChange={e => set('quantity', e.target.value)} placeholder="4" style={inputStyle} />
            </AdminField>
            <AdminField label={t('admin_inv_field_size')}>
              <input value={form.size} onChange={e => set('size', e.target.value)} placeholder={t('admin_inv_field_size_ph')} style={inputStyle} />
            </AdminField>
          </AdminFormSection>

          <AdminFormSection title={t('admin_inv_section_variants_title')} subtitle={t('admin_inv_section_variants_sub')}>
            <AdminField label={t('admin_inv_field_color')}>
              <input value={form.color} onChange={e => set('color', e.target.value)} placeholder={t('admin_inv_field_color_ph')} style={inputStyle} />
            </AdminField>
            <TagInput
              label={t('admin_inv_field_variants')}
              value={form.variants}
              onChange={v => set('variants', v)}
              placeholder={t('admin_inv_field_variants_ph')}
            />
            <TagInput
              label={t('admin_inv_field_tags')}
              value={form.tags}
              onChange={v => set('tags', v)}
              placeholder={t('admin_inv_field_tags_ph')}
              full
            />
          </AdminFormSection>

          {/* Usage info when editing */}
          {editingId && (() => {
            const asset = assets.find(a => String(a.id) === String(editingId));
            if (!asset) return null;
            const usedIn = designs.filter(d => (d.assetIds || []).some(aid => String(aid) === String(editingId)));
            const inScene = designs.filter(d => (d.scene_assets || []).some(sa => String(sa.assetId) === String(editingId)));
            if (!usedIn.length && !inScene.length) return null;
            return (
              <AdminFormSection title={t('admin_inv_section_used_title')} subtitle={t('admin_inv_section_used_sub')}>
                <div style={{ gridColumn: '1 / -1', display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {usedIn.map(d => (
                    <span key={d.id} style={{ fontSize: 12, background: 'var(--primary-light)', color: 'var(--primary-dark)', borderRadius: 12, padding: '4px 12px', fontWeight: 600 }}>
                      📦 {d.name}
                    </span>
                  ))}
                  {inScene.map(d => (
                    <span key={`s-${d.id}`}
                      onClick={() => { setFormOpen(false); navigate('admin-scene-editor', { designId: d.id }); }}
                      style={{ fontSize: 12, background: 'var(--accent-light)', color: 'var(--primary-dark)', borderRadius: 12, padding: '4px 12px', fontWeight: 600, cursor: 'pointer', textDecoration: 'underline' }}>
                      ✨ {d.name} {t('admin_inv_used_scene_suffix')}
                    </span>
                  ))}
                </div>
              </AdminFormSection>
            );
          })()}
        </form>
      </AdminModal>
    </AdminLayout>
  );
}

Object.assign(window, { InventoryPage });