/* States-specific helpers — pulse-animation, skeleton primitives,
   error/offline bars, offline-card.  Builds on foundation-shared. */

/* Inject keyframes once */
(function () {
  if (document.getElementById('states-keyframes')) return;
  const s = document.createElement('style');
  s.id = 'states-keyframes';
  s.textContent = `
    @keyframes statesPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }
    @keyframes statesShimmer {
      0% { background-position: -200px 0 }
      100% { background-position: calc(200px + 100%) 0 }
    }
  `;
  document.head.appendChild(s);
})();

/* ─── Skeleton — shimmer rectangle ─── */
function Skel({ t, w = '100%', h = 14, r = 6, style }) {
  const base = t.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.06)';
  const hi   = t.mode === 'dark' ? 'rgba(255,255,255,0.12)' : 'rgba(15,23,42,0.10)';
  return (
    <div style={{
      width: w, height: h, borderRadius: r,
      background: `linear-gradient(90deg, ${base} 0%, ${hi} 50%, ${base} 100%)`,
      backgroundSize: '200px 100%',
      animation: 'statesShimmer 1.6s ease-in-out infinite',
      ...style,
    }} />
  );
}

/* ─── SkeletonCard — placeholder for TaskCard ─── */
function SkelTaskCard({ t }) {
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 14, padding: 14,
      display: 'flex', flexDirection: 'column', gap: 8,
      boxShadow: t.shadowCard,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Skel t={t} w={68} h={20} r={999} />
        <Skel t={t} w={56} h={11} />
      </div>
      <Skel t={t} w="86%" h={14} />
      <Skel t={t} w="62%" h={12} />
      <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
        <Skel t={t} w={120} h={32} r={10} />
      </div>
    </div>
  );
}

/* ─── SkelTaskBlock — week-view variant (compact w/ left border) ─── */
function SkelTaskBlock({ t }) {
  return (
    <div style={{
      background: t.card, borderRadius: 12,
      border: `1px solid ${t.border}`,
      borderLeft: `4px solid ${t.cardSunken}`,
      padding: '11px 12px 11px 10px',
      display: 'flex', flexDirection: 'column', gap: 7,
      boxShadow: t.shadowCard,
    }}>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <Skel t={t} w={60} h={18} r={999} />
        <Skel t={t} w={42} h={10} />
      </div>
      <Skel t={t} w="82%" h={13} />
      <Skel t={t} w="46%" h={11} />
    </div>
  );
}

/* ─── SkelDeadlineCard — week-view deadline placeholder ─── */
function SkelDeadlineCard({ t }) {
  return (
    <div style={{
      background: t.card, borderRadius: 12,
      border: `1px solid ${t.border}`,
      borderLeft: `4px solid ${t.cardSunken}`,
      padding: 14, display: 'flex', flexDirection: 'column', gap: 9,
      boxShadow: t.shadowCard,
    }}>
      <div style={{ display: 'flex', gap: 8 }}>
        <Skel t={t} w={50} h={20} r={999} />
        <Skel t={t} w={70} h={11} />
      </div>
      <Skel t={t} w="78%" h={15} />
      <Skel t={t} w="40%" h={11} />
      <Skel t={t} w="100%" h={6} r={999} />
    </div>
  );
}

