import React, { useState, useEffect } from "react";
import { GoogleLogin } from "react-google-login";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

const CLIENT_ID = "545155685607-fe1tnekimp0m4uspb87ur2tj1lkshr7u.apps.googleusercontent.com";

export default function GoldOrPoop() {
  const [user, setUser] = useState(null);
  const [gold, setGold] = useState(100);
  const [coins, setCoins] = useState(500);
  const [tradeItem, setTradeItem] = useState("");
  const [tradeValue, setTradeValue] = useState("");

  const handleLoginSuccess = (response) => {
    setUser(response.profileObj);
  };

  const handleLoginFailure = () => {
    alert("Login failed. Please try again.");
  };

  const handleTrade = () => {
    if (!tradeItem || !tradeValue) {
      alert("Enter a valid trade item and value.");
      return;
    }
    if (tradeItem.toLowerCase() === "gold" && tradeValue <= gold) {
      setGold(gold - tradeValue);
      setCoins(coins + tradeValue * 10);
    } else if (tradeItem.toLowerCase() !== "gold") {
      alert("Only gold trading is supported for now.");
    }
    setTradeItem("");
    setTradeValue("");
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <Card className="w-full max-w-md p-6 text-center bg-white shadow-lg rounded-lg">
        <CardContent>
          <img src="/goldorpoop_logo.png" alt="Gold or Poop Logo" className="mx-auto mb-4 w-40 h-auto" />
          {!user ? (
            <GoogleLogin
              clientId={CLIENT_ID}
              buttonText="Login with Google"
              onSuccess={handleLoginSuccess}
              onFailure={handleLoginFailure}
              cookiePolicy={'single_host_origin'}
            />
          ) : (
            <>
              <h2 className="text-lg font-semibold mb-2">Welcome, {user.name}</h2>
              <p>Gold: {gold}</p>
              <p>Coins: {coins}</p>
              <div className="mt-4">
                <Input
                  type="text"
                  placeholder="Enter item (e.g., gold)"
                  value={tradeItem}
                  onChange={(e) => setTradeItem(e.target.value)}
                  className="mb-2"
                />
                <Input
                  type="number"
                  placeholder="Enter trade value"
                  value={tradeValue}
                  onChange={(e) => setTradeValue(e.target.value)}
                  className="mb-2"
                />
                <Button onClick={handleTrade} className="bg-blue-500 text-white">
                  Trade
                </Button>
              </div>
            </>
          )}
        </CardContent>
      </Card>
    </div>
  );
}