import React, { useState, useEffect } from "react";
import { getSeed, getTrips, getTripItems, toggleTripItem } from "./api";
import ItemsPage from "./pages/ItemsPage";

export default function App() {
  const [view, setView] = useState<"trips" | "items">("trips");

  const [trips, setTrips] = useState<any[]>([]);
  const [items, setItems] = useState<Record<string, any[]>>({});

  async function loadTrips() {
    const data = await getTrips();
    setTrips(data);
  }

  async function loadItems(tripId: string) {
    const data = await getTripItems(tripId);
    setItems((prev) => ({ ...prev, [tripId]: data }));
  }

  useEffect(() => {
    if (view === "trips") {
      loadTrips();
    }
  }, [view]);

  if (view === "items") {
    return (
      <div className="p-4 max-w-4xl mx-auto">
        <div className="mb-4">
          <button
            onClick={() => setView("trips")}
            className="bg-gray-500 text-white px-3 py-1 rounded"
          >
            ← Zurück zu Trips
          </button>
        </div>
        <ItemsPage />
      </div>
    );
  }

  return (
    <div className="p-4 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Packlist</h1>

      <div className="flex gap-2 mb-4">
        <button
          className="bg-blue-500 text-white px-4 py-2 rounded"
          onClick={async () => {
            await getSeed();
            await loadTrips();
          }}
        >
          Seed-Daten erzeugen
        </button>
        <button
          className="bg-green-500 text-white px-4 py-2 rounded"
          onClick={() => setView("items")}
        >
          Alle Items
        </button>
      </div>

      {trips.map((trip) => (
        <div key={trip.id} className="border rounded p-2 mb-4">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="font-bold">{trip.name}</h2>
              <p>
                {trip.start_date} – {trip.end_date}
              </p>
            </div>
            <button
              className="text-sm text-blue-500 underline"
              onClick={() => loadItems(trip.id)}
            >
              Packliste anzeigen
            </button>
          </div>
          {items[trip.id] && (
            <ul className="mt-2">
              {items[trip.id].map((item) => (
                <li key={item.id} className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={item.checked}
                    onChange={async () => {
                      await toggleTripItem(item.id);
                      await loadItems(trip.id);
                    }}
                  />
                  <span>{item.name_calculated}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
      ))}
    </div>
  );
}
