"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Suspense } from "react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

function SuccessContent() {
  const searchParams = useSearchParams();
  const sessionId = searchParams.get("session_id");

  return (
    <>
      <Navbar />
      <main className="flex-1 flex items-center justify-center px-4 py-24">
        <div className="max-w-lg w-full text-center">
          {/* Success icon */}
          <div className="mx-auto w-20 h-20 rounded-full bg-green-500/20 flex items-center justify-center mb-8">
            <svg
              className="w-10 h-10 text-green-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M5 13l4 4L19 7"
              />
            </svg>
          </div>

          <h1 className="text-4xl font-bold text-white mb-4">
            Welcome to DashCaddy Premium!
          </h1>

          <p className="text-lg text-surface-300 mb-8">
            Your subscription is active. Check your email for your license key
            and setup instructions.
          </p>

          <div className="glass-card rounded-xl p-6 mb-8 text-left">
            <h2 className="text-lg font-semibold text-white mb-4">
              Next Steps
            </h2>
            <ol className="space-y-3 text-surface-300">
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-500/20 text-brand-400 text-sm flex items-center justify-center font-medium">
                  1
                </span>
                <span>
                  Check your email for your license key (DC-XXXXX-...)
                </span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-500/20 text-brand-400 text-sm flex items-center justify-center font-medium">
                  2
                </span>
                <span>
                  Open your DashCaddy dashboard and go to Admin &rarr; License
                </span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-500/20 text-brand-400 text-sm flex items-center justify-center font-medium">
                  3
                </span>
                <span>Paste your license key and click Activate</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-500/20 text-brand-400 text-sm flex items-center justify-center font-medium">
                  4
                </span>
                <span>
                  Enjoy SSO, Recipes, Docker Swarm, Fleet Management, and all premium features!
                </span>
              </li>
            </ol>
          </div>

          {sessionId && (
            <p className="text-sm text-surface-500 mb-6">
              Session ID: {sessionId.substring(0, 20)}...
            </p>
          )}

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/docs"
              className="px-6 py-3 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-medium transition-colors"
            >
              View Setup Guide
            </Link>
            <Link
              href="/"
              className="px-6 py-3 rounded-lg border border-surface-700 hover:border-surface-500 text-surface-300 font-medium transition-colors"
            >
              Back to Home
            </Link>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}

export default function SuccessPage() {
  return (
    <Suspense
      fallback={
        <div className="flex-1 flex items-center justify-center">
          <div className="text-surface-400">Loading...</div>
        </div>
      }
    >
      <SuccessContent />
    </Suspense>
  );
}