"use client";

import { useState } from "react";
import { apiFetch } from "@/lib/api";
import { useRouter } from "next/navigation";

export default function LoginPage() {
  const r = useRouter();
  const [email, setEmail] = useState("admin@example.com");
  const [password, setPassword] = useState("admin1234");
  const [err, setErr] = useState<string | null>(null);

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setErr(null);
    try {
      await apiFetch("/auth/login", { method: "POST", body: JSON.stringify({ email, password }) });
      r.push("/dashboards");
    } catch (e: any) {
      setErr(e.message || "login failed");
    }
  }

  return (
    <div className="max-w-md mx-auto pt-20">
      <div className="text-2xl font-semibold">Login</div>
      <form onSubmit={onSubmit} className="mt-6 space-y-3">
        <input className="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700"
          value={email} onChange={e=>setEmail(e.target.value)} placeholder="email" />
        <input className="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700"
          type="password" value={password} onChange={e=>setPassword(e.target.value)} placeholder="password" />
        {err && <div className="text-sm text-red-400">{err}</div>}
        <button className="w-full px-3 py-2 rounded-lg bg-zinc-100 text-zinc-900">Sign in</button>
      </form>
      <div className="mt-3 text-xs text-zinc-400">
        Domyślny admin: admin@example.com / admin1234
      </div>
    </div>
  );
}