import { createClient } from "@supabase/supabase-js";
import { NextResponse } from "next/server";

const supabaseKey = process.env.SUPABASE_KEY as string;
const supabaseUrl = process.env.SUPABASE_URL as string;

console.log(supabaseUrl);

const supabase = createClient(supabaseUrl, supabaseKey);

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url);
    const limit = searchParams.get("limit");

    let query = supabase.from("pet_lvl_lb").select("*");

    if (limit) {
      const limitValue = parseInt(limit);
      if (!isNaN(limitValue) && limitValue > 0) {
        query = query.limit(limitValue);
      }
    }

    const { data, error } = await query;

    if (error) {
      console.error("Error fetching data from Supabase:", error);
      return NextResponse.json(
        { error: "Failed to fetch data" },
        {
          status: 500,
          headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET",
            "Access-Control-Allow-Headers": "X-Requested-With, Content-Type, Accept",
            "Access-Control-Allow-Credentials": "true",
          },
        }
      );
    }

    return NextResponse.json(data, {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET",
        "Access-Control-Allow-Headers": "X-Requested-With, Content-Type, Accept",
        "Access-Control-Allow-Credentials": "true",
      },
    });
  } catch (error) {
    console.error("Internal Server Error:", error);
    return NextResponse.json(
      { error: "Internal Server Error" },
      {
        status: 500,
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET",
          "Access-Control-Allow-Headers": "X-Requested-With, Content-Type, Accept",
          "Access-Control-Allow-Credentials": "true",
        },
      }
    );
  }
}

/* eslint-disable */
'use client';

import type { Metadata } from "next";
import { useEffect, useState } from "react";
import { Pet, columns } from "./columns";
import { DataTable } from "./data-table";

const metadata: Metadata = {
  title: "Pet Level Leaderboard",
  description:
    "See the pet level rankings in the game.",
};

export default function PetLeaderboardPage() {
  const [petsData, setPetsData] = useState<Pet[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const apiUrl =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000/api/petLevel"
      : "https://hhr-bot.xyz/api/petLevel";

  useEffect(() => {
    async function fetchPetsData() {
      try {
        const res = await fetch(apiUrl, { cache: "no-store" });
        if (!res.ok) {
          throw new Error("Failed to fetch data");
        }
        const data: Pet[] = await res.json();
        const formattedData = data.map((pet) => ({
          pet_name: pet.pet_name,
          level: Number(pet.level).toLocaleString(),
          type: pet.type,
          rank: pet.rank,
        }));
        setPetsData(formattedData);
      } catch (err) {
        if (err instanceof Error) {
          setError(err.message);
        } else {
          setError("An unknown error occurred.");
        }
      } finally {
        setLoading(false);
      }
    }
    fetchPetsData();
  }, [apiUrl]);

  if (loading) {
    return (
      <div className="text-center text-lg text-gray-600 mt-10">
        Loading...
      </div>
    );
  }

  if (error) {
    return (
      <div className="text-center text-red-600 text-lg mt-10">
        Error: {error}
      </div>
    );
  }

  return (
    <div className="container mx-auto py-10">
      <DataTable columns={columns} data={petsData} />
    </div>
  );
}