// ============================
// LELUSA — Admin Mobile Kit
// src/components/admin-mobile.jsx
// ============================

// AdminListRow: compact touch row replacing a table row on mobile.
// props: { icon, iconColor, title, subtitle, value, valueColor, badge, badgeColor, onClick }
function AdminListRow({ icon, iconColor = 'var(--primary)', title, subtitle, value, valueColor = 'var(--text)', badge, badgeColor = 'var(--muted)', onClick }) {
  return (
    <PressableCard onClick={onClick} hapticMs={onClick ? 8 : 0}
      style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '12px 14px', borderBottom: '1px solid var(--border)', background: 'var(--card)' }}>
      <div style={{ width: '38px', height: '38px', borderRadius: '11px', background: `${typeof iconColor === 'string' && iconColor.startsWith('var') ? 'var(--accent-light)' : iconColor + '18'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name={icon} size={18} color={iconColor} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: '13.5px', fontWeight: 700, color: 'var(--text)', fontFamily: "'DM Sans', sans-serif", whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</div>
        {subtitle && <div style={{ fontSize: '11.5px', color: 'var(--muted)', marginTop: '2px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{subtitle}</div>}
      </div>
      <div style={{ textAlign: 'right', flexShrink: 0 }}>
        {value != null && <div style={{ fontSize: '14px', fontWeight: 700, color: valueColor, fontFamily: "'Cormorant Garamond', serif" }}>{value}</div>}
        {badge && <div style={{ fontSize: '10px', fontWeight: 700, color: badgeColor, marginTop: '3px', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{badge}</div>}
      </div>
    </PressableCard>
  );
}

// AdminListSkeleton: N skeleton rows for loading states.
function AdminListSkeleton({ rows = 6 }) {
  return (
    <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: '16px', overflow: 'hidden' }}>
      {Array(rows).fill(0).map((_, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '12px 14px', borderBottom: i < rows - 1 ? '1px solid var(--border)' : 'none' }}>
          <Skeleton width={38} height={38} radius={11} />
          <div style={{ flex: 1 }}>
            <Skeleton height={14} width="55%" style={{ marginBottom: '7px' }} />
            <Skeleton height={11} width="35%" />
          </div>
          <Skeleton height={16} width={48} />
        </div>
      ))}
    </div>
  );
}

// Sections for the admin drawer + bottom nav (mirrors AdminSidebar).
const ADMIN_SECTIONS = [
  { icon: 'barChart',   labelKey: 'admin_dashboard', page: 'admin-dashboard' },
  { icon: 'fileText',   labelKey: 'admin_quotes',    page: 'admin-quotes'    },
  { icon: 'grid',       labelKey: 'admin_designs',   page: 'admin-designs'   },
  { icon: 'sparkles',   labelKey: 'admin_desserts',  page: 'admin-desserts'  },
  { icon: 'calendar',   labelKey: 'admin_calendar',  page: 'admin-calendar'  },
  { icon: 'mail',       labelKey: 'admin_email',     page: 'admin-email'     },
  { icon: 'trendingUp', labelKey: 'admin_finance',   page: 'admin-finance'   },
  { icon: 'package',    labelKey: 'admin_inventory', page: 'admin-inventory' },
  { icon: 'grid',       labelKey: 'admin_postera',   page: 'admin-postera'   },
  { icon: 'clients',    labelKey: 'admin_team',      page: 'admin-team'      },
  { icon: 'settings',   labelKey: 'admin_settings',  page: 'admin-settings'  },
];

// AdminDrawer: BottomSheet listing all 7 sections + logout.
function AdminDrawer({ open, onClose }) {
  const { navigate, currentPage, logoutAdmin, adminUser } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const { haptic } = window.LelusaGestures;
  const adminConfig = (window.LelusaStore?.useSystemSettings?.() || {}).admin || {};
  const go = (page) => { haptic(8); onClose(); navigate(page, {}, 'tab'); };
  const hiddenByConfig = {
    'admin-desserts': adminConfig.showDesserts === false,
    'admin-email': adminConfig.showEmail === false,
    'admin-finance': adminConfig.showFinance === false,
    'admin-inventory': adminConfig.showInventory === false,
    'admin-postera': adminConfig.showPostera === false,
  };
  const sections = ADMIN_SECTIONS.filter(s => !hiddenByConfig[s.page] && window.LelusaAccess?.canAccessPage?.(adminUser, s.page) !== false);
  return (
    <BottomSheet open={open} onClose={onClose} title={t('admin_mobile_all_sections')}>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {sections.map(s => {
          const active = currentPage === s.page || (s.page === 'admin-designs' && currentPage === 'admin-scene-editor');
          return (
            <button key={s.page} type="button" onClick={() => go(s.page)}
              style={{ display: 'flex', alignItems: 'center', gap: '13px', padding: '13px 6px', border: 'none', borderRadius: '12px',
                background: active ? 'var(--accent-light)' : 'transparent', color: active ? 'var(--primary)' : 'var(--text)',
                fontFamily: "'DM Sans', sans-serif", fontSize: '15px', fontWeight: active ? 700 : 500, cursor: 'pointer', textAlign: 'left' }}>
              <Icon name={s.icon} size={20} color={active ? 'var(--primary)' : 'var(--muted)'} />
              {t(s.labelKey)}
            </button>
          );
        })}
        <div style={{ height: '1px', background: 'var(--border)', margin: '8px 0' }} />
        <button type="button" onClick={() => { haptic(8); onClose(); logoutAdmin(); }}
          style={{ display: 'flex', alignItems: 'center', gap: '13px', padding: '13px 6px', border: 'none', borderRadius: '12px', background: 'transparent', color: '#C83A3A', fontFamily: "'DM Sans', sans-serif", fontSize: '15px', fontWeight: 600, cursor: 'pointer', textAlign: 'left' }}>
          <Icon name="arrowLeft" size={20} color="#C83A3A" /> {t('admin_mobile_logout')}
        </button>
      </div>
    </BottomSheet>
  );
}

// AdminBottomNav: floating pill, 4 sections + "Más" → drawer. Mobile only.
function AdminBottomNav() {
  const { navigate, currentPage, adminUser } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const { haptic, useIsMobile } = window.LelusaGestures;
  const adminConfig = (window.LelusaStore?.useSystemSettings?.() || {}).admin || {};
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const isMobile = useIsMobile();
  if (!isMobile) return null;

  const go = (page) => { haptic(8); navigate(page, {}, 'tab'); };
  const can = (page) => {
    const hiddenByConfig = {
      'admin-desserts': adminConfig.showDesserts === false,
      'admin-email': adminConfig.showEmail === false,
      'admin-finance': adminConfig.showFinance === false,
      'admin-inventory': adminConfig.showInventory === false,
      'admin-postera': adminConfig.showPostera === false,
    };
    return !hiddenByConfig[page] && window.LelusaAccess?.canAccessPage?.(adminUser, page) !== false;
  };
  const item = (label, icon, active, onClick) => (
    <button type="button" onClick={onClick} className="lel-bn-item" style={{ color: active ? 'var(--primary)' : 'var(--muted)' }}>
      <Icon name={icon} size={21} color={active ? 'var(--primary)' : 'var(--muted)'} strokeWidth={active ? 2 : 1.6} />
      <span>{label}</span>
    </button>
  );

  return (
    <>
      <div className="lel-bn-wrap">
        <div className="lel-bn-pill">
          {item(t('admin_mobile_home'), 'barChart', currentPage === 'admin-dashboard', () => go('admin-dashboard'))}
          {can('admin-quotes') && item(t('admin_mobile_quotes_short'), 'fileText', currentPage === 'admin-quotes', () => go('admin-quotes'))}
          {can('admin-calendar') && item(t('admin_mobile_agenda'), 'calendar', currentPage === 'admin-calendar', () => go('admin-calendar'))}
          {can('admin-desserts') && item(t('admin_desserts'), 'sparkles', currentPage === 'admin-desserts', () => go('admin-desserts'))}
          {item(t('admin_mobile_more'), 'menu', drawerOpen, () => { haptic(8); setDrawerOpen(true); })}
        </div>
      </div>
      <AdminDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} />
    </>
  );
}

window.AdminBottomNav = AdminBottomNav;
window.AdminListRow = AdminListRow;
window.AdminListSkeleton = AdminListSkeleton;