import EmailDetails from '@admin/components/tools/email/email-details';
import EmailSendForm from '@admin/components/tools/email/email-send-form';
import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar';
import { Badge } from '@admin/components/ui/badge';
import { Button } from '@admin/components/ui/button';
import { mockEmails } from '@admin/data/static';
import useAddOn from '@/hooks/use-addons';
import { cn } from '@admin/lib/utils';
import { Link } from '@inertiajs/react';
import { Archive, ArrowLeft, ExternalLinkIcon, MailCheck, Plus, Search, Star, X } from 'lucide-react';
import { useCallback, useState } from 'react';

export interface Email {
    id: string;
    subject: string;
    sender: {
        name: string;
        avatar?: string;
        email?: string;
    };
    recipients?: {
        name: string;
        email: string;
    }[];
    cc?: {
        name: string;
        email: string;
    }[];
    date: string;
    body?: string;
    preview: string;
    isRead?: boolean;
    isStarred?: boolean;
    folder?: 'inbox' | 'sent' | 'drafts' | 'trash' | 'archive';
    // Adding back the attachments property to avoid errors
    attachments?: {
        name: string;
        size: string;
    }[];
}

type ActiveTab = 'inbox' | 'sent' | 'drafts' | 'archive' | 'trash';
type EmailFilter = 'all' | 'unread' | 'important';

interface EmailAddOnSidebarProps {
    title?: string;
    initialEmail?: Email;
    onClose?: () => void;
    mode?: 'list' | 'compose' | 'details';
}

