import ChatButton from './ChatButton';
import { fetchCharacter } from './service';
import { Chip } from '@/components/ui/chip';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { IconButton } from '@/components/ui/button';
import Link from 'next/link';

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const character = await fetchCharacter(id);

  return (
    <div className="flex h-full flex-col items-center mx-auto max-w-[752px] px-4 pt-4 sm:pt-10">
      {/* header */}
      <div className="w-full flex mb-4 items-center justify-between">
        <Link href="/home">
          <IconButton variant="ghost" size="large" iconfont="icon-arrow-left" />
        </Link>
        <IconButton variant="tertiary" size="large" iconfont="icon-Like" />
      </div>
      {/* 内容区 */}
      <div className="mx-auto flex-1 overflow-auto w-full">
        <header className="flex items-end gap-10 justify-between">
          <div className="flex flex-1 sm:flex-row flex-col gap-6 items-center sm:items-end">
            <Avatar className="size-32">
              <AvatarImage src={character?.headPortrait} />
              <AvatarFallback>{character?.name?.slice(0, 2)}</AvatarFallback>
            </Avatar>
            <div className="text-center sm:text-left">
              <div className="txt-headline-s">{character?.name}</div>
              <div className="flex flex-wrap mt-4 gap-2 justify-center sm:justify-start">
                {character?.tags?.map((tag: any) => (
                  <Chip className="rounded-xs" key={tag.tagId}>
                    {tag.name}
                  </Chip>
                ))}
              </div>
            </div>
          </div>
          <div className="sm:block hidden">
            <ChatButton id={id}></ChatButton>
          </div>
        </header>
        <div className="w-full flex bg-white/10 rounded-m py-3 mt-12">
          <div className="w-full flex items-center flex-col">
            <div className="text-white">
              <IconButton variant="ghost" size="small" iconfont="icon-Like-fill" />
              9.9k
            </div>
            <div className="text-txt-tertiary">Liked</div>
          </div>
          <div className="w-full flex items-center flex-col">
            <div className="text-[rgba(255,64,180,1)]">
              <IconButton
                className="text-[rgba(255,64,180,1)]"
                variant="ghost"
                size="small"
                iconfont="icon-icon_im_other"
              />
              123456
            </div>
            <div className="text-txt-tertiary">Hot</div>
          </div>
        </div>
        <div className="mt-4 rounded-2xl bg-white/10 p-6">
          <div className="txt-headline-s">Introduction</div>
          <div className="mt-4">{character?.description}</div>
        </div>
      </div>
      <div className="sm:hidden w-full mb-4">
        <ChatButton className="w-full" id={id}></ChatButton>
      </div>
    </div>
  );
}