uiprototype2/src/components/BrowserPanel.tsx

import { X, ArrowLeft, ArrowRight, RotateCw, Plus, Globe, Search, Maximize2, Minimize2, ShieldCheck, Lock, Camera, Scissors } from 'lucide-react';
import { useAppStore } from '../store';
import { useState, useRef } from 'react';
import { toPng } from 'html-to-image';

const mockWebImages = [
    "https://picsum.photos/id/10/800/600",
    "https://picsum.photos/id/11/600/800",
    "https://picsum.photos/id/12/800/800",
    "https://picsum.photos/id/13/400/600",
    "https://picsum.photos/id/14/600/400",
    "https://picsum.photos/id/15/800/500",
    "https://picsum.photos/id/16/500/800",
    "https://picsum.photos/id/17/700/700",
];

const bookmarks = [
    { name: "ArtStation", icon: "🎨" },
    { name: "Pinterest", icon: "📌" },
    { name: "Unsplash", icon: "📷" },
    { name: "Sketchfab", icon: "📦" },
    { name: "Google Images", icon: "🔍" },
    { name: "Anatomy360", icon: "🦴" },
    { name: "Line of Action", icon: "🏃" },
    { name: "SculptRef", icon: "🗿" },
    { name: "PolyHaven", icon: "🌍" },
    { name: "reference.pictures", icon: "🖼" },
];

