import MyContent from "@/components/html/MyContent";
import MyScene from "@/components/MyScene";
import useStore from "@/lib/store";
import { supabase } from "@/lib/supabaseClient";
import { Canvas } from "@react-three/fiber";
import axios from "axios";
import localFont from "next/font/local";
import Head from "next/head";
import React, { useEffect } from "react";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export default function Home() {

  useEffect(()=>{
    const fetchRowCount = async () => {
      try {
        const { count, error } = await supabase
          .from("transaction-data-updated")
          .select('*', { count: 'exact', head: true }); // `head: true` fetches only the count, not the data
    
        if (error) {
          throw new Error(error.message);
        }
        useStore.setState({count:Number(count)})
        return; // This is the total number of rows
      } catch (error) {
        console.error('Error fetching row count:', error);
        throw error;
      }
    };

    // fetchRowCount();
  },[])

  return (
    <React.Fragment>
      <Head>
        <title>Celestia</title>
        <meta httpEquiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="title" content="Celestia"/>        
        {/* <link rel="icon" href="/logo.png" /> */}
      </Head>
      <Canvas id="canvas-wrapper" camera={{fov:90, near:0.5, far:1500}} linear>
        <MyScene/>
      </Canvas>
      <div
        className={`absolute top-0 left-0 w-screen h-screen overflow-hidden z-50 pointer-events-none ${geistSans.variable} ${geistMono.variable} font-[family-name:var(--font-geist-sans)]`}
      >
        <MyContent/>
      </div>
    </React.Fragment>
  );
}
