import React, { useState, useEffect, useTransition } from "react";

function SalesDashboard() {
  const [salesData, setSalesData] = useState([]); // Full dataset
  const [filteredData, setFilteredData] = useState([]); // Displayed dataset
  const [isPending, startTransition] = useTransition(); // For deferred rendering
  const [filters, setFilters] = useState({ region: "", product: "" }); // Filters

  // Simulate real-time data updates using WebSocket
  useEffect(() => {
    const webSocket = new WebSocket("wss://example.com/sales-updates");
    webSocket.onmessage = (event) => {
      const newSales = JSON.parse(event.data);

      // Prioritize real-time updates immediately
      setSalesData((prevData) => [...prevData, ...newSales]);
    };

    return () => webSocket.close();
  }, []);

  // Handle user-applied filters with deferred updates
  const applyFilters = (newFilters) => {
    setFilters(newFilters);

    startTransition(() => {
      const updatedData = salesData.filter((sale) => {
        return (
          (!newFilters.region || sale.region === newFilters.region) &&
          (!newFilters.product || sale.product === newFilters.product)
        );
      });
      setFilteredData(updatedData); // Non-urgent rendering
    });
  };

  return (
    <div>
      <h1>Sales Dashboard</h1>

      {/* Filter Controls */}
      <FilterControls filters={filters} onApplyFilters={applyFilters} />

      {/* Loading Indicator */}
      {isPending && <p>Loading filtered data...</p>}

      {/* Data Visualization */}
      <DataCharts data={filteredData} />
      <DataTable data={filteredData} />
    </div>
  );
}

function FilterControls({ filters, onApplyFilters }) {
  const [region, setRegion] = useState(filters.region);
  const [product, setProduct] = useState(filters.product);

  const handleApply = () => {
    onApplyFilters({ region, product });
  };

  return (
    <div>
      <label>
        Region:
        <input value={region} onChange={(e) => setRegion(e.target.value)} />
      </label>
      <label>
        Product:
        <input value={product} onChange={(e) => setProduct(e.target.value)} />
      </label>
      <button onClick={handleApply}>Apply Filters</button>
    </div>
  );
}

function DataCharts({ data }) {
  // Render data into charts
  return <div>/* Visualization logic here */</div>;
}

function DataTable({ data }) {
  // Render data into a table
  return (
    <table>
      <thead>
        <tr>
          <th>Region</th>
          <th>Product</th>
          <th>Sales</th>
        </tr>
      </thead>
      <tbody>
        {data.map((row) => (
          <tr key={row.id}>
            <td>{row.region}</td>
            <td>{row.product}</td>
            <td>{row.sales}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}