import { Announcement, AnnouncementDetails } from '@admin/components/addOns/addon-sidebars/announcements/AnnouncementDetails';
import AnnouncementForm, { NormalizedAnnouncementPayload } from '@admin/components/addOns/addon-sidebars/announcements/AnnouncementForm';
import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar';
import { Button } from '@admin/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu';
import { mockAnnouncements } from '@admin/data/static';
import useAddOn from '@/hooks/use-addons';
import { cn } from '@admin/lib/utils';
import { Link } from '@inertiajs/react';
import { ArrowLeft, Bell, Calendar, ExternalLinkIcon, Eye, MoreVertical, Pencil, Plus, Search, Star, Trash, X } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';

const categoryColors: Record<string, string> = {
    General: 'bg-blue-50 text-blue-700 border-blue-200',
    News: 'bg-green-50 text-green-700 border-green-200',
    Events: 'bg-purple-50 text-purple-700 border-purple-200',
    Updates: 'bg-amber-50 text-amber-700 border-amber-200',
    Alerts: 'bg-rose-50 text-rose-700 border-rose-200',
};

// Extend the mock announcements with additional properties
const extendedAnnouncements: Announcement[] = mockAnnouncements.map((announcement, index) => ({
    ...announcement,
    favorite: index % 5 === 0,
    archived: index % 7 === 0,
    author: {
        name: ['John Doe', 'Jane Smith', 'Alex Johnson', 'Maria Garcia', 'Sam Wilson'][index % 5],
        role: ['Admin', 'Manager', 'Team Lead', 'HR', 'CEO'][index % 5],
        avatar: `https://i.pravatar.cc/150?img=${(index % 70) + 1}`,
    },
    category: ['General', 'News', 'Events', 'Updates', 'Alerts'][index % 5],
    tags: [
        ['company', 'important'],
        ['team', 'update'],
        ['event', 'upcoming'],
        ['policy', 'review'],
        ['project', 'milestone'],
    ][index % 5],
}));

type ActiveTab = 'all' | 'favorites' | 'archived';
type CategoryFilter = 'all' | 'general' | 'news' | 'events' | 'updates' | 'alerts';

interface AnnouncementAddOnSidebarProps {
    title?: string;
    onClose?: () => void;
}

