import { FileViewerModal } from '@admin/components/chat/file-viewer-modal';
import { Button } from '@admin/components/ui/button';
import { Switch } from '@admin/components/ui/switch';
import type { AudioItem, DocumentItem, GroupInfo as GroupInfoType, LinkItem, MediaItem } from '@admin/lib/types';
import { cn } from '@admin/lib/utils';
import { Bell, ChevronLeft, Download, FileText, Headphones, ImageIcon, LinkIcon, Play } from 'lucide-react';
import type React from 'react';
import { useState } from 'react';

interface GroupInfoContentProps {
    groupInfo: GroupInfoType;
    onClose?: () => void;
}

type FileCategory = 'media' | 'document' | 'audio' | 'link' | null;

export function GroupInfoContent({ groupInfo, onClose }: GroupInfoContentProps) {
    const [selectedCategory, setSelectedCategory] = useState<FileCategory>(null);
    const [selectedItem, setSelectedItem] = useState<MediaItem | DocumentItem | AudioItem | LinkItem | null>(null);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isMuted, setIsMuted] = useState(false);

    const handleItemClick = (item: MediaItem | DocumentItem | AudioItem | LinkItem) => {
        setSelectedItem(item);
        setIsModalOpen(true);
    };

    const renderGridView = () => {
        if (!selectedCategory) return null;

        return (
            <div className="flex-1 overflow-y-auto bg-card">
                {/* Back Button Header */}
                <div className="flex items-center gap-3 border-b border-border px-1 py-4">
                    <Button size="icon" variant="ghost" onClick={() => setSelectedCategory(null)} className="h-8 w-8">
                        <ChevronLeft className="h-5 w-5" />
                    </Button>
                    <h3 className="text-base font-semibold capitalize">{selectedCategory}</h3>
                </div>

                {/* Grid Content */}
                <div className="p-4">
                    {selectedCategory === 'media' && (
                        <div className="grid grid-cols-3 gap-2">
                            {groupInfo.mediaItems?.map((item) => (
                                <MediaGridItem key={item.id} item={item} onClick={() => handleItemClick(item)} />
                            ))}
                        </div>
                    )}

                    {selectedCategory === 'document' && (
                        <div className="space-y-2">
                            {groupInfo.documentItems?.map((item) => (
                                <DocumentGridItem key={item.id} item={item} onClick={() => handleItemClick(item)} />
                            ))}
                        </div>
                    )}

                    {selectedCategory === 'audio' && (
                        <div className="space-y-2">
                            {groupInfo.audioItems?.map((item) => (
                                <AudioGridItem key={item.id} item={item} onClick={() => handleItemClick(item)} />
                            ))}
                        </div>
                    )}

                    {selectedCategory === 'link' && (
                        <div className="space-y-2">
                            {groupInfo.linkItems?.map((item) => (
                                <LinkGridItem key={item.id} item={item} onClick={() => handleItemClick(item)} />
                            ))}
                        </div>
                    )}
                </div>
            </div>
        );
    };

    const getAllItems = () => {
        if (selectedCategory === 'media') return groupInfo.mediaItems || [];
        if (selectedCategory === 'document') return groupInfo.documentItems || [];
        if (selectedCategory === 'audio') return groupInfo.audioItems || [];
        if (selectedCategory === 'link') return groupInfo.linkItems || [];
        return [];
    };

    if (selectedCategory) {
        return (
            <>
                {renderGridView()}
                <FileViewerModal
                    isOpen={isModalOpen}
                    onClose={() => setIsModalOpen(false)}
                    item={selectedItem}
                    allItems={getAllItems()}
                    type={selectedCategory}
                />
            </>
        );
    }

    return (
        <div className="flex h-full w-full flex-col bg-card">
            <div className="flex-1 overflow-y-auto">
                {/* Files Section */}
                <div className="border-b border-border p-4">
                    <h3 className="mb-4 text-sm font-medium text-muted-foreground">Files</h3>
                    <div className="space-y-2">
                        <FileItem icon={ImageIcon} label="Media" count={groupInfo.mediaCount} onClick={() => setSelectedCategory('media')} />
                        <FileItem icon={FileText} label="Document" count={groupInfo.documentCount} onClick={() => setSelectedCategory('document')} />
                        <FileItem icon={Headphones} label="Audio files" count={groupInfo.audioCount} onClick={() => setSelectedCategory('audio')} />
                        <FileItem icon={LinkIcon} label="Links" count={groupInfo.linkCount} onClick={() => setSelectedCategory('link')} />
                    </div>
                </div>

                {/* Mute Notifications */}
                <div className="border-b border-border p-4">
                    <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                            <Bell className="h-4 w-4 text-text-gray" />
                            <span className="text-sm font-medium">Mute notifications</span>
                        </div>
                        <Switch checked={isMuted} onCheckedChange={setIsMuted} />
                    </div>
                </div>

                {/* Members Section */}
                <div className="p-4">
                    <h3 className="mb-4 text-sm font-medium text-muted-foreground">Member</h3>
                    <div className="space-y-3">
                        {groupInfo.members.map((member) => (
                            <div key={member.id} className="flex items-center justify-between">
                                <div className="flex items-center gap-3">
                                    <div
                                        className={cn('flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold', member.color)}
                                    >
                                        {member.initials}
                                    </div>
                                    <span className="text-sm font-medium">{member.name}</span>
                                </div>
                                {member.role === 'Admin' && <span className="text-xs font-medium text-primary">Admin</span>}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}

interface FileItemProps {
    icon: React.ElementType;
    label: string;
    count: number;
    onClick?: () => void;
}

function FileItem({ icon: Icon, label, count, onClick }: FileItemProps) {
    return (
        <div className="flex cursor-pointer items-center justify-between rounded-lg border p-3 transition-colors" onClick={onClick}>
            <div className="flex items-center gap-3">
                <Icon className="h-5 w-5 text-text-gray" />
                <span className="text-sm font-medium text-black">{label}</span>
            </div>
            <span className="text-sm text-text-gray">{count}</span>
        </div>
    );
}

function MediaGridItem({ item, onClick }: { item: MediaItem; onClick?: () => void }) {
    return (
        <div
            className="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-muted transition-opacity hover:opacity-90"
            onClick={onClick}
        >
            <img src={item.url || '/placeholder.svg'} alt={item.name} className="h-full w-full object-cover" />
            {item.type === 'video' && (
                <div className="absolute inset-0 flex items-center justify-center bg-black/20">
                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white/90">
                        <Play className="ml-0.5 h-5 w-5 text-gray-900" fill="currentColor" />
                    </div>
                </div>
            )}
            <div className="absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100">
                <p className="truncate text-xs text-white">{item.name}</p>
            </div>
        </div>
    );
}

function DocumentGridItem({ item, onClick }: { item: DocumentItem; onClick?: () => void }) {
    return (
        <div className="flex cursor-pointer items-center gap-3 rounded-lg py-2 transition-colors hover:bg-accent" onClick={onClick}>
            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100">
                <FileText className="h-5 w-5 text-blue-600" />
            </div>
            <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium">{item.name}</p>
                <p className="text-xs text-muted-foreground">
                    {item.size} • {item.timestamp}
                </p>
            </div>
            <Button size="icon" variant="ghost" className="h-8 w-8 flex-shrink-0" onClick={(e) => e.stopPropagation()}>
                <Download className="h-4 w-4" />
            </Button>
        </div>
    );
}

function AudioGridItem({ item, onClick }: { item: AudioItem; onClick?: () => void }) {
    return (
        <div className="flex cursor-pointer items-center gap-3 rounded-lg py-2 transition-colors hover:bg-accent" onClick={onClick}>
            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-purple-100">
                <Headphones className="h-5 w-5 text-purple-600" />
            </div>
            <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium">{item.name}</p>
                <p className="text-xs text-muted-foreground">
                    {item.duration} • {item.timestamp}
                </p>
            </div>
            <Button size="icon" variant="ghost" className="h-8 w-8 flex-shrink-0" onClick={(e) => e.stopPropagation()}>
                <Play className="h-4 w-4" />
            </Button>
        </div>
    );
}

function LinkGridItem({ item, onClick }: { item: LinkItem; onClick?: () => void }) {
    return (
        <div className="flex cursor-pointer items-start gap-3 rounded-lg py-2 transition-colors hover:bg-accent" onClick={onClick}>
            <div className="flex size-9 flex-shrink-0 items-center justify-center rounded-lg bg-brand-100">
                <LinkIcon className="h-5 w-5" />
            </div>
            <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium">{item.title}</p>
                {item.description && <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">{item.description}</p>}
                <p className="mt-1 text-xs text-muted-foreground">{item.timestamp}</p>
            </div>
        </div>
    );
}