/**
 * Migrate Account View - Account migration page
 */

"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { AuthLayout } from "../components";
import { LinkWhmcsForm } from "@/features/auth/components";
import { MIGRATION_TRANSFER_ITEMS, MIGRATION_STEPS } from "@customer-portal/domain/auth";

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

  return (
    <AuthLayout
      title="Transfer Your Account"
      subtitle="Migrate your existing Assist Solutions account to our upgraded portal"
    >
      <div className="space-y-6">
        {/* What transfers */}
        <div className="bg-info-soft border border-info/25 rounded-lg p-4">
          <p className="text-sm font-medium text-foreground mb-2">What gets transferred:</p>
          <ul className="grid grid-cols-2 gap-1 text-sm text-muted-foreground">
            {MIGRATION_TRANSFER_ITEMS.map((item, i) => (
              <li key={i} className="flex items-center gap-1.5">
                <span className="text-info">✓</span> {item}
              </li>
            ))}
          </ul>
        </div>

        {/* Form */}
        <div>
          <h2 className="text-lg font-semibold text-foreground mb-1">
            Enter Legacy Portal Credentials
          </h2>
          <p className="text-sm text-muted-foreground mb-5">
            Use your previous Assist Solutions portal email and password.
          </p>
          <LinkWhmcsForm
            onTransferred={result => {
              if (result.needsPasswordSet) {
                router.push(`/auth/set-password?email=${encodeURIComponent(result.user.email)}`);
              } else {
                router.push("/account");
              }
            }}
          />
        </div>

        {/* Links */}
        <div className="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
          <span className="text-muted-foreground">
            New customer?{" "}
            <Link href="/auth/signup" className="text-primary hover:underline">
              Create account
            </Link>
          </span>
          <span className="text-muted-foreground">
            Already transferred?{" "}
            <Link href="/auth/login" className="text-primary hover:underline">
              Sign in
            </Link>
          </span>
        </div>

        {/* Steps */}
        <div className="border-t border-border pt-6">
          <h3 className="text-sm font-semibold text-foreground mb-3">How it works</h3>
          <ol className="space-y-2">
            {MIGRATION_STEPS.map((step, i) => (
              <li key={i} className="flex items-start gap-3 text-sm">
                <span className="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 text-primary text-xs flex items-center justify-center font-medium">
                  {i + 1}
                </span>
                <span className="text-muted-foreground">{step}</span>
              </li>
            ))}
          </ol>
        </div>

        <p className="text-center text-sm text-muted-foreground">
          Need help?{" "}
          <Link href="/contact" className="text-primary hover:underline">
            Contact support
          </Link>
        </p>
      </div>
    </AuthLayout>
  );
}

export default MigrateAccountView;
