"use client";

import { useState } from "react";
import { signIn } from "next-auth/react";
import { Loader2, School, Mail, CheckCircle } from "lucide-react";
import Link from "next/link";

export default function LoginResponsavelPage() {
  const [email, setEmail] = useState("");
  const [carregando, setCarregando] = useState(false);
  const [enviado, setEnviado] = useState(false);
  const [erro, setErro] = useState("");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setErro("");
    setCarregando(true);

    const result = await signIn("email", {
      email,
      redirect: false,
      callbackUrl: "/loja",
    });

    setCarregando(false);

    if (result?.error) {
      setErro(
        "E-mail não encontrado. Verifique com a escola se seu e-mail está cadastrado."
      );
    } else {
      setEnviado(true);
    }
  }

  if (enviado) {
    return (
      <div className="min-h-dvh flex flex-col items-center justify-center bg-gradient-to-br from-primary-800 to-primary-900 p-4">
        <div className="w-full max-w-sm">
          <div className="bg-white rounded-2xl p-8 shadow-xl text-center">
            <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
            <h2 className="text-xl font-bold text-gray-900 mb-2">
              E-mail enviado!
            </h2>
            <p className="text-gray-600 mb-4">
              Verifique a caixa de entrada de{" "}
              <strong className="text-gray-900">{email}</strong> e clique no
              link para acessar o sistema.
            </p>
            <p className="text-sm text-gray-400">
              O link expira em 24 horas. Se não recebeu, verifique o spam.
            </p>
            <button
              onClick={() => {
                setEnviado(false);
                setEmail("");
              }}
              className="mt-6 text-primary-700 font-semibold text-sm"
            >
              Usar outro e-mail
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-dvh flex flex-col items-center justify-center bg-gradient-to-br from-primary-800 to-primary-900 p-4">
      <div className="w-full max-w-sm">
        {/* Logo */}
        <div className="flex flex-col items-center mb-8">
          <div className="bg-white/10 p-4 rounded-2xl mb-3">
            <School className="w-10 h-10 text-white" />
          </div>
          <h1 className="text-2xl font-bold text-white">Sistema Escolar</h1>
          <p className="text-primary-200 text-sm mt-1">Acesso para Responsáveis</p>
        </div>

        {/* Card */}
        <div className="bg-white rounded-2xl p-6 shadow-xl">
          <div className="flex items-center gap-3 mb-4">
            <div className="bg-primary-50 p-2 rounded-xl">
              <Mail className="w-5 h-5 text-primary-700" />
            </div>
            <div>
              <h2 className="text-lg font-bold text-gray-900">Acesso via e-mail</h2>
              <p className="text-xs text-gray-500">Sem senha necessária</p>
            </div>
          </div>

          <p className="text-sm text-gray-600 mb-5">
            Digite o e-mail cadastrado na escola e enviaremos um link de acesso.
          </p>

          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">
                E-mail
              </label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="input"
                placeholder="seu@email.com"
                required
                autoComplete="email"
                inputMode="email"
              />
            </div>

            {erro && (
              <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-xl p-3">
                {erro}
              </div>
            )}

            <button
              type="submit"
              disabled={carregando}
              className="btn-primary flex items-center justify-center gap-2"
            >
              {carregando ? (
                <>
                  <Loader2 size={18} className="animate-spin" />
                  Enviando...
                </>
              ) : (
                "Enviar link de acesso"
              )}
            </button>
          </form>
        </div>

        <p className="text-center text-primary-200 text-sm mt-6">
          É da equipe escolar?{" "}
          <Link href="/auth/login" className="text-white font-semibold underline">
            Acesso administrativo
          </Link>
        </p>
      </div>
    </div>
  );
}