"use client";

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

interface StepEmailProps {
  initialEmail: string;
  initialName: string;
  onSubmit: (email: string, name: string) => void;
  onBack: () => void;
}

export const StepEmail = ({
  initialEmail,
  initialName,
  onSubmit,
  onBack,
}: StepEmailProps) => {
  const { t } = useTranslation("marketing");
  const [email, setEmail] = useState(initialEmail);
  const [name, setName] = useState(initialName);
  const [emailError, setEmailError] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setEmailError("");

    const trimmed = email.trim();
    if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
      setEmailError("Please enter a valid email address");
      return;
    }

    onSubmit(trimmed, name.trim());
  };

  return (
    <div className="flex w-full max-w-lg flex-col items-center gap-6">
      <div className="text-center">
        <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
          {t("wizard.email.title")}
        </h2>
        <p className="text-muted-foreground mt-2 text-sm">
          {t("wizard.email.description")}
        </p>
      </div>

      <form onSubmit={handleSubmit} className="flex w-full flex-col gap-4">
        <div>
          <input
            type="email"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value);
              setEmailError("");
            }}
            placeholder={t("wizard.email.placeholder")}
            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",
              emailError && "border-red-500",
            )}
            autoFocus
          />
          {emailError && (
            <p className="mt-1.5 text-xs text-red-500">{emailError}</p>
          )}
        </div>

        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder={t("wizard.email.namePlaceholder")}
          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="submit"
          className={cn(buttonVariants({ size: "lg" }), "w-full")}
        >
          {t("wizard.email.continueButton")}
        </button>

        <button
          type="button"
          onClick={onBack}
          className="text-muted-foreground hover:text-foreground text-center text-sm transition-colors"
        >
          ← Back
        </button>
      </form>
    </div>
  );
};