/* ─── SkelMiniWeekStrip — placeholder dots variant ─── */
function SkelMiniWeekStrip({ t, headerLabel = 'Week 17' }) {
  const dayLabels = ['MA','DI','WO','DO','VR','ZA','ZO'];
  return (
    <div style={{
      background: t.card, borderBottom: `1px solid ${t.border}`,
      padding: '8px 12px 10px', flexShrink: 0,
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 12,
          color: t.fg, letterSpacing: 0.3,
        }}>{headerLabel}</span>
        <div style={{ flex: 1 }} />
        <Skel t={t} w={100} h={16} r={999} />
      </div>
      <div style={{ display: 'flex', gap: 4 }}>
        {dayLabels.map((d, i) => (
          <div key={i} style={{
            flex: 1, minHeight: 50, borderRadius: 10,
            background: t.cardSunken, border: `1px solid ${t.border}`,
            padding: '6px 4px', display: 'flex', flexDirection: 'column',
            alignItems: 'center', gap: 4,
          }}>
            <span style={{
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 9,
              color: t.fgDim, letterSpacing: 0.6,
            }}>{d}</span>
            <Skel t={t} w={18} h={14} />
            <div style={{ display: 'flex', gap: 2, marginTop: 2 }}>
              {[0,1,2].map(k => (
                <span key={k} style={{
                  width: 4, height: 4, borderRadius: 999,
                  background: t.mode === 'dark' ? 'rgba(255,255,255,0.12)' : 'rgba(15,23,42,0.12)',
                  animation: 'statesPulse 1.6s ease-in-out infinite',
                  animationDelay: `${k * 0.15}s`,
                }} />
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─── SkelSegmented — segmented switcher placeholder counts ─── */
function SkelSegmented({ t, active = 0 }) {
  const tabs = ['Vandaag', 'Morgen', 'Deadlines'];
  return (
    <div style={{
      background: t.card, borderBottom: `1px solid ${t.border}`,
      padding: '8px 12px', flexShrink: 0,
    }}>
      <div style={{
        display: 'flex', gap: 4, padding: 3, borderRadius: 999,
        background: t.cardSunken, border: `1px solid ${t.border}`,
      }}>
        {tabs.map((tab, i) => {
          const on = i === active;
          return (
            <div key={i} style={{
              flex: 1, height: 32, borderRadius: 999,
              background: on ? t.card : 'transparent',
              boxShadow: on ? t.shadowCard : 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
              fontFamily: 'Nunito', fontWeight: on ? 800 : 600, fontSize: 12,
              color: on ? t.fg : t.fgDim,
            }}>
              <span>{tab}</span>
              <span style={{ color: t.fgFaint }}>· …</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ─── SkelMaandGrid — N weeks × 7 days, all skeleton cells ─── */
function SkelMaandGrid({ t, weeks = 5 }) {
  const DOW = ['MA','DI','WO','DO','VR','ZA','ZO'];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4,
      }}>
        {DOW.map((d, i) => (
          <div key={i} style={{
            textAlign: 'center', padding: '4px 0',
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 10,
            color: t.fgDim, letterSpacing: 0.8,
          }}>{d}</div>
        ))}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {Array.from({ length: weeks }).map((_, wi) => (
          <div key={wi} style={{
            display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4,
          }}>
            {Array.from({ length: 7 }).map((_, di) => (
              <div key={di} style={{
                minHeight: 56, borderRadius: 8,
                background: t.mode === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.04)',
                border: `1px solid ${t.border}`,
                animation: 'statesPulse 1.8s ease-in-out infinite',
                animationDelay: `${(wi * 7 + di) * 0.04}s`,
              }} />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─── PulseToast — small floating toast above bottom-nav ─── */
function PulseToast({ t, body = 'Je planning wordt geladen…' }) {
  return (
    <div style={{
      position: 'absolute', right: 14, bottom: 88, zIndex: 4,
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 14, padding: '10px 12px 10px 10px',
      boxShadow: t.shadowElevated || '0 10px 28px rgba(0,0,0,0.18)',
      display: 'flex', alignItems: 'center', gap: 8,
      maxWidth: 240,
    }}>
      <PulseMascotImg size={32} mood="thinking" />
      <div style={{
        fontFamily: 'Nunito', fontWeight: 600, fontSize: 12,
        color: t.fg, lineHeight: 1.35,
      }}>{body}</div>
    </div>
  );
}

/* ─── OfflineBar — sticky warn bar ─── */
function OfflineBar({ t }) {
  return (
    <div style={{
      height: 36, padding: '0 14px', flexShrink: 0,
      background: hexToRgba(t.warn, 0.14),
      borderBottom: `1px solid ${hexToRgba(t.warn, 0.30)}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    }}>
      <MI name="wifi-off" size={14} color={t.warnFg} strokeWidth={2.4} />
      <span style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5,
        color: t.warnFg, letterSpacing: 0.2,
      }}>Geen internet — je ziet je laatste plannen</span>
    </div>
  );
}

/* ─── OfflineCard — vervangt Pulse-card op offline-vandaag ─── */
function OfflineCard({ t }) {
  return (
    <div style={{
      background: t.cardSunken, border: `1px solid ${t.border}`,
      borderRadius: 14, padding: 14,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 12, flexShrink: 0,
        background: t.card, border: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="cloud-off" size={20} color={t.fgDim} strokeWidth={2.2} /></div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 500, fontSize: 12.5,
        color: t.fgDim, lineHeight: 1.45, flex: 1,
      }}>Wijzigingen worden gesynchroniseerd zodra je weer online bent.</div>
    </div>
  );
}

/* ─── SaveErrorBanner — sticky destructive banner with retry ─── */
function SaveErrorBanner({ t }) {
  return (
    <div style={{
      flexShrink: 0,
      background: hexToRgba(t.red, 0.12),
      borderTop: `1px solid ${hexToRgba(t.red, 0.30)}`,
      borderBottom: `1px solid ${hexToRgba(t.red, 0.30)}`,
      padding: '10px 14px',
      display: 'flex', alignItems: 'center', gap: 10,
      boxShadow: `0 2px 6px ${hexToRgba(t.red, 0.10)}`,
    }}>
      <MI name="alert-triangle" size={18} color={t.redFg} strokeWidth={2.4} />
      <div style={{
        flex: 1, minWidth: 0,
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 12.5,
        color: t.fg, lineHeight: 1.3,
      }}>Kon niet opslaan. Probeer opnieuw.</div>
      <button style={{
        height: 30, padding: '0 12px', borderRadius: 8, flexShrink: 0,
        background: t.red, color: '#FFFFFF', border: 'none', cursor: 'pointer',
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5, letterSpacing: 0.2,
        display: 'inline-flex', alignItems: 'center', gap: 4,
      }}><MI name="rotate-cw" size={13} color="#FFFFFF" strokeWidth={2.6} />Opnieuw</button>
    </div>
  );
}

Object.assign(window, {
  Skel, SkelTaskCard, SkelTaskBlock, SkelDeadlineCard,
  SkelMiniWeekStrip, SkelSegmented, SkelMaandGrid,
  PulseToast, OfflineBar, OfflineCard, SaveErrorBanner,
});