import React, { useState, useEffect, useMemo } from "react";
// import { generateCalendarData } from "../utils/calendar";
// import {
//   OpenSourceHeatmapProps,
//   ProviderInfo,
//   ModelData,
//   CalendarData,
// } from "../types/heatmap";
// import Heatmap from "../components/Heatmap";
// import { fetchAllProvidersData, fetchAllAuthorsData } from "../utils/authors";
// import UserSearchDialog from "../components/UserSearchDialog";
import AIPoliciesTable from "../components/AIPoliciesTable";
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

// const PROVIDERS: ProviderInfo[] = [
//   { color: "#ff7000", authors: ["mistralai"] },
//   { color: "#1877F2", authors: ["meta-llama", "facebook", ] },
//   { color: "#10A37F", authors: ["openai"] },
//   { color: "#cc785c", authors: ["Anthropic"] },
//   { color: "#DB4437", authors: ["google"] },
//   { color: "#5E35B1", authors: ["allenai"] },
//   { color: "#0088cc", authors: ["apple"] },
//   { color: "#FEB800", authors: ["microsoft"] },
//   { color: "#76B900", authors: ["nvidia"] },
//   { color: "#0088cc", authors: ["deepseek-ai"] },
//   { color: "#0088cc", authors: ["Qwen"] },
//   { color: "#4C6EE6", authors: ["CohereForAI"] },
//   { color: "#4C6EE6", authors: ["ibm-granite"] },
//   { color: "#A020F0", authors: ["stabilityai"] },
// ];

interface PolicyData {
  title: string;
  language: string;
  originalLink: string;
  slug: string;
  fileName: string;
  releaseDate: string;
}

export async function getStaticProps() {
  try {
    // const allAuthors = PROVIDERS.flatMap(({ authors }) => authors);
    // const uniqueAuthors = Array.from(new Set(allAuthors));

    // const flatData: ModelData[] = await fetchAllAuthorsData(uniqueAuthors);
    // const updatedProviders = await fetchAllProvidersData(PROVIDERS);

    // const calendarData = generateCalendarData(flatData, updatedProviders);

    // Read policy data
    const policiesDir = path.join(process.cwd(), 'content', 'policies');
    const policyFolders = fs.readdirSync(policiesDir);

    const policyData: PolicyData[] = [];

    for (const folder of policyFolders) {
      const zhFilePath = path.join(policiesDir, folder, 'zh.md');
      const enFilePath = path.join(policiesDir, folder, 'en.md');

      if (fs.existsSync(zhFilePath) && fs.existsSync(enFilePath)) {
        const zhContent = fs.readFileSync(zhFilePath, 'utf-8');
        const enContent = fs.readFileSync(enFilePath, 'utf-8');

        const { data: zhData } = matter(zhContent);
        const { data: enData } = matter(enContent);

        policyData.push({
          ...zhData,
          slug: folder,
          fileName: 'zh.md',
          releaseDate: zhData.releaseDate ? zhData.releaseDate.toString() : '',
        } as PolicyData);
        policyData.push({
          ...enData,
          slug: folder,
          fileName: 'en.md',
          releaseDate: enData.releaseDate ? enData.releaseDate.toString() : '',
        } as PolicyData);
      }
    }

    // Sort policyData based on releaseDate in descending order
    policyData.sort((a, b) => {
      const dateA = a.releaseDate ? new Date(a.releaseDate).getTime() : 0;
      const dateB = b.releaseDate ? new Date(b.releaseDate).getTime() : 0;
      return dateB - dateA;
    });

    return {
      props: {
        policyData,
      },
      revalidate: 3600,
    };
  } catch (error) {
    console.error("Error fetching data:", error);
    return {
      props: {
        policyData: [], // Pass empty policy data as props
      },
      revalidate: 60, // retry after 1 minute if there was an error
    };
  }
}

// const ProviderHeatmap = React.memo(({ provider, calendarData }: { provider: ProviderInfo, calendarData: CalendarData }) => {
//   const providerName = provider.fullName || provider.authors[0];
//   return (
//     <div key={providerName} className="flex flex-col items-center">
//       <Heatmap
//         data={calendarData[providerName]}
//         color={provider.color}
//         providerName={providerName}
//         fullName={provider.fullName ?? providerName}
//         avatarUrl={provider.avatarUrl ?? ''}
//       />
//     </div>
//   );
// });

const OpenSourceHeatmap: React.FC<{ policyData: PolicyData[] }> = ({
  policyData,
}) => {
  return (
    <div className="w-full min-h-screen bg-white dark:bg-gray-900 dark:text-white">
      <div className="max-w-screen-lg mx-auto p-4 py-16">
        <h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2">
          China AI policy research 🤗
        </h1>
        
        <AIPoliciesTable policies={policyData} />
      </div>

      {/* <div className="text-center text-sm my-8 space-y-4">
        <p>
          Models, Datasets, and Spaces from the top AI labs.
        </p>
        <div className="flex justify-center space-x-4">
          <UserSearchDialog />
        </div>
      </div>
      
      <div className="h-px max-w-lg mx-auto bg-gray-200 dark:bg-gray-700 my-16" />
     
      {isLoading ? (
        <p className="text-center">Loading...</p>
      ) : (
        <div className="space-y-16">
          {sortedProviders.map((provider) => (
            <ProviderHeatmap 
              key={provider.fullName || provider.authors[0]} 
              provider={provider} 
              calendarData={calendarData} 
            />
          ))}
        </div>
      )} */}
    </div>
  );
};

export default React.memo(OpenSourceHeatmap);