export const BrowserPanel = () => {
    const { isBrowserOpen, setIsBrowserOpen, setImages, pan, zoom } = useAppStore();
    const [url, setUrl] = useState("https://artstation.com/search");
    const [isFullscreen, setIsFullscreen] = useState(false);
    const inputRef = useRef<HTMLInputElement>(null);
    const browserContentRef = useRef<HTMLDivElement>(null);
    const browserVisibleRef = useRef<HTMLDivElement>(null);
    const [isCapturing, setIsCapturing] = useState(false);
    const [isSnipping, setIsSnipping] = useState(false);
    const [snipStart, setSnipStart] = useState<{x: number, y: number} | null>(null);
    const [snipCurrent, setSnipCurrent] = useState<{x: number, y: number} | null>(null);

    const handlePointerDown = (e: React.PointerEvent) => {
        if (!isSnipping) return;
        e.preventDefault();
        const rect = e.currentTarget.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        setSnipStart({ x, y });
        setSnipCurrent({ x, y });
    };

    const handlePointerMove = (e: React.PointerEvent) => {
        if (!isSnipping || !snipStart) return;
        e.preventDefault();
        const rect = e.currentTarget.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        setSnipCurrent({ x, y });
    };

    const handlePointerUp = async (e: React.PointerEvent) => {
        if (!isSnipping || !snipStart || !snipCurrent) {
            setIsSnipping(false);
            setSnipStart(null);
            setSnipCurrent(null);
            return;
        }

        e.preventDefault();
        const rect = e.currentTarget.getBoundingClientRect();
        const endX = e.clientX - rect.left;
        const endY = e.clientY - rect.top;

        const startX = Math.min(snipStart.x, endX);
        const startY = Math.min(snipStart.y, endY);
        const width = Math.abs(endX - snipStart.x);
        const height = Math.abs(endY - snipStart.y);

        setIsSnipping(false);
        setSnipStart(null);
        setSnipCurrent(null);

        if (width < 20 || height < 20) return; // ignore tiny clicks

        setIsCapturing(true);

        try {
            if (!browserVisibleRef.current) return;
            const dataUrl = await toPng(browserVisibleRef.current, { cacheBust: true, backgroundColor: '#1C1C1E', pixelRatio: 1 });

            const img = new Image();
            img.onload = () => {
                const canvas = document.createElement('canvas');
                canvas.width = Math.round(width);
                canvas.height = Math.round(height);
                const ctx = canvas.getContext('2d');
                if (!ctx) return;

                // draw specific portion of viewport to canvas
                ctx.drawImage(
                    img,
                    Math.round(startX), Math.round(startY), Math.round(width), Math.round(height),
                    0, 0, Math.round(width), Math.round(height)
                );

                const croppedDataUrl = canvas.toDataURL('image/png');

                const ratio = width / height;
                const targetWidth = Math.min(width, 800);
                const newImg = {
                    id: Math.random().toString(36).substr(2, 9),
                    url: croppedDataUrl,
                    x: (-pan.x + window.innerWidth / 2 - targetWidth / 2) / zoom,
                    y: (-pan.y + window.innerHeight / 2 - (targetWidth / ratio) / 2) / zoom,
                    width: Math.round(targetWidth),
                    height: Math.round(targetWidth / ratio),
                    aspectRatio: ratio,
                };
                setImages(prev => [...prev, newImg]);
            };
            img.src = dataUrl;
        } catch (err) {
            console.error('Failed to capture web page snip', err);
        } finally {
            setIsCapturing(false);
        }
    };

    const handleScreenshot = async () => {
        if (!browserContentRef.current || isCapturing) return;
        setIsCapturing(true);
        try {
            const dataUrl = await toPng(browserContentRef.current, { cacheBust: true, backgroundColor: '#1C1C1E' });
            
            const img = new Image();
            img.src = dataUrl;
            img.onload = () => {
                const ratio = img.width / img.height;
                const targetWidth = Math.min(800, img.width);
                const targetHeight = targetWidth / ratio;
                const newImg = {
                    id: Math.random().toString(36).substr(2, 9),
                    url: dataUrl,
                    x: (-pan.x + window.innerWidth / 4) / zoom,
                    y: (-pan.y + window.innerHeight / 4) / zoom,
                    width: targetWidth,
                    height: targetHeight,
                    aspectRatio: ratio,
                };
                setImages(prev => [...prev, newImg]);
            };
        } catch (err) {
            console.error('Failed to capture web page screenshot', err);
        } finally {
            setIsCapturing(false);
        }
    };

    const handleCapture = (src: string) => {
        const img = new Image();
        img.src = src;
        img.onload = () => {
            const ratio = img.width / img.height;
            const targetWidth = Math.min(400, img.width);
            const targetHeight = targetWidth / ratio;
            const newImg = {
                id: Math.random().toString(36).substr(2, 9),
                url: src,
                x: (-pan.x + window.innerWidth / 4) / zoom,
                y: (-pan.y + window.innerHeight / 4) / zoom,
                width: targetWidth,
                height: targetHeight,
                aspectRatio: ratio,
            };
            setImages(prev => [...prev, newImg]);
        };
    };

    return (
        <div className={`absolute right-0 top-0 h-full bg-panel-bg shadow-2xl flex flex-col z-[60] transform transition-all duration-500 ease-[cubic-bezier(0.19,1,0.22,1)] ${isBrowserOpen ? 'translate-x-0' : 'translate-x-full'} ${isFullscreen ? 'w-[100vw] max-w-[100vw]' : 'w-[50vw] max-w-[600px]'}`}>
            <div className="flex flex-col bg-panel-bg z-10 px-4 pt-4 pb-2">
                <div className="flex items-center gap-2 mb-3">
                    <div className="flex items-center gap-0.5">
                        <button className="text-ui-secondary hover:text-ui-primary w-8 h-8 flex items-center justify-center rounded-md hover:bg-white/5 transition-colors"><ArrowLeft size={16} /></button>
                        <button className="text-ui-secondary hover:text-ui-primary w-8 h-8 flex items-center justify-center rounded-md hover:bg-white/5 transition-colors"><ArrowRight size={16} /></button>
                        <button className="text-ui-secondary hover:text-ui-primary w-8 h-8 flex items-center justify-center rounded-md hover:bg-white/5 transition-colors"><RotateCw size={14} /></button>
                    </div>
                    <div className="flex-1 relative flex items-center group bg-black/40 rounded-lg border border-white/5 focus-within:border-accent-blue/40 focus-within:bg-black/60 transition-all">
                        <div className="absolute left-3 flex items-center gap-1.5 text-ui-secondary group-focus-within:text-accent-blue transition-colors pointer-events-none">
                            <ShieldCheck size={13} className="text-emerald-500" />
                            <Lock size={12} className="opacity-70" />
                        </div>
                        <input 
                            ref={inputRef}
                            type="text" 
                            value={url} 
                            onChange={(e) => setUrl(e.target.value)} 
                            className="w-full bg-transparent text-ui-primary pl-14 pr-8 py-2 text-[13px] outline-none placeholder:text-ui-secondary"
                            spellCheck={false}
                        />
                        {url && (
                            <button onClick={() => { setUrl(''); inputRef.current?.focus(); }} className="absolute right-2.5 text-ui-secondary hover:text-ui-primary"><X size={14} /></button>
                        )}
                    </div>
                    <div className="flex items-center gap-0.5 ml-1">
                        <button onClick={() => setIsSnipping(!isSnipping)} disabled={isCapturing} className={`text-ui-secondary hover:text-accent-amber w-8 h-8 flex items-center justify-center rounded-md hover:bg-white/5 transition-colors ${isSnipping ? 'bg-accent-amber/20 text-accent-amber' : ''} ${isCapturing ? 'opacity-50 cursor-not-allowed' : ''}`} title="Area Snip">
                            <Scissors size={16} />
                        </button>
                        <button onClick={handleScreenshot} disabled={isCapturing} className={`text-ui-secondary hover:text-accent-blue w-8 h-8 flex items-center justify-center rounded-md hover:bg-white/5 transition-colors ${isCapturing ? 'opacity-50 cursor-not-allowed' : ''}`} title="Full Web Clip">
                            <Camera size={16} className={isCapturing && !isSnipping ? "animate-pulse" : ""} />
                        </button>
                        <button onClick={() => setIsFullscreen(!isFullscreen)} className="text-ui-secondary hover:text-ui-primary w-8 h-8 flex items-center justify-center rounded-md hover:bg-white/5 transition-colors" title={isFullscreen ? "Minimize" : "Maximize"}>
                            {isFullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
                        </button>
                        <button onClick={() => setIsBrowserOpen(false)} className="text-ui-secondary hover:text-ui-primary w-8 h-8 flex items-center justify-center rounded-md hover:bg-white/5 transition-colors"><X size={18} /></button>
                    </div>
                </div>
                
                <div className="flex items-center gap-2 overflow-x-auto hide-scrollbar pb-2">
                    {bookmarks.map((bm, i) => (
                        <button key={i} className="flex items-center gap-1.5 px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-white/5 rounded-md text-[11px] font-medium text-ui-primary whitespace-nowrap transition-colors shadow-sm">
                            <span>{bm.icon}</span>
                            <span>{bm.name}</span>
                        </button>
                    ))}
                    <button className="flex items-center justify-center w-7 h-7 rounded-md bg-white/5 hover:bg-white/10 text-ui-secondary transition-colors"><Plus size={14}/></button>
                </div>
            </div>

            <div ref={browserVisibleRef} className="flex-1 relative flex flex-col min-h-0 overflow-hidden">
                <div ref={browserContentRef} className="flex-1 p-4 bg-[#1C1C1E] overflow-y-auto relative custom-scrollbar">
                    {/* Mock Web View */}
                    <div className="columns-2 md:columns-3 xl:columns-4 gap-4 space-y-4">
                        {mockWebImages.map((src, i) => (
                            <button key={i} onClick={() => handleCapture(src)} className="block w-full relative group rounded-xl overflow-hidden ring-1 ring-white/5 hover:ring-white/20 transition-all shadow-sm hover:shadow-lg cursor-pointer text-left focus:outline-none focus:ring-2 focus:ring-accent-blue">
                                <img src={src} className="w-full block transform transition-transform duration-700 ease-out group-hover:scale-105" />
                                <div className="absolute inset-0 bg-gradient-to-b from-black/0 via-black/0 to-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-4">
                                    <div className="bg-white text-black text-[11px] font-bold px-3 py-1.5 rounded-full flex items-center gap-1 shadow-2xl transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
                                        <Plus size={14} strokeWidth={2.5} /> ADD
                                    </div>
                                </div>
                            </button>
                        ))}
                    </div>
                </div>

                {isSnipping && (
                    <div
                        className="absolute inset-0 z-50 cursor-crosshair touchscreen-none"
                        onPointerDown={handlePointerDown}
                        onPointerMove={handlePointerMove}
                        onPointerUp={handlePointerUp}
                        onPointerCancel={handlePointerUp}
                        style={{ backgroundColor: 'rgba(0,0,0,0.15)' }}
                    >
                        {snipStart && snipCurrent && (
                            <div
                                className="absolute border focus:outline-none"
                                style={{
                                    left: Math.min(snipStart.x, snipCurrent.x),
                                    top: Math.min(snipStart.y, snipCurrent.y),
                                    width: Math.abs(snipCurrent.x - snipStart.x),
                                    height: Math.abs(snipCurrent.y - snipStart.y),
                                    borderStyle: 'dashed',
                                    borderColor: 'rgba(255, 255, 255, 0.8)',
                                    boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.4)',
                                }}
                            ></div>
                        )}
                        <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-accent-amber text-black text-xs font-bold px-3 py-1.5 rounded-full shadow-lg pointer-events-none">
                            Drag to capture area
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};