import { OpenInNewTab } from './utils/common';
import { PodcastGenerator } from './components/PodcastGenerator';
import { useState } from 'react';
import { ScriptMaker } from './components/ScriptMaker';
import { AuthCard } from './components/AuthCard';

function App() {
  const [hfToken, setHfToken] = useState<string>('loading');
  const [genratedScript, setGeneratedScript] = useState<string>('');
  const [busy, setBusy] = useState<boolean>(false);

  const [blogURL, setBlogURL] = useState<string>('');

  return (
    <div className="bg-base-300 min-h-screen">
      <div className="max-w-screen-lg mx-auto p-4 pb-32 grid gap-4 grid-cols-1">
        <div className="p-4 col-span-1">
          <h1 className="text-3xl font-bold mb-2">
            Podcast generator via Kokoro-TTS
          </h1>
          <p>
            A space made by{' '}
            <OpenInNewTab href="https://hf.co/ngxson">🤗 ngxson</OpenInNewTab>
          </p>
        </div>

        <AuthCard hfToken={hfToken} setHfToken={setHfToken} />

        {hfToken === 'loading' ? (
          <div className="p-4 col-span-1">
            <div className="loading loading-spinner loading-lg"></div>
          </div>
        ) : !hfToken || !hfToken.startsWith('hf_') ? (
          <></>
        ) : (
          <>
            <ScriptMaker
              setScript={setGeneratedScript}
              setBusy={setBusy}
              setBlogURL={setBlogURL}
              busy={busy}
              hfToken={hfToken}
            />

            <PodcastGenerator
              genratedScript={genratedScript}
              setBusy={setBusy}
              busy={busy}
              blogURL={blogURL}
            />
          </>
        )}
      </div>
    </div>
  );
}

export default App;