"use client";

import { ArrowRight, CheckCircle2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

interface RoundNextPanelProps {
  /** Next colony to do, or null when the round is complete. */
  next: { id: string; code: string } | null;
  /** Colonies inspected in this round (for the closing message). */
  doneCount: number;
  /** Saved without a network: it syncs later. */
  savedOffline: boolean;
  onNext: () => void;
  onEnd: () => void;
}

/** After a save in a round: one main step - on to the next colony. */
export function RoundNextPanel({ next, doneCount, savedOffline, onNext, onEnd }: RoundNextPanelProps) {
  return (
    <Card className="max-w-lg">
      <CardContent className="flex flex-col gap-4">
        <p role="status" className="flex items-center gap-2 text-lg font-medium">
          <CheckCircle2 className="size-5 text-condition-good-ink" aria-hidden />
          Gespeichert
        </p>
        {savedOffline ? (
          <p className="text-sm text-muted-foreground">
            Kein Netzwerk – die Durchsicht wird synchronisiert, sobald du wieder Netz hast.
          </p>
        ) : null}
        {next ? (
          <>
            <Button type="button" size="touch" className="h-12 text-base" onClick={onNext}>
              Weiter mit {next.code}
              <ArrowRight aria-hidden />
            </Button>
            <Button type="button" size="touch" variant="outline" onClick={onEnd}>
              Runde beenden
            </Button>
          </>
        ) : (
          <>
            <p>Runde abgeschlossen – alle {doneCount} Völker</p>
            <Button type="button" size="touch" className="h-12 text-base" onClick={onEnd}>
              Zum Stand
            </Button>
          </>
        )}
      </CardContent>
    </Card>
  );
}