import { useMonthly, useSummary } from '../api/queries.js';
import { useHouseholdContext } from '../household/HouseholdContext.jsx';
import MonthlyBarChart from '../components/MonthlyBarChart.jsx';
import PayerComparisonChart from '../components/PayerComparisonChart.jsx';
import Icon from '../components/Icon.jsx';

export default function Stats() {
  const { activeHousehold: household } = useHouseholdContext();
  const { data: monthly } = useMonthly();
  const { data: summary } = useSummary();

  const members = household?.members || [];
  const currency = household?.currency || 'PLN';

  return (
    <div>
      <h1 className="page-title">Statystyki</h1>

      <div className="card">
        <h3>Wydatki miesiąc do miesiąca</h3>
        {!monthly ? <p>Ładowanie…</p> : <MonthlyBarChart data={monthly} currency={currency} />}
      </div>

      <div className="card">
        <h3>Kto więcej konsumuje (ten miesiąc)</h3>
        {!summary ? (
          <p>Ładowanie…</p>
        ) : (
          <PayerComparisonChart members={members} byShare={summary.byShare} currency={currency} />
        )}
      </div>

      <div className="card">
        <h3>Kategorie od najdroższej</h3>
        {summary && (
          <div>
            {summary.byCategory.length === 0 && <p className="empty-state">Brak wydatków w tym miesiącu</p>}
            {summary.byCategory.map((c) => (
              <div key={c.categoryId || 'none'} className="category-manage-row">
                <Icon name={c.icon || 'inventory_2'} className="icon" />
                <span className="name">{c.name || 'Bez kategorii'}</span>
                <strong>{c.total.toFixed(2)} {currency}</strong>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}