"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { AuthLayout } from "../components";
import { LinkWhmcsForm } from "@/features/auth/components";

export function LinkWhmcsView() {
  const router = useRouter();

  return (
    <AuthLayout
      title="Transfer your existing account"
      subtitle="Move your existing Assist Solutions account to our new portal"
    >
      <div className="space-y-8">
        <div className="p-5 bg-blue-50 border border-blue-200 rounded-xl">
          <div className="flex">
            <div className="flex-shrink-0">
              <svg className="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                <path
                  fillRule="evenodd"
                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <div className="ml-3 text-sm text-blue-700 space-y-2">
              <p>
                We&apos;ve upgraded our customer portal. Use your existing Assist Solutions
                credentials to transfer your account and gain access to the new experience.
              </p>
              <ul className="list-disc list-inside space-y-1">
                <li>All of your services and billing history will come with you</li>
                <li>We&apos;ll guide you through creating a new, secure password afterwards</li>
                <li>Your previous login credentials will no longer be needed once you transfer</li>
              </ul>
            </div>
          </div>
        </div>

        <LinkWhmcsForm
          onTransferred={result => {
            const email = result.user.email;
            if (result.needsPasswordSet) {
              router.push(`/auth/set-password?email=${encodeURIComponent(email)}`);
              return;
            }
            router.push("/dashboard");
          }}
        />

        <div className="space-y-2 text-sm text-gray-600">
          <p>
            Need a new account?{" "}
            <Link href="/auth/signup" className="text-blue-600 hover:text-blue-500">
              Create one here
            </Link>
          </p>
          <p>
            Already transferred your account?{" "}
            <Link href="/auth/login" className="text-blue-600 hover:text-blue-500">
              Sign in here
            </Link>
          </p>
        </div>

        <div className="pt-6 border-t border-gray-200 space-y-2 text-sm text-gray-600">
          <h3 className="font-medium text-gray-900">How the transfer works</h3>
          <ul className="list-disc list-inside space-y-1">
            <li>Enter the email and password you use for the legacy portal</li>
            <li>We verify your account and ask you to set a new secure password</li>
            <li>All existing subscriptions, invoices, and tickets stay connected</li>
            <li>Need help? Contact support and we&apos;ll guide you through it</li>
          </ul>
        </div>
      </div>
    </AuthLayout>
  );
}

export default LinkWhmcsView;
