import React, { useMemo, useState } from "react";
import { clanWarLogin, clanWarRequest } from "../api";
import { Button, TextArea, TextInput, useNinjaSfx, useToast } from "../ui";

type LoginForm = {
    base_url: string;
    session_key: string;
    char_id: string;
    authorization: string;
    x_air_appid: string;
};

type RequestForm = {
    base_url: string;
    method: "GET" | "POST";
    path: string;
    query_json: string;
    body_json: string;
    headers_json: string;
};

function safeParseJson(text: string) {
    const s = text.trim();
    if (s === "") return null;
    return JSON.parse(s);
}

function maskToken(t: string) {
    const s = t.trim();
    if (s.length <= 14) return "••••••••";
    return `${s.slice(0, 8)}…${s.slice(-6)}`;
}

export function AdminClanWarPage() {
    const { toast } = useToast();
    const sfx = useNinjaSfx();
    const [busy, setBusy] = useState(false);
    const [token, setToken] = useState<string>("");
    const [showToken, setShowToken] = useState(false);
    const [login, setLogin] = useState<LoginForm>({
        base_url: "",
        session_key: "",
        char_id: "",
        authorization: "",
        x_air_appid: "",
    });
    const [req, setReq] = useState<RequestForm>({
        base_url: "",
        method: "GET",
        path: "/player",
        query_json: "",
        body_json: "",
        headers_json: "",
    });
    const [result, setResult] = useState<string>("");

    const effectiveAuth = useMemo(() => {
        const a = login.authorization.trim();
        if (a) return a;
        if (!token.trim()) return "";
        return `Bearer ${token.trim()}`;
    }, [login.authorization, token]);

    return (
        <div className="space-y-4">
            <div className="ninja-card rounded-2xl border border-white/10 bg-white/[0.03] p-6 shadow-[0_20px_80px_-40px_rgba(0,0,0,0.9)] backdrop-blur">
                <div className="flex items-center justify-between gap-3">
                    <div>
                        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-300">
                            Clan War
                        </div>
                        <div className="mt-1 text-2xl font-semibold tracking-tight text-white font-ninja">
                            API Console
                        </div>
                        <div className="mt-1 text-sm text-gray-300/80">
                            Token hanya disimpan di browser (tidak disimpan server).
                        </div>
                    </div>
                </div>
            </div>

            <div className="grid grid-cols-1 gap-4 lg:grid-cols-12">
                <div className="lg:col-span-6">
                    <div className="ninja-card rounded-2xl border border-white/10 bg-white/[0.03] p-6 shadow-[0_20px_80px_-40px_rgba(0,0,0,0.9)] backdrop-blur">
                        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-300">
                            Login
                        </div>

                        <div className="mt-4 grid grid-cols-1 gap-3">
                            <TextInput
                                label="Base URL (opsional)"
                                name="base_url"
                                value={login.base_url}
                                onChange={(e) =>
                                    setLogin((p) => ({ ...p, base_url: e.currentTarget.value }))
                                }
                                placeholder="https://clan.ninjasage.id"
                            />
                            <TextInput
                                label="Session Key"
                                name="session_key"
                                value={login.session_key}
                                onChange={(e) =>
                                    setLogin((p) => ({ ...p, session_key: e.currentTarget.value }))
                                }
                                placeholder="..."
                            />
                            <TextInput
                                label="Char ID"
                                name="char_id"
                                value={login.char_id}
                                onChange={(e) =>
                                    setLogin((p) => ({ ...p, char_id: e.currentTarget.value }))
                                }
                                placeholder="772"
                            />
                            <TextInput
                                label="Authorization (opsional)"
                                name="authorization"
                                value={login.authorization}
                                onChange={(e) =>
                                    setLogin((p) => ({ ...p, authorization: e.currentTarget.value }))
                                }
                                placeholder="Bearer ..."
                            />
                            <TextInput
                                label="x-air-appid (opsional)"
                                name="x_air_appid"
                                value={login.x_air_appid}
                                onChange={(e) =>
                                    setLogin((p) => ({ ...p, x_air_appid: e.currentTarget.value }))
                                }
                                placeholder="ptGM..."
                            />

                            <div className="flex flex-wrap items-center gap-2 pt-2">
                                <Button
                                    type="button"
                                    disabled={busy}
                                    onClick={async () => {
                                        const sk = login.session_key.trim();
                                        const charId = Number.parseInt(login.char_id.trim(), 10);
                                        if (!sk || !Number.isFinite(charId)) {
                                            toast("error", "Session Key dan Char ID wajib valid.");
                                            return;
                                        }

                                        setBusy(true);
                                        setResult("");
                                        try {
                                            sfx.play("save");
                                            const data = await clanWarLogin({
                                                session_key: sk,
                                                char_id: charId,
                                                authorization: login.authorization.trim() || undefined,
                                                x_air_appid: login.x_air_appid.trim() || undefined,
                                                base_url: login.base_url.trim() || undefined,
                                            });
                                            const at = typeof data?.access_token === "string" ? data.access_token : "";
                                            if (at) {
                                                setToken(at);
                                                toast("success", "Login OK. access_token tersimpan di browser.");
                                            } else {
                                                toast("info", "Login OK, tapi access_token tidak ditemukan.");
                                            }
                                            setResult(JSON.stringify(data, null, 2));
                                        } catch (e: any) {
                                            toast("error", "Gagal login.");
                                        } finally {
                                            setBusy(false);
                                        }
                                    }}
                                    tip="Kirim /auth/login"
                                >
                                    {busy ? "Proses..." : "Login"}
                                </Button>

                                <Button
                                    type="button"
                                    variant="secondary"
                                    disabled={busy}
                                    onClick={() => {
                                        setToken("");
                                        setShowToken(false);
                                        toast("info", "Token dihapus dari browser.");
                                    }}
                                >
                                    Clear Token
                                </Button>
                            </div>

                            <div className="mt-3 rounded-2xl border border-white/10 bg-black/10 p-4">
                                <div className="flex items-center justify-between gap-3">
                                    <div className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-300">
                                        Access Token
                                    </div>
                                    <label className="inline-flex select-none items-center gap-2 text-sm font-semibold text-gray-100">
                                        <input
                                            type="checkbox"
                                            checked={showToken}
                                            onChange={(e) => setShowToken(e.currentTarget.checked)}
                                            className="h-4 w-4 rounded border border-white/20 bg-white/5 text-fuchsia-500 focus:ring-fuchsia-500/60"
                                        />
                                        Tampilkan
                                    </label>
                                </div>
                                <div className="mt-2 break-all text-sm text-gray-100">
                                    {token ? (showToken ? token : maskToken(token)) : "—"}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="lg:col-span-6">
                    <div className="ninja-card rounded-2xl border border-white/10 bg-white/[0.03] p-6 shadow-[0_20px_80px_-40px_rgba(0,0,0,0.9)] backdrop-blur">
                        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-300">
                            Request
                        </div>

                        <div className="mt-4 grid grid-cols-1 gap-3">
                            <TextInput
                                label="Base URL (opsional)"
                                name="req_base_url"
                                value={req.base_url}
                                onChange={(e) =>
                                    setReq((p) => ({ ...p, base_url: e.currentTarget.value }))
                                }
                                placeholder="https://clan.ninjasage.id"
                            />

                            <div className="grid grid-cols-1 gap-3 lg:grid-cols-12">
                                <div className="lg:col-span-4">
                                    <label className="block text-xs font-semibold uppercase tracking-[0.18em] text-gray-300">
                                        Method
                                    </label>
                                    <select
                                        value={req.method}
                                        onChange={(e) =>
                                            setReq((p) => ({
                                                ...p,
                                                method: e.currentTarget.value as any,
                                            }))
                                        }
                                        className="mt-2 w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold text-gray-100 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/60"
                                    >
                                        <option value="GET">GET</option>
                                        <option value="POST">POST</option>
                                    </select>
                                </div>
                                <div className="lg:col-span-8">
                                    <TextInput
                                        label="Path"
                                        name="path"
                                        value={req.path}
                                        onChange={(e) =>
                                            setReq((p) => ({ ...p, path: e.currentTarget.value }))
                                        }
                                        placeholder="/player"
                                    />
                                </div>
                            </div>

                            <TextArea
                                label="Headers JSON (opsional)"
                                name="headers_json"
                                value={req.headers_json}
                                onChange={(e) =>
                                    setReq((p) => ({ ...p, headers_json: e.currentTarget.value }))
                                }
                                placeholder='{"Authorization":"Bearer ...","x-air-appid":"..."}'
                                rows={4}
                            />

                            <TextArea
                                label="Query JSON (GET)"
                                name="query_json"
                                value={req.query_json}
                                onChange={(e) =>
                                    setReq((p) => ({ ...p, query_json: e.currentTarget.value }))
                                }
                                placeholder='{"a":1}'
                                rows={4}
                            />

                            <TextArea
                                label="Body JSON (POST)"
                                name="body_json"
                                value={req.body_json}
                                onChange={(e) =>
                                    setReq((p) => ({ ...p, body_json: e.currentTarget.value }))
                                }
                                placeholder='{"foo":"bar"}'
                                rows={6}
                            />

                            <div className="flex flex-wrap items-center gap-2 pt-2">
                                <Button
                                    type="button"
                                    disabled={busy}
                                    onClick={async () => {
                                        const p = req.path.trim();
                                        if (!p) {
                                            toast("error", "Path wajib diisi.");
                                            return;
                                        }

                                        let query: any = null;
                                        let body: any = null;
                                        let headers: any = null;
                                        try {
                                            query = safeParseJson(req.query_json);
                                        } catch {
                                            toast("error", "Query JSON tidak valid.");
                                            return;
                                        }
                                        try {
                                            body = safeParseJson(req.body_json);
                                        } catch {
                                            toast("error", "Body JSON tidak valid.");
                                            return;
                                        }
                                        try {
                                            headers = safeParseJson(req.headers_json);
                                        } catch {
                                            toast("error", "Headers JSON tidak valid.");
                                            return;
                                        }

                                        const mergedHeaders: Record<string, any> =
                                            headers && typeof headers === "object" ? { ...(headers as any) } : {};
                                        if (!mergedHeaders.Authorization && effectiveAuth) {
                                            mergedHeaders.Authorization = effectiveAuth;
                                        }
                                        if (login.x_air_appid.trim() && !mergedHeaders["x-air-appid"]) {
                                            mergedHeaders["x-air-appid"] = login.x_air_appid.trim();
                                        }

                                        setBusy(true);
                                        setResult("");
                                        try {
                                            sfx.play("save");
                                            const data = await clanWarRequest({
                                                method: req.method,
                                                path: p,
                                                query: req.method === "GET" ? (query || undefined) : undefined,
                                                json: req.method === "POST" ? (body || undefined) : undefined,
                                                headers: Object.keys(mergedHeaders).length ? mergedHeaders : undefined,
                                                base_url: req.base_url.trim() || undefined,
                                            });
                                            setResult(JSON.stringify(data, null, 2));
                                            toast("success", "Request OK.");
                                        } catch {
                                            toast("error", "Request gagal.");
                                        } finally {
                                            setBusy(false);
                                        }
                                    }}
                                >
                                    {busy ? "Proses..." : "Kirim"}
                                </Button>

                                <Button
                                    type="button"
                                    variant="secondary"
                                    disabled={busy}
                                    onClick={() => setResult("")}
                                >
                                    Clear Output
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="ninja-card rounded-2xl border border-white/10 bg-white/[0.03] p-6 shadow-[0_20px_80px_-40px_rgba(0,0,0,0.9)] backdrop-blur">
                <div className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-300">
                    Output
                </div>
                <pre className="mt-3 overflow-auto whitespace-pre-wrap break-words rounded-2xl border border-white/10 bg-black/20 p-4 text-xs text-gray-100">
                    {result || "—"}
                </pre>
            </div>
        </div>
    );
}