"use client"

import { useState } from "react"
import { signIn } from "next-auth/react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import styles from "./Auth.module.css"

export function LoginForm() {
  const router = useRouter()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

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

    try {
      const res = await signIn("credentials", {
        redirect: false,
        email,
        password,
      })

      if (res?.error) {
        setError("Email sau parolă incorectă.")
      } else {
        router.push("/dashboard")
        router.refresh()
      }
    } catch (err) {
      setError("A apărut o eroare. Vă rugăm încercați din nou.")
    } finally {
      setIsLoading(false)
    }
  }

  const handleOAuthSignIn = (provider: "google") => {
    signIn(provider, { callbackUrl: "/rovibe/dashboard" })
  }

  return (
    <div className={styles.authCard}>
      <div className={styles.header}>
        <img 
          src="/rovibe/SiglaRoVIBE1.png" 
          alt="Ro-VIBE Logo" 
          style={{ height: "64px", width: "auto", margin: "0 auto 1.5rem", display: "block" }} 
        />
        <h1 className={styles.title}>Ro-VIBE</h1>
        <p className={styles.subtitle}>Conectează-te pentru a adăuga o intrare</p>
        
        <Link 
          href="/" 
          style={{ 
            display: "inline-flex", 
            alignItems: "center", 
            gap: "0.5rem", 
            marginTop: "1rem",
            fontSize: "0.85rem",
            color: "var(--text-muted)",
            textDecoration: "none",
            padding: "0.5rem 1rem",
            borderRadius: "var(--radius-md)",
            border: "1px solid var(--border-color)",
            background: "var(--surface-hover)"
          }}
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
          Pagina Principală
        </Link>
      </div>

      {error && <div className={styles.errorMsg}>{error}</div>}

      <form onSubmit={handleSubmit}>
        <div className={styles.formGroup}>
          <label htmlFor="email" className={styles.label}>Email</label>
          <input
            id="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className={styles.input}
            required
            placeholder="nume@liceu.ro"
          />
        </div>

        <div className={styles.formGroup}>
          <label htmlFor="password" className={styles.label}>Parolă</label>
          <input
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className={styles.input}
            required
            placeholder="••••••••"
          />
        </div>

        <button 
          type="submit" 
          className={styles.submitBtn}
          disabled={isLoading}
        >
          {isLoading ? "Se încarcă..." : "Autentificare"}
        </button>
      </form>

      <div className={styles.divider}>sau continuă cu</div>

      <button 
        type="button" 
        onClick={() => handleOAuthSignIn("google")}
        className={styles.socialBtn}
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 9h16"/><path d="M4 15h16"/><rect width="20" height="12" x="2" y="6" rx="2"/></svg>
        Cont Google
      </button>


      <div className={styles.footer}>
        Nu ai cont? <Link href="/register" className={styles.link}>Înregistrează-te</Link>
      </div>
    </div>
  )
}