'use client'
import { SiderHeader } from '.'
import { useChatStore } from '../store'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { Button, IconButton } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import Image from 'next/image'

export default function ChatModel() {
  const setSideBar = useChatStore((store) => store.setSideBar)

  return (
    <div className="flex flex-col h-full">
      <SiderHeader title="Chat Model" />
      <div className="flex-1">
        <div className="bg-surface-element-normal overflow-hidden rounded-lg p-4">
          <div className="flex items-center justify-between gap-2">
            <div className="flex items-center gap-2">
              <div className="txt-title-s">Role-Playing Model</div>
              <Tooltip>
                <TooltipTrigger asChild>
                  <IconButton iconfont="icon-question" variant="tertiary" size="mini" />
                </TooltipTrigger>
                <TooltipContent className="max-w-[300px]">
                  <div className="space-y-2">
                    <p className="break-words">
                      Text Message Price: Refers to the cost of chatting with the character via text
                      messages, including sending text, images, or gifts. Charged per message.
                    </p>
                    <p className="break-words">
                      Voice Message Price: Refers to the cost of sending a voice message to the
                      character or playing the character’s voice. Charged per use.
                    </p>
                    <p className="break-words">
                      Voice Call Price: Refers to the cost of having a voice call with the
                      character. Charged per minute.
                    </p>
                  </div>
                </TooltipContent>
              </Tooltip>
            </div>
            <Checkbox checked={true} shape="round" />
          </div>
          <div className="txt-body-m text-txt-secondary-normal mt-1">
            Role-play a conversation with AI
          </div>

          <div className="bg-surface-district-normal mt-3 rounded-sm p-3">
            <div className="flex items-center gap-1">
              <Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
              <span className="txt-label-m text-txt-primary-normal">1/Text Message</span>
            </div>

            <div className="mt-3 flex items-center justify-between gap-1">
              <div className="flex min-w-0 flex-1 items-center gap-1">
                <Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
                <span className="txt-label-m text-txt-primary-normal">10/Send or play voice</span>
              </div>
            </div>

            <div className="mt-3 flex items-center justify-between gap-1">
              <div className="flex min-w-0 flex-1 items-center gap-1">
                <Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
                <span className="txt-label-m text-txt-primary-normal">20/min Voice call</span>
              </div>
            </div>
          </div>
        </div>
        <div className="txt-body-m text-txt-secondary-normal mt-6">Stay tuned for more models</div>
      </div>
      <div className="flex gap-4 justify-end">
        <Button variant="tertiary" size="large" onClick={() => setSideBar('profile')}>
          Cancel
        </Button>
        <Button onClick={() => setSideBar('profile')}>Select</Button>
      </div>
    </div>
  )
}