export function AnnouncementAddOnSidebar({ title = 'News Feed', onClose }: AnnouncementAddOnSidebarProps) {
    const { addOnClose } = useAddOn();

    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState<ActiveTab>('all');
    const [categoryFilter, setCategoryFilter] = useState<CategoryFilter>('all');

    const [announcements, setAnnouncements] = useState<Announcement[]>(extendedAnnouncements);
    const [selectedAnnouncementId, setSelectedAnnouncementId] = useState<string | null>(null);

    const [isDetailsOpen, setIsDetailsOpen] = useState(false);
    const [isFormOpen, setIsFormOpen] = useState(false);
    const [formMode, setFormMode] = useState<'create' | 'edit'>('create');
    const [editingAnnouncement, setEditingAnnouncement] = useState<Announcement | null>(null);

    const handleClose = useCallback(() => {
        if (onClose) {
            onClose();
        } else {
            addOnClose();
        }
    }, [onClose, addOnClose]);

    const getFilteredAnnouncements = useCallback(() => {
        return announcements.filter((announcement) => {
            // Filter by search query
            const matchesQuery =
                !searchQuery ||
                announcement.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                announcement.excerpt.toLowerCase().includes(searchQuery.toLowerCase());

            // Filter by tab
            const matchesTab =
                activeTab === 'all' || (activeTab === 'favorites' && announcement.favorite) || (activeTab === 'archived' && announcement.archived);

            // Filter by category
            const matchesCategory = categoryFilter === 'all' || announcement.category?.toLowerCase() === categoryFilter;

            return matchesQuery && matchesTab && matchesCategory;
        });
    }, [announcements, searchQuery, activeTab, categoryFilter]);

    const filteredAnnouncements = getFilteredAnnouncements();

    const handleCreateAnnouncement = (data: NormalizedAnnouncementPayload) => {
        const newAnnouncement: Announcement = {
            id: String(announcements.length + 1),
            title: data.title,
            description: data.description,
            coverImage: data.coverImage,
            date: new Date().toISOString(),
            likes: 0,
            comments: 0,
            category: 'General',
            author: {
                name: 'Current User',
                role: 'Team Member',
            },
        };

        setAnnouncements([newAnnouncement, ...announcements]);
    };

    const handleUpdateAnnouncement = (data: NormalizedAnnouncementPayload) => {
        if (!editingAnnouncement) return;

        setAnnouncements(
            announcements.map((announcement) =>
                announcement.id === editingAnnouncement.id
                    ? {
                          ...announcement,
                          title: data.title,
                          description: data.description,
                          coverImage: data.coverImage,
                      }
                    : announcement,
            ),
        );
    };

    const handleEditAnnouncement = (announcement: Announcement) => {
        setEditingAnnouncement(announcement);
        setFormMode('edit');
        setIsDetailsOpen(false);
        setIsFormOpen(true);
    };

    const handleDeleteAnnouncement = (id: string) => {
        setAnnouncements(announcements.filter((announcement) => announcement.id !== id));
        if (selectedAnnouncementId === id) {
            setSelectedAnnouncementId(null);
            setIsDetailsOpen(false);
        }
    };

    const handleToggleFavorite = (id: string) => {
        setAnnouncements(
            announcements.map((announcement) => (announcement.id === id ? { ...announcement, favorite: !announcement.favorite } : announcement)),
        );
    };

    const handleToggleArchived = (id: string) => {
        setAnnouncements(
            announcements.map((announcement) => (announcement.id === id ? { ...announcement, archived: !announcement.archived } : announcement)),
        );
    };

    const handleViewDetails = (id: string) => {
        setSelectedAnnouncementId(id);
        setIsDetailsOpen(true);
    };

    // Reset form and details state when switching between views
    useEffect(() => {
        if (isFormOpen) {
            setIsDetailsOpen(false);
        }
    }, [isFormOpen]);

    useEffect(() => {
        if (isDetailsOpen) {
            setIsFormOpen(false);
        }
    }, [isDetailsOpen]);

    const selectedAnnouncement = selectedAnnouncementId
        ? announcements.find((announcement) => announcement.id === selectedAnnouncementId) || null
        : null;

    return (
        <div className="flex h-full w-full flex-col bg-card">
            {/* Header with title, search and close button */}
            <div className="flex items-center justify-between border-b py-3 pr-2">
                <div className="flex items-center gap-3 px-2">
                    {(isDetailsOpen || isFormOpen) && (
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                                setIsDetailsOpen(false);
                                setIsFormOpen(false);
                            }}
                            className="h-8 w-8 p-0"
                        >
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                    )}
                    <h2 className="text-xl font-semibold tracking-tight">
                        {isFormOpen ? (formMode === 'create' ? 'Add News' : 'Edit News') : isDetailsOpen ? 'News Details' : title}
                    </h2>
                    {!isDetailsOpen && !isFormOpen && (
                        <Button
                            size="sm"
                            variant="outline"
                            onClick={() => {
                                setFormMode('create');
                                setIsFormOpen(true);
                            }}
                            className="size-5 rounded-full"
                        >
                            <Plus className="h-3 w-3" />
                        </Button>
                    )}
                </div>
                <div className="flex items-center gap-4">
                    {!isDetailsOpen && !isFormOpen && (
                        <div className="relative">
                            <Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                            <input
                                type="text"
                                placeholder="Search..."
                                value={searchQuery}
                                onChange={(e) => setSearchQuery(e.target.value)}
                                className="h-8 w-36 rounded-md border border-input bg-transparent pr-3 pl-8 text-sm"
                            />
                        </div>
                    )}
                    <Link href="/tools/news-feed">
                        <Button variant="ghost" size="sm" className="size-6">
                            <ExternalLinkIcon className="h-3 w-3 text-success" />
                        </Button>
                    </Link>
                    <Button variant="ghost" size="sm" onClick={handleClose} className="size-6 rounded-full border">
                        <X className="h-3 w-3" />
                    </Button>
                </div>
            </div>

            {/* Show announcement list when not viewing details or form */}
            {!isDetailsOpen && !isFormOpen ? (
                <>
                    <div className="flex flex-1 overflow-hidden">
                        {/* Main content */}
                        <div className="flex flex-1 flex-col border-r">
                            <div className="border-b px-4">
                                <div className="flex gap-6">
                                    {[
                                        { key: 'all', label: 'All' },
                                        { key: 'favorites', label: 'Favorites' },
                                        { key: 'archived', label: 'Archived' },
                                    ].map(({ key, label }) => (
                                        <button
                                            key={key}
                                            onClick={() => setActiveTab(key as ActiveTab)}
                                            className={cn(
                                                'relative py-3 text-sm font-medium transition-colors',
                                                activeTab === key
                                                    ? 'text-foreground after:absolute after:right-0 after:bottom-0 after:left-0 after:h-0.5 after:bg-foreground'
                                                    : 'text-muted-foreground hover:text-foreground',
                                            )}
                                        >
                                            {label}
                                        </button>
                                    ))}
                                </div>
                            </div>

                            <div className="flex-1 overflow-auto p-2">
                                <div className="space-y-3">
                                    {filteredAnnouncements.length > 0 ? (
                                        filteredAnnouncements.map((announcement) => (
                                            <div
                                                key={announcement.id}
                                                className={cn(
                                                    'group flex cursor-pointer flex-col border-b px-2 pb-2 hover:bg-muted',
                                                    selectedAnnouncementId === announcement.id && 'bg-muted',
                                                )}
                                                onClick={() => handleViewDetails(announcement.id)}
                                            >
                                                <div className="flex items-start justify-between">
                                                    <div className="flex items-center gap-2">
                                                        <Avatar className="h-8 w-8">
                                                            {announcement.author?.avatar ? (
                                                                <AvatarImage src={announcement.author.avatar} alt={announcement.author.name} />
                                                            ) : (
                                                                <AvatarFallback>{announcement.author?.name.charAt(0) || 'A'}</AvatarFallback>
                                                            )}
                                                        </Avatar>
                                                        <div>
                                                            <h3 className="line-clamp-1 font-medium">{announcement.title}</h3>
                                                            <div className="flex items-center text-xs text-muted-foreground">
                                                                <Calendar className="mr-1 h-3 w-3" />
                                                                <span>{new Date(announcement.date).toLocaleDateString()}</span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div className="flex items-center">
                                                        {announcement.favorite && <Star className="h-4 w-4 text-amber-500" fill="currentColor" />}
                                                        <DropdownMenu>
                                                            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                                                                <Button variant="ghost" className="h-8 w-8 p-0" size="icon">
                                                                    <MoreVertical className="h-4 w-4" />
                                                                </Button>
                                                            </DropdownMenuTrigger>
                                                            <DropdownMenuContent align="end" className="w-[160px]">
                                                                <DropdownMenuItem
                                                                    onClick={(e) => {
                                                                        e.stopPropagation();
                                                                        handleToggleFavorite(announcement.id);
                                                                    }}
                                                                >
                                                                    <Star className="mr-2 h-4 w-4" />
                                                                    {announcement.favorite ? 'Remove favorite' : 'Mark as favorite'}
                                                                </DropdownMenuItem>
                                                                <DropdownMenuItem
                                                                    onClick={(e) => {
                                                                        e.stopPropagation();
                                                                        handleToggleArchived(announcement.id);
                                                                    }}
                                                                >
                                                                    <Bell className="mr-2 h-4 w-4" />
                                                                    {announcement.archived ? 'Unarchive' : 'Archive'}
                                                                </DropdownMenuItem>
                                                                <DropdownMenuItem
                                                                    onClick={(e) => {
                                                                        e.stopPropagation();
                                                                        handleEditAnnouncement(announcement);
                                                                    }}
                                                                >
                                                                    <Pencil className="mr-2 h-4 w-4" />
                                                                    Edit
                                                                </DropdownMenuItem>
                                                                <DropdownMenuItem
                                                                    onClick={(e) => {
                                                                        e.stopPropagation();
                                                                        handleDeleteAnnouncement(announcement.id);
                                                                    }}
                                                                    className="text-red-600 focus:text-red-600"
                                                                >
                                                                    <Trash className="mr-2 h-4 w-4" />
                                                                    Delete
                                                                </DropdownMenuItem>
                                                            </DropdownMenuContent>
                                                        </DropdownMenu>
                                                    </div>
                                                </div>

                                                <div className="mt-2 line-clamp-2 text-sm text-muted-foreground">{announcement.excerpt}</div>

                                                <div className="mt-3 flex flex-wrap items-center justify-between gap-2">
                                                    {announcement.category && (
                                                        <span
                                                            className={cn(
                                                                'inline-block rounded-full border px-2 py-0.5 text-xs',
                                                                categoryColors[announcement.category] || 'border-gray-200 bg-gray-50 text-gray-700',
                                                            )}
                                                        >
                                                            {announcement.category}
                                                        </span>
                                                    )}

                                                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
                                                        <span className="flex items-center gap-1">
                                                            <Eye className="h-3.5 w-3.5" />
                                                            {announcement.likes || 0}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        ))
                                    ) : (
                                        <div className="flex h-52 flex-col items-center justify-center">
                                            <div className="rounded-full bg-primary/10 p-3">
                                                <Search className="h-6 w-6 text-primary" />
                                            </div>
                                            <p className="mt-4 text-sm font-medium">No announcements found</p>
                                            <p className="text-xs text-muted-foreground">
                                                {searchQuery
                                                    ? 'Try a different search term'
                                                    : activeTab !== 'all'
                                                      ? `No announcements in the "${activeTab}" tab`
                                                      : 'Create a new announcement to get started'}
                                            </p>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            ) : isFormOpen ? (
                /* Show announcement form */
                <AnnouncementForm
                    onBack={() => setIsFormOpen(false)}
                    onSubmit={formMode === 'create' ? handleCreateAnnouncement : handleUpdateAnnouncement}
                    defaultValues={
                        formMode === 'edit' && editingAnnouncement
                            ? {
                                  title: editingAnnouncement.title,
                                  excerpt: editingAnnouncement.excerpt,
                                  description: editingAnnouncement.description || '',
                                  coverImage: editingAnnouncement.coverImage || '',
                              }
                            : undefined
                    }
                    mode={formMode}
                />
            ) : (
                /* Show announcement details */
                <AnnouncementDetails
                    announcement={selectedAnnouncement}
                    onBack={() => setIsDetailsOpen(false)}
                    onEdit={() => {
                        if (selectedAnnouncement) {
                            handleEditAnnouncement(selectedAnnouncement);
                        }
                    }}
                />
            )}
        </div>
    );
}