<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Net worth Expense Tracker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Expense Tracker</h1>

    <!-- Total Income Input with Heart-shaped Button -->
    <div class="input-group">
      <label for="totalIncome">Total Income:</label>
      <input type="number" id="totalIncome" placeholder="Enter your income" min="0" required>
      <button class="heart-btn" id="totalIncomeBtn">❤️</button>
    </div>

    <!-- Form for Adding Expenses -->
    <form id="expenseForm">
      <div class="input-group">
        <label for="expenseName">Expense Name:</label>
        <input type="text" id="expenseName" placeholder="Enter expense name" required>
        <button class="heart-btn" id="expenseNameBtn">❤️</button>
      </div>
      <div class="input-group">
        <label for="expenseAmount">Expense Amount:</label>
        <input type="number" id="expenseAmount" placeholder="Enter expense amount" min="0" required>
        <button class="heart-btn" id="expenseAmountBtn">❤️</button>
      </div>
      <div class="input-group">
        <label for="expenseCategory">Category:</label>
        <select id="expenseCategory" required>
          <option value="Food">Food</option>
          <option value="Transport">Transport</option>
          <option value="Utilities">Utilities</option>
          <option value="Entertainment">Entertainment</option>
          <option value="Healthcare">Healthcare</option>
          <option value="Education">Education</option>
          <option value="Clothing">Clothing</option>
          <option value="Rent">Rent</option>
          <option value="Groceries">Groceries</option>
          <option value="Insurance">Insurance</option>
          <option value="Loan">Loan</option>
          <option value="Miscellaneous">Miscellaneous</option>
          <option value="Savings">Savings</option>
          <option value="Subscriptions">Subscriptions</option>
          <option value="Gifts">Gifts</option>
          <option value="Taxes">Taxes</option>
          <option value="Charity">Charity</option>
          <option value="Travel">Travel</option>
        </select>
        <button class="heart-btn" id="categoryBtn">❤️</button>
      </div>
      <button type="submit">Add Expense</button>
    </form>

    <!-- Currency Selector -->
    <div class="input-group">
      <label for="currencySelect">Currency:</label>
      <select id="currencySelect">
        <option value="$">USD ($)</option>
        <option value="€">EUR (€)</option>
        <option value="₹">INR (₹)</option>
        <option value="£">GBP (£)</option>
      </select>
    </div>

    <!-- Summary Section -->
    <div class="summary">
      <p>Total Expenses: <span id="totalExpenses">0.00</span></p>
      <p>Remaining Balance: <span id="remainingBalance">0.00</span></p>
    </div>

    <!-- Expense List -->
    <ul id="expenseList" class="expense-list"></ul>

    <!-- Buttons -->
    <div class="buttons">
      <button id="exportCsvBtn">Export to CSV</button>
      <button id="shareAppBtn">Share App</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
}

.container {
  max-width: 600px;
  margin: 50px auto;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

.input-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  width: 60%;
}

input, select, button {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

button {
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}

.heart-btn {
  background-color: transparent;
  color: red;
  font-size: 30px;
  border: none;
  cursor: pointer;
  margin-left: 10px;
}

.heart-btn:hover {
  color: darkred;
}

.summary {
  margin: 20px 0;
  text-align: center;
}

.summary p {
  font-size: 18px;
  margin: 10px 0;
}

.expense-list {
  list-style-type: none;
  padding: 0;
}

.expense-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f9f9f9;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.expense-item button {
  margin-left: 5px;
  background-color: #f44336;
}

.expense-item button.edit-btn {
  background-color: #ffc107;
}

.expense-item button:hover {
  opacity: 0.8;
}

.buttons {
  text-align: center;
  margin-top: 20px;
}

.buttons button {
  width: auto;
  padding: 10px 20px;
  margin: 5px;
}

document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("expenseForm");
  const totalIncome = document.getElementById("totalIncome");
  const expenseList = document.getElementById("expenseList");
  const totalExpenses = document.getElementById("totalExpenses");
  const remainingBalance = document.getElementById("remainingBalance");
  const currencySelect = document.getElementById("currencySelect");

  let state = {
    income: 0,
    expenses: 0,
    currency: currencySelect.value,
  };

  const updateSummary = () => {
    totalExpenses.textContent = `${state.currency} ${state.expenses.toFixed(2)}`;
    remainingBalance.textContent = `${state.currency} ${(state.income - state.expenses).toFixed(2)}`;
  };

  const addExpense = (name, amount, category) => {
    const li = document.createElement("li");
    li.classList.add("expense-item");
    li.innerHTML = `
      <span>${name} (${category})</span>
      <span>${state.currency} ${amount.toFixed(2)}</span>
      <button class="edit-btn">Edit</button>
      <button class="delete-btn">Delete</button>
    `;
    expenseList.appendChild(li);

    li.querySelector(".edit-btn").addEventListener("click", () => editExpense(li, name, amount, category));
    li.querySelector(".delete-btn").addEventListener("click", () => deleteExpense(li, amount));
  };

  const editExpense = (li, oldName, oldAmount, oldCategory) => {
    const newName = prompt("Edit Expense Name:", oldName) || oldName;
    const newAmount = parseFloat(prompt("Edit Expense Amount:", oldAmount)) || oldAmount;
    const newCategory = prompt("Edit Expense Category:", oldCategory) || oldCategory;

    state.expenses -= oldAmount;
    state.expenses += newAmount;
    updateSummary();

    li.querySelector("span").textContent = `${newName} (${newCategory})`;
    li.querySelectorAll("span")[1].textContent = `${state.currency} ${newAmount.toFixed(2)}`;
  };

  const deleteExpense = (li, amount) => {
    state.expenses -= amount;
    li.remove();
    updateSummary();
  };

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const expenseName = document.getElementById("expenseName").value.trim();
    const expenseAmount = parseFloat(document.getElementById("expenseAmount").value);
    const expenseCategory = document.getElementById("expenseCategory").value;

    if (!expenseName || isNaN(expenseAmount)) return alert("Please enter valid expense details.");

    addExpense(expenseName, expenseAmount, expenseCategory);
    state.expenses += expenseAmount;
    updateSummary();
    form.reset();
  });

  totalIncome.addEventListener("input", (e) => {
    state.income = parseFloat(e.target.value);
    updateSummary();
  });

  currencySelect.addEventListener("change", (e) => {
    state.currency = e.target.value;
    updateSummary();
  });

  document.getElementById("exportCsvBtn").addEventListener("click", () => {
    const expensesData = [["Expense Name", "Category", "Amount"]];
    document.querySelectorAll(".expense-item").forEach((item) => {
      const name = item.querySelector("span").textContent.split(" (")[0];
      const category = item.querySelector("span").textContent.split(" (")[1].slice(0, -1);
      const amount = parseFloat(item.querySelectorAll("span")[1].textContent.split(" ")[1]);
      expensesData.push([name, category, amount]);
    });

    const csv = expensesData.map(row => row.join(",")).join("\n");
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "expenses.csv";
    link.click();
  });

  document.getElementById("shareAppBtn").addEventListener("click", () => {
    if (navigator.share) {
      navigator.share({
        title: "Expense Tracker",
        url: window.location.href,
      }).catch((error) => {
        alert("Error sharing the app: " + error);
      });
    } else {
      alert("Sharing is not supported on this device.");
    }
  });
});