'use client';

import { ReactNode, useEffect, useState, useCallback } from "react";
import { Spinner, Dropdown, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Input, useDisclosure } from "@heroui/react";
import { Button } from "@/components/ui/button";
import { fetchProject, createApiKey, deleteApiKey, listApiKeys, deleteProject, rotateSecret, updateProjectName, saveWorkflow } from "../../../../actions/project.actions";
import { CopyButton } from "../../../../../components/common/copy-button";
import { EyeIcon, EyeOffIcon, PlusIcon, Trash2Icon } from "lucide-react";
import { ApiKey } from "@/src/entities/models/api-key";
import { z } from "zod";
import { RelativeTime } from "@primer/react";
import { Label } from "../../../../lib/components/label";
import { sectionHeaderStyles, sectionDescriptionStyles } from './shared-styles';
import { clsx } from "clsx";
import { InputField } from "../../../../lib/components/input-field";
import { ComposioConnectedAccount } from "@/src/entities/models/project";
import { getToolkit, listComposioTriggerDeployments, deleteComposioTriggerDeployment } from "../../../../actions/composio.actions";
import { deleteConnectedAccount } from "../../../../actions/composio.actions";
import { PictureImg } from "@/components/ui/picture-img";
import { UnlinkIcon, AlertTriangle, Trash2 } from "lucide-react";
import { ProjectWideChangeConfirmationModal } from "@/components/common/project-wide-change-confirmation-modal";
import { Workflow } from "../../../../lib/types/workflow_types";

export function Section({
    title,
    children,
    description,
}: {
    title: string;
    children: React.ReactNode;
    description?: string;
}) {
    return (
        <div className="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
            <div className="px-6 pt-4">
                <h2 className={sectionHeaderStyles}>{title}</h2>
                {description && (
                    <p className={sectionDescriptionStyles}>{description}</p>
                )}
            </div>
            <div className="px-6 pb-6">{children}</div>
        </div>
    );
}

export function SectionRow({
    children,
}: {
    children: ReactNode;
}) {
    return <div className="flex flex-col gap-2">{children}</div>;
}

export function LeftLabel({
    label,
}: {
    label: string;
}) {
    return <Label label={label} />;
}

export function RightContent({
    children,
}: {
    children: React.ReactNode;
}) {
    return <div>{children}</div>;
}

function ProjectNameSection({ 
    projectId, 
    onProjectConfigUpdated 
}: { 
    projectId: string;
    onProjectConfigUpdated?: () => void;
}) {
    const [loading, setLoading] = useState(false);
    const [projectName, setProjectName] = useState<string | null>(null);

    useEffect(() => {
        setLoading(true);
        fetchProject(projectId).then((project) => {
            setProjectName(project?.name);
            setLoading(false);
        });
    }, [projectId]);

    async function updateName(name: string) {
        setLoading(true);
        await updateProjectName(projectId, name);
        setProjectName(name);
        setLoading(false);
        if (onProjectConfigUpdated) {
            onProjectConfigUpdated();
        }
    }

    return <Section 
        title="Project Name"
        description="The name of your project."
    >
        <div className="space-y-4">
            {loading ? (
                <Spinner size="sm" />
            ) : (
                <InputField
                    type="text"
                    value={projectName || ''}
                    onChange={updateName}
                    className="w-full"
                />
            )}
        </div>
    </Section>;
}

function ProjectIdSection({ projectId }: { projectId: string }) {
    return <Section 
        title="Project ID"
        description="Your project's unique identifier."
    >
        <div className="flex flex-row gap-2 items-center">
            <div className="text-sm font-mono text-gray-600 dark:text-gray-400">{projectId}</div>
            <CopyButton
                onCopy={() => navigator.clipboard.writeText(projectId)}
                label="Copy"
                successLabel="Copied"
            />
        </div>
    </Section>;
}

