/* global React, Icon, I, ACCENT */

// ── Shared state components ──────────────────────────────────────────────────
// EmptyFirstUse / EmptyFiltered / ErrorState / ListSkeleton
// Use these for every list view; do not roll a one-off.

const StateShell = ({ children, tone = 'neutral', minHeight = 320 }) => (
  <div className="surface" style={{
    minHeight,
    padding: '48px 32px',
    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
    textAlign: 'center', gap: 16,
  }}>
    {children}
  </div>
);

const StateIcon = ({ tone, glyph }) => {
  const c = ACCENT[tone];
  return (
    <div style={{
      width: 48, height: 48, borderRadius: 12,
      background: `color-mix(in oklab, ${c} 14%, transparent)`,
      color: c,
      border: '1px solid ' + `color-mix(in oklab, ${c} 28%, transparent)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <Icon d={glyph} size={20} />
    </div>
  );
};

// First-use empty: no data has ever existed. CTA to create the first item.
function EmptyFirstUse({ title, body, ctaLabel, onCta, secondaryLabel, onSecondary, glyph, tone = 'info' }) {
  return (
    <StateShell tone={tone}>
      <StateIcon tone={tone} glyph={glyph || I.bolt} />
      <div style={{ maxWidth: 440 }}>
        <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{title}</div>
        <div className="t-body" style={{ color: 'var(--text-secondary)', lineHeight: 1.55 }}>{body}</div>
      </div>
      <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
        {ctaLabel && (
          <button className="btn btn-primary" onClick={onCta}>
            {ctaLabel}
          </button>
        )}
        {secondaryLabel && (
          <button className="btn" onClick={onSecondary}>{secondaryLabel}</button>
        )}
      </div>
    </StateShell>
  );
}

// Filtered empty: data exists but the current filter hides everything.
function EmptyFiltered({ subject = 'cases', onClearFilters }) {
  return (
    <StateShell tone="neutral" minHeight={220}>
      <StateIcon tone="neutral" glyph={I.filter} />
      <div style={{ maxWidth: 360 }}>
        <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>
          No {subject} match your current filters
        </div>
        <div className="t-body" style={{ color: 'var(--text-secondary)' }}>
          Try widening your filter, or clear all filters to see the full list.
        </div>
      </div>
      <button className="btn" onClick={onClearFilters}>Clear filters</button>
    </StateShell>
  );
}

// Error: fetch failed. Human description, no HTTP code, "Try again" → refetch.
function ErrorState({ resource = 'data', onRetry, detail }) {
  return (
    <StateShell tone="danger" minHeight={280}>
      <StateIcon tone="danger" glyph={I.alert} />
      <div style={{ maxWidth: 440 }}>
        <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>
          We couldn't load this {resource}
        </div>
        <div className="t-body" style={{ color: 'var(--text-secondary)', lineHeight: 1.55 }}>
          The request didn't complete. Your data is safe — nothing has been changed. Try again, and if the issue persists, contact your lab administrator.
        </div>
        {detail && (
          <div className="t-meta" style={{ marginTop: 8, opacity: 0.7 }}>{detail}</div>
        )}
      </div>
      <button className="btn btn-primary" onClick={onRetry}>
        <Icon d={I.bolt} size={13} />Try again
      </button>
    </StateShell>
  );
}

// Skeleton list that matches the populated layout
function ListSkeleton({ rows = 5, cols = [180, 240, 80, 120], height = 220 }) {
  return (
    <div className="surface" style={{ padding: 0, overflow: 'hidden' }}>
      <table className="cx" style={{ tableLayout: 'fixed', width: '100%' }}>
        <colgroup>{cols.map((w, i) => <col key={i} style={{ width: w === 'auto' ? 'auto' : w }} />)}</colgroup>
        <thead>
          <tr>{cols.map((_, i) => (
            <th key={i} style={{ background: 'var(--bg-raised)' }}>
              <div className="skeleton" style={{ height: 8, width: '60%' }} />
            </th>
          ))}</tr>
        </thead>
        <tbody>
          {Array.from({ length: rows }).map((_, r) => (
            <tr key={r}>
              {cols.map((w, c) => (
                <td key={c}>
                  <div className="skeleton" style={{ height: 10, width: typeof w === 'number' ? Math.min(w - 24, 160) : '70%', marginBottom: 6 }} />
                  {c === 0 && (
                    <div className="skeleton" style={{ height: 8, width: 80 }} />
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Object.assign(window, { EmptyFirstUse, EmptyFiltered, ErrorState, ListSkeleton });