const { useState, useMemo } = React;

const people = ["Alex", "Jordan", "Sam", "Riley"];
const categories = ["Food", "Transport", "Entertainment", "Utilities", "Shopping", "Health"];
const catColors = { Food: "#f59e0b", Transport: "#3b82f6", Entertainment: "#ec4899", Utilities: "#8b5cf6", Shopping: "#10b981", Health: "#ef4444" };

const initialExpenses = [
  { id: 1, desc: "Dinner at Sushi Place", amount: 86.50, paidBy: "Alex", splitWith: ["Alex", "Jordan", "Sam", "Riley"], category: "Food", date: "2026-05-20" },
  { id: 2, desc: "Uber to Airport", amount: 45.00, paidBy: "Jordan", splitWith: ["Jordan", "Sam"], category: "Transport", date: "2026-05-19" },
  { id: 3, desc: "Movie Tickets", amount: 52.00, paidBy: "Sam", splitWith: ["Alex", "Jordan", "Sam", "Riley"], category: "Entertainment", date: "2026-05-18" },
  { id: 4, desc: "Electricity Bill", amount: 120.00, paidBy: "Alex", splitWith: ["Alex", "Jordan", "Sam", "Riley"], category: "Utilities", date: "2026-05-17" },
  { id: 5, desc: "Grocery Run", amount: 67.30, paidBy: "Riley", splitWith: ["Alex", "Riley"], category: "Food", date: "2026-05-16" },
  { id: 6, desc: "Concert Tickets", amount: 150.00, paidBy: "Jordan", splitWith: ["Jordan", "Alex", "Sam"], category: "Entertainment", date: "2026-05-15" },
  { id: 7, desc: "Gas Station", amount: 55.00, paidBy: "Sam", splitWith: ["Sam", "Riley", "Alex"], category: "Transport", date: "2026-05-14" },
  { id: 8, desc: "New Headphones", amount: 89.99, paidBy: "Riley", splitWith: ["Riley"], category: "Shopping", date: "2026-05-13" },
];

