'use client';
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 TokenOption = {
  value: number;
  label: string;
};

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

  // 最大回复数选项
  const tokenOptions: TokenOption[] = [
    { value: 800, label: '800' },
    { value: 1000, label: '1000' },
    { value: 1200, label: '1200' },
    { value: 1500, label: '1500' },
  ];

  const [selectedToken, setSelectedToken] = useState(800);
  const [loading, setLoading] = useState(false);

  const handleConfirm = async () => {
    setLoading(true);
    try {
      // TODO: 调用实际的 API 保存最大回复数设置
      // await updateMaxToken({ maxToken: selectedToken })
      console.log('Selected max token:', selectedToken);

      // 模拟延迟
      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">
      <div className="flex-1">
        <div className="flex flex-col gap-3">
          {tokenOptions.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',
                selectedToken === option.value && 'bg-surface-element-hover'
              )}
              onClick={() => setSelectedToken(option.value)}
            >
              <div className="txt-title-s">{option.label}</div>
              <Checkbox shape="round" checked={selectedToken === option.value} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}