import { useState } from "react";
import CatalogView from "./components/CatalogView.jsx";
import WatchlistTable from "./components/WatchlistTable.jsx";
import ItemDetail from "./components/ItemDetail.jsx";
import SummaryChart from "./components/SummaryChart.jsx";

const TABS = [
  { id: "catalog", label: "Catalog" },
  { id: "watchlist", label: "Watchlist" },
  { id: "summary", label: "Dashboard" },
];

export default function App() {
  const [tab, setTab] = useState("catalog");
  const [detailSlug, setDetailSlug] = useState(null);
  const [priceMin, setPriceMin] = useState(0);
  const [priceMax, setPriceMax] = useState(99999);

  if (detailSlug) {
    return (
      <div className="app">
        <header>
          <h1>Warframe Market Tracker</h1>
        </header>
        <ItemDetail slug={detailSlug} onBack={() => setDetailSlug(null)} />
      </div>
    );
  }

  return (
    <div className="app">
      <header>
        <h1>Warframe Market Tracker</h1>
      </header>
      <div className="tabs">
        {TABS.map((t) => (
          <button
            key={t.id}
            className={`tab-btn${tab === t.id ? " active" : ""}`}
            onClick={() => setTab(t.id)}
          >
            {t.label}
          </button>
        ))}
      </div>
      <div style={{ display: tab === "catalog" ? "block" : "none" }}>
        <CatalogView />
      </div>
      {tab === "watchlist" && (
        <>
          <div className="controls">
            <div className="range-filter">
              <label>Min platinum:</label>
              <input
                type="number"
                value={priceMin}
                onChange={(e) => setPriceMin(Number(e.target.value) || 0)}
                min={0}
              />
              <label>Max platinum:</label>
              <input
                type="number"
                value={priceMax}
                onChange={(e) => setPriceMax(Number(e.target.value) || 99999)}
                min={0}
              />
            </div>
          </div>
          <WatchlistTable
            priceMin={priceMin}
            priceMax={priceMax}
            onItemSelect={setDetailSlug}
          />
        </>
      )}
      {tab === "summary" && (
        <>
          <div className="controls">
            <div className="range-filter">
              <label>Min platinum:</label>
              <input
                type="number"
                value={priceMin}
                onChange={(e) => setPriceMin(Number(e.target.value) || 0)}
                min={0}
              />
              <label>Max platinum:</label>
              <input
                type="number"
                value={priceMax}
                onChange={(e) => setPriceMax(Number(e.target.value) || 99999)}
                min={0}
              />
            </div>
          </div>
          <SummaryChart priceMin={priceMin} priceMax={priceMax} />
        </>
      )}
    </div>
  );
}