import { useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext";
import { motion } from "framer-motion";
import { Lock, User, Home } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

const Admin = () => {
  const { isAuthenticated, login } = useAuth();
  const navigate = useNavigate();
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");
  const [error, setError] = useState("");

  if (isAuthenticated) {
    navigate("/admin/painel");
    return null;
  }

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (login(user, pass)) {
      navigate("/admin/painel");
    } else {
      setError("Usuário ou senha incorretos.");
    }
  };

  return (
    <div className="min-h-screen gradient-dark flex items-center justify-center px-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        className="w-full max-w-md bg-secondary/50 border border-border/10 rounded-2xl p-8"
      >
        <div className="text-center mb-8">
          <h1 className="font-display text-3xl font-bold text-primary mb-2">ITAROTA79</h1>
          <p className="text-dark-surface-foreground/50 text-sm">Área Administrativa</p>
        </div>

        <form onSubmit={handleLogin} className="space-y-4">
          <div className="relative">
            <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-dark-surface-foreground/30" />
            <Input
              placeholder="Usuário"
              value={user}
              onChange={(e) => { setUser(e.target.value); setError(""); }}
              className="pl-10 bg-secondary/80 border-border/20 text-dark-surface-foreground"
            />
          </div>
          <div className="relative">
            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-dark-surface-foreground/30" />
            <Input
              type="password"
              placeholder="Senha"
              value={pass}
              onChange={(e) => { setPass(e.target.value); setError(""); }}
              className="pl-10 bg-secondary/80 border-border/20 text-dark-surface-foreground"
            />
          </div>
          {error && (
            <motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-destructive text-sm text-center">
              {error}
            </motion.p>
          )}
          <Button type="submit" className="w-full font-display tracking-wider">Entrar</Button>
        </form>

        <div className="mt-6 text-center">
          <Link to="/">
            <Button variant="ghost" size="sm" className="gap-2 text-muted-foreground hover:text-primary">
              <Home className="w-4 h-4" /> Voltar para Home
            </Button>
          </Link>
        </div>
      </motion.div>
    </div>
  );
};

export default Admin;