import streamlit as st

x = st.slider('Select a value')
st.write(x, 'squared is', x * x)

// Simple flame component
const Flame: React.FC<{ className?: string }> = ({ className = '' }) => (
  <div className={`absolute w-2 h-3 bg-orange-500 rounded-t-full animate-pulse ${className}`}>
    <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-2 bg-red-600 rounded-t-full"></div>
  </div>
);

// Burning effect wrapper
const Burning: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div className="relative">
    {children}
    <Flame className="-top-1 left-1/3" />
    <Flame className="-top-2 left-1/2 scale-75" />
    <Flame className="-top-1 left-2/3" />
    <Flame className="top-0 left-1/4 scale-50" />
    <Flame className="top-0 left-3/4 scale-50" />
  </div>
);

// Bus component
const Bus: React.FC<{ burning?: boolean; className?: string }> = ({ burning = false, className = '' }) => {
  const content = (
    <div className={`w-20 h-10 bg-blue-600 rounded-md border-2 border-black relative flex items-center justify-around p-1 ${className}`}>
      {/* Windows */}
      {[...Array(3)].map((_, i) => (
        <div key={i} className="w-4 h-4 bg-gray-300 opacity-75 rounded-sm"></div>
      ))}
      {/* Wheels */}
      <div className="absolute -bottom-1 left-2 w-4 h-4 bg-black rounded-full"></div>
      <div className="absolute -bottom-1 right-2 w-4 h-4 bg-black rounded-full"></div>
    </div>
  );
  return burning ? <Burning>{content}</Burning> : content;
};

// Car component
const Car: React.FC<{ burning?: boolean; className?: string }> = ({ burning = false, className = '' }) => {
  const content = (
    <div className={`w-14 h-7 bg-red-600 rounded-md border-2 border-black relative flex items-center justify-around p-1 ${className}`}>
       {/* Window */}
       <div className="w-6 h-4 bg-gray-300 opacity-75 rounded-sm"></div>
       {/* Wheels */}
       <div className="absolute -bottom-1 left-1 w-3 h-3 bg-black rounded-full"></div>
       <div className="absolute -bottom-1 right-1 w-3 h-3 bg-black rounded-full"></div>
    </div>
  );
  return burning ? <Burning>{content}</Burning> : content;
};


// Slingshot component
const Slingshot: React.FC<{ children?: React.ReactNode, launched: boolean }> = ({ children, launched }) => (
  <div className="absolute bottom-1/4 left-1/4 transform -translate-x-1/2 z-10">
    <div className="relative w-24 h-32">
      {/* Poles */}
      <div className="absolute bottom-0 left-0 w-4 h-24 bg-yellow-800 rounded-t-md transform -rotate-12"></div>
      <div className="absolute bottom-0 right-0 w-4 h-24 bg-yellow-800 rounded-t-md transform rotate-12"></div>
      {/* Band */}
      <div className={`absolute top-0 left-2 w-20 h-12 border-4 border-gray-700 rounded-b-full transition-transform duration-500 ease-out ${launched ? 'translate-y-0 opacity-0' : '-translate-y-4'}`}>
          <div className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 ${launched ? 'opacity-0' : 'opacity-100'}`}>
            {children}
          </div>
      </div>
    </div>
  </div>
);

// Collapsed Bridge component
const CollapsedBridge: React.FC = () => (
    <div className="absolute top-1/4 left-1/3 transform rotate-12 w-24">
        <div className="h-4 bg-gray-700 "></div>
        <div className="h-4 bg-yellow-600 transform rotate-6 translate-y-1"></div>
        <div className="h-4 bg-gray-600 transform -rotate-4 -translate-y-1"></div>
        <div className="text-center text-xs text-red-700 font-bold mt-1">BRIDGE OUT</div>
    </div>
);


export default function DisasterScene() {
  const [launched, setLaunched] = useState(false);

  const handleLaunch = () => {
    setLaunched(true);
  };

  const handleReset = () => {
    setLaunched(false);
  }

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-sky-400 to-sky-600 p-4">
      <div className="relative w-full max-w-4xl h-[600px] bg-green-600 rounded-lg shadow-xl overflow-hidden border-4 border-black">
        {/* Hillside Right */}
        <div className="absolute top-0 right-0 bottom-0 w-1/3 bg-green-700 skew-x-[-15deg] origin-top-left"></div>

        {/* Road */}
        <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/4 h-3/4 bg-gray-500">
          {/* Fork */}
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-1/2 flex">
            {/* Left Fork */}
            <div className="absolute top-0 left-0 w-1/2 h-full bg-gray-500 transform -rotate-12 origin-bottom-left"></div>
             {/* Right Fork */}
            <div className="absolute top-0 right-0 w-1/2 h-full bg-gray-500 transform rotate-12 origin-bottom-right"></div>
          </div>
           {/* Dashed Line */}
           <div className="absolute inset-x-0 bottom-0 top-1/2 flex flex-col items-center">
                {[...Array(5)].map((_, i) => (
                    <div key={i} className="w-1 h-4 bg-yellow-300 mb-4"></div>
                ))}
            </div>
        </div>

         {/* Collapsed Bridge Area */}
         <div className="absolute top-[20%] left-[30%]">
             <CollapsedBridge />
         </div>

        {/* Slingshot */}
        <Slingshot launched={launched}>
          {!launched && <Bus burning className="scale-75 transform translate-y-2" />}
        </Slingshot>

        {/* Launched Bus */}
        <div
          className={`absolute bottom-1/3 left-1/4 transform transition-all duration-1000 ease-in-out z-20 ${
            launched
              ? 'translate-x-[150px] translate-y-[-150px] rotate-45 scale-90' // Move towards fork
              : '-translate-x-1/2 opacity-0 scale-50' // Hidden initially or in slingshot
          }`}
        >
         {launched && <Bus burning className="scale-75" />}
        </div>


        {/* Crashing Vehicles on Right Hill */}
        <div className="absolute top-1/3 right-[10%] transform -rotate-12 z-10">
            <Bus burning className="mb-4 scale-90"/>
        </div>
        <div className="absolute top-1/2 right-[15%] transform -rotate-12 z-10">
             <Car burning className="scale-90"/>
        </div>


      </div>

      <div className="mt-6 flex space-x-4">
         <button
            onClick={handleLaunch}
            disabled={launched}
            className={`px-6 py-2 rounded-lg text-white font-semibold shadow-md transition-colors duration-300 ${
              launched
                ? 'bg-gray-400 cursor-not-allowed'
                : 'bg-red-600 hover:bg-red-700'
            }`}
          >
            Launch Bus!
          </button>
          <button
            onClick={handleReset}
            className="px-6 py-2 rounded-lg text-white font-semibold shadow-md transition-colors duration-300 bg-blue-600 hover:bg-blue-700"
          >
            Reset
          </button>
      </div>

    </div>
  );
}