src/app/main.tsx

"use client"

import React from "react"
import { IoMdPhonePortrait } from "react-icons/io"
import { GiRollingDices } from "react-icons/gi"
import { ClapMediaOrientation } from "@aitube/clap"

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Toaster } from "@/components/ui/sonner"
import { TextareaField } from "@/components/form/textarea-field"

import { cn, generateRandomStory } from "@/lib/utils"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { useIsBusy, useOrientation, useQueryStringParams, useStoryPromptDraft } from "@/lib/hooks"
import { BottomBar, VideoPreview } from "@/components/interface"
import { MainTitle } from "@/components/interface/main-title"
import { LoadClapButton } from "@/components/interface/load-clap-button"
import { SaveClapButton } from "@/components/interface/save-clap-button"
import { useProcessors } from "@/lib/hooks/useProcessors"
import { Characters } from "@/components/interface/characters"
import { useOAuth } from "@/lib/oauth/useOAuth"
import { AuthWall } from "@/components/interface/auth-wall"

import { defaultPrompt } from "./config"
import { useStore } from "./store"

export function Main() {
  const { storyPromptDraft, setStoryPromptDraft, promptDraftRef } = useStoryPromptDraft()
  const  { isBusy } = useIsBusy()
  const { orientation, toggleOrientation } = useOrientation()
  const { handleCreateStory, handleExtendStory } = useProcessors()
  useQueryStringParams()

  const currentVideo = useStore(s => s.currentVideo)

  const showAuthWall = useStore(s => s.showAuthWall)
  const { isLoggedIn, enableOAuthWall } = useOAuth()

  return (
    <TooltipProvider>
      <div className={cn(
        `fixed`,
        // `bg-zinc-800`,
        // old style, more "amber"
        // `bg-gradient-to-br from-amber-600 to-yellow-500`, 

        // nice style!
        // `bg-gradient-to-br from-amber-700 to-yellow-300`, 

        // warm orange, a bit flash but not bad, not bad at all
        // `bg-gradient-to-br from-orange-700 to-yellow-400`, 
    
        // nice "AiTube" vibe
        // `bg-gradient-to-br from-red-700 to-yellow-400`, 
    
        // pretty cool lime!
        `bg-gradient-to-br from-lime-700 to-yellow-400`, 

        // new style, pretty "fresh" - maybe too bright? 
        // use a dark logo for this one
        // `bg-gradient-to-br from-yellow-200 to-yellow-500`, 
        
        // too pastel
        // `bg-gradient-to-br from-yellow-200 to-red-300`, 
        
        // `bg-gradient-to-br from-sky-400 to-sky-300/30`, 
        `w-screen h-full overflow-y-scroll md:overflow-hidden`,
      )}

        // this version is a bit too aggressive on mobile
        // style={{ boxShadow: "inset 0 0px 250px 0 rgb(0 0 0 / 60%)" }}

        style={{ boxShadow: "inset 0 0 10vh 0 rgb(0 0 0 / 50%)" }}
        >
        <div className="flex flex-col w-screen h-screen">
          <div className="
          flex flex-col md:flex-row w-full
          items-center md:justify-center
          flex-1
          "
          >
            <div className={cn(
              `flex flex-col md:h-full md:items-center md:justify-center`,
              `w-full md:w-1/2`,
              `transition-all duration-200 ease-in-out`,
              `ml-0`,
              `pt-4 sm:pt-0`,
            )}>
              <Card className={cn(
              //  `shadow-2xl z-30 rounded-3xl`,
              `shadow-none`,
              `w-full md:ml-[12%] md:w-[95%]`,
                `transition-all duration-200 ease-in-out`,
                `bg-transparent dark:bg-transparent`,
              // `backdrop-blur-2xl dark:backdrop-blur-2xl`,
                // `bg-amber-500 dark:bg-amber-500`,


                `border-transparent dark:border-transparent`,
                // `bg-stone-50/90 dark:bg-stone-50/90`,
                // `border-yellow-100 dark:border-yellow-100`,
                // `bg-yellow-500 dark:bg-yellow-500`,
                // `border-yellow-400 dark:border-yellow-400`,

              )}>
                <CardHeader>
                    <MainTitle />
                  </CardHeader>
                  <CardContent
                    className="flex flex-col space-y-3"
                    >
                    
                    {/* LEFT MENU BUTTONS + MAIN PROMPT INPUT */}
                    <div className="flex flex-row space-x-3 w-full">
                    
                  
                      {/*

                      TODO: To finish by Julian a bit later

                      <div className="
                        flex flex-col
                        
                        w-32 bg-yellow-600
                        transition-all duration-200 ease-in-out
                        space-y-2 md:space-y-4
                      ">
                        <Input
                            type="file"
                            className=""
                            onChange={async (e: React.ChangeEvent<HTMLInputElement>) => {
                              if (e.target.files && e.target.files.length > 0) {
                                const file = e.target.files[0];
                                const newImageBase64 = await fileToBase64(file)
                                setMainCharacterImage(newImageBase64)
                              }
                            }}
                            accept="image/*"
                          />
                      </div>
                      */}

                      {/* MAIN PROMPT INPUT */}
                      <div className="
                        flex flex-col
                        flex-1
                        transition-all duration-200 ease-in-out
                        space-y-2 md:space-y-4
                      ">
                        <TextareaField
                          id="story-prompt-draft"
                          // label="My story:"
                          // disabled={modelState != 'ready'}
                          onChange={(e) => {
                            setStoryPromptDraft(e.target.value)
                            promptDraftRef.current = e.target.value
                          }}
                          placeholder={defaultPrompt}
                          inputClassName="
                          transition-all duration-200 ease-in-out
                          h-32 md:h-56 lg:h-64
                      
                          "
                          disabled={isBusy}
                          value={storyPromptDraft}
                        />
      
                      
                      {/* END OF MAIN PROMPT INPUT */}
                      </div>

                      {/* END OF LEFT MENU BUTTONS + MAIN PROMPT INPUT */}
                    </div>

                    {/* ACTION BAR */}

                    <div className="
                      w-full
                      flex flex-col lg:flex-row
                      justify-between items-center
                      space-y-3 lg:space-x-3 lg:space-y-0">
                
                      {/*
                        <Button
                          onClick={() => load()}
                          disabled={isBusy}
                          // variant="ghost"
                          className={cn(
                            `text-sm md:text-base lg:text-lg`,
                            `bg-stone-800/90 text-amber-400/100 dark:bg-stone-800/90 dark:text-amber-400/100`,
                            `font-bold`,
                            `hover:bg-stone-800/100 hover:text-amber-300/100 dark:hover:bg-stone-800/100 dark:hover:text-amber-300/100`,
                            storyPromptDraft ? "opacity-100" : "opacity-80"
                          )}
                        >
                        <span className="mr-1">Load project</span>
                        </Button>
                      */}

                      <div className="
                        flex flex-row
                        justify-between items-center
                        space-x-3">
                        <LoadClapButton />
                        <SaveClapButton />
                        <Characters />
                      </div>
    
                      <div className=" 
                        flex flex-row
                        justify-between items-center
                        space-x-3
                        select-none
                        ">

 {/* RANDOMNESS SWITCH */}
 <Tooltip>
                        <TooltipTrigger asChild><div className=" 
                        flex flex-row
                        justify-between items-center
                        cursor-pointer
                        transition-all duration-150 ease-in-out
                        hover:scale-110 active:scale-150
                      text-stone-800
                        hover:text-stone-950
                        active:text-black
                        group
                        "
                        onClick={() => {
                          const randomStory = generateRandomStory()
                          setStoryPromptDraft(randomStory)
                          promptDraftRef.current = randomStory
                        }}>
                          <div>
                          </div>
                          <div className="
                          w-6 h-8
                          flex flex-row items-center justify-center
                          transition-all duration-150 ease-out
                          group-hover:animate-swing
                          "
                          >
                            <GiRollingDices size={24} />
                          </div>
                        </div></TooltipTrigger>
                        <TooltipContent side="top">
                          <p className="text-xs font-normal text-stone-100/90 text-center">
                          Generate a random prompt.
                          </p>
                        </TooltipContent>
                      </Tooltip> 
                        {/* END OF RANDOMNESS SWITCH */}

                        {/* ORIENTATION SWITCH */}
                        <div className=" 
                        flex flex-row
                        justify-between items-center
                        cursor-pointer
                        transition-all duration-150 ease-out
                        hover:scale-110 active:scale-150
                        text-stone-800
                        hover:text-stone-950
                        active:text-black
                        group
                        "
                        onClick={() => toggleOrientation()}>
                          <div>
                          </div>
                          <div className="
                          w-8 h-8
                          flex flex-row items-center justify-center
                          transition-all duration-150 ease-in-out
                          group-hover:animate-swing
                          "
                          >
                            <div className={cn(
                              `transition-all duration-200 ease-in-out`,
                              orientation === ClapMediaOrientation.LANDSCAPE ? `rotate-90` : `rotate-0`
                            )}>
                              <IoMdPhonePortrait size={24} />
                            </div>
                          </div>
                        </div>
                        {/* END OF ORIENTATION SWITCH */}
                        <Button
                          onClick={currentVideo ? handleExtendStory : handleCreateStory}
                          disabled={!storyPromptDraft || isBusy || !isLoggedIn}
                          // variant="ghost"
                          className={cn(
                            `text-base md:text-lg lg:text-xl xl:text-2xl`,
                            `bg-stone-800/90 text-amber-400/100 dark:bg-stone-800/90 dark:text-amber-400/100`,
                            `font-bold`,
                            `hover:bg-stone-800/100 hover:text-amber-300/100 dark:hover:bg-stone-800/100 dark:hover:text-amber-300/100`,
                            storyPromptDraft ? "opacity-100" : "opacity-80"
                          )}
                        >
                        <span className="mr-1.5">{
                          currentVideo ? 'Extend' : 'Create'
                        }</span><span className="hidden md:inline">👉</span><span className="inline md:hidden">👇</span>
                        </Button>
                      </div>

                    {/* END OF ACTION BAR */}
                    </div>

                </CardContent>
              </Card>
            </div>
            <div className={cn(
              `flex flex-col items-center justify-center`,
              `flex-1 h-full`,
              // `transition-all duration-200 ease-in-out`

              `-mt-[20px] -mb-[90px] md:-mt-0 md:-mb-0`,
            )}>
              <VideoPreview />
            </div>
          </div>
          <BottomBar />
        </div>
        <Toaster />
        <AuthWall show={showAuthWall} />
      </div>
    </TooltipProvider>
  );
}