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">
            {/* Header */}
            <div className="flex items-center justify-between border-b border-[#c3c4c7] px-4 py-3 dark:border-zinc-700">
                <h3 className="text-sm font-semibold text-[#1d2327] dark:text-zinc-200">Attachment Details</h3>
                <button onClick={onClose} className="text-[#50575e] hover:text-[#1d2327] dark:text-zinc-400 dark:hover:text-zinc-200">
                    <X className="h-4 w-4" />
                </button>
            </div>

            <ScrollArea className="flex-1">
                <div className="space-y-4 p-4">
                    {/* 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>

                    {/* File Info */}
                    <div className="space-y-1 text-xs text-[#50575e] dark:text-zinc-400">
                        <p className="truncate font-medium text-[#1d2327] dark:text-zinc-200" title={item.file_name}>
                            {item.file_name}
                        </p>
                        <p>
                            {new Date(item.created_at).toLocaleDateString('en-US', {
                                year: 'numeric',
                                month: 'long',
                                day: 'numeric',
                            })}
                        </p>
                        <p>{formatFileSize(item.file_size)}</p>
                        {isImage && item.file_type && <p className="uppercase">{item.file_type.split('/')[1]}</p>}
                    </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>

                    {/* Editable Fields */}
                    <div className="space-y-3 border-t border-[#c3c4c7] pt-2 dark:border-zinc-700">
                        <div className="space-y-1">
                            <Label htmlFor="title" className="text-xs text-[#1d2327] dark:text-zinc-300">
                                Title
                            </Label>
                            <Input
                                id="title"
                                value={formData.title}
                                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                                className="h-8 border-[#8c8f94] bg-white text-sm dark:border-zinc-600 dark:bg-zinc-900"
                            />
                        </div>

                        {isImage && (
                            <div className="space-y-1">
                                <Label htmlFor="alt_text" className="text-xs text-[#1d2327] dark:text-zinc-300">
                                    Alt Text
                                </Label>
                                <Input
                                    id="alt_text"
                                    value={formData.alt_text}
                                    onChange={(e) => setFormData({ ...formData, alt_text: e.target.value })}
                                    placeholder="Describe this image"
                                    className="h-8 border-[#8c8f94] bg-white text-sm dark:border-zinc-600 dark:bg-zinc-900"
                                />
                                <p className="text-[10px] text-[#646970] dark:text-zinc-500">Describe the purpose of the image.</p>
                            </div>
                        )}

                        <div className="space-y-1">
                            <Label htmlFor="description" className="text-xs text-[#1d2327] dark:text-zinc-300">
                                Description
                            </Label>
                            <Textarea
                                id="description"
                                value={formData.description}
                                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                                rows={2}
                                className="resize-none border-[#8c8f94] bg-white text-sm dark:border-zinc-600 dark:bg-zinc-900"
                            />
                        </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="text-xs text-[#b32d2e] hover:underline dark:text-red-400">
                            Delete permanently
                        </button>
                        <a
                            href={item.file_url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="flex items-center gap-1 text-xs text-[#2271b1] hover:underline dark:text-blue-400"
                        >
                            View attachment page
                            <ExternalLink className="h-3 w-3" />
                        </a>
                    </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>
    );
}