// frontend/app/(auth)/login/page.jsx
"use client";

import { useMemo, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Separator } from "@/components/ui/separator";

const IS_DEV = process.env.NODE_ENV !== "production";

// URL builder กันเคสซ้ำ /api
function buildLoginUrl() {
  const base = (process.env.NEXT_PUBLIC_API_BASE || "").replace(/\/+$/, "");
  if (base.endsWith("/api")) return `${base}/auth/login`;
  return `${base}/api/auth/login`;
}

// helper: parse response body เป็น json หรือ text
async function parseBody(res) {
  const text = await res.text();
  try {
    return { raw: text, json: JSON.parse(text) };
  } catch {
    return { raw: text, json: null };
  }
}

// สร้างข้อความ debug ที่พร้อม copy
function stringifyDebug(debugInfo) {
  try {
    return JSON.stringify(debugInfo, null, 2);
  } catch {
    return String(debugInfo);
  }
}

export default function LoginPage() {
  const router = useRouter();
  const search = useSearchParams();
  const redirectTo = search.get("from") || "/dashboard";

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");

  // สำหรับ debug panel
  const [debugInfo, setDebugInfo] = useState(null);
  const [copyState, setCopyState] = useState({ copied: false, error: "" });

  const loginUrl = useMemo(buildLoginUrl, [process.env.NEXT_PUBLIC_API_BASE]);

  async function onSubmit(e) {
    e.preventDefault();
    setSubmitting(true);
    setError("");
    if (IS_DEV) {
      setDebugInfo(null);
      setCopyState({ copied: false, error: "" });
    }

    try {
      const res = await fetch(loginUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ username, password }),
      });

      if (!res.ok) {
        const body = await parseBody(res);

        const apiErr = {
          name: "ApiError",
          status: res.status,
          statusText: res.statusText,
          body: body.json ?? body.raw,
          message: (() => {
            const msgFromJson =
              (body.json && (body.json.error || body.json.message)) || null;

            if (res.status === 400)
              return `Bad request: ${msgFromJson ?? res.statusText}`;
            if (res.status === 401)
              return `Unauthenticated: ${msgFromJson ?? "Invalid credentials"}`;
            if (res.status === 403)
              return `Forbidden: ${msgFromJson ?? res.statusText}`;
            if (res.status === 404)
              return `Not found: ${msgFromJson ?? res.statusText}`;
            if (res.status >= 500)
              return `Server error (${res.status}): ${
                msgFromJson ?? res.statusText
              }`;
            return `${res.status} ${res.statusText}: ${
              msgFromJson ?? "Request failed"
            }`;
          })(),
        };

        if (IS_DEV) {
          setDebugInfo({
            kind: "api",
            request: {
              url: loginUrl,
              method: "POST",
              payload: { username: "(masked)", password: "(masked)" },
            },
            response: {
              status: res.status,
              statusText: res.statusText,
              body: apiErr.body,
            },
            env: {
              NEXT_PUBLIC_API_BASE:
                process.env.NEXT_PUBLIC_API_BASE || "(unset)",
              NODE_ENV: process.env.NODE_ENV,
            },
          });
        }

        throw apiErr;
      }

      // ✅ สำเร็จ
      if (IS_DEV) {
        setDebugInfo({
          kind: "success",
          request: { url: loginUrl, method: "POST" },
          note: "Login success. Redirecting…",
        });
      }
      router.push(redirectTo);
    } catch (err) {
      if (err?.name === "ApiError") {
        setError(err.message);
      } else if (err instanceof TypeError && /fetch/i.test(err.message)) {
        setError(
          "Network error: ไม่สามารถเชื่อมต่อเซิร์ฟเวอร์ได้ (ตรวจสอบ proxy/NPM/SSL)"
        );
        if (IS_DEV) {
          setDebugInfo({
            kind: "network",
            request: { url: loginUrl, method: "POST" },
            error: { message: err.message },
            hint: "เช็คว่า NPM ชี้ proxy /api ไปที่ backend ถูก network/port, และ TLS chain ถูกต้อง",
          });
        }
      } else {
        setError(err?.message || "Unexpected error");
        if (IS_DEV) {
          setDebugInfo({
            kind: "unknown",
            request: { url: loginUrl, method: "POST" },
            error: { message: String(err) },
          });
        }
      }
    } finally {
      setSubmitting(false);
    }
  }

  async function handleCopyDebug() {
    if (!debugInfo) return;
    const text = stringifyDebug(debugInfo);
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(text);
      } else {
        // Fallback
        const ta = document.createElement("textarea");
        ta.value = text;
        ta.style.position = "fixed";
        ta.style.left = "-9999px";
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        document.execCommand("copy");
        document.body.removeChild(ta);
      }
      setCopyState({ copied: true, error: "" });
      setTimeout(() => setCopyState({ copied: false, error: "" }), 1500);
    } catch (e) {
      setCopyState({
        copied: false,
        error: "คัดลอกไม่สำเร็จ (permission ของ clipboard?)",
      });
      setTimeout(() => setCopyState({ copied: false, error: "" }), 2500);
    }
  }

  return (
    <Card className="mx-auto w-full max-w-md shadow-lg">
      <CardHeader className="space-y-1">
        <CardTitle className="text-2xl text-sky-800">Sign in</CardTitle>
        <CardDescription>
          Enter your credentials to access the DMS
        </CardDescription>
      </CardHeader>

      <CardContent className="space-y-4">
        {error ? (
          <Alert variant="destructive">
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        ) : null}

        <form onSubmit={onSubmit} className="space-y-4">
          <div className="grid gap-2">
            <Label htmlFor="username">Username</Label>
            <Input
              id="username"
              autoComplete="username"
              placeholder="superadmin"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
            />
          </div>

          <div className="grid gap-2">
            <Label htmlFor="password">Password</Label>
            <Input
              id="password"
              type="password"
              autoComplete="current-password"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>

          <Button type="submit" className="w-full" disabled={submitting}>
            {submitting ? "Signing in..." : "Sign in"}
          </Button>
        </form>

        {IS_DEV && (
          <div className="mt-4 rounded-xl border border-sky-200 bg-sky-50 p-3">
            <div className="mb-2 flex items-center justify-between">
              <div className="text-sm font-semibold text-sky-900">
                Debug (dev mode only)
              </div>
              <div className="flex items-center gap-2">
                <Button
                  type="button"
                  size="sm"
                  variant="secondary"
                  onClick={handleCopyDebug}
                  disabled={!debugInfo}
                  aria-label="Copy debug info"
                >
                  {copyState.copied ? "Copied!" : "Copy debug"}
                </Button>
              </div>
            </div>
            <Separator className="my-2" />
            <div className="space-y-2 text-xs text-sky-900">
              <div>
                <span className="font-medium">Request URL:</span>{" "}
                <code className="break-all">{loginUrl}</code>
              </div>

              {debugInfo?.request?.method && (
                <div>
                  <span className="font-medium">Method:</span>{" "}
                  <code>{debugInfo.request.method}</code>
                </div>
              )}

              {debugInfo?.response && (
                <>
                  <div>
                    <span className="font-medium">Status:</span>{" "}
                    <code>
                      {debugInfo.response.status}{" "}
                      {debugInfo.response.statusText}
                    </code>
                  </div>
                  <div className="font-medium">Response body:</div>
                  <pre className="max-h-48 overflow-auto rounded bg-white p-2">
                    {typeof debugInfo.response.body === "string"
                      ? debugInfo.response.body
                      : JSON.stringify(debugInfo.response.body, null, 2)}
                  </pre>
                </>
              )}

              {debugInfo?.error && (
                <>
                  <div className="font-medium">Error:</div>
                  <pre className="max-h-48 overflow-auto rounded bg-white p-2">
                    {JSON.stringify(debugInfo.error, null, 2)}
                  </pre>
                </>
              )}

              {debugInfo?.env && (
                <>
                  <div className="font-medium">Env:</div>
                  <pre className="max-h-40 overflow-auto rounded bg-white p-2">
                    {JSON.stringify(debugInfo.env, null, 2)}
                  </pre>
                </>
              )}

              {debugInfo?.note && (
                <div className="italic text-sky-700">{debugInfo.note}</div>
              )}
              {debugInfo?.hint && (
                <div className="italic text-sky-700">
                  Hint: {debugInfo.hint}
                </div>
              )}

              {copyState.error && (
                <div className="text-red-600">{copyState.error}</div>
              )}
            </div>
          </div>
        )}
      </CardContent>

      <CardFooter className="justify-center text-xs text-gray-500">
        &copy; {new Date().getFullYear()} np-dms.work
      </CardFooter>
    </Card>
  );
}