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

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

export function UserDetails({ user, onClose, mode = 'sidebar' }: UserDetailsProps) {
    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">
                        {/* user 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'}>
                                {user.avatar ? (
                                    <AvatarImage src={user.avatar} alt={user.name} />
                                ) : (
                                    <AvatarFallback className="text-lg">{getInitials(user.name)}</AvatarFallback>
                                )}
                            </Avatar>
                            <h2 className={`${isSidebar ? 'text-xl' : 'text-2xl'} text-center font-semibold`}>{user.name}</h2>
                            {user.company && <p className="text-sm text-muted-foreground">{user.company}</p>}
                        </div>

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

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

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

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

                        {/* Tags if available */}
                        {user.tags && user.tags.length > 0 && (
                            <div className="mt-4 flex flex-wrap gap-2">
                                {user.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 User
                                </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 sampleUser = {
    name: 'John Smith',
    email: 'john.smith@example.com',
    phone: '+1 (555) 123-4567',
    location: 'New York, USA',
    company: 'Acme Corporation',
    lastUser: '3 days ago',
    tags: ['Client', 'Sales', 'VIP'],
};