/**
 * سوییچ کشویی نمای نوبت‌ها — بازسازی `TurnsViewModeToggle.jsx` طرح tauri
 * (پس‌زمینهٔ لغزنده، متن فعال #5559ce).
 *
 * منابع نمای جدا ندارند: ردیفشان درون همان نمای «زمانبندی» می‌آید، چون پرشدن یک ساعت
 * را دستگاه و اتاق تعیین می‌کنند نه فقط برنامهٔ پزشک — و دیدنشان جدا از هم یعنی کاربر
 * باید دو نما را با چشم تطبیق دهد.
 */
export type TurnsViewMode = 'table' | 'timeline';

const MODES: { id: TurnsViewMode; label: string }[] = [
  { id: 'table', label: 'نمایش جدولی' },
  { id: 'timeline', label: 'زمانبندی' },
];

export default function TurnsViewToggle({
  viewMode, onChange,
}: {
  viewMode: TurnsViewMode;
  onChange: (m: TurnsViewMode) => void;
}) {
  const index = Math.max(MODES.findIndex((m) => m.id === viewMode), 0);
  const width = 100 / MODES.length;

  return (
    <div
      role="tablist"
      aria-label="نمای نوبت‌ها"
      style={{
        position: 'relative', width: 193, height: 44, display: 'flex', overflow: 'hidden',
        border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', background: 'var(--surface)',
      }}
    >
      {/* پس‌زمینهٔ لغزنده — RTL، پس اولین حالت سمت راست است */}
      <div style={{
        position: 'absolute', top: 0, right: 0, height: '100%', width: `${width}%`,
        background: 'var(--primary-soft)', transition: 'transform .3s var(--ease)',
        transform: `translateX(${index * -100}%)`,
      }} />

      {MODES.map((m, i) => (
        <div key={m.id} style={{ display: 'contents' }}>
          {i > 0 && (
            <div style={{ position: 'relative', zIndex: 1, width: 1, height: '100%', background: 'var(--border)' }} />
          )}
          <button
            type="button"
            role="tab"
            aria-selected={viewMode === m.id}
            onClick={() => onChange(m.id)}
            style={{
              position: 'relative', zIndex: 1, flex: 1, height: '100%', border: 'none',
              background: 'transparent', cursor: 'pointer', fontFamily: 'inherit',
              fontSize: 13, fontWeight: 500,
              color: viewMode === m.id ? 'var(--primary)' : 'var(--text-3)',
            }}
          >
            {m.label}
          </button>
        </div>
      ))}
    </div>
  );
}