import { NextResponse } from 'next/server';
import urlMetadata from 'url-metadata';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const targetUrl = searchParams.get('url'); // 傳入要抓取的網址

  if (!targetUrl) {
    return NextResponse.json(
      { error: 'URL parameter is required' },
      { status: 400 },
    );
  }

  try {
    const metadata = await urlMetadata(targetUrl, {
      maxRedirects: 1, // 限制 HTTP 重定向的次數
      timeout: 5000, // 設定請求超時時間
    });

    return NextResponse.json({
      favico: metadata.favicons[0]?.href || '',
      title: metadata.title || '',
      description: metadata.description || '',
      image: metadata['og:image'] || '',
    });
  } catch (error) {
    // 處理超時或重定向過多的錯誤
    return NextResponse.json(
      { error: 'Failed to fetch metadata' },
      { status: 500 },
    );
  }
}

export const getMetaData = async (url: string) => {
  const response = await fetch(`/api/metadata?url=${url}`);
  const metadata = await response.json();

  const urlName = url.split('/').pop() || '-';

  const favico =
    metadata.favico !== ''
      ? metadata.favico.includes('https')
        ? metadata.favico
        : metadata.favico.split('/')[1].includes(urlName)
        ? `${url}${metadata.favico.split(urlName)[1]}`
        : `${url}${metadata.favico}`
      : '';

  return {
    title: metadata.title,
    description: metadata.description,
    image: metadata.image,
    favicon: favico,
  };
};

export const MetaInfoLink = React.memo(
  ({ url, children }: { url: string; children: React.ReactNode }) => {
    const [metadata, setMetadata] = useState<Record<string, string>>({});
    const [isPending, startTransition] = useTransition();
    const [imageError, setImageError] = useState(false);
    const [faviconError, setFaviconError] = useState(false);

    const fetchMetaData = async () => {
      // 防止重複請求：如果正在載入中或已經有資料就不重複請求
      if (isPending || metadata.title) return;

      startTransition(async () => {
        try {
          const metadata = await getMetaData(url);
          setMetadata(metadata);
          setImageError(false); // 重置圖片錯誤狀態
          setFaviconError(false); // 重置 favicon 錯誤狀態
        } catch (error) {
          console.error('Failed to fetch metadata:', error);
        }
      });
    };
    return (
      <Tooltip>
        <TooltipTrigger onMouseOver={fetchMetaData}>{children}</TooltipTrigger>
        <TooltipContent className="max-w-[335px] w-[100vw] bg-white overflow-hidden p-0 shadow-xl">
          {isPending || metadata?.title ? (
            <>
              {isPending ? (
                <div className="w-full min-h-[250px] flex justify-center items-center">
                  <Flower2 className="w-8 h-8 text-main animate-bounce" />
                </div>
              ) : (
                <div className="w-full max-w-full overflow-hidden">
                  {metadata.image !== '' && !imageError ? (
                    <img
                      src={metadata.image}
                      alt={metadata.title}
                      className="w-full max-h-[250px] object-cover object-center"
                      onError={() => setImageError(true)}
                    />
                  ) : (
                    <div className="w-full min-h-[180px] flex justify-center items-center bg-gray-50">
                      <Flower2 className="w-8 h-8 text-main" />
                    </div>
                  )}
                  <div className="w-full py-2 px-4">
                      <div className="flex items-start gap-4 mb-2">
                      {metadata.favicon !== '' && !faviconError ? (
                        <img
                          src={metadata.favicon}
                          alt={`${metadata.title}_favico`}
                          className="w-8 h-8 flex-shrink-0 object-contain"
                          onError={() => setFaviconError(true)}
                        />
                      ) : (
                        <span className="text-black text-xl flex-shrink-0">
                          ꙩ_ꙩ
                        </span>
                      )}
                      <div className="flex-1 min-w-0">
                        <p className="text-black text-sm font-extrabold truncate">
                          {metadata.title}
                        </p>
                        <p className="text-xs font-bold text-sub">
                          {url?.split('//')[1]}
                        </p>
                        <p className="text-xs font-bold text-sub whitespace-normal break-words text-justify mt-2">
                          {metadata.description}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </>
          ) : (
            <div className="min-h-[180px] flex flex-col justify-center items-center">
              <p className="text-2xl text-main">◔̯◔</p>
              <p className="text-main font-bold mt-4">JUST CLICK IT</p>
            </div>
          )}
        </TooltipContent>
      </Tooltip>
    );
  },
);

onError={() => setImageError(true)}
onError={() => setFaviconError(true)}