import type { ActionFunctionArgs } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { useActionData, Form } from "@remix-run/react";
import { loginAdmin } from "../lib/admin-auth.server";

export const action = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.formData();
  const password = formData.get("password") as string;

  const cookie = await loginAdmin(password);

  if (!cookie) {
    return json({ error: "Mot de passe incorrect" });
  }

  return redirect("/admin", {
    headers: { "Set-Cookie": cookie },
  });
};

export default function AdminLogin() {
  const actionData = useActionData<typeof action>();

  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", background: "#f5f5f5" }}>
      <div style={{ background: "white", padding: "2rem", borderRadius: "8px", boxShadow: "0 2px 8px rgba(0,0,0,0.1)", width: "100%", maxWidth: "400px" }}>
        <h1 style={{ margin: "0 0 1.5rem", fontSize: "1.5rem" }}>CleanSerp Admin</h1>
        {actionData?.error && (
          <div style={{ background: "#fef2f2", color: "#dc2626", padding: "0.75rem", borderRadius: "4px", marginBottom: "1rem", fontSize: "0.875rem" }}>
            {actionData.error}
          </div>
        )}
        <Form method="post">
          <div style={{ marginBottom: "1rem" }}>
            <label htmlFor="password" style={{ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem", fontWeight: 500 }}>
              Mot de passe
            </label>
            <input
              id="password"
              name="password"
              type="password"
              required
              autoFocus
              style={{ width: "100%", padding: "0.5rem", border: "1px solid #d1d5db", borderRadius: "4px", fontSize: "1rem", boxSizing: "border-box" }}
            />
          </div>
          <button
            type="submit"
            style={{ width: "100%", padding: "0.625rem", background: "#111", color: "white", border: "none", borderRadius: "4px", fontSize: "1rem", cursor: "pointer" }}
          >
            Connexion
          </button>
        </Form>
      </div>
    </div>
  );
}