import { AlertCircleIcon, Radio } 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 type { FeedError } from "@/hooks/use-hotsop-feed";

import { Alert, AlertTitle } from "../ui/alert";

interface OverviewPanelProps {
  nearbySignals: number;
  uniqueContributors: number;
  lastUpdatedLabel: string;
  mySignalLabel: string | null;
  error: FeedError | null;
  onReport: () => void;
  onRetry: () => void;
  isPosting: boolean;
  locationHint: string;
  showLocationCta: boolean;
  disableReport: boolean;
}

export function OverviewPanel({
  nearbySignals,
  uniqueContributors,
  lastUpdatedLabel,
  mySignalLabel,
  error,
  onReport,
  onRetry,
  isPosting,
  locationHint,
  showLocationCta,
  disableReport,
}: OverviewPanelProps) {
  const { t } = useTranslation();
  const errorMessage = error ? t(error.key, error.values) : null;

  return (
    <Card>
      <CardHeader className="space-y-1">
        <CardTitle className="flex items-center gap-2">
          <Radio className="h-5 w-5 text-primary" />
          {t("overview.title")}
        </CardTitle>
        <CardDescription>{t("overview.description")}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-2 gap-3">
          <div className="rounded-xl border border-border/60 bg-muted/50 p-3">
            <span className="text-xs uppercase text-muted-foreground">{t("overview.stats.signals")}</span>
            <p className="text-xl font-semibold">{nearbySignals}</p>
          </div>
          <div className="rounded-xl border border-border/60 bg-muted/50 p-3">
            <span className="text-xs uppercase text-muted-foreground">{t("overview.stats.contributors")}</span>
            <p className="text-xl font-semibold">{uniqueContributors}</p>
          </div>
        </div>
        {mySignalLabel && (
          <Badge variant="secondary" className="w-full justify-center rounded-full py-2 text-xs uppercase">
            {t("overview.badge", { time: mySignalLabel })}
          </Badge>
        )}
        {errorMessage ? (
          <Alert variant="destructive" onClick={onRetry} className="pointer">
            <AlertCircleIcon />
            <AlertTitle>{errorMessage}</AlertTitle>
          </Alert>
        ) : (
          <p className="text-sm text-muted-foreground">{locationHint}</p>
        )}
        <Button className="w-full" onClick={onReport} disabled={isPosting || disableReport}>
          {isPosting ? t("overview.cta.sending") : disableReport ? t("overview.cta.waiting") : t("overview.cta.send")}
        </Button>
        {showLocationCta && !errorMessage && (
          <p className="text-xs text-muted-foreground">{t("overview.locationPermission")}</p>
        )}
        <p className="text-[11px] uppercase text-muted-foreground">
          {t("overview.lastSynced", { time: lastUpdatedLabel })}
        </p>
      </CardContent>
    </Card>
  );
}
