"use client";

import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Button from "@/components/ui/Button";
import { brand } from "@/lib/brand";

type LoginResponse = { ok: boolean; username?: string; passwordConfigured?: boolean; localPasswordConfigured?: boolean; error?: string };

async function readLoginResponse(response: Response): Promise<LoginResponse> {
  const text = await response.text();
  if (!text.trim()) {
    return { ok: false, error: `Server login tidak memberikan respons (HTTP ${response.status}).` };
  }
  try {
    return JSON.parse(text) as LoginResponse;
  } catch {
    return { ok: false, error: `Respons server login tidak valid (HTTP ${response.status}).` };
  }
}

export default function LoginPage() {
  return (
    <Suspense>
      <LoginContent />
    </Suspense>
  );
}

function LoginContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [passwordConfigured, setPasswordConfigured] = useState<boolean | null>(null);
  const [localPasswordConfigured, setLocalPasswordConfigured] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await fetch("/api/login", { cache: "no-store" });
        const json = await readLoginResponse(res);
        if (!res.ok || !json.ok) throw new Error(json.error || "Gagal membaca konfigurasi login.");
        if (!cancelled) {
          setUsername(json.username || "shopee_test");
          setPasswordConfigured(Boolean(json.passwordConfigured));
          setLocalPasswordConfigured(Boolean(json.localPasswordConfigured));
        }
      } catch (error) {
        if (!cancelled) {
          setPasswordConfigured(false);
          setMessage(error instanceof Error ? error.message : "Gagal membaca konfigurasi login.");
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  function safeNextPath() {
    const next = searchParams.get("next");
    if (!next || !next.startsWith("/") || next.startsWith("//") || next.startsWith("/api/") || next.startsWith("/login")) {
      return "/dashboard";
    }
    return next;
  }

  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!passwordConfigured) {
      setMessage("Login belum dikonfigurasi. Isi TEST_PASSWORD di env server atau set password aplikasi dari Settings.");
      return;
    }
    setLoading(true);
    setMessage(null);
    try {
      const res = await fetch("/api/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password }),
      });
      const json = await readLoginResponse(res);
      if (!res.ok || !json.ok) throw new Error(json.error || "Login gagal.");
      router.push(safeNextPath());
    } catch (error) {
      setMessage(error instanceof Error ? error.message : "Login gagal.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="min-h-dvh bg-[#07101f] p-4 sm:p-6">
      <main className="mx-auto grid min-h-[calc(100dvh-2rem)] w-full max-w-6xl overflow-hidden rounded-3xl border border-white/10 bg-white shadow-2xl shadow-black/30 sm:min-h-[calc(100dvh-3rem)] lg:grid-cols-[1.1fr_0.9fr]">
        <section className="relative hidden overflow-hidden bg-[#0b1220] p-10 text-white lg:flex lg:flex-col lg:justify-between">
          <div className="absolute -right-24 -top-24 h-96 w-96 rounded-full bg-emerald-400/15 blur-3xl" />
          <div className="absolute -bottom-24 left-0 h-80 w-80 rounded-full bg-cyan-400/10 blur-3xl" />
          <div className="relative flex items-center gap-3">
            <span className="grid h-11 w-11 place-items-center rounded-xl bg-gradient-to-br from-cyan-400 to-emerald-400 text-sm font-black text-slate-950">{brand.shortName}</span>
            <div><div className="text-lg font-black tracking-tight">Sellfin</div><div className="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500">Commerce OS</div></div>
          </div>
          <div className="relative max-w-xl">
            <div className="text-[11px] font-black uppercase tracking-[0.18em] text-emerald-400">Shopee operations, one workspace</div>
            <h1 className="mt-4 text-4xl font-black leading-[1.08] tracking-[-0.045em]">Kendalikan pesanan, stok, dan profit tanpa berpindah layar.</h1>
            <p className="mt-5 max-w-lg text-sm leading-6 text-slate-400">Workspace operasional multi-toko untuk memproses order, menjaga HPP, dan memisahkan estimasi dari profit yang benar-benar terealisasi.</p>
            <div className="mt-8 grid grid-cols-3 gap-3">
              {[['01','Order center'],['02','Catalog & HPP'],['03','Real profit']].map(([number, label]) => <div className="rounded-xl border border-white/10 bg-white/5 p-3" key={number}><div className="text-[10px] font-black text-emerald-400">{number}</div><div className="mt-1 text-xs font-bold text-slate-200">{label}</div></div>)}
            </div>
          </div>
          <div className="relative text-xs font-semibold text-slate-600">sellfin.my.id · Shopee Open Platform</div>
        </section>

        <section className="flex items-center justify-center bg-white px-5 py-10 sm:px-10">
          <div className="w-full max-w-sm">
            <div className="mb-8 flex items-center gap-3 lg:hidden">
              <span className="grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-cyan-400 to-emerald-400 text-xs font-black text-slate-950">{brand.shortName}</span>
              <div><div className="font-black text-slate-950">Sellfin</div><div className="text-[9px] font-bold uppercase tracking-[0.15em] text-slate-400">Commerce OS</div></div>
            </div>
            <div className="page-eyebrow">Secure workspace</div>
            <h2 className="mt-2 text-3xl font-black tracking-[-0.04em] text-slate-950">Selamat datang kembali</h2>
            <p className="mt-2 text-sm leading-6 text-slate-500">Masuk ke pusat operasional {brand.productName}.</p>

        {passwordConfigured === false ? (
          <div className="mt-5 rounded-xl border border-amber-200 bg-amber-50 p-3 text-xs font-semibold leading-5 text-amber-800">
            Login belum dikonfigurasi. Isi <code>TEST_PASSWORD</code> di env server atau set password aplikasi dari Settings.
          </div>
        ) : passwordConfigured === true && localPasswordConfigured ? (
          <div className="mt-5 rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs leading-5 text-slate-600">
            Password lokal untuk akun <strong>{username}</strong> sudah aktif. Gunakan sandi yang ditetapkan untuk akun ini. Jika lupa, Super Admin dapat mengatur ulang akun Owner melalui Manajemen Pengguna. Pesan ini hanya status akun, bukan error.
          </div>
        ) : passwordConfigured === true ? (
          <div className="mt-5 rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs leading-5 text-slate-600">
            Username/password masih memakai env server. Setelah masuk, buka Akun untuk set password aplikasi.
          </div>
        ) : (
          <div className="mt-5 rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs leading-5 text-slate-600">
            Mengecek konfigurasi login...
          </div>
        )}

        <form className="mt-6 space-y-4" onSubmit={submit}>
          <label className="block">
            <span className="text-sm font-semibold text-slate-700">Username</span>
            <input
              className="mt-2 w-full rounded-xl border border-slate-200 bg-white px-3.5 py-3 text-sm text-slate-950 shadow-sm"
              value={username}
              onChange={(event) => setUsername(event.target.value)}
            />
          </label>
          <label className="block">
            <span className="text-sm font-semibold text-slate-700">Password</span>
            <input
              className="mt-2 w-full rounded-xl border border-slate-200 bg-white px-3.5 py-3 text-sm text-slate-950 shadow-sm"
              type="password"
              value={password}
              onChange={(event) => setPassword(event.target.value)}
            />
          </label>
          {message ? <div className="rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700">{message}</div> : null}
          <Button className="mt-2 min-h-11 w-full" variant="primary" disabled={passwordConfigured !== true} loading={loading} type="submit">
            Masuk
          </Button>
        </form>
          </div>
        </section>
      </main>
    </div>
  );
}