import "@/styles/globals.css";
import { Suspense } from "react";
import { fetchWordsByToneAndSyllables } from "@/actions/tones";
import ToneSelectorClient from "@/components/tones/ToneSelectorClient";
import { Skeleton } from "@/components/ui/skeleton"; // For Suspense fallback

export const getConfig = async () => {
  return {
    render: "static", // Or 'dynamic' if you prefer SSR for every request
  };
};

// Function to fetch the initial word on the server
async function InitialWordLoader() {
  // Fetch a random 1-syllable Thai word with any tone initially
  const tones = ["falling", "falling"];
  const initialWords = await fetchWordsByToneAndSyllables(tones);
  return <ToneSelectorClient initialData={initialWords} initialTones={tones} />;
}

// Loading fallback component
function TonePageSkeleton() {
  return (
    <div className="container mx-auto p-4 max-w-2xl">
      <div className="mb-6 p-6 border rounded-lg shadow">
        <Skeleton className="h-8 w-1/2 mb-4" />
        <Skeleton className="h-6 w-3/4 mb-6" />

        <div className="space-y-6">
          <div>
            <Skeleton className="h-6 w-1/4 mb-2" />
            <Skeleton className="h-10 w-full md:w-1/2" />
          </div>
          <div>
            <Skeleton className="h-6 w-1/4 mb-2" />
            <Skeleton className="h-10 w-full md:w-1/2" />
          </div>
        </div>
        <Skeleton className="h-10 w-full md:w-1/4 mt-6" />
      </div>
      <div className="p-6 border rounded-lg shadow">
        <Skeleton className="h-8 w-1/3 mx-auto mb-4" />
        <Skeleton className="h-24 w-3/4 mx-auto mb-4" />
        <Skeleton className="h-6 w-1/2 mx-auto" />
      </div>
    </div>
  );
}

export default function TonesPage() {
  return (
    <div className="py-8">
      <Suspense fallback={<TonePageSkeleton />}>
        <InitialWordLoader />
      </Suspense>
    </div>
  );
}

export const metadata = {
  title: "Thai Tone Explorer",
  description: "Explore Thai words by syllable count and tones.",
};