import { useEffect, useState } from "react";
import MapView from "./components/MapView.jsx";
import Sidebar from "./components/Sidebar.jsx";
import SubmitForm from "./components/SubmitForm.jsx";
import AdminPanel from "./components/AdminPanel.jsx";
import { getApproved, submit } from "./services/businessRepository.js";

export default function App() {
  const [businesses, setBusinesses] = useState([]);
  const [selectedId, setSelectedId] = useState(null);
  const [formStep, setFormStep] = useState(null); // null | 'picking' | 'editing'
  const [pickedLocation, setPickedLocation] = useState(null);
  const [adminOpen, setAdminOpen] = useState(false);

  async function loadBusinesses() {
    setBusinesses(await getApproved());
  }

  useEffect(() => { loadBusinesses(); }, []);

  const selected = businesses.find((b) => b.id === selectedId) || null;

  function handlePickLocation(loc) {
    setPickedLocation(loc);
    if (formStep === "picking") setFormStep("editing");
  }

  async function handleSubmit(data) {
    await submit(data);
    setFormStep(null);
    setPickedLocation(null);
    alert("¡Gracias! Tu propuesta queda pendiente de revisión.");
  }

  function handleCancel() {
    setFormStep(null);
    setPickedLocation(null);
  }

  return (
    <div className="app">
      <Sidebar
        business={selected}
        onContribute={() => setFormStep("picking")}
        onClose={() => setSelectedId(null)}
        picking={formStep === "picking"}
        onCancelPicking={handleCancel}
        onAdmin={() => setAdminOpen(true)}
      />
      <MapView
        businesses={businesses}
        selectedId={selectedId}
        onSelect={setSelectedId}
        pickingLocation={formStep === "picking"}
        onPickLocation={handlePickLocation}
        pickedLocation={pickedLocation}
      />
      {formStep === "editing" && (
        <SubmitForm
          pickedLocation={pickedLocation}
          onSubmit={handleSubmit}
          onCancel={handleCancel}
          onRepick={() => setFormStep("picking")}
        />
      )}
      {adminOpen && (
        <AdminPanel
          onClose={() => setAdminOpen(false)}
          onApproved={loadBusinesses}
        />
      )}
    </div>
  );
}