// ============================
// LELUSA — Desserts Admin Page
// src/pages/desserts-page.jsx
// ============================

const DESSERT_CATEGORIES = [
  { value: 'Cupcakes', i18nKey: 'admin_dessert_cat_cupcakes' },
  { value: 'Cake pops', i18nKey: 'admin_dessert_cat_cakepops' },
  { value: 'Galletas', i18nKey: 'admin_dessert_cat_galletas' },
  { value: 'Mesa de dulces', i18nKey: 'admin_dessert_cat_mesa' },
  { value: 'Mini postres', i18nKey: 'admin_dessert_cat_minipostres' },
  { value: 'Pasteles', i18nKey: 'admin_dessert_cat_pasteles' },
  { value: 'Otros', i18nKey: 'admin_dessert_cat_otros' },
];
const DEPARTMENT_LABELS = {
  direccion: 'Dirección',
  decoracion: 'Decoración',
  postres: 'Postres',
  finanzas: 'Finanzas',
  operaciones: 'Operaciones',
};

function FmtMoney(value) {
  return Number(value || 0).toLocaleString('es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 0 });
}

function DessertModal({ open, dessert, onClose, onSave, onDelete, categories = [] }) {
  const { t } = window.ReactI18next.useTranslation();
  const categoryOptions = categories.length ? categories : DESSERT_CATEGORIES.map(item => ({ slug: item.value, name: t(item.i18nKey), description: '' }));
  const defaultCategory = categoryOptions[0]?.slug || 'Cupcakes';
  const [form, setForm] = React.useState({
    name: '',
    category: defaultCategory,
    description: '',
    image: '',
    images: [],
    pricePerDozen: '',
    costPerDozen: '',
    minDozens: 1,
    leadTimeDays: 2,
    status: 'available',
    tags: [],
  });

  React.useEffect(() => {
    if (!open) return;
    setForm({
      name: dessert?.name || '',
      category: dessert?.category || defaultCategory,
      description: dessert?.description || '',
      image: dessert?.image || '',
      images: Array.from(new Set([dessert?.image, ...(dessert?.images || [])].filter(Boolean))),
      pricePerDozen: dessert?.pricePerDozen || '',
      costPerDozen: dessert?.costPerDozen || '',
      minDozens: dessert?.minDozens || 1,
      leadTimeDays: dessert?.leadTimeDays || 2,
      status: dessert?.status || 'available',
      tags: dessert?.tags || [],
    });
  }, [open, dessert?.id, defaultCategory]);

  const set = (key, value) => setForm(current => ({ ...current, [key]: value }));
  const valid = form.name.trim() && Number(form.pricePerDozen || 0) > 0;

  return (
    <AdminModal open={open} onClose={onClose} title={dessert ? t('admin_dessert_modal_edit_title') : t('admin_dessert_modal_new_title')} subtitle={t('admin_dessert_modal_subtitle')}>
      <AdminFormSection title={t('admin_dessert_modal_subtitle')}>
        <AdminField label={t('admin_dessert_field_name')}>
          <input value={form.name} onChange={e => set('name', e.target.value)} style={ADMIN_INPUT_STYLE} placeholder={t('admin_dessert_field_name_ph')} />
        </AdminField>
        <AdminField label={t('admin_dessert_field_category')}>
          <select value={form.category} onChange={e => set('category', e.target.value)} style={ADMIN_INPUT_STYLE}>
            {categoryOptions.map(item => <option key={item.slug} value={item.slug}>{item.name}</option>)}
          </select>
        </AdminField>
        <AdminField label={t('admin_dessert_field_price_per_dozen')}>
          <input type="number" value={form.pricePerDozen} onChange={e => set('pricePerDozen', e.target.value)} style={ADMIN_INPUT_STYLE} />
        </AdminField>
        <AdminField label={t('admin_dessert_field_cost_per_dozen')}>
          <input type="number" value={form.costPerDozen} onChange={e => set('costPerDozen', e.target.value)} style={ADMIN_INPUT_STYLE} />
        </AdminField>
        <AdminField label={t('admin_dessert_field_min_dozens')}>
          <input type="number" min="1" value={form.minDozens} onChange={e => set('minDozens', e.target.value)} style={ADMIN_INPUT_STYLE} />
        </AdminField>
        <AdminField label={t('admin_dessert_field_lead_time')}>
          <input type="number" min="0" value={form.leadTimeDays} onChange={e => set('leadTimeDays', e.target.value)} style={ADMIN_INPUT_STYLE} />
        </AdminField>
        <AdminField label={t('admin_dessert_field_status')}>
          <select value={form.status} onChange={e => set('status', e.target.value)} style={ADMIN_INPUT_STYLE}>
            <option value="available">{t('admin_dessert_status_available')}</option>
            <option value="seasonal">{t('admin_dessert_status_seasonal')}</option>
            <option value="paused">{t('admin_dessert_status_paused')}</option>
          </select>
        </AdminField>
        <AdminImageGalleryField
          label="Imagenes del postre"
          primary={form.image}
          images={form.images}
          onChange={({ image, images }) => setForm(current => ({ ...current, image, images }))}
          hint="Marca una foto como principal; las demas serviran como galeria."
          full
        />
        <div style={{ gridColumn: '1 / -1', border: '1px solid var(--border)', borderRadius: 14, background: 'var(--bg-soft)', padding: 12, display: 'grid', gridTemplateColumns: '88px 1fr', gap: 12, alignItems: 'center' }}>
          <div style={{ width: 88, height: 72, borderRadius: 12, overflow: 'hidden', background: 'var(--card)', 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="sparkles" size={24} color="var(--primary)" />}
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--text)' }}>{form.name || 'Nuevo postre'}</div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 3 }}>{form.category} · {form.status === 'paused' ? t('admin_dessert_status_paused') : t('admin_dessert_status_available')} · {(form.images || []).length || (form.image ? 1 : 0)} fotos</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8, fontSize: 11, color: 'var(--muted)' }}>
              <span>{FmtMoney(form.pricePerDozen)} / docena</span>
              <span>{form.minDozens || 1} doc. mín.</span>
              <span>{form.leadTimeDays || 0} días</span>
            </div>
          </div>
        </div>
        <TagInput label={t('admin_dessert_field_tags')} value={form.tags} onChange={tags => set('tags', tags)} placeholder={t('admin_dessert_field_tags_ph')} />
        <AdminField label={t('admin_dessert_field_description')} full>
          <textarea value={form.description} onChange={e => set('description', e.target.value)} rows={3} style={ADMIN_INPUT_STYLE} placeholder={t('admin_dessert_field_description_ph')} />
        </AdminField>
      </AdminFormSection>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, marginTop: 18, flexWrap: 'wrap' }}>
        {dessert && <Btn variant="danger" onClick={() => onDelete(dessert.id)}>{t('admin_dessert_delete')}</Btn>}
        <div style={{ display: 'flex', gap: 10, marginLeft: 'auto' }}>
          <Btn variant="ghost" onClick={onClose}>{t('admin_dessert_cancel')}</Btn>
          <Btn disabled={!valid} onClick={() => onSave(form)}>{t('admin_dessert_save')}</Btn>
        </div>
      </div>
    </AdminModal>
  );
}

