'use client'
import { SiderHeader } from '.'
import { useChatStore } from '../store'
import { useState } from 'react'
import { Checkbox } from '@/components/ui/checkbox'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

type FontOption = {
  value: number
  label: string
  isStandard?: boolean
}

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

  // 字体大小选项
  const fontOptions: FontOption[] = [
    { value: 12, label: 'A 12' },
    { value: 14, label: 'A 14' },
    { value: 16, label: 'A 16', isStandard: true },
    { value: 18, label: 'A 18' },
    { value: 20, label: 'A 20' },
  ]

  const [selectedFont, setSelectedFont] = useState(16)
  const [loading, setLoading] = useState(false)

  const handleConfirm = async () => {
    setLoading(true)
    try {
      // TODO: 调用实际的 API 保存字体设置
      // await updateFontSize({ fontSize: selectedFont })
      console.log('Selected font size:', selectedFont)

      // 模拟延迟
      await new Promise((resolve) => setTimeout(resolve, 500))

      setSideBar('profile')
    } catch (error) {
      console.error(error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="flex h-full flex-col">
      <SiderHeader title="Font" />

      <div className="flex-1">
        <div className="flex flex-col gap-3">
          {fontOptions.map((option) => (
            <div
              key={option.value}
              className={cn(
                'bg-surface-element-normal flex h-12 cursor-pointer items-center justify-between rounded-lg px-5 transition-colors',
                selectedFont === option.value && 'bg-surface-element-hover'
              )}
              onClick={() => setSelectedFont(option.value)}
            >
              <div className="txt-title-s flex items-center gap-2">
                {option.label}
                {option.isStandard && (
                  <span className="txt-body-m text-txt-secondary-normal">(standard)</span>
                )}
              </div>
              <Checkbox shape="round" checked={selectedFont === option.value} />
            </div>
          ))}
        </div>
      </div>

      <div className="mt-6 flex justify-end gap-3">
        <Button variant="tertiary" size="large" onClick={() => setSideBar('profile')}>
          Cancel
        </Button>
        <Button size="large" variant="primary" loading={loading} onClick={handleConfirm}>
          Select
        </Button>
      </div>
    </div>
  )
}
