Mode switcher

'use client';

import * as React from 'react';
import { type Mode, ModeSwitcher } from './mode-switcher';

const icon = (path: React.ReactNode) => (
  <svg
    aria-hidden="true"
    viewBox="0 0 14 14"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    {path}
  </svg>
);

const MODES: Mode[] = [
  {
    value: 'fast',
    label: 'Fast',
    description: 'Quick answers for simple questions',
    icon: icon(<path d="M7.75 1.5 2.5 8h4l-.5 4.5L11.5 6h-4z" />),
  },
  {
    value: 'thinking',
    label: 'Thinking',
    description: 'Slower answers that reason step by step',
    icon: icon(
      <>
        <path d="M5.5 2.5 6.6 5.4 9.5 6.5 6.6 7.6 5.5 10.5 4.4 7.6 1.5 6.5 4.4 5.4z" />
        <path d="M10.75 8.5v3M9.25 10h3M10.5 1.5v2M9.5 2.5h2" />
      </>,
    ),
  },
  {
    value: 'research',
    label: 'Research',
    description: 'Deep answers that search many sources',
    locked: true,
    icon: icon(
      <>
        <circle cx="7" cy="7" r="5.5" />
        <path d="M1.5 7h11M7 1.5c1.6 1.6 2.4 3.4 2.4 5.5S8.6 10.9 7 12.5C5.4 10.9 4.6 9.1 4.6 7S5.4 3.1 7 1.5z" />
      </>,
    ),
  },
];

const SCRIPT: [at: number, step: 'fast' | 'thinking' | 'research'][] = [
  [500, 'fast'],
  [1900, 'thinking'],
  [3300, 'research'],
  [5600, 'fast'],
];

export default function ModeSwitcherDemo({ replay = 0 }: { replay?: number }) {
  const [value, setValue] = React.useState('thinking');
  const [note, setNote] = React.useState(false);
  const timers = React.useRef<number[]>([]);
  const noteTimer = React.useRef(0);

  const showNote = React.useCallback(() => {
    setNote(true);
    window.clearTimeout(noteTimer.current);
    noteTimer.current = window.setTimeout(() => setNote(false), 2000);
  }, []);

  // Replay chooses Fast, then Thinking, then presses Research (a locked mode, so it only shows a note), then Fast.
  React.useEffect(() => {
    if (replay === 0) return;
    for (const id of timers.current) window.clearTimeout(id);
    timers.current = SCRIPT.map(([at, step]) =>
      window.setTimeout(() => (step === 'research' ? showNote() : setValue(step)), at),
    );
    return () => {
      for (const id of timers.current) window.clearTimeout(id);
      window.clearTimeout(noteTimer.current);
    };
  }, [replay, showNote]);

  return (
    <div className="flex w-full max-w-[420px] flex-col items-start gap-3 rounded-xl border border-secondary bg-primary p-6">
      <ModeSwitcher
        modes={MODES}
        value={value}
        showDescription
        onValueChange={setValue}
        onLockedSelect={showNote}
      />
      <p role="status" className="min-h-5 text-xs text-tertiary">
        {note ? 'Research is not on your plan.' : ''}
      </p>
    </div>
  );
}