import { Badge } from '@admin/components/ui/badge';
import { Card, CardContent } from '@admin/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@admin/components/ui/select';
import { Calendar, Star, User, Users, Zap } from 'lucide-react';

interface TaskDetailsProps {
    task: {
        title: string;
        description: string;
        objectives: string[];
        createdBy: string;
        status: 'Completed' | 'In Progress' | 'Pending' | 'Cancelled';
        createdDate: string;
        dueDate: string;
        priority: 'Low' | 'Medium' | 'High';
        assignedTo: string;
    };
    onClose?: () => void;
    mode?: 'sidebar' | 'modal';
}

export function TaskDetails({ task, onClose, mode = 'sidebar' }: TaskDetailsProps) {
    const isSidebar = mode === 'sidebar';
    const statusColors = {
        Completed: 'bg-green-500 hover:bg-green-600',
        'In Progress': 'bg-blue-500 hover:bg-blue-600',
        Pending: 'bg-yellow-500 hover:bg-yellow-600',
        Cancelled: 'bg-red-500 hover:bg-red-600',
    };

    const priorityColors = {
        Low: 'bg-green-100 text-green-700 border-green-200',
        Medium: 'bg-yellow-100 text-yellow-700 border-yellow-200',
        High: 'bg-red-100 text-red-700 border-red-200',
    };

    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">
                        {/* Task Title */}
                        <h2 className={`${isSidebar ? 'text-xl' : 'text-2xl'} font-semibold text-balance`}>{task.title}</h2>

                        {/* Description */}
                        <p className={`leading-relaxed text-pretty text-muted-foreground ${isSidebar ? 'text-sm' : ''}`}>{task.description}</p>

                        {/* Objectives */}
                        <div className={`space-y-${isSidebar ? '2' : '3'}`}>
                            <h3 className={`${isSidebar ? 'text-base' : 'text-lg'} font-semibold`}>Objective / Agenda:</h3>
                            <ul className={`list-inside list-disc space-y-${isSidebar ? '1' : '2'} text-muted-foreground`}>
                                {task.objectives.map((objective, index) => (
                                    <li key={index} className={`leading-relaxed ${isSidebar ? 'text-sm' : ''}`}>
                                        {objective}
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>

                    {/* Information Panel - Right Side */}
                    <div className={`space-y-${isSidebar ? '4' : '6'} ${isSidebar ? 'border-t' : ''}`}>
                        <div className={`space-y-${isSidebar ? '3' : '4'} rounded-lg bg-muted/30 p-${isSidebar ? '3' : '4'}`}>
                            <h3 className={`mb-${isSidebar ? '2' : '4'} ${isSidebar ? 'text-base' : 'text-lg'} font-semibold`}>Information</h3>

                            {/* Created By */}
                            <div className={`flex items-start gap-${isSidebar ? '2' : '3'}`}>
                                <User className={`mt-0.5 ${isSidebar ? 'h-4 w-4' : 'h-5 w-5'} text-muted-foreground`} />
                                <div className="flex-1 space-y-1">
                                    <p className={`${isSidebar ? 'text-xs' : 'text-sm'} text-muted-foreground`}>Created by:</p>
                                    <p className={`${isSidebar ? 'text-xs' : 'text-sm'} font-medium`}>{task.createdBy}</p>
                                </div>
                            </div>

                            {/* Status */}
                            <div className={`flex items-start gap-${isSidebar ? '2' : '3'}`}>
                                <Star className={`mt-0.5 ${isSidebar ? 'h-4 w-4' : 'h-5 w-5'} text-muted-foreground`} />
                                <div className="flex-1 space-y-1">
                                    <p className={`${isSidebar ? 'text-xs' : 'text-sm'} text-muted-foreground`}>Status:</p>
                                    <Badge className={`${statusColors[task.status]} text-white ${isSidebar ? 'py-0 text-xs' : ''}`}>
                                        {task.status}
                                    </Badge>
                                </div>
                            </div>

                            {/* Created Date */}
                            <div className={`flex items-start gap-${isSidebar ? '2' : '3'}`}>
                                <Calendar className={`mt-0.5 ${isSidebar ? 'h-4 w-4' : 'h-5 w-5'} text-muted-foreground`} />
                                <div className="flex-1 space-y-1">
                                    <p className={`${isSidebar ? 'text-xs' : 'text-sm'} text-muted-foreground`}>Created Date:</p>
                                    <p className={`${isSidebar ? 'text-xs' : 'text-sm'} font-medium`}>{task.createdDate}</p>
                                </div>
                            </div>

                            {/* Due Date */}
                            <div className={`flex items-start gap-${isSidebar ? '2' : '3'}`}>
                                <Calendar className={`mt-0.5 ${isSidebar ? 'h-4 w-4' : 'h-5 w-5'} text-muted-foreground`} />
                                <div className="flex-1 space-y-1">
                                    <p className={`${isSidebar ? 'text-xs' : 'text-sm'} text-muted-foreground`}>Due Date:</p>
                                    <p className={`${isSidebar ? 'text-xs' : 'text-sm'} font-medium`}>{task.dueDate}</p>
                                </div>
                            </div>

                            {/* Priority */}
                            <div className={`flex items-start gap-${isSidebar ? '2' : '3'}`}>
                                <Zap className={`mt-0.5 ${isSidebar ? 'h-4 w-4' : 'h-5 w-5'} text-muted-foreground`} />
                                <div className="flex-1 space-y-1">
                                    <p className={`${isSidebar ? 'text-xs' : 'text-sm'} text-muted-foreground`}>Priority:</p>
                                    <Badge variant="outline" className={`${priorityColors[task.priority]} ${isSidebar ? 'py-0 text-xs' : ''}`}>
                                        {task.priority}
                                    </Badge>
                                </div>
                            </div>

                            {/* Assign To */}
                            <div className={`flex items-start gap-${isSidebar ? '2' : '3'}`}>
                                <Users className={`mt-0.5 ${isSidebar ? 'h-4 w-4' : 'h-5 w-5'} text-muted-foreground`} />
                                <div className="flex-1 space-y-1">
                                    <p className={`${isSidebar ? 'text-xs' : 'text-sm'} text-muted-foreground`}>Assign to:</p>
                                    <p className={`${isSidebar ? 'text-xs' : 'text-sm'} font-medium`}>{task.assignedTo}</p>
                                </div>
                            </div>
                        </div>

                        {/* Assignees Dropdown */}
                        <div className="space-y-2">
                            <label className={`${isSidebar ? 'text-xs' : 'text-sm'} font-semibold`}>Assignees</label>
                            <Select>
                                <SelectTrigger className={`w-full ${isSidebar ? 'h-8 text-xs' : ''}`}>
                                    <SelectValue placeholder="Select Assignees" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="self" className={isSidebar ? 'text-xs' : ''}>
                                        Self
                                    </SelectItem>
                                    <SelectItem value="team" className={isSidebar ? 'text-xs' : ''}>
                                        Team
                                    </SelectItem>
                                    <SelectItem value="manager" className={isSidebar ? 'text-xs' : ''}>
                                        Manager
                                    </SelectItem>
                                </SelectContent>
                            </Select>
                        </div>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}