Koito/client/app/components/modals/ApiKeysModal.tsx

import { useQuery } from "@tanstack/react-query";
import { createApiKey, deleteApiKey, getApiKeys, type ApiKey } from "api/api";
import { AsyncButton } from "../AsyncButton";
import { useEffect, useRef, useState } from "react";
import { Copy, Trash } from "lucide-react";

type CopiedState = {
    x: number;
    y: number;
    visible: boolean;
};

export default function ApiKeysModal() {
    const [input, setInput] = useState('')
    const [loading, setLoading ] = useState(false)
    const [err, setError ] = useState<string>()
    const [displayData, setDisplayData] = useState<ApiKey[]>([])
    const [copied, setCopied] = useState<CopiedState | null>(null);
    const [expandedKey, setExpandedKey] = useState<string | null>(null);
    const textRefs = useRef<Record<string, HTMLDivElement | null>>({});
    
    const handleRevealAndSelect = (key: string) => {
        setExpandedKey(key);
        setTimeout(() => {
            const el = textRefs.current[key];
            if (el) {
                const range = document.createRange();
                range.selectNodeContents(el);
                const sel = window.getSelection();
                sel?.removeAllRanges();
                sel?.addRange(range);
            }
        }, 0);
    };
        
    const { isPending, isError, data, error } = useQuery({ 
        queryKey: [
            'api-keys'
        ], 
        queryFn: () => {
            return getApiKeys();
        },
    });

    useEffect(() => {
        if (data) {
            setDisplayData(data)
        }
    }, [data])    

    if (isError) {
        return (
            <p className="error">Error: {error.message}</p>
        )
    }
    if (isPending) {
        return (
            <p>Loading...</p>
        )
    }

    const handleCopy = (e: React.MouseEvent<HTMLButtonElement>, text: string) => {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
        } else {
            fallbackCopy(text);
        }
    
        const parentRect = (e.currentTarget.closest(".relative") as HTMLElement).getBoundingClientRect();
        const buttonRect = e.currentTarget.getBoundingClientRect();
    
        setCopied({
            x: buttonRect.left - parentRect.left + buttonRect.width / 2,
            y: buttonRect.top - parentRect.top - 8,
            visible: true,
        });
    
        setTimeout(() => setCopied(null), 1500);
    };
    
    const fallbackCopy = (text: string) => {
        const textarea = document.createElement("textarea");
        textarea.value = text;
        textarea.style.position = "fixed"; // prevent scroll to bottom
        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();
        try {
            document.execCommand("copy");
        } catch (err) {
            console.error("Fallback: Copy failed", err);
        }
        document.body.removeChild(textarea);
    };
    
    const handleCreateApiKey = () => {
        setError(undefined)
        if (input === "") {
            setError("a label must be provided")
            return
        }
        setLoading(true)
        createApiKey(input)
        .then(r => {
            setDisplayData([r, ...displayData])
            setInput('')
        }).catch((err) => setError(err.message))
        setLoading(false)
    }

    const handleDeleteApiKey = (id: number) => {
        setError(undefined)
        setLoading(true)
        deleteApiKey(id)
        .then(r => {
            if (r.ok) {
                setDisplayData(displayData.filter((v) => v.id != id))
            } else {
                r.json().then((r) => setError(r.error))
            }
        })
        setLoading(false)

    }

    return (
        <div className="">
        <h2>API Keys</h2>
        <div className="flex flex-col gap-4 relative">
            {displayData.map((v) => (
                <div className="flex gap-2"><div
                        key={v.key}
                        ref={el => {
                            textRefs.current[v.key] = el;
                        }}
                        onClick={() => handleRevealAndSelect(v.key)}
                        className={`bg p-3 rounded-md flex-grow cursor-pointer select-text ${
                            expandedKey === v.key ? '' : 'truncate'
                        }`}
                        style={{ whiteSpace: 'nowrap' }}
                        title={v.key} // optional tooltip
                    >
                        {expandedKey === v.key ? v.key : `${v.key.slice(0, 8)}... ${v.label}`}
                    </div>            
                    <button onClick={(e) => handleCopy(e, v.key)} className="large-button px-5 rounded-md"><Copy size={16} /></button>
                    <AsyncButton loading={loading} onClick={() => handleDeleteApiKey(v.id)} confirm><Trash size={16} /></AsyncButton>
                </div>
            ))}
            <div className="flex gap-2 w-3/5">
                <input
                    type="text"
                    placeholder="Add a label for a new API key"
                    className="mx-auto fg bg rounded-md p-3 flex-grow"
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                />
                <AsyncButton loading={loading} onClick={handleCreateApiKey}>Create</AsyncButton>
            </div>
            {err && <p className="error">{err}</p>}
            {copied?.visible && (
                <div
                    style={{
                        position: "absolute",
                        top: copied.y,
                        left: copied.x,
                        transform: "translate(-50%, -100%)",
                    }}
                    className="pointer-events-none bg-black text-white text-sm px-2 py-1 rounded shadow-lg opacity-90 animate-fade"
                >
                    Copied!
                </div>
            )}
        </div>
        </div>
    )
}