"use client";

import { useTranslation } from "@turbostarter/i18n";
import { cn } from "@turbostarter/ui";
import { buttonVariants } from "@turbostarter/ui-web/button";

interface StepSuccessProps {
  email: string;
}

export const StepSuccess = ({ email }: StepSuccessProps) => {
  const { t } = useTranslation("marketing");

  return (
    <div className="flex w-full max-w-lg flex-col items-center gap-8">
      {/* Success icon */}
      <div className="flex size-16 items-center justify-center rounded-full bg-green-500/10">
        <svg
          className="size-8 text-green-500"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
          />
        </svg>
      </div>

      <div className="text-center">
        <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
          {t("wizard.success.title")}
        </h2>
        <p className="text-muted-foreground mt-2 text-sm">
          {t("wizard.success.description", {
            email: email || "your email",
          })}
        </p>
      </div>

      {/* Processing indicator */}
      <div className="bg-background w-full rounded-xl border p-6">
        <div className="flex items-center gap-3">
          <div className="border-primary size-5 animate-spin rounded-full border-2 border-t-transparent" />
          <span className="text-foreground text-sm font-medium">
            {t("wizard.success.processing")}
          </span>
        </div>
        <p className="text-muted-foreground mt-3 text-xs">
          {t("wizard.success.delivery")}
        </p>
      </div>

      {/* Create account section */}
      <div className="bg-background w-full rounded-xl border p-6">
        <h3 className="text-foreground font-semibold">
          {t("wizard.success.createAccount")}
        </h3>
        <p className="text-muted-foreground mt-1 text-sm">
          {t("wizard.success.createAccountDescription")}
        </p>

        <div className="mt-4 flex flex-col gap-3">
          <input
            type="email"
            value={email || ""}
            disabled
            className="border-input bg-muted text-muted-foreground w-full rounded-xl border px-4 py-3 text-sm"
          />
          <input
            type="password"
            placeholder={t("wizard.success.passwordPlaceholder")}
            className={cn(
              "border-input bg-background text-foreground placeholder:text-muted-foreground w-full rounded-xl border py-3 px-4 text-sm shadow-sm outline-none transition-colors",
              "focus:border-primary focus:ring-primary/20 focus:ring-2",
            )}
          />
          <button
            type="button"
            className={cn(buttonVariants({ size: "lg" }), "w-full")}
          >
            {t("wizard.success.registerButton")}
          </button>
        </div>

        <button
          type="button"
          className="text-muted-foreground hover:text-foreground mt-3 w-full text-center text-sm transition-colors"
        >
          {t("wizard.success.skipAccount")}
        </button>
      </div>
    </div>
  );
};
