import { Button } from '@admin/components/ui/button';
import { Email } from '@admin/pages/Tools/Emails/Index';
import { Archive, ArrowLeft, Download, MoreVertical, Reply, ReplyAll, Send, Trash2 } from 'lucide-react';
// Email Details Component
interface EmailDetailsProps {
    email: Email;
    onBack: () => void;
    mode?: 'screen' | 'sidebar';
}

function EmailDetails({ email, onBack, mode = 'screen' }: EmailDetailsProps) {
    const isSidebarMode = mode === 'sidebar';
    return (
        <div className="flex h-full flex-col">
            {/* Email Details Header */}
            {!isSidebarMode && (
                <div className="flex items-center justify-between border-b border-gray-200 p-2">
                    <div className="flex items-center space-x-2">
                        <Button variant="ghost" size="icon" onClick={onBack} className="h-8 w-8">
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                        <h2 className="font-medium">{email.subject}</h2>
                    </div>
                    <div className="flex items-center space-x-2">
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                            <Archive className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                            <Trash2 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>
            )}

            {/* Email Content */}
            <div className="flex-1 overflow-auto p-2">
                <div className="mb-4 flex items-center justify-between">
                    <div className="flex items-center">
                        <div className="mr-3 flex h-10 w-10 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>
                            <div className="font-semibold">{email.sender.name}</div>
                            <div className="text-sm text-gray-500">
                                To: {email.recipients?.map((r) => r.name || r.email).join(', ')}
                                {email.cc && email.cc.length > 0 && (
                                    <>
                                        <br />
                                        CC: {email.cc.map((cc) => cc.name || cc.email).join(', ')}
                                    </>
                                )}
                            </div>
                        </div>
                    </div>
                    <div className="text-sm text-gray-500">{email.date}</div>
                </div>

                <div className="border-t border-gray-100 pt-4 text-sm">
                    <div dangerouslySetInnerHTML={{ __html: email.body || email.preview }} />
                </div>
                {isSidebarMode && (
                    <div className="mt-4 flex items-center justify-end">
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                            <Archive className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                            <Trash2 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>

            {/* Actions Footer */}
            <div className="flex items-center justify-between border-t border-gray-200 p-3">
                <div className="flex space-x-2">
                    <Button variant="outline" size="sm" className="flex items-center">
                        <Reply className="mr-2 h-4 w-4" />
                        Reply
                    </Button>
                    <Button variant="outline" size="sm" className="flex items-center">
                        <ReplyAll className="mr-2 h-4 w-4" />
                        Reply All
                    </Button>
                    <Button variant="outline" size="sm" className="flex items-center">
                        <Send className="mr-2 h-4 w-4" />
                        Forward
                    </Button>
                </div>
                <Button variant="ghost" size="icon">
                    <Download className="h-4 w-4" />
                </Button>
            </div>
        </div>
    );
}

export default EmailDetails;