"use client";

import { DEFAULT_STATION_NAME } from "@/lib/constants";
import { useWeatherStore } from "@/lib/store";
import { useWeatherStations } from "@/hooks/use-weather-stations";
import { WeatherHero } from "@/components/weather/weather-hero";
import { FavoritesSection } from "@/components/weather/favorites-section";
import { StationsExplorer } from "@/components/weather/stations-explorer";
import { PageLoadingSkeleton } from "@/components/states/loading-skeleton";
import { ErrorState } from "@/components/states/error-state";
import { useI18n } from "@/lib/i18n";

export function DashboardPage() {
  const { t } = useI18n();
  const { data: stations, isPending, isError, refetch } = useWeatherStations();
  const selectedStationId = useWeatherStore((state) => state.selectedStationId);
  if (isPending) return <PageLoadingSkeleton />;
  if (isError || !stations?.length) return <ErrorState onRetry={() => refetch()} description={t("dashboard.error")} />;
  const selectedStation = stations.find((station) => station.id === selectedStationId)
    ?? stations.find((station) => station.name === DEFAULT_STATION_NAME)
    ?? stations[0];

  return (
    <div className="space-y-10">
      <WeatherHero station={selectedStation} />
      <FavoritesSection stations={stations} />
      <StationsExplorer stations={stations} />
    </div>
  );
}