// Recharts from CDN
const { PieChart, Pie, Cell, ResponsiveContainer } = Recharts;

const categories = ["Food", "Housing", "Gym", "Business", "Entertainment", "Other"];

const colors = {
  green: "#5FAF7A",
  beige: "#E6E2D9",
  teal: "#6FA7A3",
  dark: "#3F5F5F",
  yellow: "#E5C46A",
  orange: "#E36A3D"
};

function App() {
  const [transactions, setTransactions] = React.useState([]);
  const [accounts, setAccounts] = React.useState([]);
  const [budgets, setBudgets] = React.useState({});
  const [goals, setGoals] = React.useState([]);

  const [form, setForm] = React.useState({
    name: "",
    amount: "",
    type: "expense",
    category: "Food",
    accountName: "",
    accountBalance: ""
  });

  React.useEffect(() => {
    const data = JSON.parse(localStorage.getItem("financeApp"));
    if (data) {
      setTransactions(data.transactions || []);
      setAccounts(data.accounts || []);
      setBudgets(data.budgets || {});
      setGoals(data.goals || []);
    }
  }, []);

  React.useEffect(() => {
    localStorage.setItem("financeApp", JSON.stringify({ transactions, accounts, budgets, goals }));
  }, [transactions, accounts, budgets, goals]);

  const addTransaction = () => {
    if (!form.name || !form.amount) return;
    setTransactions([...transactions, { ...form, amount: parseFloat(form.amount) }]);
    setForm({ ...form, name: "", amount: "" });
  };

  const totalIncome = transactions.filter(t => t.type === "income").reduce((a, t) => a + t.amount, 0);
  const totalExpenses = transactions.filter(t => t.type === "expense").reduce((a, t) => a + t.amount, 0);
  const savings = totalIncome - totalExpenses;

  const netWorth = accounts.reduce((a, acc) => a + acc.balance, 0);

  const totalBudget = Object.values(budgets).reduce((a, b) => a + (b || 0), 0);
  const spendingStatus = totalExpenses > totalBudget ? "High" : "On Track";

  const pieData = [
    { name: "Income", value: totalIncome },
    { name: "Spending", value: totalExpenses },
    { name: "Savings", value: savings > 0 ? savings : 0 }
  ];

  const pieColors = [colors.teal, colors.orange, colors.yellow];

  return (
    <div style={{ padding: 20, background: colors.beige }}>

      <h1>Finance Dashboard</h1>

      {/* Summary */}
      <div style={{ display: "flex", gap: 20, flexWrap: "wrap" }}>
        <div style={{ background: colors.green, color: "white", padding: 15, borderRadius: 10 }}>
          <h3>Monthly Summary</h3>
          <p>Income: ${totalIncome.toFixed(2)}</p>
          <p>Spending: ${totalExpenses.toFixed(2)}</p>
          <p>Savings: ${savings.toFixed(2)}</p>
        </div>

        <div style={{ background: "white", padding: 15, borderRadius: 10 }}>
          <h3>Breakdown</h3>
          <div style={{ width: 250, height: 200 }}>
            <ResponsiveContainer>
              <PieChart>
                <Pie data={pieData} dataKey="value" outerRadius={80}>
                  {pieData.map((entry, index) => (
                    <Cell key={index} fill={pieColors[index % pieColors.length]} />
                  ))}
                </Pie>
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>

      {/* Accounts */}
      <div style={{ marginTop: 20, background: colors.teal, color: "white", padding: 15, borderRadius: 10 }}>
        <h3>Accounts</h3>

        <input placeholder="Account Name" value={form.accountName}
          onChange={e => setForm({ ...form, accountName: e.target.value })} />

        <input placeholder="Balance" type="number" value={form.accountBalance}
          onChange={e => setForm({ ...form, accountBalance: e.target.value })} />

        <button onClick={() => {
          if (!form.accountName || !form.accountBalance) return;
          setAccounts([...accounts, {
            name: form.accountName,
            balance: parseFloat(form.accountBalance)
          }]);
          setForm({ ...form, accountName: "", accountBalance: "" });
        }}>
          Add Account
        </button>

        {accounts.map((a, i) => (
          <div key={i}>
            {a.name} - ${a.balance}
            <button onClick={() => {
              const newBalance = prompt("Update balance:", a.balance);
              if (newBalance === null) return;
              const updated = [...accounts];
              updated[i].balance = parseFloat(newBalance) || 0;
              setAccounts(updated);
            }}>Edit</button>

            <button onClick={() => {
              setAccounts(accounts.filter((_, idx) => idx !== i));
            }}>Delete</button>
          </div>
        ))}

        <p><b>Total: ${netWorth.toFixed(2)}</b></p>
      </div>

      {/* Budget */}
      <div style={{ marginTop: 20, background: colors.yellow, padding: 15, borderRadius: 10 }}>
        <h3>Budget</h3>
        {categories.map(cat => (
          <div key={cat}>
            {cat}
            <input type="number"
              value={budgets[cat] || ""}
              onChange={e => setBudgets({ ...budgets, [cat]: parseFloat(e.target.value) || 0 })}
            />
          </div>
        ))}
        <p>Total Budget: ${totalBudget.toFixed(2)}</p>
      </div>

      {/* Transactions */}
      <div style={{ marginTop: 20, background: colors.dark, color: "white", padding: 15, borderRadius: 10 }}>
        <h3>Transactions</h3>

        <input placeholder="Name" value={form.name}
          onChange={e => setForm({ ...form, name: e.target.value })} />

        <input placeholder="Amount" type="number" value={form.amount}
          onChange={e => setForm({ ...form, amount: e.target.value })} />

        <select value={form.type}
          onChange={e => setForm({ ...form, type: e.target.value })}>
          <option value="expense">Expense</option>
          <option value="income">Income</option>
        </select>

        <button onClick={addTransaction}>Add Transaction</button>

        {transactions.map((t, i) => (
          <div key={i}>
            {t.name} {t.type === "expense" ? "-" : "+"}${t.amount}
          </div>
        ))}
      </div>

    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);