function PieChart({ data }) {
  const total = data.reduce((s, d) => s + d.value, 0);
  let cumulative = 0;
  const slices = data.map(d => {
    const start = cumulative / total;
    cumulative += d.value;
    const end = cumulative / total;
    return { ...d, start, end };
  });

  return (
    <div className="pie-container">
      <svg viewBox="0 0 100 100" className="pie-svg">
        {slices.map((s, i) => {
          const startAngle = s.start * 360;
          const endAngle = s.end * 360;
          const largeArc = endAngle - startAngle > 180 ? 1 : 0;
          const startRad = (startAngle - 90) * Math.PI / 180;
          const endRad = (endAngle - 90) * Math.PI / 180;
          const x1 = 50 + 40 * Math.cos(startRad);
          const y1 = 50 + 40 * Math.sin(startRad);
          const x2 = 50 + 40 * Math.cos(endRad);
          const y2 = 50 + 40 * Math.sin(endRad);
          return (
            <path key={i} d={`M50,50 L${x1},${y1} A40,40 0 ${largeArc},1 ${x2},${y2} Z`} fill={s.color} />
          );
        })}
        <circle cx="50" cy="50" r="22" fill="#0f172a" />
        <text x="50" y="48" textAnchor="middle" fill="#e2e8f0" fontSize="8" fontWeight="700">${total.toFixed(0)}</text>
        <text x="50" y="57" textAnchor="middle" fill="#64748b" fontSize="4">total</text>
      </svg>
      <div className="pie-legend">
        {data.map(d => (
          <div key={d.label} className="legend-item">
            <span className="legend-dot" style={{ background: d.color }}></span>
            <span className="legend-label">{d.label}</span>
            <span className="legend-value">${d.value.toFixed(0)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function App() {
  const [expenses] = useState(initialExpenses);
  const [activeTab, setActiveTab] = useState("expenses");

  const totalSpent = expenses.reduce((s, e) => s + e.amount, 0);

  const balances = useMemo(() => {
    const bal = {};
    people.forEach(p => bal[p] = 0);
    expenses.forEach(e => {
      const share = e.amount / e.splitWith.length;
      bal[e.paidBy] += e.amount;
      e.splitWith.forEach(p => bal[p] -= share);
    });
    return bal;
  }, [expenses]);

  const catData = useMemo(() => {
    const sums = {};
    expenses.forEach(e => { sums[e.category] = (sums[e.category] || 0) + e.amount; });
    return Object.entries(sums).map(([label, value]) => ({ label, value, color: catColors[label] }));
  }, [expenses]);

  const settlements = useMemo(() => {
    const debtors = people.filter(p => balances[p] < -0.01).map(p => ({ name: p, amount: -balances[p] })).sort((a, b) => b.amount - a.amount);
    const creditors = people.filter(p => balances[p] > 0.01).map(p => ({ name: p, amount: balances[p] })).sort((a, b) => b.amount - a.amount);
    const result = [];
    let i = 0, j = 0;
    while (i < debtors.length && j < creditors.length) {
      const amt = Math.min(debtors[i].amount, creditors[j].amount);
      result.push({ from: debtors[i].name, to: creditors[j].name, amount: amt });
      debtors[i].amount -= amt;
      creditors[j].amount -= amt;
      if (debtors[i].amount < 0.01) i++;
      if (creditors[j].amount < 0.01) j++;
    }
    return result;
  }, [balances]);

  return (
    <div className="app">
      <header className="header">
        <h1>💰 BudgetBuddy</h1>
        <div className="header-stats">
          <div className="hstat"><span className="hstat-val">${totalSpent.toFixed(2)}</span><span className="hstat-lbl">Total Spent</span></div>
          <div className="hstat"><span className="hstat-val">{expenses.length}</span><span className="hstat-lbl">Expenses</span></div>
          <div className="hstat"><span className="hstat-val">{people.length}</span><span className="hstat-lbl">People</span></div>
        </div>
      </header>

      <div className="tabs">
        <button className={activeTab === "expenses" ? "active" : ""} onClick={() => setActiveTab("expenses")}>Expenses</button>
        <button className={activeTab === "balances" ? "active" : ""} onClick={() => setActiveTab("balances")}>Balances</button>
        <button className={activeTab === "settle" ? "active" : ""} onClick={() => setActiveTab("settle")}>Settle Up</button>
      </div>

      <div className="content-grid">
        <main className="main-panel">
          {activeTab === "expenses" && (
            <div className="expense-list">
              {expenses.map(e => (
                <div key={e.id} className="expense-item">
                  <div className="exp-cat" style={{ background: catColors[e.category] + "20", color: catColors[e.category] }}>{e.category[0]}</div>
                  <div className="exp-info">
                    <h4>{e.desc}</h4>
                    <span>Paid by <strong>{e.paidBy}</strong> · Split {e.splitWith.length} ways · {e.date}</span>
                  </div>
                  <div className="exp-amount">${e.amount.toFixed(2)}</div>
                </div>
              ))}
            </div>
          )}

          {activeTab === "balances" && (
            <div className="balance-list">
              {people.map(p => (
                <div key={p} className="balance-item">
                  <div className="bal-avatar">{p[0]}</div>
                  <span className="bal-name">{p}</span>
                  <span className={`bal-amount ${balances[p] >= 0 ? "positive" : "negative"}`}>
                    {balances[p] >= 0 ? "+" : ""}{balances[p].toFixed(2)}
                  </span>
                </div>
              ))}
            </div>
          )}

          {activeTab === "settle" && (
            <div className="settle-list">
              <h3>Suggested Settlements</h3>
              {settlements.map((s, i) => (
                <div key={i} className="settle-item">
                  <span className="settle-from">{s.from}</span>
                  <span className="settle-arrow">→</span>
                  <span className="settle-to">{s.to}</span>
                  <span className="settle-amt">${s.amount.toFixed(2)}</span>
                </div>
              ))}
            </div>
          )}
        </main>

        <aside className="side-panel">
          <h3>Spending by Category</h3>
          <PieChart data={catData} />
        </aside>
      </div>
    </div>
  );
}

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