function SecretSection({ projectId }: { projectId: string }) {
    const [loading, setLoading] = useState(false);
    const [hidden, setHidden] = useState(true);
    const [secret, setSecret] = useState<string | null>(null);

    const formattedSecret = hidden ? `${secret?.slice(0, 2)}${'•'.repeat(5)}${secret?.slice(-2)}` : secret;

    useEffect(() => {
        setLoading(true);
        fetchProject(projectId).then((project) => {
            setSecret(project.secret);
            setLoading(false);
        });
    }, [projectId]);

    const handleRotateSecret = async () => {
        if (!confirm("Are you sure you want to rotate the secret? All existing signatures will become invalid.")) {
            return;
        }
        setLoading(true);
        try {
            const newSecret = await rotateSecret(projectId);
            setSecret(newSecret);
        } catch (error) {
            console.error('Failed to rotate secret:', error);
        } finally {
            setLoading(false);
        }
    };

    return <Section 
        title="Project Secret"
        description="The project secret is used for signing tool-call requests sent to your webhook."
    >
        <div className="space-y-4">
            {loading ? (
                <Spinner size="sm" />
            ) : (
                <div className="flex flex-row gap-4 items-center">
                    <div className="text-sm font-mono break-all text-gray-600 dark:text-gray-400">
                        {formattedSecret}
                    </div>
                    <div className="flex flex-row gap-4 items-center">
                        <button
                            onClick={() => setHidden(!hidden)}
                            className="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
                        >
                            {hidden ? <EyeIcon size={16} /> : <EyeOffIcon size={16} />}
                        </button>
                        <CopyButton
                            onCopy={() => navigator.clipboard.writeText(secret || '')}
                            label="Copy"
                            successLabel="Copied"
                        />
                        <Button
                            size="sm"
                            variant="primary"
                            onClick={handleRotateSecret}
                            disabled={loading}
                        >
                            Rotate
                        </Button>
                    </div>
                </div>
            )}
        </div>
    </Section>;
}

function ApiKeyDisplay({ apiKey, onDelete }: { apiKey: string; onDelete: () => void }) {
    const [isVisible, setIsVisible] = useState(false);
    const formattedKey = isVisible ? apiKey : `${apiKey.slice(0, 2)}${'•'.repeat(5)}${apiKey.slice(-2)}`;

    return (
        <div className="flex items-center gap-2">
            <div className="text-sm font-mono break-all">
                {formattedKey}
            </div>
            <button
                onClick={() => setIsVisible(!isVisible)}
                className="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
            >
                {isVisible ? <EyeOffIcon className="w-4 h-4" /> : <EyeIcon className="w-4 h-4" />}
            </button>
            <CopyButton
                onCopy={() => navigator.clipboard.writeText(apiKey)}
                label="Copy"
                successLabel="Copied"
            />
            <button
                onClick={onDelete}
                className="text-gray-600 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400"
            >
                <Trash2Icon className="w-4 h-4" />
            </button>
        </div>
    );
}

