import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar';
import { Badge } from '@admin/components/ui/badge';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent } from '@admin/components/ui/card';
import { Calendar, Mail, MapPin, Phone, Share2, Star } from 'lucide-react';

interface ContactDetailsProps {
    contact: {
        name: string;
        email?: string;
        phone?: string;
        location?: string;
        company?: string;
        avatar?: string;
        lastContact?: string;
        tags?: string[];
    };
    onClose?: () => void;
    mode?: 'sidebar' | 'modal';
}

export function ContactDetails({ contact, onClose, mode = 'sidebar' }: ContactDetailsProps) {
    const isSidebar = mode === 'sidebar';

    const getInitials = (name: string) => {
        return name
            .split(' ')
            .map((part) => part.charAt(0))
            .join('')
            .toUpperCase()
            .substring(0, 2);
    };

    return (
        <Card className={`mx-auto w-full border-none ${isSidebar ? 'sidebar-mode' : ''} px-0 pt-0`}>
            <CardContent className="px-1">
                <div className={`grid ${isSidebar ? 'grid-cols-1' : 'md:grid-cols-3'} gap-6`}>
                    {/* Main Content - Left Side */}
                    <div className="space-y-4 lg:col-span-2">
                        {/* Contact Header with Avatar */}
                        <div className="flex flex-col items-center">
                            <Avatar className={isSidebar ? 'mb-3 h-20 w-20' : 'mb-4 h-24 w-24'}>
                                {contact.avatar ? (
                                    <AvatarImage src={contact.avatar} alt={contact.name} />
                                ) : (
                                    <AvatarFallback className="text-lg">{getInitials(contact.name)}</AvatarFallback>
                                )}
                            </Avatar>
                            <h2 className={`${isSidebar ? 'text-xl' : 'text-2xl'} text-center font-semibold`}>{contact.name}</h2>
                            {contact.company && <p className="text-sm text-muted-foreground">{contact.company}</p>}
                        </div>

                        {/* Contact Information */}
                        <div className="space-y-3">
                            {contact.primary_email && (
                                <div className="flex items-center gap-2">
                                    <Mail className="h-4 w-4 text-muted-foreground" />
                                    <span className={`${isSidebar ? 'text-sm' : ''}`}>{contact.primary_email}</span>
                                </div>
                            )}

                            {contact.primary_phone && (
                                <div className="flex items-center gap-2">
                                    <Phone className="h-4 w-4 text-muted-foreground" />
                                    <span className={`${isSidebar ? 'text-sm' : ''}`}>{contact.primary_phone}</span>
                                </div>
                            )}

                            {contact.location && (
                                <div className="flex items-center gap-2">
                                    <MapPin className="h-4 w-4 text-muted-foreground" />
                                    <span className={`${isSidebar ? 'text-sm' : ''}`}>{contact.location}</span>
                                </div>
                            )}

                            {contact.lastContact && (
                                <div className="flex items-center gap-2">
                                    <Calendar className="h-4 w-4 text-muted-foreground" />
                                    <span className={`${isSidebar ? 'text-sm' : ''}`}>Last contacted: {contact.lastContact}</span>
                                </div>
                            )}
                        </div>

                        {/* Tags if available */}
                        {contact.tags && contact.tags.length > 0 && (
                            <div className="mt-4 flex flex-wrap gap-2">
                                {contact.tags.map((tag, idx) => (
                                    <Badge key={idx} variant="outline">
                                        {tag}
                                    </Badge>
                                ))}
                            </div>
                        )}
                    </div>

                    {/* Side Panel for Actions - Right Side (hidden on sidebar mode) */}
                    {!isSidebar && (
                        <div className="space-y-6 rounded-xl border p-4 lg:col-span-1">
                            {/* Action Buttons */}
                            <div className="space-y-2">
                                <Button variant="outline" className="w-full justify-start">
                                    <Mail className="mr-2 h-4 w-4" /> Send Email
                                </Button>
                                <Button variant="outline" className="w-full justify-start">
                                    <Share2 className="mr-2 h-4 w-4" /> Share Contact
                                </Button>
                                <Button variant="outline" className="w-full justify-start">
                                    <Star className="mr-2 h-4 w-4" /> Add to Favorites
                                </Button>
                            </div>
                        </div>
                    )}
                </div>
            </CardContent>
        </Card>
    );
}

export const sampleContact = {
    name: 'John Smith',
    email: 'john.smith@example.com',
    phone: '+1 (555) 123-4567',
    location: 'New York, USA',
    company: 'Acme Corporation',
    lastContact: '3 days ago',
    tags: ['Client', 'Sales', 'VIP'],
};