function DessertsPage() {
  const { t } = window.ReactI18next.useTranslation();
  const { pageData } = React.useContext(window.AppContext);
  const { desserts, events, teamMembers, catalogCategories } = window.LelusaStore.useBusinessData();
  const dessertCategories = window.LelusaStore.getCatalogCategories(catalogCategories, 'dessert');
  const isMobile = window.LelusaGestures.useIsMobile();
  const [search, setSearch] = React.useState('');
  const [category, setCategory] = React.useState('all');
  const [editing, setEditing] = React.useState(null);
  const categoryLabelBySlug = Object.fromEntries(dessertCategories.map(item => [item.slug, item.name]));

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

  const filtered = (desserts || []).filter(item => {
    const q = search.trim().toLowerCase();
    const matchesSearch = !q || [item.name, item.category, item.description, ...(item.tags || [])].join(' ').toLowerCase().includes(q);
    const matchesCategory = category === 'all' || item.category === category;
    return matchesSearch && matchesCategory;
  });
  const dessertEvents = (events || []).filter(event => event.department === 'postres' || event.type === 'postres');
  const dessertStaff = (teamMembers || []).filter(member => member.active !== false && member.department === 'postres');
  const avgMargin = desserts.length
    ? desserts.reduce((sum, item) => sum + (Number(item.pricePerDozen || 0) - Number(item.costPerDozen || 0)), 0) / desserts.length
    : 0;

  const save = (form) => {
    const payload = {
      ...form,
      images: Array.from(new Set([form.image, ...(form.images || [])].filter(Boolean))),
    };
    if (editing?.id) window.LelusaStore.updateDessert(editing.id, payload);
    else window.LelusaStore.addDessert(payload);
    setEditing(null);
  };

  return (
    <AdminLayout title={t('admin_dessert_page_title')} subtitle={t('admin_dessert_page_subtitle', { count: desserts.length })}>
      <div className="lel-stat-grid" style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, minmax(0, 1fr))' : 'repeat(auto-fill, minmax(190px, 1fr))', gap: isMobile ? 10 : 14, marginBottom: 18 }}>
        <StatCard icon="sparkles" label={t('admin_dessert_stat_active')} value={desserts.filter(item => item.status !== 'paused').length} sub={t('admin_dessert_stat_active_sub', { count: desserts.length })} color="var(--primary)" />
        <StatCard icon="calendar" label={t('admin_dessert_stat_events')} value={dessertEvents.length} sub={t('admin_dessert_stat_events_sub')} color="#C8881A" />
        <StatCard icon="clients" label={t('admin_dessert_stat_team')} value={dessertStaff.length} sub={t('admin_dessert_stat_team_sub')} color="#2A8A50" />
        <StatCard icon="trendingUp" label={t('admin_dessert_stat_margin')} value={FmtMoney(avgMargin)} sub={t('admin_dessert_stat_margin_sub')} color="#6A4AC8" />
      </div>

      <AdminCategoryManager
        title="Categorias de postres"
        subtitle="Estas categorias alimentan los filtros y el formulario de postres."
        type="dessert"
        categories={catalogCategories}
        usedValues={desserts.map(item => item.category)}
      />

      <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 20, overflow: 'hidden' }}>
        <div style={{ padding: isMobile ? 14 : 18, 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_dessert_search_ph')} style={{ ...ADMIN_INPUT_STYLE, flex: 1, minWidth: isMobile ? '100%' : 220 }} />
          <select value={category} onChange={e => setCategory(e.target.value)} style={{ ...ADMIN_INPUT_STYLE, width: isMobile ? '100%' : 190 }}>
            <option value="all">{t('admin_dessert_filter_all_categories')}</option>
            {dessertCategories.map(item => <option key={item.slug} value={item.slug}>{item.name}</option>)}
          </select>
          <Btn onClick={() => setEditing({})}><Icon name="plus" size={15} color="#fff" /> {t('admin_dessert_new')}</Btn>
        </div>

        {filtered.length === 0 ? (
          <div style={{ padding: '54px 20px', textAlign: 'center', color: 'var(--muted)' }}>
            <Icon name="sparkles" size={32} color="var(--primary)" />
            <div style={{ fontWeight: 800, marginTop: 12 }}>{t('admin_dessert_empty_title')}</div>
            <div style={{ fontSize: 13, marginTop: 4 }}>{t('admin_dessert_empty_desc')}</div>
          </div>
        ) : isMobile ? (
          <div className="lel-admin-list">
            {filtered.map(item => (
              <AdminListRow key={item.id} icon="sparkles" title={item.name} subtitle={`${t('admin_dessert_row_price_per_dozen', { category: categoryLabelBySlug[item.category] || item.category, price: FmtMoney(item.pricePerDozen) })} · ${(item.images || []).length || (item.image ? 1 : 0)} fotos`} value={t('admin_dessert_row_dozens', { count: item.minDozens || 1 })} badge={item.status === 'paused' ? t('admin_dessert_status_paused') : t('admin_dessert_status_available')} badgeColor={item.status === 'paused' ? '#C83A3A' : '#2A8A50'} onClick={() => setEditing(item)} />
            ))}
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 14, padding: 18 }}>
            {filtered.map(item => (
              <button key={item.id} onClick={() => setEditing(item)} style={{ textAlign: 'left', background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 16, padding: 16, cursor: 'pointer' }}>
                <div style={{ height: 132, margin: '-16px -16px 14px', borderRadius: '16px 16px 0 0', overflow: 'hidden', background: 'var(--bg-soft)', display: 'grid', placeItems: 'center' }}>
                  {item.image ? <img src={item.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <Icon name="sparkles" size={30} color="var(--primary)" />}
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                  <Icon name="sparkles" size={20} color="var(--primary)" />
                  <Badge color={item.status === 'paused' ? 'warm' : 'sage'}>{item.status === 'paused' ? t('admin_dessert_status_paused') : t('admin_dessert_status_available')}</Badge>
                </div>
                <h3 style={{ margin: '14px 0 4px', fontSize: 15, fontFamily: "'DM Sans', sans-serif" }}>{item.name}</h3>
                <div style={{ fontSize: 12, color: 'var(--muted)' }}>{categoryLabelBySlug[item.category] || item.category} · {(item.images || []).length || (item.image ? 1 : 0)} fotos</div>
                <div style={{ marginTop: 14, fontFamily: "'Cormorant Garamond', serif", fontSize: 28, fontWeight: 800 }}>{FmtMoney(item.pricePerDozen)}</div>
                <div style={{ fontSize: 12, color: 'var(--muted)' }}>{t('admin_dessert_card_per_dozen_min', { count: item.minDozens || 1 })}</div>
              </button>
            ))}
          </div>
        )}
      </div>

      <DessertModal
        open={editing !== null}
        dessert={editing?.id ? editing : null}
        categories={dessertCategories}
        onClose={() => setEditing(null)}
        onSave={save}
        onDelete={(id) => { window.LelusaStore.deleteDessert(id); setEditing(null); }}
      />
    </AdminLayout>
  );
}

window.DessertsPage = DessertsPage;
window.DEPARTMENT_LABELS = DEPARTMENT_LABELS;