claudelingo

  on('ui.render', { component: 'Pane', requestId: SETTINGS_PANE }, settingsPaneDrawn)

export const settingsPaneDrawn: MatchedHook<'ui.render', { component: 'Pane'; requestId: typeof SETTINGS_PANE }> = async ($, e) => {
  const settings = await settingsOf($)
  const w = LingoSettings.wording(settings.native)
  // スマホには入力欄がないので、開く場所を案内する
  if (e.surface === 'mobile') {
    const { Text } = $.ui.resolve(e)
    return <Text dimColor>{w.openElsewhere}</Text>
  }
  const t = $.ui.resolve(e)
  const isTerminal = e.surface === 'terminal'
  // 設定の下に、書いた語の草
  const grass = grassGraph(t, w, isTerminal, Grass.of(await $.store.get('words'), Grass.day(await $.clock.now())), e.props.bodyColumns)
  return settingsPane(t, w, isTerminal, settings, await read($, denied), await read($, saved), (field, value) => void changeSetting($, field, value), grass)
}

export const settingsPane = (t: Elements[Exclude<keyof Elements, 'mobile'>], w: Wording, isTerminal: boolean, settings: Settings, denied: string, saved: string, save: Save, grass: RenderElement) => {
  const { Box, Text, Button, Input, Select } = t
  const room = isTerminal ? 0 : 1
  const check = (key: keyof Settings) => saved === key && <Box flexShrink={0}><Text color="success">✓</Text></Box>
  const field = (label: string, key: keyof Settings, control: RenderElement) => (
    <Box alignItems="center" gap={1} paddingLeft={2}>
      <Box width={12} flexShrink={0}><Text dimColor>{label}</Text></Box>
      {control}
      {check(key)}
    </Box>
  )
  const group = (title: string, key: Switch | null, ...fields: RenderElement[]) => {
    const on = key === null || settings[key]
    return (
      <Box flexDirection="column" gap={room}>
        <Box alignItems="center" gap={1}><Box width={14} flexShrink={0}><Text bold dimColor={!on}>{title}</Text></Box>{key && onOff(key)}</Box>
        {on && fields}
      </Box>
    )
  }
  const onOff = (key: Switch) => (
    <Box alignItems="center" gap={2}>
      <Box flexShrink={0}>{settings[key] ? <Text color="success">{`● ${w.on}`}</Text> : <Text dimColor>{`○ ${w.off}`}</Text>}</Box>
      <Button key={key} label={settings[key] ? w.turnOff : w.turnOn} variant="secondary" onPress={() => save(key, !settings[key])} />
      {check(key)}
    </Box>
  )
  const model = (key: 'model' | 'liveModel' | 'cardModel') => field(w.model, key, <Select key={key} options={LingoSettings.models().map(value => ({ value }))} value={settings[key]} onSelect={value => save(key, value)} />)
  const nudge = (by: 1 | -1, label: string) => <Button key={`livePause-${label}`} label={label} variant="secondary" onPress={() => save('livePause', LingoSettings.step(settings.livePause, by))} />
  // 欄は数が収まる幅だけ取る。狭い面では折り返す
  const pause = (
    <Box alignItems="center" gap={1} flexWrap="wrap">
      {nudge(-1, '-')}
      <Box width={6} flexShrink={0} flexDirection="column"><Input key="livePause" value={settings.livePause} onSubmit={v => save('livePause', LingoSettings.pause(v, settings.livePause))} /></Box>
      <Text>{w.seconds}</Text>{nudge(1, '+')}
    </Box>
  )
  const text = (field: 'native' | 'target' | 'voice', placeholder?: string) => <Box width={28} minWidth={0} flexShrink={1} flexDirection="column"><Input key={field} value={settings[field]} placeholder={placeholder} onSubmit={v => save(field, LingoSettings.entered(field, v, settings[field]))} /></Box>
  // 欄は minWidth 0 で狭い面に合わせて縮む。レベルは自由記述なので残りの幅を使い、書く粒度（できること・苦手なこと）を例で見せる
  const level = <Box flexGrow={1} minWidth={0} flexDirection="column"><Input key="level" value={settings.level} placeholder={w.levelExample} onSubmit={v => save('level', v)} /></Box>
  return (
    <Box flexDirection="column" gap={room} paddingX={room * 2} paddingY={room}>
      {group('claudelingo', 'enabled')}
      {settings.enabled && [
        // 基本のモデルは送った後の訳のほか、返事の訳・発音記号・コーチ・例文などにも使うので、いつも見える所に
        group(w.basics, null, field(w.native, 'native', text('native')), field(w.target, 'target', text('target')), field(w.level, 'level', level), model('model')),
        group(w.afterSend, 'afterSend'),
        group(w.live, 'live', model('liveModel'), field(w.pause, 'livePause', pause)),
        group(w.card, 'card', model('cardModel')),
        group(w.readAloud, null, field(w.voice, 'voice', text('voice', w.voiceHint))),
        grass,
      ]}
      {denied && <Text color="error">{w.saveFailed(denied)}</Text>}
    </Box>
  )
}

  on('ui.render', { component: 'AbovePrompt' }, abovePrompt)

