import MDEditor from '@uiw/react-md-editor';
import { isNil } from 'lodash-es';
import { Mail, Pencil } from 'lucide-react';
import { useState } from 'react';
import Markdown from 'react-markdown';
import { toast } from 'sonner';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useUpdateUser } from '@/hooks/data/useUpdateUser';
import { useUserInfo } from '@/hooks/data/useUserInfo';
import { base64ToUtf8, utf8ToBase64 } from '@/lib/utils';
import { Button } from '../ui/button';
import { EditProfileDialog } from './edit-profile-dialog';

export function MainProfile() {
  const { data: user } = useUserInfo();
  const [bio, setBio] = useState<string | undefined>(() => base64ToUtf8(user.bio));
  const [enableBioEdit, setEnableBioEdit] = useState(false);
  const { mutateAsync } = useUpdateUser();

  return (
    <div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
      <div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
        <div className="flex flex-col w-full gap-3">
          <div className="flex flex-col w-full gap-3">
            <div className="flex flex-row gap-3 w-full lg:flex-col">
              <Avatar className="size-16 rounded-full border-2 border-muted lg:size-64">
                <AvatarImage src={user.avatar} alt={user.nickname} />
                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
              </Avatar>
              <div className="flex flex-1 flex-col justify-center lg:mt-3">
                <span className="font-semibold text-2xl" aria-hidden="true">{user.nickname}</span>
                <span className="text-[20px] text-muted-foreground" aria-hidden="true">{user.subtitle}</span>
              </div>
            </div>
            <div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
              <Mail className="h-4 w-4 stroke-muted-foreground" />
              {user.email}
            </div>
          </div>
          <EditProfileDialog />
        </div>
      </div>
      <section className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center">
        {/* Bio */}
        {enableBioEdit
          ? (
            <MDEditor
              value={bio}
              onChange={setBio}
              height="100%"
            />
          )
          : <div className="p-6 prose dark:prose-invert"><Markdown>{bio}</Markdown></div>}
        <Button
          className="absolute bottom-4 right-4"
          // eslint-disable-next-line ts/no-misused-promises
          onClick={async () => {
            if (!enableBioEdit) {
              setEnableBioEdit(true);
            }
            else {
              if (!isNil(bio)) {
                try {
                  await mutateAsync({ bio: utf8ToBase64(bio) });
                  setEnableBioEdit(false);
                }
                catch (error) {
                  console.error(error);
                  toast.error('个人简介更新失败');
                }
              }
            }
          }}
          size="icon-sm"
          variant={enableBioEdit ? 'default' : 'outline'}
        >
          <Pencil />
        </Button>
      </section>
    </div>
  );
}