// GTA V Vehicle Upgrade Calculator with Discord Webhook
import React, { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import axios from 'axios';

const upgradeOptions = {
  engine: ['Stock', 'EMS Upgrade Level 1', 'EMS Upgrade Level 2', 'EMS Upgrade Level 3'],
  brakes: ['Stock', 'Street Brakes', 'Sport Brakes', 'Race Brakes'],
  transmission: ['Stock', 'Street Transmission', 'Sports Transmission', 'Race Transmission'],
  suspension: ['Stock', 'Lowered', 'Street', 'Sport', 'Competition'],
  armor: ['None', 'Armor Upgrade 20%', '40%', '60%', '80%', '100%'],
  turbo: ['None', 'Turbo Tuning']
};

const getUpgradeCost = (category, option) => {
  const costs = {
    engine: [0, 9000, 12500, 18000],
    brakes: [0, 1000, 1500, 2000],
    transmission: [0, 7000, 10000, 14000],
    suspension: [0, 500, 1000, 1500, 2000],
    armor: [0, 5000, 10000, 15000, 20000, 25000],
    turbo: [0, 25000]
  };
  const index = upgradeOptions[category].indexOf(option);
  return costs[category][index] || 0;
};

export default function VehicleUpgradeCalculator() {
  const [selections, setSelections] = useState({});
  const [webhook, setWebhook] = useState('');
  const [total, setTotal] = useState(0);

  const handleChange = (category, value) => {
    const updatedSelections = { ...selections, [category]: value };
    setSelections(updatedSelections);
    const newTotal = Object.entries(updatedSelections).reduce((acc, [cat, val]) => acc + getUpgradeCost(cat, val), 0);
    setTotal(newTotal);
  };

  const sendToDiscord = async () => {
    if (!webhook) return;
    const content = `**GTA V Vehicle Upgrade Summary**\n\n${Object.entries(selections)
      .map(([key, value]) => `**${key.charAt(0).toUpperCase() + key.slice(1)}:** ${value}`)
      .join('\n')}\n\n**Total Cost:** $${total}`;

    try {
      await axios.post(webhook, {
        content
      });
      alert('Sent to Discord!');
    } catch (error) {
      alert('Failed to send to Discord.');
    }
  };

  return (
    <div className="p-4 grid gap-4 max-w-xl mx-auto">
      <h1 className="text-2xl font-bold">GTA V Vehicle Upgrade Calculator</h1>
      {Object.entries(upgradeOptions).map(([category, options]) => (
        <Card key={category}>
          <CardContent className="p-4">
            <Label className="block mb-2 capitalize">{category}</Label>
            <select
              className="w-full p-2 rounded border"
              onChange={(e) => handleChange(category, e.target.value)}
              value={selections[category] || ''}
            >
              <option value="" disabled>Select {category}</option>
              {options.map((option) => (
                <option key={option} value={option}>{option}</option>
              ))}
            </select>
          </CardContent>
        </Card>
      ))}
      <Card>
        <CardContent className="p-4">
          <Label htmlFor="webhook">Discord Webhook URL</Label>
          <Input
            id="webhook"
            value={webhook}
            onChange={(e) => setWebhook(e.target.value)}
            placeholder="https://discord.com/api/webhooks/..."
          />
        </CardContent>
      </Card>
      <div className="text-lg font-semibold">Total: ${total}</div>
      <Button onClick={sendToDiscord}>Send to Discord</Button>
    </div>
  );
}