"use client";

import { useActionState, useState } from "react";
import { login } from "@/app/actions/auth";
import type { ActionState } from "@/app/lib/definitions";
import { adminInputCls } from "@/app/admin/_components/utils";

const initialState: ActionState = {};

export default function LoginForm() {
  const [state, action, pending] = useActionState(login, initialState);
  const [showPassword, setShowPassword] = useState(false);

  return (
    <form action={action} className="space-y-5">
      <label className="block">
        <span className="mb-1.5 block text-xs font-medium text-[#5a688d]">
          Email
        </span>
        <input
          type="email"
          name="email"
          required
          autoComplete="username"
          className={adminInputCls}
        />
        {state?.errors?.email?.[0] && (
          <span className="mt-1 block text-xs text-red-600">
            {state.errors.email[0]}
          </span>
        )}
      </label>

      <div className="block">
        <label
          htmlFor="admin-password"
          className="mb-1.5 block text-xs font-medium text-[#5a688d]"
        >
          Password
        </label>
        <div className="relative">
          <input
            id="admin-password"
            type={showPassword ? "text" : "password"}
            name="password"
            required
            autoComplete="current-password"
            className={`${adminInputCls} pr-11`}
          />
          <button
            type="button"
            onClick={() => setShowPassword((visible) => !visible)}
            className="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-[#7a88ad] hover:text-[#1f3fb8]"
            aria-label={showPassword ? "Hide password" : "Show password"}
            aria-pressed={showPassword}
          >
            {showPassword ? (
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.8"
                className="h-5 w-5"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M3 3l18 18M10.6 10.7a2 2 0 002.7 2.7M9.9 4.2A10.8 10.8 0 0112 4c5.2 0 8.7 4.6 9.7 6.2a3.2 3.2 0 010 3.6 16.1 16.1 0 01-2.4 3M6.6 6.6a16.2 16.2 0 00-4.3 5.6 3.2 3.2 0 000 3.6C3.3 17.4 6.8 22 12 22a10.8 10.8 0 005.4-1.4"
                />
              </svg>
            ) : (
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.8"
                className="h-5 w-5"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M2.3 10.2a3.2 3.2 0 000 3.6C3.3 15.4 6.8 20 12 20s8.7-4.6 9.7-6.2a3.2 3.2 0 000-3.6C20.7 8.6 17.2 4 12 4S3.3 8.6 2.3 10.2z"
                />
                <circle cx="12" cy="12" r="3" />
              </svg>
            )}
          </button>
        </div>
        {state?.errors?.password?.[0] && (
          <span className="mt-1 block text-xs text-red-600">
            {state.errors.password[0]}
          </span>
        )}
      </div>

      {state?.message && (
        <p className="text-sm text-red-600" role="alert">
          {state.message}
        </p>
      )}

      <button
        type="submit"
        disabled={pending}
        className="w-full rounded-full bg-[#1f3fb8] px-6 py-3 text-sm font-semibold text-white transition hover:bg-[#18339a] disabled:opacity-60"
      >
        {pending ? "Signing in..." : "Sign in"}
      </button>
    </form>
  );
}