export const abovePrompt: MatchedHook<'ui.render', { component: 'AbovePrompt' }> = async ($, e, next) => {
  if (e.props.hasSurvey) return next(e)
  // 入力欄の上の帯は端末と Desktop にしかない
  const t = $.ui.resolve(e) as Parameters<typeof practiceBand>[0]
  const settings = await settingsOf($)
  const band = await draftBandOf($, t, e.surface === 'terminal', settings)
  const opened = await read($, practice)
  if (!opened || !settings.enabled) return band ?? next(e)
  // 欄の文は打つたびに残す（描き直しで消えないように）。描き直しはしない
  const hands = { keep: (text: string) => void update($, practice, now => SpeakingPractice.kept(now, text)), hear: (heard: string) => void hear($, heard), say: () => void say($, [opened.sample]), again: () => void showPractice($, SpeakingPractice.again), help: (text: string) => $.ui.toast(text, { timeoutMs: 15000 }), close: () => void showPractice($, () => null) }
  const { Box } = t
  return <Box flexDirection="column" gap={1}>{practiceBand(t, LingoSettings.wording(settings.native), e.surface === 'terminal', opened, SpeakingPractice.shown(settings.native, opened.coach), hands, (await read($, speaking))[opened.sample] ?? 0)}{band}</Box>
}

export const practiceBand = (t: Elements[Exclude<keyof Elements, 'mobile'>], w: Wording, isTerminal: boolean, practice: Practice, coached: Coached, hands: Hands, playing = 0) => {
  const { Box, Button, Input, Markdown, Text } = t
  const head = (text: string) => <Box width={8} flexShrink={0}><Text dimColor bold>{text}</Text></Box>
  return (
    <Box flexDirection="column" gap={isTerminal ? 0 : 1} paddingRight={isTerminal ? 4 : 0}>
      <Box justifyContent="space-between">
        <Box gap={1}>{head(w.sample)}<Text>{practice.sample}</Text>{practice.pron && <Text dimColor italic>{practice.pron}</Text>}</Box>
        <Button key="practice-close" label="✕" plain dimColor role="dismiss" onPress={hands.close} />
      </Box>
      <Box gap={1}>
        {head(w.attempt)}
        <Input key="practice" placeholder={`${isTerminal ? w.toField : ''}${w.speakAndEnter}`} value={practice.heard ?? ''} autoFocus onInput={hands.keep} onSubmit={hands.hear} />
        {/* 声は手元の音声入力で欄に入れる（mods にマイクはない）。その案内は ? のホバーと押下で出す */}
        {glyph(t, 'practice-help', '?', w.voiceHelp, () => hands.help(w.voiceHelp))}
      </Box>
      {typeof coached === 'string' && (practice.coach === null ? ticker(t, isTerminal, 'practice-listening', 'wait', coached) : <Text dimColor>{coached}</Text>)}
      {typeof coached === 'object' && (
        <Box flexDirection="column">
          <Box gap={1}>
            {head(w.heard)}
            <Text>{Restatements.parts(coached.restated).map((part, i) => (i % 2 ? <Text color="error" underline>{part}</Text> : <Text>{part}</Text>))}</Text>
          </Box>
          {coached.tips.map(tip => <Markdown dimColor text={`💡 ${tip}`} />)}
        </Box>
      )}
      <Box gap={1}>
        <Button key="practice-speak" label={`🔊 ${w.sample}`} onPress={hands.say} />
        {playing > 0 && ticker(t, isTerminal, 'practice-sound', 'sound', playing > 1 ? `×${playing}` : '')}
        <Button key="practice-again" label={w.again} onPress={hands.again} />
      </Box>
    </Box>
  )
}