'use client'

import { getAge } from '@/lib/utils'
import { CharacterAvatorAndName } from '../CharacterHeader'
import { Tag } from '@/components/ui/tag'
import Image from 'next/image'
import { cn } from '@/lib/utils'
import { useChatStore } from '../store'
import { IconButton } from '@/components/ui/button'
import React from 'react'
import { Switch } from '@/components/ui/switch'

const genderMap = {
  0: '/icons/male.svg',
  1: '/icons/female.svg',
  2: '/icons/gender-neutral.svg',
}

const ChatProfilePersona = React.memo(() => {
  const setSideBar = useChatStore((store) => store.setSideBar)
  const whoAmI = 'whoAmI'

  return (
    <div className="flex w-full flex-col gap-3">
      <div className="flex items-center justify-between gap-3">
        <div className="txt-title-s">My Chat Persona</div>
        <div
          className="txt-label-m text-primary-variant-normal cursor-pointer"
          onClick={() => setSideBar('personal')}
        >
          Edit
        </div>
      </div>

      <div className="bg-surface-base-normal rounded-m py-1">
        <div className="flex items-center justify-between gap-4 px-4 py-3">
          <div className="txt-label-l text-txt-secondary-normal">Nickname</div>
          <div className="txt-body-l text-txt-primary-normal flex-1 truncate text-right">{''}</div>
        </div>
        <div className="flex items-center justify-between gap-4 px-4 py-3">
          <div className="txt-label-l text-txt-secondary-normal">Gender</div>
          <div className="txt-body-l text-txt-primary-normal">
            {genderMap[0 as keyof typeof genderMap]}
          </div>
        </div>
        <div className="flex items-center justify-between gap-4 px-4 py-3">
          <div className="txt-label-l text-txt-secondary-normal">Age</div>
          <div className="txt-body-l text-txt-primary-normal">{getAge(Number(23))}</div>
        </div>
        <div className="flex items-center justify-between gap-4 px-4 py-3">
          <div className="txt-label-l text-txt-secondary-normal">Who am I</div>
          <div
            className={cn(
              'txt-body-l text-txt-primary-normal flex-1 truncate text-right',
              whoAmI ? 'text-txt-primary-normal' : 'text-txt-secondary-normal'
            )}
          >
            {whoAmI || 'Unfilled'}
          </div>
        </div>
      </div>
    </div>
  )
})

type SettingItem = {
  onClick: () => void
  label: string
  value?: React.ReactNode
}

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

  const chatSettingItems: SettingItem[][] = [
    [
      {
        onClick: () => setSideBar('model'),
        label: 'Chat Model',
        value: 'Role-Playing',
      },
      {
        onClick: () => null,
        label: 'Long text',
        value: <Switch checked={true} />,
      },
    ],
    [
      {
        onClick: () => setSideBar('max_token'),
        label: 'Maximum Replies',
        value: '1200',
      },
    ],
    [
      {
        onClick: () => setSideBar('font'),
        label: 'Font',
        value: '17px',
      },
      {
        onClick: () => setSideBar('background'),
        label: 'Chat Background',
        value: '17px',
      },
    ],
  ]

  const voiceSettingItems: SettingItem[][] = [
    [
      {
        onClick: () => setSideBar('voice_actor'),
        label: 'Voice Artist',
        value: 'Default',
      },
    ],
  ]

  const bundleRender = (title: string, items: SettingItem[][]) => {
    return (
      <div className="flex w-full flex-col items-start justify-start gap-3">
        <div className="txt-title-s w-full text-left">{title}</div>
        <div className="flex w-full flex-col items-start justify-start gap-4">
          {items.map((list, index) => (
            <div key={`group_${index}`} className="bg-surface-base-normal rounded-m w-full py-1">
              {list.map((item, itemIndex) => (
                <div
                  key={`item_${itemIndex}`}
                  className={cn(
                    'flex h-12 cursor-pointer items-center justify-between mx-4 py-3',
                    itemIndex < list.length - 1 && 'border-b border-outline-normal'
                  )}
                  onClick={item.onClick}
                >
                  <div className="txt-label-l flex-1">{item.label}</div>
                  <div className="flex min-w-0 flex-1 cursor-pointer items-center justify-end gap-2">
                    {item.value && (
                      <div className="txt-body-l flex items-center text-txt-primary-normal truncate">
                        {item.value}
                      </div>
                    )}
                    {typeof item.value === 'string' && (
                      <IconButton iconfont="icon-arrow-right-border" size="small" variant="ghost" />
                    )}
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className="flex flex-col gap-4">
      <CharacterAvatorAndName />

      {/* Tags */}
      <div className="flex w-full flex-col items-start justify-start gap-4">
        <div className="flex w-full flex-wrap items-start justify-center gap-2">
          <Tag>
            <Image
              src={genderMap[0 as keyof typeof genderMap]}
              alt="Gender"
              width={16}
              height={16}
            />
            <div>{getAge(Number(24))}</div>
          </Tag>
          <Tag>{'Sensibility'}</Tag>
          <Tag>{'Romantic'}</Tag>
        </div>
      </div>

      <ChatProfilePersona />

      {bundleRender('Chat Setting', chatSettingItems)}

      {bundleRender('Voice Setting', voiceSettingItems)}
    </div>
  )
}
