import * as React from 'react';

import { FormControl, ListDivider, Switch } from '@mui/joy';
import CodeIcon from '@mui/icons-material/Code';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
import WarningRoundedIcon from '@mui/icons-material/WarningRounded';

import type { DModelDomainId } from '~/common/stores/llms/model.domains.types';
import { AIVndAntInlineFilesPolicy, useAIPreferencesStore } from '~/common/stores/store-ai';
import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
import { FormSelectControl, FormSelectOption } from '~/common/components/forms/FormSelectControl';
import { useLLMSelect } from '~/common/components/forms/useLLMSelect';
import { useModelDomain } from '~/common/stores/llms/hooks/useModelDomain';

import type { ChatThinkingPolicy, TokenCountingMethod } from '../chat/store-app-chat';
import { useChatAutoAI } from '../chat/store-app-chat';


const _keepThinkingBlocksOptions: FormSelectOption<ChatThinkingPolicy>[] = [
  {
    value: 'last-only',
    label: 'Most Recent',
    description: 'Default',
  },
  {
    value: 'all',
    label: 'Preserve All',
    description: 'Keep all traces',
  },
  {
    value: 'discard-all',
    label: 'Discard All',
    description: 'May reduce quality',
  },
] as const;

const _vndAntInlineFilesOptions: FormSelectOption<AIVndAntInlineFilesPolicy>[] = [
  { value: 'off', label: 'Show', description: 'Keep as links' },
  { value: 'inline-file', label: 'Embed', description: 'Default, embed in chat' },
  { value: 'inline-file-and-delete', label: 'Embed + Free', description: 'Embed, then free' },
  { value: 'discard', label: 'Discard', description: 'Free, never embed' },
] as const;

const _tokenCountingMethodOptions: FormSelectOption<TokenCountingMethod>[] = [
  {
    value: 'approximate',
    label: 'Fast',
    description: 'Lightweight: ~90% approximation',
  },
  {
    value: 'accurate',
    label: 'Precise',
    description: 'Accurate tokenizer, heavier',
  },
] as const;


function FormControlDomainModel(props: {
  domainId: DModelDomainId,
  title: React.ReactNode,
  description?: React.ReactNode,
  tooltip?: React.ReactNode,
}) {

  // external state
  const { domainModelId, assignDomainModelId, assignDomainModelAuto, resolvedModelIsAuto, autoModelLabel } = useModelDomain(props.domainId);
  const [_llm, llmComponent] = useLLMSelect(domainModelId, assignDomainModelId, {
    label: '',
    setLlmToAuto: assignDomainModelAuto,
    isLlmAuto: resolvedModelIsAuto,
    autoModelLabel,
  });

  return (
    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
      <FormLabelStart
        title={props.title}
        description={props.description}
        tooltip={props.tooltip}
      />
      {llmComponent}
    </FormControl>
  );
}


