import { Link, useNavigate } from "react-router-dom";
import PermissionGuard from "../PermissionGuard";
import React, { useState } from "react";
import { FileText, Settings2, Trash2, ChevronUp, ChevronDown } from "lucide-react";
import MarkdownSettingModal from "../Modals/MarkdownSettingModal";
import { useDeleteMarkdown } from "../../utils/queries/markdown-queries";
import { useDeleteMarkdownSetting } from "../../utils/queries/markdown-setting-queries";
import { cn } from "../../lib/utils";

const iconBtn =
    "grid h-6 w-6 place-items-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-primary";

const MarkdownNode = ({ markdown, handleMoveMarkdown }) => {
    const [isMarkdownSettingModalOpen, setIsMarkdownSettingModalOpen] = useState(false);
    const navigate = useNavigate();
    const deleteMarkdown = useDeleteMarkdown();
    const deleteMarkdownSetting = useDeleteMarkdownSetting();

    const handleDeleteMarkdown = async () => {
        if (!window.confirm(`delete markdown "${markdown.title}" ? this action cannot be undone.`)) {
            return;
        }
        try {
            await deleteMarkdown.mutateAsync(markdown.id);
            if (window.location.pathname === `/markdown/${markdown.id}`) {
                navigate('/');
            }
        } catch (error) {
            alert('failed: ' + (error.message || 'unknown error'));
        }
    };

    return (
        <li>
            <div className="group flex items-center gap-1 rounded-md px-1 py-1 pl-1.5 transition-colors hover:bg-accent/60">
                <FileText className="ml-5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                <Link
                    to={`/markdown/${markdown.id}`}
                    className="min-w-0 flex-1 truncate text-sm text-foreground/90 transition-colors hover:text-primary"
                >
                    {markdown.title}
                </Link>
                <PermissionGuard rolesRequired={['admin']}>
                    <div className="flex shrink-0 items-center opacity-0 transition-opacity group-hover:opacity-100">
                        <button
                            type="button"
                            className={iconBtn}
                            title="Settings"
                            onClick={() => setIsMarkdownSettingModalOpen(true)}
                        >
                            <Settings2 className="h-3.5 w-3.5" />
                        </button>
                        <button
                            type="button"
                            className={cn(iconBtn, "hover:text-destructive")}
                            title="Delete"
                            onClick={handleDeleteMarkdown}
                            disabled={deleteMarkdown.isLoading || deleteMarkdownSetting.isLoading}
                        >
                            <Trash2 className="h-3.5 w-3.5" />
                        </button>
                        <div className="flex flex-col">
                            <button
                                type="button"
                                className="grid h-3 w-5 place-items-center text-muted-foreground hover:text-primary"
                                onClick={() => handleMoveMarkdown(markdown, "forward")}
                                title="Move up"
                            >
                                <ChevronUp className="h-3 w-3" />
                            </button>
                            <button
                                type="button"
                                className="grid h-3 w-5 place-items-center text-muted-foreground hover:text-primary"
                                onClick={() => handleMoveMarkdown(markdown, "backward")}
                                title="Move down"
                            >
                                <ChevronDown className="h-3 w-3" />
                            </button>
                        </div>
                    </div>
                    <MarkdownSettingModal
                        isOpen={isMarkdownSettingModalOpen}
                        markdown={markdown}
                        onClose={() => setIsMarkdownSettingModalOpen(false)}
                    />
                </PermissionGuard>
            </div>
        </li>
    );
};

export default MarkdownNode;
