"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { motion } from "framer-motion";
import { Ticket, LogIn } from "lucide-react";

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError(null);

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

    if (!res.ok) {
      const data = await res.json().catch(() => null);
      setError(data?.error ?? "Не удалось войти");
      setLoading(false);
      return;
    }

    router.push("/dashboard");
    router.refresh();
  }

  return (
    <main className="flex min-h-screen items-center justify-center bg-bg px-4">
      <motion.form
        onSubmit={handleSubmit}
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.35, ease: "easeOut" }}
        className="card w-full max-w-sm p-8"
      >
        <div className="mb-6 flex items-center gap-2">
          <div className="flex h-9 w-9 items-center justify-center rounded-md bg-accent text-white">
            <Ticket size={18} strokeWidth={2.5} />
          </div>
          <span className="text-lg font-bold tracking-tight">top-tickets</span>
        </div>

        <h1 className="mb-1 text-xl font-semibold">Вход для агентов</h1>
        <p className="mb-6 text-sm text-text-muted">Войдите, чтобы открыть дашборд заявок.</p>

        <label className="mb-3 block text-sm">
          <span className="mb-1 block font-medium text-text-muted">Email</span>
          <input
            type="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
            autoFocus
          />
        </label>

        <label className="mb-5 block text-sm">
          <span className="mb-1 block font-medium text-text-muted">Пароль</span>
          <input
            type="password"
            required
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
          />
        </label>

        {error && (
          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="mb-4 rounded-md bg-danger-soft px-3 py-2 text-sm text-danger-soft-text"
          >
            {error}
          </motion.p>
        )}

        <button type="submit" disabled={loading} className="btn btn-primary w-full justify-center">
          <LogIn size={16} />
          {loading ? "Входим…" : "Войти"}
        </button>
      </motion.form>
    </main>
  );
}