"use client";

import Link from "next/link";
import { LogIn, Mail, Lock } from "lucide-react";
import Image from "next/image";
import { useActionState } from "react";
import { loginAction } from "@/lib/actions/auth";
import AdminDemoButton from "./AdminDemoButton";

export default function LoginPage() {
  const [state, formAction, pending] = useActionState(loginAction, {});

  return (
    <div className="min-h-screen bg-neutral-50 flex items-center justify-center py-12 px-4">
      <div className="w-full max-w-md">

        <div className="bg-white rounded-2xl shadow-sm border border-neutral-200 p-8">
          <div className="text-center mb-8">
            <Image src="/images/logo-dark.png" alt="KC Systems" width={140} height={35} className="h-8 w-auto mx-auto mb-6" />
            <h1 className="text-2xl font-bold text-navy-800">Welcome back</h1>
            <p className="text-neutral-500 text-sm mt-1">Sign in to your KC Systems account</p>
          </div>

          <form action={formAction} className="space-y-5">
            {state?.error && (
              <div className="p-3 bg-red-50 border border-red-100 text-red-600 text-sm rounded-lg">
                {state.error}
              </div>
            )}
            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">Email address</label>
              <div className="relative">
                <Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" />
                <input
                  type="email"
                  name="email"
                  placeholder="you@example.com"
                  className="w-full pl-10 pr-4 py-2.5 border border-neutral-300 rounded-lg text-sm focus:outline-none focus:border-navy-500 focus:ring-1 focus:ring-navy-500"
                  required
                />
              </div>
            </div>
            <div>
              <div className="flex items-center justify-between mb-1.5">
                <label className="block text-sm font-medium text-neutral-700">Password</label>
                <Link href="/forgot-password" className="text-xs text-navy-600 hover:text-navy-800">
                  Forgot password?
                </Link>
              </div>
              <div className="relative">
                <Lock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" />
                <input
                  type="password"
                  name="password"
                  placeholder="••••••••"
                  className="w-full pl-10 pr-4 py-2.5 border border-neutral-300 rounded-lg text-sm focus:outline-none focus:border-navy-500 focus:ring-1 focus:ring-navy-500"
                  required
                />
              </div>
            </div>
            <div className="flex items-center gap-2">
              <input type="checkbox" id="remember" className="rounded border-neutral-300 text-navy-700" />
              <label htmlFor="remember" className="text-sm text-neutral-600">Remember me</label>
            </div>
            <button
              type="submit"
              disabled={pending}
              className="w-full flex items-center justify-center gap-2 py-2.5 bg-navy-700 text-white font-semibold rounded-lg hover:bg-navy-800 transition-colors disabled:opacity-60"
            >
              <LogIn size={16} /> {pending ? "Signing in…" : "Sign In"}
            </button>
          </form>

          <div className="mt-6 text-center">
            <p className="text-sm text-neutral-500">
              Don't have an account?{" "}
              <Link href="/register" className="text-navy-700 font-medium hover:text-navy-900">
                Create one free
              </Link>
            </p>
          </div>
        </div>

        {/* Quick admin access — dev/demo only */}
        <AdminDemoButton />

      </div>
    </div>
  );
}