"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useState } from "react";
import BrandMark from "@/components/site/BrandMark";

function LoginForm() {
  const router = useRouter();
  const params = useSearchParams();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setBusy(true);
    try {
      const res = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error ?? "Sign-in failed.");
        setBusy(false);
        return;
      }
      const next = params.get("next");
      const fallback = data.role === "admin" ? "/admin" : "/client";
      router.push(next && next.startsWith("/") ? next : fallback);
      router.refresh();
    } catch {
      setError("Network problem — please retry.");
      setBusy(false);
    }
  };

  const fill = (u: string) => {
    setEmail(u);
    setPassword("demo1234");
  };

  return (
    <form onSubmit={submit} className="w-full max-w-[420px]">
      <Link href="/" className="flex items-center gap-2.5 text-thi">
        <BrandMark className="h-9 w-9" />
        <span className="flex flex-col leading-none">
          <span className="font-[family-name:var(--font-display)] text-[1.7rem] font-bold tracking-tight">
            Vira<span className="font-medium text-azure-bright">.sa</span>
          </span>
          <span className="mt-1 font-[family-name:var(--font-mono)] text-[0.55rem] font-medium uppercase tracking-[0.4em] text-tmid">
            Technology
          </span>
        </span>
      </Link>
      <h1 className="mt-9 font-[family-name:var(--font-display)] text-[1.9rem] font-semibold text-thi">
        Client portal
      </h1>
      <p className="mt-1.5 text-[0.93rem] text-tmid">
        Services, tickets, and invoices — one place, updated live.
      </p>

      <div className="mt-8 grid gap-4">
        <div className="grid gap-1.5">
          <label htmlFor="email" className="field-label-dark">
            Email
          </label>
          <input
            id="email"
            type="email"
            className="field-input-dark"
            autoComplete="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div className="grid gap-1.5">
          <label htmlFor="password" className="field-label-dark">
            Password
          </label>
          <input
            id="password"
            type="password"
            className="field-input-dark"
            autoComplete="current-password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
      </div>

      {error && (
        <p
          className="mt-4 rounded-lg border border-[#D96B4A]/40 bg-[#D96B4A]/10 px-4 py-3 text-[0.88rem] text-[#E89B84]"
          role="alert"
        >
          {error}
        </p>
      )}

      <button type="submit" disabled={busy} className="btn btn-primary mt-6 w-full disabled:opacity-60">
        {busy ? "Signing in…" : "Sign in"}
      </button>

      <div className="mt-8 rounded-xl border border-white/10 bg-ink-2 p-5">
        <p className="font-[family-name:var(--font-mono)] text-[0.68rem] uppercase tracking-[0.16em] text-tlo">
          Demo access
        </p>
        <div className="mt-3 grid gap-2 text-[0.85rem]">
          <button type="button" onClick={() => fill("client@vira.sa")} className="flex items-center justify-between rounded-lg border border-white/10 px-3.5 py-2.5 text-left text-tmid transition-colors hover:border-azure hover:text-thi">
            <span>client@vira.sa</span>
            <span className="font-[family-name:var(--font-mono)] text-[0.72rem] text-tlo">client panel</span>
          </button>
          <button type="button" onClick={() => fill("admin@vira.sa")} className="flex items-center justify-between rounded-lg border border-white/10 px-3.5 py-2.5 text-left text-tmid transition-colors hover:border-azure hover:text-thi">
            <span>admin@vira.sa</span>
            <span className="font-[family-name:var(--font-mono)] text-[0.72rem] text-tlo">admin panel</span>
          </button>
        </div>
        <p className="mt-3 font-[family-name:var(--font-mono)] text-[0.72rem] text-tlo">
          password: demo1234
        </p>
      </div>

      <Link href="/" className="mt-8 inline-block text-[0.88rem] text-tlo hover:text-ice">
        ← Back to vira.sa
      </Link>
    </form>
  );
}

export default function LoginPage() {
  return (
    <div className="weave-dark grid min-h-[100svh] lg:grid-cols-[1fr_1fr]">
      <div className="flex items-center justify-center px-5 py-16">
        <Suspense>
          <LoginForm />
        </Suspense>
      </div>
      <div className="sadu-band relative hidden overflow-hidden border-l border-white/10 bg-[linear-gradient(160deg,#0A234A,#030D1F)] lg:block">
        <div
          className="absolute inset-0 opacity-40"
          style={{
            backgroundImage:
              "repeating-linear-gradient(45deg, rgba(79,195,255,0.05) 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, rgba(127,184,240,0.06) 0 2px, transparent 2px 14px)",
          }}
          aria-hidden
        />
        <figure className="absolute bottom-14 left-10 right-10">
          <blockquote className="max-w-[24em] font-[family-name:var(--font-display)] text-[1.6rem] font-medium leading-snug text-thi">
            “Uptime, response times, and incident history — published to us monthly. It reads like a
            report card, and they keep acing it.”
          </blockquote>
          <figcaption className="mt-4 text-[0.85rem] text-tmid">
            IT Director, logistics client · name withheld under NDA
          </figcaption>
        </figure>
      </div>
    </div>
  );
}