import React, { useEffect, useMemo, useState } from "react";
import { Formik } from "formik";
import * as Yup from "yup";
import { Button, Pagination, Select, TextArea, TextInput, useNinjaSfx, useToast } from "../ui";
import { createPasswordConversion, deletePasswordConversion, fetchPasswordConversions, updatePasswordConversion, PaginatedMeta } from "../api";
import { useDebounce } from "../hooks";

type FormValues = {
    input_text: string;
    hash_algo: "md5" | "sha1" | "sha256" | "sha512";
    note: string;
};

type ConversionItem = {
    id: number;
    input_text: string;
    hash_algo: "md5" | "sha1" | "sha256" | "sha512";
    hash_value: string;
    note?: string | null;
    created_at?: string | null;
    updated_at?: string | null;
};

const schema = Yup.object({
    input_text: Yup.string().required("Teks wajib diisi.").max(4096),
    hash_algo: Yup.string().oneOf(["md5", "sha1", "sha256", "sha512"]).required(),
    note: Yup.string().max(255),
});

function toFormValues(): FormValues {
    return {
        input_text: "",
        hash_algo: "sha256",
        note: "",
    };
}

export function AdminKoneversiPasswordPage() {
    const { toast } = useToast();
    const sfx = useNinjaSfx();
    const [items, setItems] = useState<ConversionItem[]>([]);
    
    // DEBUG: Verify render
    // console.log("AdminKoneversiPasswordPage rendering");

    const [loading, setLoading] = useState(true);
    const [search, setSearch] = useState("");
    const [page, setPage] = useState(1);
    const [meta, setMeta] = useState<PaginatedMeta | null>(null);
    const debouncedSearch = useDebounce(search, 500);

    useEffect(() => {
        let active = true;
        setLoading(true);
        fetchPasswordConversions({ page, per_page: 10, q: debouncedSearch })
            .then((res) => {
                if (!active) return;
                setItems(res.data);
                setMeta(res.meta);
            })
            .catch(() => {
                if (!active) return;
                toast("error", "Gagal memuat data.");
            })
            .finally(() => {
                if (!active) return;
                setLoading(false);
            });
        return () => {
            active = false;
        };
    }, [page, debouncedSearch, toast]);

    const editor = useMemo(() => {
        return (
            <Formik<FormValues>
                initialValues={toFormValues()}
                validationSchema={schema}
                onSubmit={async (values, helpers) => {
                    helpers.setSubmitting(true);
                    try {
                        sfx.play("save");
                        const saved = await createPasswordConversion(values);
                        // Refresh list if on first page, otherwise just notify
                        if (page === 1) {
                            setItems((p) => [saved, ...p]);
                        } else {
                            setPage(1); // Go to first page to see new item
                        }
                        toast("success", "Konversi berhasil dibuat.");
                        helpers.resetForm();
                    } catch {
                        toast("error", "Gagal mengonversi.");
                    } finally {
                        helpers.setSubmitting(false);
                    }
                }}
            >
                {({ values, errors, touched, handleSubmit, handleChange, isSubmitting, setFieldValue }) => (
                    <form onSubmit={handleSubmit}>
                        <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 flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                                <div>
                                    <div className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-300">
                                        Utilitas
                                    </div>
                                    <div className="mt-1 text-2xl font-semibold tracking-tight text-white font-ninja">
                                        Konversi Password
                                    </div>
                                    <div className="mt-1 text-sm text-gray-300/80">
                                        Ubah teks menjadi hash dan simpan hasilnya.
                                    </div>
                                </div>
                                <div className="flex items-center gap-2">
                                    <Button type="submit" disabled={isSubmitting} tip="Proses konversi">
                                        {isSubmitting ? "Memproses..." : "Konversi"}
                                    </Button>
                                </div>
                            </div>
                            <div className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-12">
                                <TextArea
                                    className="lg:col-span-8"
                                    label="Teks"
                                    name="input_text"
                                    value={values.input_text}
                                    onChange={handleChange}
                                    error={touched.input_text ? (errors.input_text as string) : null}
                                    placeholder="Masukkan teks..."
                                    rows={5}
                                />
                                <Select
                                    className="lg:col-span-4"
                                    label="Algoritma"
                                    name="hash_algo"
                                    value={values.hash_algo}
                                    onChange={(e) => setFieldValue("hash_algo", e.target.value)}
                                >
                                    <option value="sha256">SHA-256</option>
                                    <option value="sha512">SHA-512</option>
                                    <option value="sha1">SHA-1</option>
                                    <option value="md5">MD5</option>
                                </Select>
                                <TextInput
                                    className="lg:col-span-12"
                                    label="Catatan"
                                    name="note"
                                    value={values.note}
                                    onChange={handleChange}
                                    error={touched.note ? (errors.note as string) : null}
                                    placeholder="Opsional"
                                />
                            </div>
                        </div>
                    </form>
                )}
            </Formik>
        );
    }, [toast, sfx, page]);

    const list = useMemo(() => {
        return (
            <div className="mt-6 space-y-4">
                <div className="flex items-center justify-between gap-4">
                    <TextInput
                        className="w-full max-w-sm"
                        placeholder="Cari teks..."
                        value={search}
                        onChange={(e) => {
                            setSearch(e.target.value);
                            setPage(1); // Reset to page 1 on search
                        }}
                    />
                    {meta && (
                         <div className="text-xs font-semibold text-gray-400">
                             Total: {meta.total}
                         </div>
                    )}
                </div>

                {loading ? (
                    <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-sm font-semibold text-gray-200">
                        Memuat...
                    </div>
                ) : (
                    <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
                        <div className="grid grid-cols-1 gap-3">
                            {items.map((it) => (
                                <div key={it.id} className="rounded-xl border border-white/10 bg-white/5 p-4 transition duration-300 hover:bg-white/[0.07]">
                                    <div className="flex items-center justify-between">
                                        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-300">
                                            #{it.id} • {it.hash_algo}
                                        </div>
                                        <div className="text-xs text-gray-500">
                                            {it.created_at ? new Date(it.created_at).toLocaleString() : '-'}
                                        </div>
                                    </div>
                                    
                                    <div className="mt-1 break-all text-sm text-gray-200 font-mono bg-black/20 p-2 rounded border border-white/5">
                                        {it.hash_value}
                                    </div>

                                    <div className="mt-3 grid grid-cols-1 gap-3 lg:grid-cols-12">
                                        <TextArea
                                            className="lg:col-span-9"
                                            label="Teks Input"
                                            name={`input_text_${it.id}`}
                                            value={it.input_text}
                                            onChange={(e) => setItems((p) => p.map((x) => x.id === it.id ? { ...x, input_text: e.target.value } : x))}
                                            rows={2}
                                        />
                                        <Select
                                            className="lg:col-span-3"
                                            label="Algoritma"
                                            name={`hash_algo_${it.id}`}
                                            value={it.hash_algo}
                                            onChange={(e) => setItems((p) => p.map((x) => x.id === it.id ? { ...x, hash_algo: e.target.value as any } : x))}
                                        >
                                            <option value="sha256">SHA-256</option>
                                            <option value="sha512">SHA-512</option>
                                            <option value="sha1">SHA-1</option>
                                            <option value="md5">MD5</option>
                                        </Select>
                                    </div>
                                    <div className="mt-3 grid grid-cols-1 gap-3 lg:grid-cols-12 items-end">
                                        <TextInput
                                            className="lg:col-span-9"
                                            label="Catatan"
                                            name={`note_${it.id}`}
                                            value={it.note || ""}
                                            onChange={(e) => setItems((p) => p.map((x) => x.id === it.id ? { ...x, note: e.target.value } : x))}
                                        />
                                        <div className="lg:col-span-3 flex items-end gap-2 justify-end">
                                            <Button
                                                onClick={async () => {
                                                    try {
                                                        sfx.play("save");
                                                        const updated = await updatePasswordConversion(it.id, {
                                                            input_text: it.input_text,
                                                            hash_algo: it.hash_algo,
                                                            note: it.note || null,
                                                        });
                                                        setItems((p) => p.map((x) => x.id === it.id ? updated : x));
                                                        toast("success", "Perubahan tersimpan.");
                                                    } catch {
                                                        toast("error", "Gagal menyimpan perubahan.");
                                                    }
                                                }}
                                                tip="Simpan perubahan"
                                                className="flex-1"
                                            >
                                                Simpan
                                            </Button>
                                            <Button
                                                variant="danger"
                                                onClick={async () => {
                                                    if (!confirm("Yakin ingin menghapus data ini?")) return;
                                                    try {
                                                        sfx.play("delete");
                                                        await deletePasswordConversion(it.id);
                                                        setItems((p) => p.filter((x) => x.id !== it.id));
                                                        toast("success", "Data dihapus.");
                                                    } catch {
                                                        toast("error", "Gagal menghapus data.");
                                                    }
                                                }}
                                                tip="Hapus data"
                                            >
                                                Hapus
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            ))}
                            {items.length === 0 && (
                                <div className="rounded-xl border border-white/10 bg-white/5 p-4 text-sm text-gray-200 text-center">
                                    Belum ada data.
                                </div>
                            )}
                        </div>
                    </div>
                )}
                
                {meta && meta.last_page > 1 && (
                    <Pagination
                        page={meta.page}
                        lastPage={meta.last_page}
                        onPage={setPage}
                    />
                )}
            </div>
        );
    }, [items, loading, toast, sfx, search, meta]);

    return (
        <div className="flex flex-col gap-6">
            {editor}
            {list}
        </div>
    );
}