import { useState } from 'react';

import { Button } from '@/components/ui/button';

import { Card, CardContent } from '@/components/ui/card';

const robotParts = [

{ name: 'Laser Arm', power: 20 },

{ name: 'Rocket Legs', power: 15 },

{ name: 'AI Brain', power: 25 },

{ name: 'Steel Chest', power: 10 },

];

export default function RobotForge() {

const [robot, setRobot] = useState([]);

const [battleLog, setBattleLog] = useState('');

const [leaderboard, setLeaderboard] = useState([]);

const [playerName, setPlayerName] = useState('');

const addPart = (part) => {

if (robot.length >= 3) return;

setRobot([...robot, part]);

};

const simulateBattle = async () => {

const totalPower = robot.reduce((sum, part) => sum + part.power, 0);

const response = await fetch('https://your-alibaba-cloud-function-url', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ player: playerName, power: totalPower }),

});

const result = await response.json();

setBattleLog(result.message);

fetchLeaderboard();

};

const fetchLeaderboard = async () => {

const res = await fetch('https://your-leaderboard-endpoint');

const data = await res.json();

setLeaderboard(data);

};

return (

Robot Forge

  <input

    type="text"

    placeholder="Enter your name"

    className="border p-2 rounded w-full"

    value={playerName}

    onChange={(e) => setPlayerName(e.target.value)}

  />



  <div className="grid grid-cols-2 gap-4">

    {robotParts.map((part, idx) => (

      <Card key={idx} onClick={() => addPart(part)} className="cursor-pointer">

        <CardContent>

          <p>{part.name}</p>

          <p>Power: {part.power}</p>

        </CardContent>

      </Card>

    ))}

  </div>



  <div>

    <h2 className="text-xl">Your Robot:</h2>

    <ul>

      {robot.map((part, idx) => (

        <li key={idx}>{part.name} (Power: {part.power})</li>

      ))}

    </ul>

  </div>



  <Button onClick={simulateBattle} disabled={robot.length < 3 || !playerName}>

    Simulate Battle

  </Button>



  {battleLog && <p className="mt-4 bg-gray-100 p-2 rounded">{battleLog}</p>}



  <div className="mt-6">

    <h2 className="text-xl font-semibold">Leaderboard</h2>

    <ul className="bg-white rounded p-2 shadow">

      {leaderboard.map((entry, idx) => (

        <li key={idx} className="flex justify-between py-1 border-b">

          <span>{entry.player}</span>

          <span>{entry.score}</span>

        </li>

      ))}

    </ul>

  </div>

</div>

);

}