import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Textarea } from '@/components/ui/textarea';
import { Calendar } from '@/components/ui/calendar';
import { cn } from '@/lib/utils';
import { Calendar as CalendarIcon, Tag, UserPlus, X } from 'lucide-react';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { format } from 'date-fns';
import * as React from 'react';

interface TaskTabProps {
    date: string;
    setDate: (value: string) => void;
    priority: number;
    setPriority: (value: number) => void;
    taskStatus: number;
    setTaskStatus: (value: number) => void;
    assignedUsers: string[];
    users: any[];
    showAssignPicker: boolean;
    setShowAssignPicker: (value: boolean) => void;
    addAssignedUser: (userId: string) => void;
    removeAssignedUser: (userId: string) => void;
    getUserDetails: (userId: string) => any;
    showAdvanced: boolean;
    setShowAdvanced: (value: boolean) => void;
    description: string;
    setDescription: (value: string) => void;
    TASK_PRIORITIES: any[];
    TASK_STATUSES: any[];
}

export function TaskTab({
    date, setDate, priority, setPriority, taskStatus, setTaskStatus,
    assignedUsers, users, showAssignPicker, setShowAssignPicker,
    addAssignedUser, removeAssignedUser, getUserDetails,
    showAdvanced, setShowAdvanced, description, setDescription,
    TASK_PRIORITIES, TASK_STATUSES
}: TaskTabProps) {
    const currentModule = {
        textColor: 'text-blue-600',
        bgLight: 'bg-blue-50',
        borderColor: 'border-blue-200',
    };

    const [showDatePicker, setShowDatePicker] = React.useState(false);
    const dateValue = date ? new Date(date) : undefined;

    return (
        <div className="space-y-3">
            {/* Due Date */}
            <div className="rounded-lg border border-slate-200 p-4">
                <Label className="mb-3 block font-medium text-slate-700">
                    Due Date <span className="text-slate-400 font-normal">(optional)</span>
                </Label>
                <Popover open={showDatePicker} onOpenChange={setShowDatePicker}>
                    <PopoverTrigger asChild>
                        <Button
                            variant="outline"
                            className={cn(
                                'h-10 w-full justify-start text-left font-normal',
                                !dateValue && 'text-muted-foreground'
                            )}
                        >
                            <CalendarIcon className="mr-2 h-4 w-4 shrink-0" />
                            <span className="truncate">
                                {dateValue ? format(dateValue, 'MM/dd/yyyy') : 'Pick a date'}
                            </span>
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                        <Calendar
                            mode="single"
                            selected={dateValue}
                            onSelect={(selectedDate) => {
                                if (selectedDate) {
                                    setDate(format(selectedDate, 'yyyy-MM-dd'));
                                } else {
                                    setDate('');
                                }
                                setShowDatePicker(false);
                            }}
                            disabled={(date) => date < new Date(new Date().setHours(0, 0, 0, 0))}
                            initialFocus
                        />
                    </PopoverContent>
                </Popover>
            </div>

            {/* Priority */}
            <div className="rounded-lg border border-slate-200 p-4">
                <div className="flex items-center justify-between gap-4">
                    <span className="text-sm font-medium text-slate-700">Priority</span>
                    <div className="flex gap-2">
                        {TASK_PRIORITIES.map((p) => (
                            <button
                                key={p.value}
                                onClick={() => setPriority(p.value)}
                                className={cn(
                                    'rounded-md px-3 py-1.5 text-xs font-medium transition-all',
                                    priority === p.value
                                        ? p.lightColor
                                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200',
                                )}
                            >
                                {p.label}
                            </button>
                        ))}
                    </div>
                </div>
            </div>

            {/* Task Status */}
            <div className="rounded-lg border border-slate-200 p-4">
                <div className="flex items-center justify-between gap-4">
                    <span className="text-sm font-medium text-slate-700">Status</span>
                    <div className="flex gap-2">
                        {TASK_STATUSES.map((s) => (
                            <button
                                key={s.value}
                                onClick={() => setTaskStatus(s.value)}
                                className={cn(
                                    'rounded-md px-3 py-1.5 text-xs font-medium transition-all',
                                    taskStatus === s.value
                                        ? s.lightColor
                                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200',
                                )}
                            >
                                {s.label}
                            </button>
                        ))}
                    </div>
                </div>
            </div>

            {/* Advanced Fields */}
            {showAdvanced && (
                <div className="space-y-4 rounded-lg border border-slate-200 bg-slate-50 p-4">
                    {/* Assigned Users */}
                    <div>
                        <Label className="mb-3 block text-sm font-medium text-slate-700">Assign to</Label>
                        <div className="mb-3 flex flex-wrap gap-2">
                            {assignedUsers.map((userId) => {
                                const user = getUserDetails(userId);
                                return (
                                    <Badge
                                        key={userId}
                                        variant="secondary"
                                        className="flex items-center gap-2 rounded-full border border-slate-200 bg-white py-1.5 pr-2 pl-1.5"
                                    >
                                        <Avatar className="h-6 w-6">
                                            <AvatarFallback className={cn('text-xs', currentModule.bgLight, currentModule.textColor)}>
                                                {user?.label?.charAt(0).toUpperCase() || 'U'}
                                            </AvatarFallback>
                                        </Avatar>
                                        <span className="text-sm font-medium text-slate-700">{user?.label || 'Unknown'}</span>
                                        <button
                                            onClick={() => removeAssignedUser(userId)}
                                            className="ml-1 rounded-full p-0.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600"
                                        >
                                            <X className="h-3 w-3" />
                                        </button>
                                    </Badge>
                                );
                            })}
                        </div>
                        <Popover open={showAssignPicker} onOpenChange={setShowAssignPicker}>
                            <PopoverTrigger asChild>
                                <Button variant="outline" size="sm" className="h-9 gap-2 border-dashed border-slate-300">
                                    <UserPlus className="h-4 w-4" />
                                    Assign user
                                </Button>
                            </PopoverTrigger>
                            <PopoverContent className="w-64 p-1" align="start">
                                <div className="max-h-48 overflow-y-auto">
                                    {users
                                        .filter((u) => !assignedUsers.includes(u.value))
                                        .map((user) => (
                                            <button
                                                key={user.value}
                                                onClick={() => addAssignedUser(user.value)}
                                                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-slate-50"
                                            >
                                                <Avatar className="h-8 w-8">
                                                    <AvatarFallback className="bg-blue-100 text-sm text-blue-600">
                                                        {user.label.charAt(0).toUpperCase()}
                                                    </AvatarFallback>
                                                </Avatar>
                                                <span className="font-medium">{user.label}</span>
                                            </button>
                                        ))}
                                    {users.filter((u) => !assignedUsers.includes(u.value)).length === 0 && (
                                        <p className="py-4 text-center text-sm text-slate-400">No more users available</p>
                                    )}
                                </div>
                            </PopoverContent>
                        </Popover>
                    </div>

                    {/* Description */}
                    <div>
                        <Label className="mb-3 block text-sm font-medium text-slate-700">Description</Label>
                        <Textarea
                            value={description}
                            onChange={(e) => setDescription(e.target.value)}
                            placeholder="Add description..."
                            className="min-h-25 resize-none border-slate-200"
                        />
                    </div>
                </div>
            )}
        </div>
    );
}