/**
 * Post-submit success screen.
 *
 * Shows when the legacy backend has accepted the submission. Supports both
 * flows: creating a brand-new PO and adding line items to an existing PO.
 * The single primary action is the external link to the legacy admin's PO
 * editor; the secondary action resets the page for another submission.
 */

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

type Mode = "create" | "add";

interface ConfirmationViewProps {
  poId: number;
  itemCount: number;
  mode: Mode;
  onCreateAnother: () => void;
}

export function ConfirmationView({
  poId,
  itemCount,
  mode,
  onCreateAnother,
}: ConfirmationViewProps) {
  const externalUrl = `https://backend.acherryontop.com/po/edit/${poId}`;
  const heading =
    mode === "create" ? "Purchase order created" : "Products added to purchase order";
  const itemNoun = itemCount === 1 ? "item" : "items";
  const subhead =
    mode === "create"
      ? `PO #${poId} with ${itemCount} ${itemNoun} has been submitted to the backend.`
      : `${itemCount} ${itemNoun} added to PO #${poId}.`;
  const resetLabel = mode === "create" ? "Create another" : "Add more";

  return (
    <div className="max-w-2xl mx-auto pt-12">
      <Card>
        <CardContent className="pt-8 pb-6">
          <div className="flex flex-col items-center text-center">
            <div className="rounded-full bg-emerald-100 p-3 mb-4">
              <CheckCircle2 className="h-8 w-8 text-emerald-600" />
            </div>
            <h2 className="text-2xl font-semibold mb-1">{heading}</h2>
            <p className="text-muted-foreground mb-6">{subhead}</p>

            <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
              <Button asChild size="lg">
                <a href={externalUrl} target="_blank" rel="noreferrer">
                  Open PO #{poId}
                  <ExternalLink className="h-4 w-4 ml-2" />
                </a>
              </Button>
              <Button variant="outline" size="lg" onClick={onCreateAnother}>
                <Plus className="h-4 w-4 mr-2" />
                {resetLabel}
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
