import { createSignal, Show } from "solid-js";
import { Title } from "@solidjs/meta";
import { AuthLayout } from "~/components/auth";
import { Input } from "~/components/ui";
import { Button } from "~/components/ui";
import { forgotPassword } from "~/lib/auth";

const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

export default function ForgotPasswordPage() {
  const [email, setEmail] = createSignal("");
  const [error, setError] = createSignal("");
  const [loading, setLoading] = createSignal(false);
  const [sent, setSent] = createSignal(false);

  function validate(): boolean {
    if (!email().trim()) {
      setError("Email is required");
      return false;
    }
    if (!EMAIL_REGEX.test(email())) {
      setError("Invalid email format");
      return false;
    }
    setError("");
    return true;
  }

  async function handleSubmit(e: Event) {
    e.preventDefault();
    if (!validate()) return;
    setLoading(true);
    try {
      await forgotPassword(email());
      setSent(true);
    } catch {
      setError("Something went wrong. Please try again.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <AuthLayout>
      <Title>Forgot Password — ShieldAI</Title>
      <div class="flex flex-col gap-6">
        <Show
          when={!sent()}
          fallback={
            <div class="flex flex-col items-center gap-4 py-4 text-center">
              <div class="h-12 w-12 rounded-full bg-[var(--color-success-bg)] flex items-center justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-6 w-6 text-[var(--color-success)]"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="M22 2L11 13" />
                  <path d="M22 2L15 22L11 13L2 9L22 2Z" />
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-[var(--color-text-primary)]">
                Check your email
              </h3>
              <p class="text-sm text-[var(--color-text-secondary)]">
                We've sent a password reset link to{" "}
                <span class="font-medium text-[var(--color-text-primary)]">
                  {email()}
                </span>
              </p>
              <p class="text-xs text-[var(--color-text-tertiary)]">
                Didn't receive the email?{" "}
                <button
                  type="button"
                  onClick={() => setSent(false)}
                  class="text-[var(--color-brand-primary)] hover:underline cursor-pointer"
                >
                  Try again
                </button>
              </p>
            </div>
          }
        >
          <div class="text-center">
            <h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
              Forgot password?
            </h2>
            <p class="text-sm text-[var(--color-text-secondary)] mt-1">
              Enter your email and we'll send you a reset link
            </p>
          </div>

          <form onSubmit={handleSubmit} class="flex flex-col gap-4">
            <Input
              label="Email"
              type="email"
              name="email"
              placeholder="you@example.com"
              value={email()}
              onInput={(e) => {
                setEmail(e.currentTarget.value);
                setError("");
              }}
              error={error()}
              required
            />
            <Button type="submit" loading={loading()} class="w-full">
              Send Reset Link
            </Button>
          </form>

          <p class="text-center text-sm text-[var(--color-text-secondary)]">
            Remember your password?{" "}
            <a
              href="/login"
              class="text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-light)] font-medium transition-colors"
            >
              Back to sign in
            </a>
          </p>
        </Show>
      </div>
    </AuthLayout>
  );
}
