import { CheckCircle2, CreditCard, Mail, XCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PreviewLink } from "@/components/layout/preview-context";
import { PreviewNotice } from "@/components/shared/page";
export function PaymentResult({ success }: { success: boolean }) {
  return (
    <div className="mx-auto flex min-h-[75vh] max-w-lg items-center py-10">
      <section className="panel w-full p-6 text-center sm:p-9">
        <div
          className={`mx-auto mb-6 flex size-16 items-center justify-center rounded-full ${success ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"}`}
        >
          {success ? <CheckCircle2 size={36} /> : <XCircle size={36} />}
        </div>
        <p className="mb-2 text-xs font-semibold tracking-widest text-muted-foreground">
          PAYMENT OUTCOME PREVIEW
        </p>
        <h1 className="text-2xl font-semibold">
          {success ? "Payment Successful!" : "Payment Failed"}
        </h1>
        <p className="mt-4 mb-6 text-sm leading-6 text-muted-foreground">
          {success
            ? "This is the successful payment screen. In the connected product, invoice delivery and service activation follow payment verification."
            : "This is the failed payment screen. A declined card, insufficient funds, lost connection, or payment provider issue can cause a real payment to fail."}
        </p>
        <PreviewNotice>
          {success
            ? "No payment was collected, invoice emailed, or subscription activated."
            : "No payment was attempted and no funds were charged."}
        </PreviewNotice>
        <div className="mt-6 space-y-3 text-left text-sm text-muted-foreground">
          <div className="flex gap-3">
            <Mail size={18} className="shrink-0 text-info" />
            <p>
              {success
                ? "Email confirmation and account provisioning are outside this local preview."
                : "Review the plan and retry the demonstration using the button below."}
            </p>
          </div>
          <div className="flex gap-3">
            <CreditCard size={18} className="shrink-0 text-info" />
            <p>Sample payment state · TIAR Demo Organization</p>
          </div>
        </div>
        <div className="mt-8 grid gap-3">
          <Button asChild>
            <PreviewLink href={success ? "/onboarding" : "/subscription"}>
              {success ? "Preview onboarding setup" : "Try Again"}
            </PreviewLink>
          </Button>
          <Button variant="outline" asChild>
            <PreviewLink href="/organization/subscription">
              Back to subscription
            </PreviewLink>
          </Button>
        </div>
      </section>
    </div>
  );
}