function ApiKeysSection({ projectId }: { projectId: string }) {
    const [keys, setKeys] = useState<z.infer<typeof ApiKey>[]>([]);
    const [loading, setLoading] = useState(true);
    const [message, setMessage] = useState<{
        type: 'success' | 'error' | 'info';
        text: string;
    } | null>(null);

    const loadKeys = useCallback(async () => {
        const keys = await listApiKeys(projectId);
        setKeys(keys);
        setLoading(false);
    }, [projectId]);

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

    const handleCreateKey = async () => {
        setLoading(true);
        setMessage(null);
        try {
            const key = await createApiKey(projectId);
            setKeys([...keys, key]);
            setMessage({
                type: 'success',
                text: 'API key created successfully',
            });
            setTimeout(() => setMessage(null), 2000);
        } catch (error) {
            setMessage({
                type: 'error',
                text: error instanceof Error ? error.message : "Failed to create API key",
            });
        } finally {
            setLoading(false);
        }
    };

    const handleDeleteKey = async (id: string) => {
        if (!confirm("Are you sure you want to delete this API key? This action cannot be undone.")) {
            return;
        }

        try {
            setLoading(true);
            await deleteApiKey(projectId, id);
            setKeys(keys.filter((k) => k.id !== id));
            setMessage({
                type: 'info',
                text: 'API key deleted successfully',
            });
            setTimeout(() => setMessage(null), 2000);
        } catch (error) {
            setMessage({
                type: 'error',
                text: error instanceof Error ? error.message : "Failed to delete API key",
            });
        } finally {
            setLoading(false);
        }
    };

    return <Section 
        title="API Keys"
        description="API keys are used to authenticate requests to the Rowboat API."
    >
        <div className="space-y-4">
            <div className="flex justify-between items-center">
                <Button
                    size="sm"
                    variant="primary"
                    startContent={<PlusIcon className="w-4 h-4" />}
                    onClick={handleCreateKey}
                    disabled={loading}
                >
                    Create API Key
                </Button>
            </div>

            {loading ? (
                <Spinner size="sm" />
            ) : (
                <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
                    <div className="grid grid-cols-12 items-center border-b border-gray-200 dark:border-gray-700 p-4">
                        <div className="col-span-7 font-medium text-gray-900 dark:text-gray-100">API Key</div>
                        <div className="col-span-3 font-medium text-gray-900 dark:text-gray-100">Created</div>
                        <div className="col-span-2 font-medium text-gray-900 dark:text-gray-100">Last Used</div>
                    </div>
                    
                    {message && (
                        <div className={clsx(
                            "p-4 text-sm",
                            message.type === 'success' && "bg-green-50 text-green-700",
                            message.type === 'error' && "bg-red-50 text-red-700",
                            message.type === 'info' && "bg-yellow-50 text-yellow-700"
                        )}>
                            {message.text}
                        </div>
                    )}

                    {keys.map((key) => (
                        <div key={key.id} className="grid grid-cols-12 items-center border-b border-gray-200 dark:border-gray-700 last:border-0 p-4">
                            <div className="col-span-7">
                                <ApiKeyDisplay 
                                    apiKey={key.key} 
                                    onDelete={() => handleDeleteKey(key.id)}
                                />
                            </div>
                            <div className="col-span-3 text-sm text-gray-500">
                                <RelativeTime date={new Date(key.createdAt)} />
                            </div>
                            <div className="col-span-2 text-sm text-gray-500">
                                {key.lastUsedAt ? (
                                    <RelativeTime date={new Date(key.lastUsedAt)} />
                                ) : 'Never'}
                            </div>
                        </div>
                    ))}
                    
                    {keys.length === 0 && (
                        <div className="p-6 text-center text-gray-500 dark:text-gray-400">
                            No API keys created yet
                        </div>
                    )}
                </div>
            )}
        </div>
    </Section>;
}

/*
export function ChatWidgetSection({ projectId, chatWidgetHost }: { projectId: string, chatWidgetHost: string }) {
    const [loading, setLoading] = useState(false);
    const [chatClientId, setChatClientId] = useState<string | null>(null);

    useEffect(() => {
        setLoading(true);
        fetchProject(projectId).then((project) => {
            setChatClientId(project.chatClientId);
            setLoading(false);
        });
    }, [projectId]);

    const code = `<!-- RowBoat Chat Widget -->
<script>
    window.ROWBOAT_CONFIG = {
        clientId: '${chatClientId}'
    };
    (function(d) {
        var s = d.createElement('script');
        s.src = '${chatWidgetHost}/api/bootstrap.js';
        s.async = true;
        d.getElementsByTagName('head')[0].appendChild(s);
    })(document);
</script>`;

    return (
        <Section 
            title="Chat Widget"
            description="Add the chat widget to your website by copying and pasting this code snippet just before the closing </body> tag."
        >
            <div className="space-y-4">
                {loading ? (
                    <Spinner size="sm" />
                ) : (
                    <div className="relative">
                        <div className="absolute top-3 right-3">
                            <CopyButton
                                onCopy={() => navigator.clipboard.writeText(code)}
                                label="Copy"
                                successLabel="Copied"
                            />
                        </div>
                        <div className="font-mono text-sm bg-gray-50 dark:bg-gray-800 rounded-lg p-4 pr-12 overflow-x-auto">
                            <pre className="whitespace-pre-wrap break-all">
                                {code}
                            </pre>
                        </div>
                    </div>
                )}
            </div>
        </Section>
    );
}
*/

interface ConnectedToolkit {
    slug: string;
    name: string;
    logo: string;
    connectedAccount: z.infer<typeof ComposioConnectedAccount> | null;
}

