"use client";

import Link from "next/link";
import { useNewsletterSignup } from "../../lib/useNewsletterSignup";

function LockIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="shrink-0">
      <rect x="2" y="6" width="10" height="7" rx="1.5" stroke="#888" strokeWidth="1.3" />
      <path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="#888" strokeWidth="1.3" />
    </svg>
  );
}

export function EmailCapture({ buttonLabel = "Klarheits-Check starten" }: { buttonLabel?: string }) {
  const { email, emailError, consent, handleConsentChange, status, error, successMessage, emailRef, handleEmailChange, handleEmailBlur, handleSubmit } =
    useNewsletterSignup("challenge");

  if (status === "success") {
    return <p className="text-[1rem] text-[#222221] font-medium">{successMessage}</p>;
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-2 w-full">
      {/* Stacked full-width below sm: — side by side, the button's own
          content width plus the input's min-w-0 squeeze left it cramped
          on a narrow phone. Default align-items: stretch in flex-col
          mode is what makes both the input and the button (shrink-0,
          fixed to its label's width) fill the row once stacked, no
          explicit w-full needed on either. */}
      <div className="flex flex-col sm:flex-row gap-3 w-full">
        <input
          ref={emailRef}
          type="email"
          required
          value={email}
          onChange={(e) => handleEmailChange(e.target.value)}
          onBlur={(e) => handleEmailBlur(e.target.value)}
          placeholder="Deine E-Mail-Adresse"
          aria-invalid={Boolean(emailError)}
          className={`flex-1 min-w-0 bg-white border rounded-lg px-4 py-3 text-[1rem] text-[#868686] outline-none transition-colors ${
            emailError ? "border-red-600 focus:border-red-600" : "border-[#d9d9d9] focus:border-[#f6a701]"
          }`}
        />
        <button
          type="submit"
          disabled={status === "submitting"}
          className="shrink-0 bg-[#f6a701] rounded-lg px-5 py-3 font-bold text-[1rem] text-[#222221] whitespace-nowrap hover:brightness-95 active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f6a701] focus-visible:ring-offset-2 disabled:opacity-60 disabled:pointer-events-none"
        >
          {status === "submitting" ? "Wird gesendet…" : buttonLabel}
        </button>
      </div>
      {emailError && <p className="text-[0.8rem] text-red-600">{emailError}</p>}
      {/* Consent checkbox — this signup's legal basis is consent (email
          marketing), same wording as the other newsletter forms; colors
          match this page's own hardcoded palette instead of the shared
          design tokens, consistent with the rest of the page. */}
      <label className="flex gap-2 items-start cursor-pointer">
        <input
          type="checkbox"
          required
          checked={consent}
          onChange={(e) => handleConsentChange(e.target.checked)}
          className="size-4 shrink-0 mt-0.5 rounded-xs border border-[#d9d9d9] accent-[#f6a701]"
        />
        <span className="text-[0.8rem] text-[#444] leading-normal">
          Ich akzeptiere die{" "}
          <Link
            href="/datenschutz"
            target="_blank"
            rel="noopener noreferrer"
            className="underline hover:text-[#f6a701]"
          >
            Datenschutzerklärung
          </Link>
          .
        </span>
      </label>
      {status === "error" && <p className="text-[0.8rem] text-red-600">{error}</p>}
      <p className="flex items-center gap-1.5 text-[0.8rem] text-[#888]">
        <LockIcon />
        Keine Werbung. Jederzeit abbestellbar.
      </p>
    </form>
  );
}
