Model picker

'use client';

import * as React from 'react';
import { type ModelOption, ModelPicker } from './model-picker';

const MODELS: ModelOption[] = [
  {
    id: 'pro',
    name: 'Lumen 2 Pro',
    description: 'Best for hard, long tasks',
    speed: 1,
    intelligence: 3,
    reasoning: true,
  },
  {
    id: 'orbit',
    name: 'Orbit 5',
    description: 'Fast and smart for most work',
    speed: 2,
    intelligence: 2,
    reasoning: true,
  },
  { id: 'lumen', name: 'Lumen 2', description: 'Strong at code and reasoning', speed: 2, intelligence: 3 },
  {
    id: 'atlas',
    name: 'Atlas Fast',
    description: 'Quick answers to simple questions',
    speed: 3,
    intelligence: 1,
  },
];

const PERMISSIONS: ModelOption[] = [
  { id: 'auto', name: 'Auto', description: 'Asks only before risky steps' },
  { id: 'ask', name: 'Ask first', description: 'Asks you before each change' },
  { id: 'plan', name: 'Plan only', description: 'Makes a plan and changes nothing' },
  { id: 'full', name: 'Full access', description: 'Runs every step without asking' },
];

/** Own 16px marks for the demo options. */
const MARKS: Record<string, string> = {
  pro: 'M6.667 2 7.6 5.067 10.667 6 7.6 6.933 6.667 10 5.733 6.933 2.667 6l3.066-.933zM11.667 9.333l.5 1.5 1.5.5-1.5.5-.5 1.5-.5-1.5-1.5-.5 1.5-.5z',
  orbit: 'M8 1.667 13.5 4.833v6.334L8 14.333 2.5 11.167V4.833z',
  lumen: 'M8 2.333 9.25 6.75 13.667 8 9.25 9.25 8 13.667 6.75 9.25 2.333 8 6.75 6.75z',
  atlas: 'M8.667 1.333 2.667 9.333H8l-.667 5.334 6-8H8z',
  auto: 'M2.667 11.333a5.333 5.333 0 1 1 10.666 0M8 11.333l2.667-3.333',
  ask: 'M5.333 9.333V3.667a1 1 0 0 1 2 0v3.666M7.333 7V2.667a1 1 0 0 1 2 0V7M9.333 7.333V4a1 1 0 0 1 2 0v4.667a4.667 4.667 0 0 1-4.666 4.666c-1.6 0-2.734-.766-3.534-2.066L2.4 9.267a1 1 0 0 1 1.667-1.1l1.266 1.5',
  plan: 'M5.333 4h8M5.333 8h8M5.333 12h8M2.667 4h.007M2.667 8h.007M2.667 12h.007',
  full: 'M8 14.667s5.333-2.667 5.333-6.667V3.333L8 1.333 2.667 3.333V8c0 4 5.333 6.667 5.333 6.667',
};

function Mark({ option }: { option: ModelOption }) {
  return (
    <svg
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d={MARKS[option.id]} />
    </svg>
  );
}

// Replay: open the model list, move the highlight down two rows and back, then close.
const SCRIPT: [number, string][] = [
  [0, 'open'],
  [700, 'ArrowDown'],
  [1050, 'ArrowDown'],
  [1400, 'ArrowUp'],
  [2000, 'Escape'],
];

export default function ModelPickerDemo({ replay = 0 }: { replay?: number }) {
  const [model, setModel] = React.useState('pro');
  const [effort, setEffort] = React.useState('High');
  const [permission, setPermission] = React.useState('ask');
  const rootRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (replay === 0) return;
    const root = rootRef.current;
    const timers = SCRIPT.map(([at, step]) =>
      window.setTimeout(() => {
        const picker = root?.querySelector('[data-slot="model-picker"]');
        if (step === 'open') {
          const trigger = picker?.querySelector<HTMLButtonElement>('button[aria-haspopup]');
          if (trigger?.getAttribute('aria-expanded') !== 'true') trigger?.click();
          return;
        }
        picker
          ?.querySelector('[role="listbox"]')
          ?.dispatchEvent(new KeyboardEvent('keydown', { key: step, bubbles: true }));
      }, at),
    );
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div ref={rootRef} className="flex min-h-96 w-full flex-col justify-end">
      <div className="mx-auto flex w-full max-w-md items-center gap-1 rounded-2xl border border-secondary bg-primary_alt p-1.5 shadow-xs">
        <ModelPicker
          models={MODELS}
          value={model}
          effort={effort}
          onValueChange={setModel}
          onEffortChange={setEffort}
          renderIcon={(option) => <Mark option={option} />}
        />
        <ModelPicker
          models={PERMISSIONS}
          value={permission}
          label="Permission"
          onValueChange={setPermission}
          renderIcon={(option) => <Mark option={option} />}
        />
      </div>
    </div>
  );
}