function DisconnectToolkitsSection({ projectId, onProjectConfigUpdated }: { 
    projectId: string; 
    onProjectConfigUpdated?: () => void;
}) {
    const [loading, setLoading] = useState(false);
    const [connectedToolkits, setConnectedToolkits] = useState<ConnectedToolkit[]>([]);
    const [disconnectingToolkit, setDisconnectingToolkit] = useState<string | null>(null);
    const [showDisconnectModal, setShowDisconnectModal] = useState(false);
    const [selectedToolkit, setSelectedToolkit] = useState<ConnectedToolkit | null>(null);

    const loadConnectedToolkits = useCallback(async () => {
        setLoading(true);
        try {
            const project = await fetchProject(projectId);
            const connectedAccounts = project.composioConnectedAccounts || {};
            const workflow = project.draftWorkflow;
            
            // Get all connected accounts (both active and inactive)
            const allConnections = Object.entries(connectedAccounts);
            
            // Get all Composio toolkits used in workflow tools (even if not connected)
            const workflowToolkitSlugs = new Set<string>();
            if (workflow?.tools) {
                workflow.tools.forEach(tool => {
                    if (tool.isComposio && tool.composioData?.toolkitSlug) {
                        workflowToolkitSlugs.add(tool.composioData.toolkitSlug);
                    }
                });
            }
            
            // Combine connected accounts and workflow toolkits
            const allToolkitSlugs = new Set([
                ...allConnections.map(([slug]) => slug),
                ...workflowToolkitSlugs
            ]);

            // Fetch toolkit details for each toolkit
            const toolkitPromises = Array.from(allToolkitSlugs).map(async (slug) => {
                try {
                    const toolkit = await getToolkit(projectId, slug);
                    const connectedAccount = connectedAccounts[slug];
                    
                    return {
                        slug,
                        name: toolkit.name,
                        logo: toolkit.meta.logo,
                        connectedAccount: connectedAccount || null // null if not connected
                    };
                } catch (error) {
                    console.error(`Failed to fetch toolkit ${slug}:`, error);
                    return null;
                }
            });

            const toolkits = (await Promise.all(toolkitPromises)).filter(Boolean) as (ConnectedToolkit | ConnectedToolkit & { connectedAccount: null })[];
            setConnectedToolkits(toolkits);
        } catch (error) {
            console.error('Failed to load connected toolkits:', error);
        } finally {
            setLoading(false);
        }
    }, [projectId]);

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

    const handleDisconnectClick = (toolkit: ConnectedToolkit) => {
        setSelectedToolkit(toolkit);
        setShowDisconnectModal(true);
    };



    const handleConfirmDisconnect = async () => {
        if (!selectedToolkit) return;
        
        setDisconnectingToolkit(selectedToolkit.slug);
        try {
            // Step 1: Get current project and workflow
            const project = await fetchProject(projectId);
            const currentWorkflow = project.draftWorkflow;
            
            if (currentWorkflow) {
                // Step 2: Remove all tools from this toolkit from the workflow
                const updatedTools = currentWorkflow.tools.filter(tool => 
                    !tool.isComposio || tool.composioData?.toolkitSlug !== selectedToolkit.slug
                );
                
                // Step 3: Update the workflow
                const updatedWorkflow: z.infer<typeof Workflow> = {
                    ...currentWorkflow,
                    tools: updatedTools
                };
                
                await saveWorkflow(projectId, updatedWorkflow);
            }
            
            // Step 4: Delete all triggers for this toolkit
            const triggers = await listComposioTriggerDeployments({ projectId });
            const toolkitTriggers = triggers.items.filter(trigger => trigger.toolkitSlug === selectedToolkit.slug);
            
            for (const trigger of toolkitTriggers) {
                try {
                    await deleteComposioTriggerDeployment({
                        projectId,
                        deploymentId: trigger.id
                    });
                } catch (error) {
                    console.error(`Failed to delete trigger ${trigger.id}:`, error);
                    // Continue with other triggers
                }
            }
            
            // Step 5: Disconnect the account (if connected)
            if (selectedToolkit.connectedAccount) {
                await deleteConnectedAccount(
                    projectId, 
                    selectedToolkit.slug, 
                );
            }
            
            // Remove from local state
            setConnectedToolkits(prev => 
                prev.filter(toolkit => toolkit.slug !== selectedToolkit.slug)
            );
            
            // Notify parent of config update
            onProjectConfigUpdated?.();
        } catch (error) {
            console.error('Disconnect failed:', error);
        } finally {
            setDisconnectingToolkit(null);
            setShowDisconnectModal(false);
            setSelectedToolkit(null);
        }
    };



    return (
        <>
            <Section 
                title="Composio Toolkits"
                description="Manage your Composio toolkits. Shows all toolkits added to your project, whether connected or not. Disconnect to remove all tools, triggers, and connections."
            >
                <div className="space-y-4">
                    {loading ? (
                        <Spinner size="sm" />
                    ) : connectedToolkits.length > 0 ? (
                        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
                            {connectedToolkits.map((toolkit) => (
                                <div 
                                    key={toolkit.slug}
                                    className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 last:border-0"
                                >
                                    <div className="flex items-center gap-3">
                                        <div className="w-8 h-8 flex items-center justify-center">
                                            {toolkit.logo ? (
                                                <PictureImg
                                                    src={toolkit.logo}
                                                    alt={`${toolkit.name} logo`}
                                                    className="w-full h-full object-contain rounded"
                                                />
                                            ) : (
                                                <div className="w-full h-full bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
                                                    <span className="text-xs font-medium text-gray-500">
                                                        {toolkit.name.charAt(0).toUpperCase()}
                                                    </span>
                                                </div>
                                            )}
                                        </div>
                                        <div>
                                            <div className="font-medium text-gray-900 dark:text-gray-100">
                                                {toolkit.name}
                                            </div>
                                            <div className="flex items-center gap-2 mt-1">
                                                {toolkit.connectedAccount?.status === 'ACTIVE' ? (
                                                    <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-green-300 bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-200 dark:border-green-700">
                                                        <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                                                        Connected
                                                    </span>
                                                ) : toolkit.connectedAccount ? (
                                                    <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-gray-300 bg-gray-50 text-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700">
                                                        <span className="w-2 h-2 bg-gray-500 rounded-full"></span>
                                                        Disconnected
                                                    </span>
                                                ) : (
                                                    <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-yellow-300 bg-yellow-50 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 dark:border-yellow-700">
                                                        <span className="w-2 h-2 bg-yellow-500 rounded-full"></span>
                                                        Not Connected
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        {toolkit.connectedAccount?.status === 'ACTIVE' ? (
                                            <Button
                                                size="sm"
                                                variant="secondary"
                                                startContent={<UnlinkIcon className="w-4 h-4" />}
                                                onClick={() => handleDisconnectClick(toolkit)}
                                                disabled={disconnectingToolkit === toolkit.slug}
                                                isLoading={disconnectingToolkit === toolkit.slug}
                                            >
                                                {disconnectingToolkit === toolkit.slug ? 'Disconnecting...' : 'Disconnect'}
                                            </Button>
                                        ) : toolkit.connectedAccount ? (
                                            <Button
                                                size="sm"
                                                variant="secondary"
                                                disabled={true}
                                            >
                                                Disconnected
                                            </Button>
                                        ) : (
                                            <Button
                                                size="sm"
                                                variant="secondary"
                                                disabled={true}
                                            >
                                                Not Connected
                                            </Button>
                                        )}

                                    </div>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                            <AlertTriangle className="w-8 h-8 mx-auto mb-2 text-gray-400" />
                            <p className="text-sm">No toolkits found</p>
                            <p className="text-xs mt-1">Connect toolkits from the workflow editor or triggers to manage them here</p>
                        </div>
                    )}
                </div>
            </Section>

            {/* Disconnect Confirmation Modal */}
            <ProjectWideChangeConfirmationModal
                isOpen={showDisconnectModal}
                onClose={() => {
                    setShowDisconnectModal(false);
                    setSelectedToolkit(null);
                }}
                onConfirm={handleConfirmDisconnect}
                title={`Disconnect ${selectedToolkit?.name || 'Toolkit'}`}
                confirmationQuestion={`Are you sure you want to disconnect the ${selectedToolkit?.name || 'toolkit'}? This will permanently remove all its tools, triggers, and connections. Your workflows may stop working properly if they depend on this toolkit.`}
                confirmButtonText="Disconnect"
                isLoading={disconnectingToolkit !== null}
            />


        </>
    );
}

function DeleteProjectSection({ projectId }: { projectId: string }) {
    const [loadingInitial, setLoadingInitial] = useState(false);
    const [deletingProject, setDeletingProject] = useState(false);
    const { isOpen, onOpen, onClose } = useDisclosure();
    const [projectName, setProjectName] = useState("");
    const [projectNameInput, setProjectNameInput] = useState("");
    const [confirmationInput, setConfirmationInput] = useState("");
    const [error, setError] = useState<string | null>(null);
    
    const isValid = projectNameInput === projectName && confirmationInput === "delete project";

    useEffect(() => {
        setLoadingInitial(true);
        fetchProject(projectId).then((project) => {
            setProjectName(project.name);
            setLoadingInitial(false);
        });
    }, [projectId]);

    const handleDelete = async () => {
        if (!isValid) return;
        setError(null);
        setDeletingProject(true);
        try {
            await deleteProject(projectId);
        } catch (error) {
            setError(error instanceof Error ? error.message : "Failed to delete project");
            setDeletingProject(false);
            return;
        }
        setDeletingProject(false);
    };

    return (
        <Section 
            title="Delete Project"
            description="Permanently delete this project and all its data."
        >
            <div className="space-y-4">
                <div className="p-4 bg-red-50/10 dark:bg-red-900/10 rounded-lg">
                    <p className="text-sm text-red-700 dark:text-red-300">
                        Deleting a project will permanently remove all associated data, including workflows, sources, and API keys.
                        This action cannot be undone.
                    </p>
                </div>

                <Button 
                    variant="primary"
                    size="sm"
                    onClick={onOpen}
                    disabled={loadingInitial}
                    color="red"
                >
                    Delete project
                </Button>

                <Modal isOpen={isOpen} onClose={onClose}>
                    <ModalContent>
                        <ModalHeader>Delete Project</ModalHeader>
                        <ModalBody>
                            <div className="space-y-4">
                                <p className="text-sm text-gray-600 dark:text-gray-400">
                                    This action cannot be undone. Please type in the following to confirm:
                                </p>
                                <Input
                                    label="Project name"
                                    placeholder={projectName}
                                    value={projectNameInput}
                                    onChange={(e) => setProjectNameInput(e.target.value)}
                                />
                                <Input
                                    label='Type "delete project" to confirm'
                                    placeholder="delete project"
                                    value={confirmationInput}
                                    onChange={(e) => setConfirmationInput(e.target.value)}
                                />
                                {error && (
                                    <div className="p-4 text-sm text-red-700 bg-red-50 dark:bg-red-900/10 dark:text-red-400 rounded-lg">
                                        {error}
                                    </div>
                                )}
                            </div>
                        </ModalBody>
                        <ModalFooter>
                            <Button 
                                variant="secondary" 
                                onClick={onClose}
                                disabled={deletingProject}
                            >
                                Cancel
                            </Button>
                            <Button 
                                variant="primary"
                                color="danger"
                                onClick={handleDelete}
                                disabled={!isValid || deletingProject}
                                isLoading={deletingProject}
                            >
                                Delete Project
                            </Button>
                        </ModalFooter>
                    </ModalContent>
                </Modal>
            </div>
        </Section>
    );
}

export function ProjectSection({
    projectId,
    useChatWidget,
    chatWidgetHost,
}: {
    projectId: string;
    useChatWidget: boolean;
    chatWidgetHost: string;
}) {
    return (
        <div className="p-6 space-y-6">
            <ProjectIdSection projectId={projectId} />
            <ApiKeysSection projectId={projectId} />
            {/*{useChatWidget && <ChatWidgetSection projectId={projectId} chatWidgetHost={chatWidgetHost} />}*/}
        </div>
    );
}

export function SimpleProjectSection({
    projectId,
    onProjectConfigUpdated,
}: {
    projectId: string;
    onProjectConfigUpdated?: () => void;
}) {
    return (
        <div className="p-6 space-y-6">
            <ProjectNameSection projectId={projectId} onProjectConfigUpdated={onProjectConfigUpdated} />
            <ProjectIdSection projectId={projectId} />
            <SecretSection projectId={projectId} />
            <ApiKeysSection projectId={projectId} />
            <DisconnectToolkitsSection projectId={projectId} onProjectConfigUpdated={onProjectConfigUpdated} />
            <DeleteProjectSection projectId={projectId} />
        </div>
    );
}