'use client';

import { IconButton } from '@/components/ui/button';
import Input from './Input';
import MessageList from './MessageList';
import SettingDialog from './Drawer';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useCharacter } from '@/hooks/services/character';
import Background from './Background';

export default function ChatPage() {
  const { id } = useParams<{ id: string }>();
  const characterId = id?.split('-')[2] || '';
  const [settingOpen, setSettingOpen] = useState(false);
  const switchToChannel = useStreamChatStore((s) => s.switchToChannel);
  const client = useStreamChatStore((s) => s.client);
  const { data: character } = useCharacter(characterId);

  useEffect(() => {
    if (id && client) {
      switchToChannel(id as string);
    }
  }, [id, client]);

  return (
    <div className="flex bg-[rgba(6,3,24,1)] h-full">
      <div className="relative px-4 w-full flex-1 flex justify-center">
        <div className="max-w-[752px] w-full relative h-full flex flex-col">
          <Background imageUrl={character?.characterStand || character?.coverImage} />
          <MessageList />
          <Input />
        </div>
        <IconButton
          onClick={() => setSettingOpen(!settingOpen)}
          className="absolute top-2 right-2"
          variant="ghost"
          size="small"
        >
          <i className="iconfont-v2 iconv2-zhankai-1" />
        </IconButton>
      </div>
      <SettingDialog open={settingOpen} onOpenChange={setSettingOpen} />
    </div>
  );
}