// app/forgot-password/page.tsx
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"

export default function ForgotPasswordPage() {
  const router = useRouter()
  const [email, setEmail] = useState("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState(false)
  const [resetUrl, setResetUrl] = useState<string | null>(null)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError("")
    setSuccess(false)
    setResetUrl(null)

    try {
      const response = await fetch("/api/auth/forgot-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email })
      })

      const data = await response.json()

      if (!response.ok) {
        throw new Error(data.error || "Erro ao solicitar reset de senha")
      }

      setSuccess(true)
      
      // Se estiver em desenvolvimento, mostrar o link
      if (data.resetUrl) {
        setResetUrl(data.resetUrl)
      }
    } catch (err: any) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div style={{
      minHeight: "100vh",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      backgroundImage: "url('/pdimaker-background.jpg')",
      backgroundSize: "cover",
      backgroundPosition: "center",
      position: "relative"
    }}>
      <div style={{
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: "rgba(0, 0, 0, 0.5)"
      }} />

      <div style={{
        position: "relative",
        zIndex: 1,
        background: "rgba(255, 255, 255, 0.95)",
        padding: "3rem",
        borderRadius: "1rem",
        boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
        maxWidth: "450px",
        width: "100%"
      }}>
        <h1 style={{ fontSize: "2rem", marginBottom: "0.5rem", color: "#333", textAlign: "center" }}>
          🔐 Esqueci minha senha
        </h1>
        <p style={{ color: "#666", marginBottom: "2rem", textAlign: "center" }}>
          Digite seu email para receber um link de redefinição de senha
        </p>

        {!success ? (
          <form onSubmit={handleSubmit}>
            <div style={{ marginBottom: "1.5rem" }}>
              <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500" }}>
                Email
              </label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                style={{
                  width: "100%",
                  padding: "0.75rem",
                  border: "1px solid #e2e8f0",
                  borderRadius: "0.375rem",
                  fontSize: "1rem"
                }}
              />
            </div>

            {error && (
              <div style={{
                padding: "1rem",
                background: "#fee2e2",
                border: "1px solid #fecaca",
                borderRadius: "0.375rem",
                color: "#dc2626",
                marginBottom: "1.5rem",
                fontSize: "0.875rem"
              }}>
                {error}
              </div>
            )}

            <button
              type="submit"
              disabled={loading}
              style={{
                width: "100%",
                padding: "0.75rem",
                background: loading ? "#cbd5e0" : "#667eea",
                color: "white",
                border: "none",
                borderRadius: "0.5rem",
                fontSize: "1rem",
                fontWeight: "600",
                cursor: loading ? "not-allowed" : "pointer",
                marginBottom: "1rem"
              }}
            >
              {loading ? "Enviando..." : "Enviar Link de Redefinição"}
            </button>

            <div style={{ textAlign: "center" }}>
              <Link
                href="/login"
                style={{
                  color: "#667eea",
                  fontWeight: "500",
                  fontSize: "0.875rem",
                  textDecoration: "none"
                }}
              >
                ← Voltar para Login
              </Link>
            </div>
          </form>
        ) : (
          <div>
            <div style={{
              padding: "1.5rem",
              background: "#d1fae5",
              border: "1px solid #10b981",
              borderRadius: "0.375rem",
              color: "#047857",
              marginBottom: "1.5rem",
              textAlign: "center"
            }}>
              <div style={{ fontSize: "2rem", marginBottom: "0.5rem" }}>✅</div>
              <div style={{ fontWeight: "600", marginBottom: "0.25rem" }}>
                Email enviado!
              </div>
              <div style={{ fontSize: "0.875rem" }}>
                Se o email existir em nossa base, você receberá um link para redefinir sua senha em alguns instantes.
              </div>
            </div>

            {resetUrl && (
              <div style={{
                padding: "1rem",
                background: "#f7fafc",
                border: "1px solid #e2e8f0",
                borderRadius: "0.375rem",
                marginBottom: "1.5rem"
              }}>
                <div style={{ fontSize: "0.75rem", color: "#666", marginBottom: "0.5rem", fontWeight: "600" }}>
                  🔗 Link de Redefinição (Desenvolvimento):
                </div>
                <Link
                  href={resetUrl}
                  style={{
                    color: "#667eea",
                    fontSize: "0.875rem",
                    wordBreak: "break-all",
                    textDecoration: "none"
                  }}
                >
                  {resetUrl}
                </Link>
              </div>
            )}

            <div style={{ textAlign: "center" }}>
              <Link
                href="/login"
                style={{
                  display: "inline-block",
                  padding: "0.75rem 1.5rem",
                  background: "#667eea",
                  color: "white",
                  borderRadius: "0.5rem",
                  textDecoration: "none",
                  fontWeight: "500"
                }}
              >
                Voltar para Login
              </Link>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}