import { useTranslation } from "react-i18next";

import { ActivityPanel } from "@/components/panels/activity-panel";
import { HotspotStatsPanel } from "@/components/panels/hotspot-stats-panel";
import { MapTilesPanel } from "@/components/panels/map-tiles-panel";
import { OverviewPanel } from "@/components/panels/overview-panel";
import { ScrollArea } from "@/components/ui/scroll-area";
import type { FeedError } from "@/hooks/use-hotsop-feed";
import { formatRelativeTime } from "@/lib/utils";
import { useAppStore } from "@/store/use-app-store";

type DangerCell = {
  id: string;
  title: string;
  subtitle: string;
  intensity: number;
  onFocus: () => void;
};

type ActivityItem = {
  id: string;
  title: string;
  subtitle: string;
  timestampLabel: string;
  distanceLabel: string;
  onFocus: () => void;
};

interface SidebarPanelsProps {
  localTotals: { points: number; contributors: number };
  lastUpdatedLabel: string;
  myVisibleSignalCreatedAt: string | null;
  error: FeedError | null;
  onReport: () => void;
  onRetry: () => void;
  isBusy: boolean;
  locationHint: string;
  showLocationCta: boolean;
  dangerCells: DangerCell[];
  recentActivity: ActivityItem[];
}

export function SidebarPanels({
  localTotals,
  lastUpdatedLabel,
  myVisibleSignalCreatedAt,
  error,
  onReport,
  onRetry,
  isBusy,
  locationHint,
  showLocationCta,
  dangerCells,
  recentActivity,
}: SidebarPanelsProps) {
  const { i18n, t } = useTranslation();
  const locale = i18n.language === "fr" ? "fr-FR" : "en-US";
  const hasLocation = useAppStore(state => Boolean(state.userLocation));

  return (
    <ScrollArea className="h-full">
      <div className="flex flex-col gap-4 p-4 pb-6">
        <OverviewPanel
          nearbySignals={localTotals.points}
          uniqueContributors={localTotals.contributors}
          lastUpdatedLabel={lastUpdatedLabel}
          mySignalLabel={myVisibleSignalCreatedAt ? formatRelativeTime(myVisibleSignalCreatedAt, locale) : null}
          error={error}
          onReport={onReport}
          onRetry={onRetry}
          isPosting={isBusy}
          locationHint={locationHint}
          showLocationCta={showLocationCta}
          disableReport={!hasLocation}
        />
        <HotspotStatsPanel hasLocation={hasLocation} radiusKm={1} locationHint={locationHint} cells={dangerCells} />
        <ActivityPanel items={recentActivity} emptyMessage={t("activity.empty")} />
        <MapTilesPanel />
      </div>
    </ScrollArea>
  );
}
