import UserLayout from '@/Layouts/UserLayout';
import { Head, Link } from '@inertiajs/react';
import { ArrowLeft, RefreshCw, Maximize2 } from 'lucide-react';
import { useState, useRef } from 'react';

interface Tool {
    id: number;
    name: string;
    description: string | null;
    slug: string;
}

interface Props {
    tool: Tool;
}

export default function Show({ tool }: Props) {
    const [key, setKey] = useState(0);
    const iframeRef = useRef<HTMLIFrameElement>(null);

    const handleRefresh = () => {
        setKey(prev => prev + 1);
    };

    return (
        <UserLayout>
            <Head title={`${tool.name} - Tool`} />

            <div className="max-w-6xl mx-auto flex flex-col h-[calc(100vh-140px)] min-h-[500px]">
                {/* Header */}
                <div className="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4 shrink-0">
                    <div className="min-w-0">
                        <Link 
                            href={route('tools.index')}
                            className="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-widest text-[#8C92AC] hover:text-ink transition-colors mb-2"
                        >
                            <ArrowLeft className="h-3 w-3" />
                            Back to Tools
                        </Link>
                        <h1 className="font-display text-2xl md:text-3xl text-ink leading-tight truncate">
                            {tool.name}
                        </h1>
                    </div>

                    <div className="flex items-center gap-2 shrink-0">
                        <button
                            onClick={handleRefresh}
                            className="h-10 px-4 inline-flex items-center gap-2 rounded-xl border border-[#E8E6DF] bg-white text-ink text-[12px] font-bold hover:bg-[#F5F3EF] transition-all"
                            title="Reset Application"
                        >
                            <RefreshCw className="h-4 w-4" />
                            Reset App
                        </button>
                    </div>
                </div>

                {/* Sandboxed iframe container */}
                <div className="flex-1 bg-white border border-[#E8E6DF] rounded-2xl overflow-hidden relative flex flex-col shadow-sm min-h-[400px]">
                    <iframe
                        key={key}
                        ref={iframeRef}
                        src={route('tools.sandbox', tool.slug)}
                        className="w-full h-full border-0 flex-1"
                        sandbox="allow-scripts allow-forms allow-modals"
                        title={tool.name}
                    />
                </div>
            </div>
        </UserLayout>
    );
}
