import { Flame, MapPin } from "lucide-react";
import { useTranslation } from "react-i18next";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";

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

interface HotspotStatsPanelProps {
  hasLocation: boolean;
  radiusKm: number;
  locationHint: string;
  cells: HotspotCellInfo[];
}

export function HotspotStatsPanel({ hasLocation, radiusKm, locationHint, cells }: HotspotStatsPanelProps) {
  const { t } = useTranslation();

  return (
    <Card className="h-full">
      <CardHeader className="space-y-1">
        <CardTitle className="flex items-center gap-2">
          <Flame className="h-5 w-5 text-primary" />
          {t("hotspots.title")}
        </CardTitle>
        <CardDescription>{t("hotspots.description", { radius: radiusKm })}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {!hasLocation && <p className="text-sm text-muted-foreground">{locationHint}</p>}
        {hasLocation && cells.length === 0 && <p className="text-sm text-muted-foreground">{t("hotspots.empty")}</p>}
        {cells.length > 0 && (
          <ScrollArea className="max-h-[280px] pr-2">
            <ul className="space-y-3">
              {cells.map(cell => (
                <li key={cell.id} className="rounded-xl border border-border/60 bg-muted/50 p-3">
                  <div className="flex items-center justify-between gap-3">
                    <div className="flex flex-col">
                      <span className="text-sm font-semibold text-foreground">{cell.title}</span>
                      <span className="text-xs text-muted-foreground">{cell.subtitle}</span>
                    </div>
                    <Badge variant="outline" className="border-primary/40 text-xs text-primary">
                      {cell.intensity.toFixed(1)}
                    </Badge>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="mt-2 w-full justify-center gap-2 text-xs"
                    onClick={cell.onFocus}
                  >
                    <MapPin className="h-3.5 w-3.5" /> {t("hotspots.focus")}
                  </Button>
                </li>
              ))}
            </ul>
          </ScrollArea>
        )}
      </CardContent>
    </Card>
  );
}