export function AppChatSettingsAI() {

  const {
    autoSuggestAttachmentPrompts, setAutoSuggestAttachmentPrompts,
    autoSuggestDiagrams, setAutoSuggestDiagrams,
    autoSuggestHTMLUI, setAutoSuggestHTMLUI,
    // autoSuggestQuestions, setAutoSuggestQuestions,
    autoTitleChat, setAutoTitleChat,
    chatThinkingPolicy, setChatThinkingPolicy,
    tokenCountingMethod, setTokenCountingMethod,
  } = useChatAutoAI();
  const vndAntInlineFiles = useAIPreferencesStore(state => state.vndAntInlineFiles);

  const showModelIcons = false; // useUIComplexityMode() === 'extra';

  // callbacks

  const handleAutoSetChatTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => setAutoTitleChat(event.target.checked);

  const handleAutoSuggestAttachmentPromptsChange = (event: React.ChangeEvent<HTMLInputElement>) => setAutoSuggestAttachmentPrompts(event.target.checked);

  const handleAutoSuggestDiagramsChange = (event: React.ChangeEvent<HTMLInputElement>) => setAutoSuggestDiagrams(event.target.checked);

  const handleAutoSuggestHTMLUIChange = (event: React.ChangeEvent<HTMLInputElement>) => setAutoSuggestHTMLUI(event.target.checked);

  // const handleAutoSuggestQuestionsChange = (event: React.ChangeEvent<HTMLInputElement>) => setAutoSuggestQuestions(event.target.checked);

  return <>

    <FormControlDomainModel
      domainId='codeApply'
      title={!showModelIcons ? 'Coding model' : <><CodeIcon color='primary' sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Coding model</>}
      description='Code tasks'
      tooltip={<>
        Smart <b>code editing</b> model (must support Tool Calls) with great coding skills and not too slow. Used for:
        <ul>
          <li>Diagrams generation</li>
          <li>HTML UI generation</li>
          <li>Forward compatibility</li>
        </ul>
        Ideally select a Sonnet 3.5-class model.
      </>}
    />

    <FormControlDomainModel
      domainId='fastUtil'
      title={!showModelIcons ? 'Utility model' : <><EditRoundedIcon color='primary' sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Utility model</>}
      description='Titles, misc tasks'
      tooltip={<>
        Lightweight model (must support Tool Calls) used for &quot;fast&quot;, low-cost operations, such as:
        <ul>
          <li>Chat title generation</li>
          <li>Attachment prompts</li>
          <li>Drawing prompts</li>
          <li>And more</li>
        </ul>
        For chat messages and similar high-quality content, the chat model is used instead.
      </>}
    />

    <FormControlDomainModel
      domainId='imageCaption'
      title='Vision model'
      description='Image captioning'
      tooltip='Vision model used to generate text descriptions of images when the Caption (Text) attachment option is selected.'
    />

    <FormSelectControl
      title='Token Counting'
      tooltip='Controls how tokens are counted for context limits and pricing estimates.'
      options={_tokenCountingMethodOptions}
      value={tokenCountingMethod}
      onChange={setTokenCountingMethod}
    />

    <FormSelectControl
      title='Reasoning traces'
      tooltip='Controls how AI thinking/reasoning blocks are kept in your chat history. "Most Recent" keeps only the last message traces (default). "Discard All" removes all traces after each response, which may reduce multi-turn quality with some providers.'
      options={_keepThinkingBlocksOptions}
      value={chatThinkingPolicy}
      onChange={setChatThinkingPolicy}
    />

    <FormSelectControl<AIVndAntInlineFilesPolicy>
      title='Anthropic Files'
      tooltip={<>
        When Claude uses tools like code execution, it may produce text and image files stored in Anthropic&apos;s File API. This setting controls whether Big-AGI should automatically download and embed them in the chat.
        <ul>
          <li><b>Show</b>: keep as references.</li>
          <li><b>Embed</b>: download and embed text/images (default).</li>
          <li><b>Embed + Free</b>: embed, then delete from Anthropic to free storage.</li>
          <li><b>Discard</b>: delete from Anthropic without embedding; the file stays in the code sandbox for the model.</li>
        </ul>
        Only affects Anthropic models.
      </>}
      options={_vndAntInlineFilesOptions}
      value={vndAntInlineFiles}
      onChange={useAIPreferencesStore.getState().setVndAntInlineFiles}
    />

    <ListDivider inset='gutter'>Automatic AI Functions</ListDivider>

    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
      <FormLabelStart title='Chat Auto-Title'
                      description={autoTitleChat ? 'Auto' : 'Manual only'}
                      tooltip='[Utility model]  Automatically generates relevant titles for new chat conversations.'
                      tooltipWarning={!autoTitleChat} />
      <Switch checked={autoTitleChat} onChange={handleAutoSetChatTitleChange}
              endDecorator={autoTitleChat ? 'On' : 'Off'}
              slotProps={{ endDecorator: { sx: { minWidth: 26 } } }} />
    </FormControl>

    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
      <FormLabelStart title='Attachment Prompts'
                      description={autoSuggestAttachmentPrompts ? 'Guess Actions' : 'Off'}
                      tooltip={!autoSuggestAttachmentPrompts ? undefined : '[Utility model]  Suggests actions/prompts when attachments are added to the conversation.'} />
      <Switch checked={autoSuggestAttachmentPrompts} onChange={handleAutoSuggestAttachmentPromptsChange}
              endDecorator={autoSuggestAttachmentPrompts ? 'On' : 'Off'}
              slotProps={{ endDecorator: { sx: { minWidth: 26 } } }} />
    </FormControl>


    <ListDivider inset='gutter'>Auto-augment Messages</ListDivider>

    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
      <FormLabelStart title='Generative Diagrams'
                      description={autoSuggestDiagrams ? 'Add Diagrams' : 'Off'}
                      tooltip={!autoSuggestDiagrams ? undefined : '[Coding model]  Automatically creates visual diagrams and flowcharts when the AI detects that a response would be clearer with a visual representation.'} />
      <Switch checked={autoSuggestDiagrams} onChange={handleAutoSuggestDiagramsChange}
              endDecorator={autoSuggestDiagrams ? 'On' : 'Off'}
              slotProps={{ endDecorator: { sx: { minWidth: 26 } } }} />
    </FormControl>

    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
      <FormLabelStart
        title='Generative UIs'
        description={autoSuggestHTMLUI ? 'Add HTML' : 'Off'}
        tooltipWarning={autoSuggestHTMLUI}
        tooltip={!autoSuggestHTMLUI ? undefined : <>
          [Coding model] Creates interactive UI components within chat responses when appropriate.
          <hr />
          SECURITY WARNING: THIS TURNS ON JS/HTML CODE EXECUTION WITHIN CHAT MESSAGES
          <hr />
          ALPHA QUALITY FOR TESTING ONLY. Use at your own risk.
        </>}
      />
      <Switch checked={autoSuggestHTMLUI} onChange={handleAutoSuggestHTMLUIChange}
              endDecorator={autoSuggestHTMLUI ? <div>On{' '}<WarningRoundedIcon sx={{ cursor: 'pointer', color: 'red' }} /></div> : 'Off'}
              slotProps={{ endDecorator: { sx: { minWidth: 26 } } }} />
    </FormControl>

    {/*<FormControl disabled orientation='horizontal' sx={{ justifyContent: 'space-between' }}>*/}
    {/*  <FormLabelStart title='Auto Questions'*/}
    {/*                  description={autoSuggestQuestions ? 'LLM Questions' : 'No'}*/}
    {/*                  tooltip={<>Vote <Link href='https://github.com/enricoros/big-agi/issues/228' target='_blank'>#228</Link></>} />*/}
    {/*  <Switch checked={autoSuggestQuestions} onChange={handleAutoSuggestQuestionsChange}*/}
    {/*          endDecorator={autoSuggestQuestions ? 'On' : 'Off'}*/}
    {/*          slotProps={{ endDecorator: { sx: { minWidth: 26 } } }} />*/}
    {/*</FormControl>*/}

  </>;
}