import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Textarea } from '@/components/ui/textarea';
import { router } from '@inertiajs/react';
import { Check, Copy, ExternalLink, Loader2, X } from 'lucide-react';
import { useEffect, useState } from 'react';
import { MediaItem } from '../types';
import { FileIcon } from './FileIcon';

declare const route: (...args: any[]) => string;

interface MediaDetailsProps {
    item: MediaItem;
    onClose: () => void;
    onDelete: (id: number) => void;
    onUpdate: (item: MediaItem) => void;
}

export function MediaDetails({ item, onClose, onDelete, onUpdate }: MediaDetailsProps) {
    const [formData, setFormData] = useState({
        title: item.title || '',
        alt_text: item.alt_text || '',
        description: item.description || '',
    });
    const [isSaving, setIsSaving] = useState(false);
    const [copied, setCopied] = useState(false);

    const isImage = item.file_type?.startsWith('image/');

    useEffect(() => {
        setFormData({
            title: item.title || '',
            alt_text: item.alt_text || '',
            description: item.description || '',
        });
    }, [item]);

    const handleSave = async () => {
        setIsSaving(true);
        try {
            router.put(route('media.update', item.id), formData, {
                preserveScroll: true,
                preserveState: true,
                onSuccess: () => {
                    setIsSaving(false);
                    onUpdate({ ...item, ...formData });
                },
                onError: () => setIsSaving(false),
            });
        } catch (error) {
            setIsSaving(false);
        }
    };

    const copyUrl = () => {
        navigator.clipboard.writeText(item.file_url);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    const formatFileSize = (bytes: number) => {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    };

    return (
        <div className="flex h-full flex-col">
            <ScrollArea className="flex-1">
                <div className="space-y-4 p-2">
                    {/* Preview */}
                    <div className="flex aspect-square items-center justify-center overflow-hidden rounded bg-[#f0f0f1] dark:bg-zinc-800">
                        {isImage ? (
                            <img src={item.file_url} alt={item.title} className="h-full w-full object-contain" />
                        ) : (
                            <div className="text-center">
                                <FileIcon mimeType={item.file_type} className="mx-auto h-12 w-12 text-[#50575e] dark:text-zinc-400" />
                                <p className="mt-2 text-xs text-[#50575e] uppercase dark:text-zinc-400">{item.file_name.split('.').pop()}</p>
                            </div>
                        )}
                    </div>

                    {/* URL with Copy */}
                    <div className="space-y-1">
                        <Label className="text-xs text-[#1d2327] dark:text-zinc-300">File URL</Label>
                        <div className="flex gap-1">
                            <Input
                                value={item.file_url}
                                readOnly
                                className="h-8 border-[#8c8f94] bg-white text-xs dark:border-zinc-600 dark:bg-zinc-900"
                            />
                            <Button variant="outline" size="sm" onClick={copyUrl} className="h-8 border-[#8c8f94] px-2 dark:border-zinc-600">
                                {copied ? <Check className="h-3.5 w-3.5 text-green-600" /> : <Copy className="h-3.5 w-3.5" />}
                            </Button>
                        </div>
                    </div>


                    {/* Actions */}
                    <div className="flex items-center justify-between border-t border-[#c3c4c7] pt-3 dark:border-zinc-700">
                        <button onClick={() => onDelete(item.id)} className="cursor-pointer rounded-md bg-red-200 px-2 py-1.5 font-semibold text-xs text-[#b32d2e] hover:underline dark:text-red-400">
                            Delete permanently
                        </button>
                        
                    </div>
                </div>
            </ScrollArea>

            {/* Footer with Save */}
            {/* <div className="border-t border-[#c3c4c7] bg-[#f6f7f7] px-4 py-3 dark:border-zinc-700 dark:bg-zinc-800/50">
                <Button onClick={handleSave} disabled={isSaving} size="sm" className="w-full bg-[#2271b1] text-white hover:bg-[#135e96]">
                    {isSaving && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
                    Save Changes
                </Button>
            </div> */}
        </div>
    );
}