import GeneralHeader from '@admin/components/general-header';
import EmailDetails from '@admin/components/tools/email/email-details';
import EmailSendForm from '@admin/components/tools/email/email-send-form';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent } from '@admin/components/ui/card';
import { Checkbox } from '@admin/components/ui/checkbox';
import { Input } from '@admin/components/ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@admin/components/ui/tabs';
import { mockEmails } from '@admin/data/static';
import AppLayout from '@admin/layouts/app-layout';
import { cn } from '@admin/lib/utils';
import type { PaginatedData } from '@admin/types';
import { Head } from '@inertiajs/react';
import { Archive, ChevronLeft, ChevronRight, File, Mail, MoreVertical, Plus, Send, Star, Trash2 } from 'lucide-react';
import { ReactNode, useState } from 'react';

export interface Email {
    id: string;
    sender: {
        name: string;
        avatar?: string;
        email?: string;
    };
    subject: string;
    preview: string;
    date: string;
    isStarred?: boolean;
    isRead?: boolean;
    isDeleted?: boolean;
    body?: string;
    recipients?: Array<{
        name: string;
        email: string;
    }>;
    cc?: Array<{
        name: string;
        email: string;
    }>;
}

const tagCounts = {
    Inbox: 18,
    Sent: 5,
    Drafts: 3,
    Trash: 2,
    Important: 7,
};

type ActiveTab = 'inbox' | 'sent' | 'drafts' | 'trash' | 'important';

