"use client";

import { useSearchParams } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/atoms/button";
import {
  CheckCircleIcon,
  EnvelopeIcon,
  HomeIcon,
  DocumentTextIcon,
} from "@heroicons/react/24/outline";

/**
 * OrderConfirmation - Shown after successful order submission
 */
export function OrderConfirmation() {
  const searchParams = useSearchParams();
  const orderId = searchParams.get("orderId");

  return (
    <div className="max-w-2xl mx-auto text-center py-8">
      {/* Success Icon */}
      <div className="w-20 h-20 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-6">
        <CheckCircleIcon className="h-12 w-12 text-success" />
      </div>

      {/* Heading */}
      <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-2">
        Thank You for Your Order!
      </h1>
      <p className="text-muted-foreground mb-8">
        Your order has been successfully submitted and is being processed.
      </p>

      {/* Order Reference */}
      {orderId && (
        <div className="bg-card rounded-xl border border-border p-6 mb-8 shadow-[var(--cp-shadow-1)]">
          <p className="text-sm text-muted-foreground mb-1">Order Reference</p>
          <p className="text-xl font-mono font-bold text-foreground">{orderId}</p>
        </div>
      )}

      {/* What's Next Section */}
      <div className="bg-muted/50 rounded-xl p-6 mb-8 text-left">
        <h2 className="font-semibold text-foreground mb-4">What happens next?</h2>
        <div className="space-y-4">
          <div className="flex items-start gap-3">
            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
              <EnvelopeIcon className="h-4 w-4 text-primary" />
            </div>
            <div>
              <p className="font-medium text-foreground">Order Confirmation Email</p>
              <p className="text-sm text-muted-foreground">
                You'll receive an email with your order details shortly.
              </p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
              <DocumentTextIcon className="h-4 w-4 text-primary" />
            </div>
            <div>
              <p className="font-medium text-foreground">Order Review</p>
              <p className="text-sm text-muted-foreground">
                Our team will review your order and may contact you to confirm details.
              </p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
              <HomeIcon className="h-4 w-4 text-primary" />
            </div>
            <div>
              <p className="font-medium text-foreground">Service Activation</p>
              <p className="text-sm text-muted-foreground">
                Once approved, we'll schedule installation or ship your equipment.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Actions */}
      <div className="flex flex-col sm:flex-row gap-4 justify-center">
        <Button as="a" href="/account" className="sm:w-auto">
          Go to Dashboard
        </Button>
        <Button as="a" href="/account/orders" variant="outline" className="sm:w-auto">
          View Orders
        </Button>
      </div>

      {/* Support Link */}
      <p className="text-sm text-muted-foreground mt-8">
        Have questions?{" "}
        <Link href="/contact" className="text-primary hover:underline">
          Contact Support
        </Link>
      </p>
    </div>
  );
}
