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>

);
}