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 initialWord = await fetchWordsByToneAndSyllables(1, [null]);
  return <ToneSelectorClient initialWord={initialWord} />;
}

// 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.',
};