import * as Bun from "bun";
import { Suspense } from "react";
import { TwitterApiService, TwitterBookmark } from "../lib/twitter-api";
import {
  userCategories,
  type CategorizationResponse,
} from "../lib/categorization";
import { LLMService } from "../lib/llm-service";
import ProcessedBookmark from "../components/cat/Entry";

interface CategorizePageProps {
  bookmarks: Awaited<ReturnType<TwitterApiService["fetchAllBookmarks"]>>;
  currentBookmarkIndex: number;
  categorization?: CategorizationResponse;
  error?: string;
}

async function CategorizationFetcher({
  bookmarks,
  currentIndex,
}: {
  bookmarks: TwitterBookmark[];
  currentIndex: number;
}) {
  if (currentIndex >= bookmarks.length) {
    return (
      <div className="text-center py-12">
        <h2 className="text-2xl font-bold text-gray-900 mb-4">
          All Bookmarks Categorized!
        </h2>
        <p className="text-gray-600 mb-6">
          You've successfully categorized all your bookmarks.
        </p>
        <a
          href="/"
          className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
          Back to Bookmarks
        </a>
      </div>
    );
  }

  const bookmark = bookmarks[currentIndex];
  const llmRes = await callLLM(bookmark!);
  if ("error" in llmRes)
    return (
      <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
        Error categorizing bookmark: {llmRes.error}
      </div>
    );
  return (
    <div className="">
      <ProcessedBookmark
        bookmark={bookmark!}
        categorization={llmRes.ok}
        currentIndex={currentIndex}
        totalCount={bookmarks.length}
      />
    </div>
  );
}

function LoadingSpinner() {
  return (
    <div className="flex items-center justify-center py-12">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      <span className="ml-3 text-gray-600">
        Loading your Twitter bookmarks...
      </span>
    </div>
  );
}

export default async function CategorizePage(props: any) {
  // console.log({ props });
  const params = new URLSearchParams(props.query);
  const currentIndex = Number(params.get("idx") || "0");
  const cookie = Bun.env.TWATTER_COKI;

  if (!cookie) {
    return (
      <div className="text-red-600 text-center py-12">
        Missing Twitter cookie configuration
      </div>
    );
  }
  const twbookmarks = await getTwData(cookie);
  if ("error" in twbookmarks) {
    return (
      <div className="text-red-600 text-center py-12">
        Error fetching Twatter bookmarks
      </div>
    );
  }
  // const currentIndex = parseInt(searchParams.index || '0', 10);
  const totalCount = twbookmarks.ok.length;

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-4xl mx-auto px-4">
        <title>Categorize Bookmarks - SORMARK</title>

        <div className="mb-8">
          <h1 className="text-4xl font-bold tracking-tight mb-4">
            Categorize Bookmarks
          </h1>
          <p className="text-lg text-gray-600">
            Review and categorize your Twitter bookmarks one by one
          </p>
        </div>

        <Suspense fallback={<LoadingSpinner />}>
          <>
            <div className="bg-blue-600 text-white p-4">
              <p className="text-blue-100 mt-1">
                Bookmark {currentIndex + 1} of {totalCount}
              </p>
              <div className="w-full bg-blue-800 rounded-full h-2 mt-2">
                <div
                  className="bg-white h-2 rounded-full transition-all duration-300"
                  style={{
                    width: `${((currentIndex + 1) / totalCount) * 100}%`,
                  }}
                ></div>
              </div>
            </div>
            <CategorizationFetcher
              bookmarks={twbookmarks.ok}
              currentIndex={currentIndex}
            />
          </>
        </Suspense>
      </div>
    </div>
  );
}

import bmarks from "../lib/testData.json";
async function getTwData(cookie: string) {
  try {
    // const twitterService = new TwitterApiService(cookie);
    // const bookmarks = await twitterService.fetchAllBookmarks();
    // return { ok: bookmarks };
    return { ok: bmarks } as any;
  } catch (error) {
    return { error: `${error}` };
  }
}

async function callLLM(bookmark: TwitterBookmark) {
  const apiKey = Bun.env.GEMINI_API_KEY!;
  try {
    const llmService = new LLMService(apiKey);

    const categorization = await llmService.categorizeBookmark({
      bookmark,
      userCategories,
    });

    return { ok: categorization };
  } catch (error) {
    return { error: `${error}` };
  }
}

export const getConfig = async () => {
  return {
    render: "dynamic",
  } as const;
};