"use client";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import Link from "next/link";
import CommonError from "@/app/components/CommonError";
import { loginCustomer } from "../../_lib/storeApiCalls";
import { setCustomerToken } from "../../_lib/storeApi";

export default function LoginPage() {
  const params = useParams<{ orgSlug: string }>();
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(""); setSubmitting(true);
    try {
      const { token } = await loginCustomer(params.orgSlug, email, password);
      setCustomerToken(params.orgSlug, token);
      router.push(`/${params.orgSlug}`);
    } catch {
      setError("Invalid email or password.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="mx-auto" style={{ maxWidth: 420 }}>
      <h3 className="mb-4 text-center">Sign In</h3>
      <CommonError message={error} type="error" />
      <form onSubmit={handleSubmit} className="card card-body">
        <label className="form-label">Email</label>
        <input className="form-control mb-3" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
        <label className="form-label">Password</label>
        <input className="form-control mb-3" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
        <button className="btn btn-primary" disabled={submitting}>{submitting ? "Signing in..." : "Sign In"}</button>
        <p className="text-center small mt-3 mb-0">
          New here? <Link href={`/${params.orgSlug}/account/register`}>Create an account</Link>
        </p>
      </form>
    </div>
  );
}