import React, { useState, useEffect, useRef } from "react";
import { Formik } from "formik";
import * as Yup from "yup";
import axios from "axios";
import { Button, TextInput, TextArea, useToast, Modal } from "../ui";
import { fetchLoginUserKuCharacters } from "../api";

const schema = Yup.object({
    username: Yup.string(),
    password: Yup.string(),
});

function CharacterListModal({
    open,
    onClose,
    userId,
}: {
    open: boolean;
    onClose: () => void;
    userId: number | null;
}) {
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState<any[]>([]);
    const [errorMsg, setErrorMsg] = useState<string | null>(null);
    const { toast } = useToast();

    useEffect(() => {
        if (!open || !userId) {
            setData([]);
            setErrorMsg(null);
            return;
        }
        setLoading(true);
        setErrorMsg(null);
        fetchLoginUserKuCharacters(userId)
            .then((res) => {
                // api.ts returns res.data.data from the backend response
                // If backend returns { status: 'success', data: [...] }, res is [...]
                // If backend returns { status: 'success', data: { error: 666, status: 2 } }, res is { error: 666, status: 2 }
                
                if (Array.isArray(res)) {
                    setData(res);
                } else if (res && (res.error || (typeof res.status === 'number' && res.status !== 0))) {
                    // It's an error object from upstream
                    const errorCode = res.error || res.status;
                    let msg = `Error upstream: ${errorCode}`;
                    
                    if (errorCode === 666 || res.status === 2) {
                        msg = "Sesi kadaluarsa. Sistem telah mencoba auto-login namun gagal. Mohon cek username/password.";
                    }
                    
                    setErrorMsg(msg);
                    toast("error", msg);
                    setData([]);
                } else {
                    // Unknown structure or empty
                    setData([]);
                }
            })
            .catch((err) => {
                console.error(err);
                const msg = "Gagal mengambil data karakter. Pastikan server berjalan.";
                setErrorMsg(msg);
                toast("error", msg);
            })
            .finally(() => setLoading(false));
    }, [open, userId]);

    return (
        <Modal open={open} onClose={onClose} title="Daftar Karakter">
            {loading ? (
                <div className="p-4 text-center text-gray-400">Memuat data karakter...</div>
            ) : errorMsg ? (
                <div className="p-4 text-center">
                    <div className="mb-2 text-red-500 font-bold text-lg">Gagal Memuat Data</div>
                    <div className="text-red-400 bg-red-900/20 p-3 rounded border border-red-500/50">
                        {errorMsg}
                    </div>
                </div>
            ) : data.length === 0 ? (
                <div className="p-4 text-center text-gray-400">Tidak ada data karakter tersimpan.</div>
            ) : (
                <div className="max-h-96 overflow-y-auto p-4">
                    <div className="grid gap-3">
                        {data.map((char: any, idx: number) => (
                            <div key={idx} className="rounded border border-white/10 bg-white/5 p-3 text-sm">
                                <div className="font-bold text-white">{char.name || "Unknown"}</div>
                                <div className="text-xs text-gray-300">
                                    Level: {char.level} | Class: {char.class || "-"} | ID: {char.character_id}
                                </div>
                                {/* Fallback dump if fields missing */}
                                {!char.name && <pre className="text-[10px]">{JSON.stringify(char, null, 2)}</pre>}
                            </div>
                        ))}
                    </div>
                </div>
            )}
            <div className="flex justify-end p-4 pt-0">
                <Button onClick={onClose} variant="secondary">
                    Tutup
                </Button>
            </div>
        </Modal>
    );
}

