'use client';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { IconButton } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import Image from 'next/image';
import { useModels } from '@/hooks/services/chat';
import { useStreamChatStore } from '../stream-chat';

export default function ChatModel() {
  const { data: models = [] } = useModels();
  const chatSetting = useStreamChatStore((store) => store.chatSetting);
  const setChatSetting = useStreamChatStore((store) => store.setChatSetting);

  return (
    <div className="flex flex-col h-full">
      <div className="flex-1 flex flex-col gap-2">
        {models.map((model: any) => (
          <div
            key={model}
            onClick={() => setChatSetting({ chatModel: model })}
            className="bg-surface-element-normal cursor-pointer 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">{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={chatSetting.chatModel === model} 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>
  );
}