function Index() {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState<ActiveTab>('inbox');
    const [filterUnread, setFilterUnread] = useState(false);
    const [isComposing, setIsComposing] = useState(false);
    const [emails, setEmails] = useState<Email[]>(mockEmails);
    const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [perPage, setPerPage] = useState(5);
    const [selectedEmailId, setSelectedEmailId] = useState<string | null>(null);

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

        // First apply the tab filter
        switch (activeTab) {
            case 'sent':
                // In a real app, filter sent emails
                break;
            case 'drafts':
                // In a real app, filter draft emails
                break;
            case 'trash':
                filtered = emails.filter((email) => email.isDeleted);
                break;
            case 'important':
                filtered = emails.filter((email) => email.isStarred);
                break;
            case 'inbox':
            default:
                filtered = emails.filter((email) => !email.isDeleted);
                break;
        }

        // Apply the unread filter if selected
        if (filterUnread) {
            filtered = filtered.filter((email) => !email.isRead);
        }

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

        return filtered;
    };

    const toggleSelectEmail = (id: string) => {
        setSelectedEmails((prev) => (prev.includes(id) ? prev.filter((emailId) => emailId !== id) : [...prev, id]));
    };

    const toggleStarEmail = (id: string) => {
        setEmails((prev) => prev.map((email) => (email.id === id ? { ...email, isStarred: !email.isStarred } : email)));
    };

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

    const archiveEmail = (ids: string[]) => {
        setEmails((prev) => prev.map((email) => (ids.includes(email.id) ? { ...email, isDeleted: true } : email)));
        setSelectedEmails([]);
    };

    const deleteEmail = (ids: string[]) => {
        setEmails((prev) => prev.filter((email) => !ids.includes(email.id)));
        setSelectedEmails([]);
    };

    const selectAll = () => {
        const filteredEmailIds = getFilteredEmails().map((email) => email.id);
        setSelectedEmails(selectedEmails.length === filteredEmailIds.length ? [] : filteredEmailIds);
    };

    const handlePageChange = (page: number) => {
        setCurrentPage(page);
    };

    const handlePerPageChange = (newPerPage: number) => {
        setPerPage(newPerPage);
        setCurrentPage(1); // Reset to first page when changing items per page
    };

    const handleSendEmail = (emailData: { to: string[]; cc: string[]; bcc: string[]; subject: string; body: string }) => {
        // In a real app, you would send the email via an API
        console.log('Sending email:', emailData);

        // Create a new mock email and add it to the emails list (in "sent" items)
        const newEmail: Email = {
            id: String(Date.now()),
            sender: { name: 'You', email: 'tamzeed@taskco.com' },
            subject: emailData.subject,
            preview: emailData.body.substring(0, 100).replace(/<[^>]*>/g, ''), // Strip HTML
            date: 'Just now',
            isRead: true,
            isStarred: false,
            body: emailData.body,
            recipients: emailData.to.map((to) => ({ name: to, email: to })),
            cc: emailData.cc.map((cc) => ({ name: cc, email: cc })),
        };

        setEmails((prev) => [newEmail, ...prev]);
        setActiveTab('sent'); // Switch to sent items
        setIsComposing(false);
    };

    const filteredEmails = getFilteredEmails();
    const total = filteredEmails.length;
    const lastPage = Math.max(1, Math.ceil(total / perPage));

    // Create paginated data
    const paginatedData: PaginatedData<Email> = {
        data: filteredEmails.slice((currentPage - 1) * perPage, currentPage * perPage),
        queryParams: { page: currentPage, per_page: perPage },
        meta: {
            from: total === 0 ? 0 : (currentPage - 1) * perPage + 1,
            to: Math.min(total, currentPage * perPage),
            total: total,
            current_page: currentPage,
            last_page: lastPage,
            path: '',
            per_page: perPage,
        },
        links: {
            prev: currentPage > 1 ? 'prev' : null,
            next: currentPage < lastPage ? 'next' : null,
        },
        userSummary: [],
    };

    return (
        <div className="flex h-full w-full flex-col bg-card">
            <Head title="Emails" />
            <div className="border-b border-gray-200 bg-card">
                <GeneralHeader title="Emails" description="Manage your emails efficiently" page="Emails" />
            </div>
            <Card className="flex h-full min-h-0 flex-1 flex-col items-stretch gap-4 overflow-hidden rounded-md bg-white shadow-sm md:flex-row md:items-start">
                {/* Mobile: compact interface for small screens */}
                <div className="flex w-full flex-col border-b border-muted p-2 md:hidden">
                    <div className="mb-2 flex items-center justify-between">
                        <Input
                            placeholder="Search..."
                            className="max-w-[200px]"
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                        />
                        <Button size="sm" variant="default" className="flex items-center" onClick={() => setIsComposing(true)}>
                            <Plus className="mr-2 h-4 w-4" />
                            Compose
                        </Button>
                    </div>
                    <Tabs
                        value={filterUnread ? 'unread' : 'all'}
                        className="w-full"
                        onValueChange={(value) => {
                            setFilterUnread(value === 'unread');
                            setCurrentPage(1);
                            // Provide visual feedback when mobile tabs are clicked
                            console.log(`Mobile tab changed to: ${value}, filterUnread: ${value === 'unread'}`);
                        }}
                    >
                        <TabsList className="grid w-full grid-cols-2">
                            <TabsTrigger value="all">All Mail</TabsTrigger>
                            <TabsTrigger value="unread">Unread</TabsTrigger>
                        </TabsList>
                        <TabsContent value="all" className="hidden">
                            All emails
                        </TabsContent>
                        <TabsContent value="unread" className="hidden">
                            Unread emails
                        </TabsContent>
                    </Tabs>
                </div>

                {/* Sidebar */}
                <div className="sticky top-0 hidden h-full w-72 flex-col gap-4 self-start overflow-y-auto border-r border-muted pr-2 md:flex">
                    {/* Header */}
                    <div className="w-full">
                        <Button className="w-full" onClick={() => setIsComposing(true)}>
                            <Plus className="mr-2 h-4 w-4" />
                            Compose
                        </Button>
                    </div>

                    {/* Mail Tabs */}
                    <Tabs
                        value={filterUnread ? 'unread' : 'all'}
                        className="w-full"
                        onValueChange={(value) => {
                            setFilterUnread(value === 'unread');
                            setCurrentPage(1);
                            // Provide visual feedback when tabs are clicked
                            console.log(`Tab changed to: ${value}, filterUnread: ${value === 'unread'}`);
                        }}
                    >
                        <TabsList className="grid w-full grid-cols-2">
                            <TabsTrigger value="all">All Mail</TabsTrigger>
                            <TabsTrigger value="unread">Unread</TabsTrigger>
                        </TabsList>
                        <TabsContent value="all" className="hidden">
                            All emails
                        </TabsContent>
                        <TabsContent value="unread" className="hidden">
                            Unread emails
                        </TabsContent>
                    </Tabs>

                    {/* Search */}
                    <div className="">
                        <div className="flex items-center justify-between">
                            <Input
                                placeholder="Search products..."
                                className="w-full"
                                value={searchQuery}
                                onChange={(e) => setSearchQuery(e.target.value)}
                            />
                        </div>
                    </div>

                    {/* Email folders */}
                    <Card className="border-0 p-0 shadow-none">
                        <CardContent className="px-0">
                            <div className="space-y-1">
                                <Button
                                    variant={activeTab === 'inbox' ? 'default' : 'ghost'}
                                    className="w-full justify-between"
                                    onClick={() => setActiveTab('inbox')}
                                >
                                    <div className="flex items-center">
                                        <Mail className="mr-2 h-4 w-4" />
                                        <span>Inbox</span>
                                    </div>
                                    {tagCounts.Inbox > 0 && <p className="ml-auto rounded-full">{tagCounts.Inbox}</p>}
                                </Button>

                                <Button
                                    variant={activeTab === 'sent' ? 'default' : 'ghost'}
                                    className="w-full justify-start"
                                    onClick={() => setActiveTab('sent')}
                                >
                                    <div className="flex items-center">
                                        <Send className="mr-2 h-4 w-4" />
                                        <span>Send Box</span>
                                    </div>
                                </Button>
                            </div>
                        </CardContent>
                    </Card>
                </div>

                {/* Main Content */}
                <div className="no-scrollbar h-full min-h-0 flex-1 overflow-y-auto">
                    {isComposing ? (
                        // Show compose form
                        <EmailSendForm onBack={() => setIsComposing(false)} onSend={handleSendEmail} />
                    ) : selectedEmailId ? (
                        // Show email details if an email is selected
                        <EmailDetails email={emails.find((email) => email.id === selectedEmailId)!} onBack={() => setSelectedEmailId(null)} />
                    ) : (
                        // Show email list if no email is selected
                        <>
                            {/* Email toolbar */}
                            <div className="flex items-center border-b border-gray-200 pr-2 pb-2">
                                <div className="flex items-center gap-2">
                                    <div className="h-4 w-4">
                                        <Checkbox
                                            checked={selectedEmails.length === filteredEmails.length && filteredEmails.length > 0}
                                            onCheckedChange={selectAll}
                                            disabled={filteredEmails.length === 0}
                                            className="h-4 w-4"
                                        />
                                    </div>

                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-8 w-8"
                                        onClick={() => archiveEmail(selectedEmails)}
                                        disabled={selectedEmails.length === 0}
                                    >
                                        <Archive className="h-4 w-4" />
                                    </Button>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-8 w-8"
                                        onClick={() => deleteEmail(selectedEmails)}
                                        disabled={selectedEmails.length === 0}
                                    >
                                        <Trash2 className="h-4 w-4" />
                                    </Button>
                                    <Button variant="ghost" size="icon" className="h-8 w-8">
                                        <File className="h-4 w-4" />
                                    </Button>
                                    <Button variant="ghost" size="icon" className="h-8 w-8">
                                        <MoreVertical className="h-4 w-4" />
                                    </Button>
                                </div>
                                <div className="ml-auto flex items-center gap-2">
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-8 w-8"
                                        onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
                                        disabled={currentPage === 1}
                                    >
                                        <ChevronLeft className="h-4 w-4" />
                                    </Button>
                                    <span className="text-sm">
                                        {paginatedData.meta.from}-{paginatedData.meta.to} of {paginatedData.meta.total}
                                    </span>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-8 w-8"
                                        onClick={() => handlePageChange(Math.min(lastPage, currentPage + 1))}
                                        disabled={currentPage === lastPage}
                                    >
                                        <ChevronRight className="h-4 w-4" />
                                    </Button>
                                </div>
                            </div>

                            {/* Email list */}
                            <div className="divide-y divide-gray-100">
                                {paginatedData.data.map((email) => (
                                    <div
                                        key={email.id}
                                        className={cn(
                                            'group flex cursor-pointer items-center gap-2 py-2 pr-4 transition-all hover:shadow-md',
                                            !email.isRead && '',
                                        )}
                                        onClick={() => {
                                            markAsRead(email.id);
                                            setSelectedEmailId(email.id);
                                        }}
                                    >
                                        <div className="flex items-center space-x-4">
                                            <div onClick={(e) => e.stopPropagation()}>
                                                <Checkbox
                                                    checked={selectedEmails.includes(email.id)}
                                                    onCheckedChange={() => toggleSelectEmail(email.id)}
                                                    className="h-4 w-4"
                                                />
                                            </div>
                                            <Button
                                                variant="ghost"
                                                size="icon"
                                                className="h-6 w-6 p-0"
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    toggleStarEmail(email.id);
                                                }}
                                            >
                                                <Star
                                                    className={cn('h-4 w-4', email.isStarred ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300')}
                                                />
                                            </Button>

                                            {/* Avatar */}
                                            <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-gray-200">
                                                {email.sender.avatar ? (
                                                    <img src={email.sender.avatar} alt={email.sender.name} className="h-full w-full object-cover" />
                                                ) : (
                                                    <span className="text-sm font-medium text-gray-600">{email.sender.name.charAt(0)}</span>
                                                )}
                                            </div>
                                        </div>

                                        {/* Email content */}
                                        <div className="group relative ml-2 min-w-0 flex-1">
                                            <div className="flex flex-col md:flex-row md:items-center md:justify-between">
                                                <h3 className="truncate font-semibold text-gray-900">{email.sender.name}</h3>
                                                <span className="text-sm text-gray-500">{email.date}</span>
                                            </div>
                                            <p className={`text-sm text-gray-600 ${!email.isRead ? 'font-semibold text-gray-700' : ''}`}>
                                                {email.subject} - {email.preview}
                                            </p>

                                            {/* Hover action buttons */}
                                            <div className="absolute top-2 right-20 z-10 hidden -translate-y-1/2 items-center rounded-md px-1 py-0.5 transition-all group-hover:flex">
                                                <Button
                                                    variant="ghost"
                                                    size="icon"
                                                    className="h-7 w-7 rounded-full hover:bg-gray-100"
                                                    title="Archive"
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        archiveEmail([email.id]);
                                                    }}
                                                >
                                                    <Archive className="h-4 w-4 text-gray-600" />
                                                </Button>
                                                <Button
                                                    variant="ghost"
                                                    size="icon"
                                                    className="h-7 w-7 rounded-full hover:bg-gray-100"
                                                    title="Delete"
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        deleteEmail([email.id]);
                                                    }}
                                                >
                                                    <Trash2 className="h-4 w-4 text-gray-600" />
                                                </Button>
                                                <Button
                                                    variant="ghost"
                                                    size="icon"
                                                    className="h-7 w-7 rounded-full hover:bg-gray-100"
                                                    title="Mark as Read"
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        markAsRead(email.id);
                                                    }}
                                                >
                                                    <File className="h-4 w-4 text-gray-600" />
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </>
                    )}
                </div>
            </Card>
        </div>
    );
}
Index.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Tasks', href: '/tasks' },
            { title: 'Tasks', href: route('users.index') },
        ]}
        title="Tasks"
    >
        {page}
    </AppLayout>
);

export default Index;