export function AdminLoginUserKuPage() {
    const { toast } = useToast();
    const [responseData, setResponseData] = useState<any>(null);
    const [users, setUsers] = useState<any[]>([]);
    const [isLoadingUsers, setIsLoadingUsers] = useState(false);
    const [editingUser, setEditingUser] = useState<any>(null);
    const [uploadTargetId, setUploadTargetId] = useState<number | null>(null);
    const [isImporting, setIsImporting] = useState(false);
    const fileInputRef = useRef<HTMLInputElement>(null);
    const [charModal, setCharModal] = useState<{ open: boolean; userId: number | null }>({
        open: false,
        userId: null,
    });

    const handleImportClick = () => {
        setUploadTargetId(null);
        fileInputRef.current?.click();
    };

    const handleUserImportClick = (id: number) => {
        setUploadTargetId(id);
        fileInputRef.current?.click();
    };

    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        const formData = new FormData();
        formData.append("file", file);

        setIsImporting(true);
        try {
            const res = await axios.post(
                uploadTargetId
                    ? `/admin/api/login-userku/${uploadTargetId}/import`
                    : "/admin/api/login-userku/import",
                formData, {
                headers: { "Content-Type": "multipart/form-data" },
            });
            toast("success", uploadTargetId ? "User updated via AMF" : "AMF Imported Successfully");
            fetchUsers();
        } catch (error: any) {
            console.error(error);
            toast("error", error?.response?.data?.error || "Import failed");
        } finally {
            setIsImporting(false);
            if (fileInputRef.current) {
                fileInputRef.current.value = "";
            }
            setUploadTargetId(null);
        }
    };

    const fetchUsers = async () => {
        setIsLoadingUsers(true);
        try {
            const res = await axios.get("/admin/api/login-userku");
            setUsers(res.data);
        } catch (error) {
            console.error("Failed to fetch users", error);
            toast("error", "Gagal memuat data user.");
        } finally {
            setIsLoadingUsers(false);
        }
    };

    useEffect(() => {
        fetchUsers();
    }, []);

    const deleteUser = async (id: number) => {
        if (!confirm("Apakah Anda yakin ingin menghapus user ini?")) return;
        try {
            await axios.delete(`/admin/api/login-userku/${id}`);
            toast("success", "User berhasil dihapus");
            fetchUsers();
        } catch (error) {
            console.error(error);
            toast("error", "Gagal menghapus user");
        }
    };

    const labels = [
        "Username",
        "Password Hash",
        "Timestamp",
        "Random ID 1",
        "Random ID 2",
        "Session Key",
        "Long Token",
        "Numeric Token",
        "Status Code"
    ];

    return (
        <div className="space-y-6">
            <div className="rounded-xl border border-white/10 bg-white/5 p-6 shadow-sm backdrop-blur-xl">
                <div className="mb-6">
                    <h3 className="text-lg font-semibold text-white">Form Login & Auto-Save</h3>
                    <p className="text-sm text-gray-400">
                        Masukkan username dan password NinjaSage. 
                        Sistem akan login, menyimpan sesi, dan memungkinkan auto-fetch karakter.
                    </p>
                </div>

                <Formik
                    initialValues={{ username: "", password: "" }}
                    validationSchema={schema}
                    onSubmit={async (values, { setSubmitting }) => {
                        setSubmitting(true);
                        setResponseData(null);
                        try {
                            const res = await axios.post("/admin/api/login-userku/login", values);
                            setResponseData(res.data);
                            toast("success", "Login berhasil!");
                            fetchUsers();
                        } catch (error: any) {
                            console.error(error);
                            if (error.response?.data?.message) {
                                toast("error", error.response.data.message);
                            } else {
                                toast("error", "Terjadi kesalahan saat login.");
                            }
                            if (error.response?.data) {
                                setResponseData(error.response.data);
                            }
                        } finally {
                            setSubmitting(false);
                        }
                    }}
                >
                    {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
                        <form onSubmit={handleSubmit} className="space-y-4">
                            <TextInput
                                label="Username"
                                name="username"
                                value={values.username}
                                onChange={handleChange}
                                onBlur={handleBlur}
                                error={touched.username ? errors.username : undefined}
                                placeholder="Masukkan username"
                            />

                            <TextInput
                                label="Password"
                                name="password"
                                type="password"
                                value={values.password}
                                onChange={handleChange}
                                onBlur={handleBlur}
                                error={touched.password ? errors.password : undefined}
                                placeholder="Masukkan password"
                            />

                            <div className="pt-2 flex items-center gap-2">
                                <Button type="submit" disabled={isSubmitting}>
                                    {isSubmitting ? "Memproses..." : "Login"}
                                </Button>
                                <Button 
                                    type="button" 
                                    variant="secondary"
                                    disabled={isSubmitting}
                                    onClick={() => {
                                        const randomUser = "User_" + Math.random().toString(36).substring(7);
                                        const randomPass = Math.random().toString(36).substring(2, 10);
                                        // Update form values directly
                                        handleChange({ target: { name: 'username', value: randomUser } });
                                        handleChange({ target: { name: 'password', value: randomPass } });
                                    }}
                                >
                                    Auto Generate
                                </Button>
                                <input
                                    type="file"
                                    ref={fileInputRef}
                                    onChange={handleFileChange}
                                    className="hidden"
                                    accept=".amf"
                                />
                                <Button 
                                    type="button" 
                                    variant="secondary" 
                                    onClick={handleImportClick} 
                                    disabled={isImporting || isSubmitting}
                                >
                                    {isImporting ? "Importing..." : "Import AMF"}
                                </Button>
                            </div>
                        </form>
                    )}
                </Formik>
            </div>

            {responseData && (
                <div className="rounded-xl border border-white/10 bg-white/5 p-6 shadow-sm backdrop-blur-xl">
                    <h3 className="mb-4 text-lg font-semibold text-white">Hasil Response</h3>
                    
                    {/* Render Table if structure matches */}
                    {responseData.bodies?.[0]?.value?.[0] ? (
                        <div className="overflow-x-auto">
                            <table className="w-full text-left text-sm text-gray-400">
                                <thead className="bg-white/5 text-xs uppercase text-gray-200">
                                    <tr>
                                        <th className="px-6 py-3">Nama Field</th>
                                        <th className="px-6 py-3">Value</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-white/10">
                                    {responseData.bodies[0].value[0].map((val: any, index: number) => (
                                        <tr key={index} className="hover:bg-white/5">
                                            <td className="px-6 py-4 font-medium text-white">
                                                {labels[index] || `Field ${index + 1}`}
                                            </td>
                                            <td className="px-6 py-4 break-all font-mono text-gray-300">
                                                {val}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    ) : (
                        <TextArea
                            label="Raw JSON"
                            name="response"
                            value={JSON.stringify(responseData, null, 2)}
                            onChange={() => {}} // Read only
                            rows={15}
                        />
                    )}
                </div>
            )}

            <div className="rounded-xl border border-white/10 bg-white/5 p-6 shadow-sm backdrop-blur-xl">
                <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-semibold text-white">Daftar User Tersimpan</h3>
                    <Button variant="secondary" onClick={fetchUsers} disabled={isLoadingUsers}>
                        {isLoadingUsers ? "Memuat..." : "Refresh"}
                    </Button>
                </div>

                <div className="overflow-x-auto">
                    <table className="w-full text-left text-sm text-gray-400">
                        <thead className="bg-white/5 text-xs uppercase text-gray-200">
                            <tr>
                                <th className="px-6 py-3">ID</th>
                                <th className="px-6 py-3">Username</th>
                                <th className="px-6 py-3">Password Hash</th>
                                <th className="px-6 py-3">Session Key</th>
                                <th className="px-6 py-3">Waktu</th>
                                <th className="px-6 py-3 text-right">Aksi</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-white/10">
                            {users.length === 0 ? (
                                <tr>
                                    <td colSpan={6} className="px-6 py-4 text-center text-gray-500">
                                        Belum ada data user.
                                    </td>
                                </tr>
                            ) : (
                                users.map((user) => (
                                    <tr key={user.id} className="hover:bg-white/5">
                                        <td className="px-6 py-4">{user.id}</td>
                                        <td className="px-6 py-4 font-medium text-white">{user.username}</td>
                                        <td className="px-6 py-4 font-mono text-xs max-w-[150px] truncate" title={user.password_hash}>
                                            {user.password_hash}
                                        </td>
                                        <td className="px-6 py-4 font-mono text-xs max-w-[150px] truncate" title={user.session_key}>
                                            {user.session_key}
                                        </td>
                                        <td className="px-6 py-4 text-xs">
                                            {new Date(user.created_at).toLocaleString()}
                                        </td>
                                        <td className="px-6 py-4 text-right">
                                            <div className="flex justify-end gap-2">
                                                <Button
                                                    variant="secondary"
                                                    className="px-3 py-1 text-xs"
                                                    onClick={() => setCharModal({ open: true, userId: user.id })}
                                                >
                                                    Lihat Semua Char
                                                </Button>
                                                <Button
                                                    variant="secondary"
                                                    className="px-3 py-1 text-xs"
                                                    onClick={() => handleUserImportClick(user.id)}
                                                    title="Update session key via AMF"
                                                >
                                                    Update AMF
                                                </Button>
                                                <Button 
                                                    variant="secondary" 
                                                    className="px-3 py-1 text-xs"
                                                    onClick={() => setEditingUser(user)}
                                                >
                                                    Edit
                                                </Button>
                                                <Button 
                                                    variant="danger" 
                                                    className="px-3 py-1 text-xs"
                                                    onClick={() => deleteUser(user.id)}
                                                >
                                                    Hapus
                                                </Button>
                                            </div>
                                        </td>
                                    </tr>
                                ))
                            )}
                        </tbody>
                    </table>
                </div>
            </div>

            {/* Edit Modal */}
            <Modal
                open={!!editingUser}
                title={`Edit User #${editingUser?.id}`}
                onClose={() => setEditingUser(null)}
                widthClassName="max-w-lg"
            >
                {editingUser && (
                    <Formik
                        initialValues={{ username: editingUser.username, password: "" }} // Password optional in edit
                        validationSchema={schema}
                        onSubmit={async (values, { setSubmitting }) => {
                            setSubmitting(true);
                            try {
                                await axios.put(`/admin/api/login-userku/${editingUser.id}`, values);
                                toast("success", "User berhasil diupdate");
                                setEditingUser(null);
                                fetchUsers();
                            } catch (error) {
                                console.error(error);
                                toast("error", "Gagal update user");
                            } finally {
                                setSubmitting(false);
                            }
                        }}
                    >
                         {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
                            <form onSubmit={handleSubmit} className="space-y-4">
                                <TextInput
                                    label="Username"
                                    name="username"
                                    value={values.username}
                                    onChange={handleChange}
                                    onBlur={handleBlur}
                                    error={touched.username ? errors.username : undefined}
                                />
                                <TextInput
                                    label="Password (Biarkan kosong jika tidak diubah)"
                                    name="password"
                                    type="password"
                                    value={values.password}
                                    onChange={handleChange}
                                    onBlur={handleBlur}
                                    error={touched.password ? errors.password : undefined}
                                />
                                <div className="flex justify-end gap-2 pt-2">
                                    <Button type="button" variant="secondary" onClick={() => setEditingUser(null)}>
                                        Batal
                                    </Button>
                                    <Button type="submit" disabled={isSubmitting}>
                                        Simpan
                                    </Button>
                                </div>
                            </form>
                        )}
                    </Formik>
                )}
            </Modal>

            <CharacterListModal
                open={charModal.open}
                userId={charModal.userId}
                onClose={() => setCharModal({ ...charModal, open: false })}
            />
        </div>
    );
}