export function EmailAddOnSidebar({ title = 'Emails', initialEmail, onClose, mode = 'list' }: EmailAddOnSidebarProps) {
    const { addOnClose } = useAddOn();

    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState<ActiveTab>('inbox');
    const [emailFilter, setEmailFilter] = useState<EmailFilter>('all');

    const [sidebarMode, setSidebarMode] = useState<'list' | 'compose' | 'details'>(mode);
    const [emails, setEmails] = useState<Email[]>(mockEmails);
    const [activeEmail, setActiveEmail] = useState<Email | null>(initialEmail || null);

    const handleEmailSend = useCallback((emailData: { to: string[]; cc: string[]; bcc: string[]; subject: string; body: string }) => {
        const newEmail: Email = {
            id: String(Date.now()),
            subject: emailData.subject || 'No Subject',
            sender: {
                name: 'You',
                email: 'you@company.com',
            },
            recipients: emailData.to.map((email) => ({ name: email, email })),
            cc: emailData.cc.map((email) => ({ name: email, email })),
            date: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
            body: emailData.body,
            preview: emailData.body.replace(/<[^>]*>/g, '').substring(0, 100) + '...',
            folder: 'sent',
            isRead: true,
            isStarred: false,
        };

        setEmails((prevEmails) => [newEmail, ...prevEmails]);
        setSidebarMode('list');
    }, []);

    const getFilteredEmails = () => {
        let filtered = emails;

        // Apply tab filter (using either folder property or default to inbox)
        if (activeTab === 'inbox') {
            filtered = emails.filter((email) => !email.folder || email.folder === 'inbox');
        } else {
            filtered = emails.filter((email) => email.folder === activeTab);
        }

        // Apply email filter
        switch (emailFilter) {
            case 'unread':
                filtered = filtered.filter((email) => !email.isRead);
                break;
            case 'important':
                filtered = filtered.filter((email) => email.isStarred);
                break;
        }

        // Apply search filter
        if (searchQuery) {
            filtered = filtered.filter(
                (email) =>
                    email.subject.toLowerCase().includes(searchQuery.toLowerCase()) ||
                    email.sender.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                    email.preview.toLowerCase().includes(searchQuery.toLowerCase()),
            );
        }

        return filtered;
    };

    const filteredEmails = getFilteredEmails();

    const markAsRead = (id: string) => {
        setEmails((prevEmails) => prevEmails.map((email) => (email.id === id ? { ...email, isRead: true } : email)));
    };

    const toggleImportant = (id: string, e: React.MouseEvent) => {
        e.stopPropagation();
        setEmails((prevEmails) => prevEmails.map((email) => (email.id === id ? { ...email, isStarred: !email.isStarred } : email)));
    };

    const moveToTrash = (id: string, e: React.MouseEvent) => {
        e.stopPropagation();
        setEmails((prevEmails) => prevEmails.map((email) => (email.id === id ? { ...email, folder: 'trash', isDeleted: true } : email)));
    };

    const moveToArchive = (id: string, e: React.MouseEvent) => {
        e.stopPropagation();
        setEmails((prevEmails) => prevEmails.map((email) => (email.id === id ? { ...email, folder: 'archive' } : email)));
    };

    return (
        <div className="flex h-full w-full flex-col bg-card">
            <div className="flex items-center justify-between border-b px-2 py-3">
                <div className="flex items-center gap-3 px-1">
                    {sidebarMode !== 'list' && (
                        <Button variant="ghost" size="sm" onClick={() => setSidebarMode('list')} className="h-8 w-8 p-0">
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                    )}
                    <h2 className="text-xl font-semibold tracking-tight">
                        {sidebarMode === 'compose' ? 'Compose Email' : sidebarMode === 'details' ? activeEmail?.subject || 'Email Details' : title}
                    </h2>
                    {sidebarMode === 'list' && (
                        <Button
                            size="sm"
                            variant="outline"
                            onClick={() => {
                                setSidebarMode('compose');
                                setActiveEmail(null);
                            }}
                            className="size-5 rounded-full"
                        >
                            <Plus className="h-3 w-3" />
                        </Button>
                    )}
                </div>
                <div className="flex items-center gap-4">
                    {sidebarMode === 'list' && (
                        <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/emails">
                        <Button variant="ghost" size="sm" onClick={onClose} className="size-6">
                            <ExternalLinkIcon className="h-3 w-3 text-success" />
                        </Button>
                    </Link>
                    <Button variant="ghost" size="sm" onClick={addOnClose} className="size-6 rounded-full border">
                        <X className="h-3 w-3" />
                    </Button>
                </div>
            </div>

            {sidebarMode === 'list' && (
                <div className="border-b px-4">
                    <div className="flex gap-6">
                        {[
                            { key: 'inbox', label: 'Inbox' },
                            { key: 'sent', label: 'Sent' },
                            { key: 'drafts', label: 'Drafts' },
                            { key: 'trash', label: 'Trash' },
                        ].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-y-auto p-2">
                {sidebarMode === 'compose' ? (
                    <EmailSendForm onBack={() => setSidebarMode('list')} onSend={handleEmailSend} mode="sidebar" />
                ) : sidebarMode === 'details' && activeEmail ? (
                    <EmailDetails email={activeEmail} onBack={() => setSidebarMode('list')} mode="sidebar" />
                ) : filteredEmails.length === 0 ? (
                    <div className="flex h-full flex-col items-center justify-center text-center">
                        <div className="rounded-full bg-muted p-4">
                            <Archive className="h-6 w-6 text-muted-foreground" />
                        </div>
                        <p className="mt-4 text-sm font-medium">No emails found</p>
                        <p className="mt-1 text-xs text-muted-foreground">Try adjusting your filters</p>
                    </div>
                ) : (
                    <div className="divide-y divide-border">
                        {filteredEmails.map((email) => (
                            <div
                                key={email.id}
                                className={cn(
                                    'group w-full cursor-pointer p-2 transition-all hover:bg-muted/40',
                                    !email.isRead && 'bg-muted/20 font-medium',
                                )}
                                onClick={() => {
                                    markAsRead(email.id);
                                    setActiveEmail(email);
                                    setSidebarMode('details');
                                }}
                            >
                                <div className="flex items-start gap-3">
                                    {/* Sender Avatar */}
                                    <Avatar className="mt-1 h-8 w-8">
                                        <AvatarImage src={email.sender.avatar} />
                                        <AvatarFallback className="text-xs">{email.sender.name.charAt(0)}</AvatarFallback>
                                    </Avatar>

                                    {/* Email Content */}
                                    <div className="min-w-0 flex-1">
                                        <div className="flex items-center justify-between">
                                            <h4 className="truncate text-sm font-medium">
                                                {email.folder === 'sent'
                                                    ? `To: ${email.recipients?.map((r) => r.name || r.email).join(', ')}`
                                                    : email.sender.name}
                                            </h4>
                                            <div className="flex items-center">
                                                <span className="text-xs text-muted-foreground">{email.date}</span>
                                            </div>
                                        </div>

                                        {/* Subject */}
                                        <p className="mt-0.5 truncate text-sm">{email.subject}</p>

                                        {/* Preview */}
                                        <p className="mt-0.5 truncate text-xs text-muted-foreground">{email.preview}</p>

                                        {/* Meta Info */}
                                        <div className="mt-2 flex items-center justify-between text-xs">
                                            <div className="flex items-center gap-2">
                                                {email.isStarred && (
                                                    <Badge variant="outline" className="border-amber-200 bg-amber-50 py-0 text-xs text-amber-700">
                                                        Important
                                                    </Badge>
                                                )}
                                            </div>

                                            <div className="hidden group-hover:flex">
                                                <Button
                                                    title="Mark as important"
                                                    variant="ghost"
                                                    size="sm"
                                                    className="h-6 w-6 p-0"
                                                    onClick={(e) => toggleImportant(email.id, e)}
                                                >
                                                    <Star
                                                        className={cn(
                                                            'h-3.5 w-3.5',
                                                            email.isStarred ? 'fill-amber-400 text-amber-400' : 'text-muted-foreground',
                                                        )}
                                                    />
                                                </Button>

                                                <Button
                                                    title="Archive"
                                                    variant="ghost"
                                                    size="sm"
                                                    className="h-6 w-6 p-0"
                                                    onClick={(e) => moveToArchive(email.id, e)}
                                                >
                                                    <Archive className="h-3.5 w-3.5 text-muted-foreground" />
                                                </Button>
                                                <Button
                                                    title="Mark as read"
                                                    variant="ghost"
                                                    size="sm"
                                                    className="h-6 w-6 p-0"
                                                    onClick={(e) => moveToArchive(email.id, e)}
                                                >
                                                    <MailCheck className="h-3.5 w-3.5 text-muted-foreground" />
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}

export default EmailAddOnSidebar;