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 { Bell, CalendarIcon, Clock, UserPlus, X } from 'lucide-react';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { format } from 'date-fns';
import * as React from 'react';

interface ReminderTabProps {
    date: string;
    setDate: (value: string) => void;
    startTime: string;
    setStartTime: (value: string) => void;
    reminderStatus: number;
    setReminderStatus: (value: number) => void;
    selectedParticipants: string[];
    users: any[];
    showParticipantPicker: boolean;
    setShowParticipantPicker: (value: boolean) => void;
    addParticipant: (userId: string) => void;
    removeParticipant: (userId: string) => void;
    getUserDetails: (userId: string) => any;
    showAdvanced: boolean;
    setShowAdvanced: (value: boolean) => void;
    description: string;
    setDescription: (value: string) => void;
    REMINDER_STATUSES: any[];
}

export function ReminderTab({
    date, setDate, startTime, setStartTime,
    reminderStatus, setReminderStatus,
    selectedParticipants, users, showParticipantPicker, setShowParticipantPicker,
    addParticipant, removeParticipant, getUserDetails,
    showAdvanced, setShowAdvanced, description, setDescription,
    REMINDER_STATUSES
}: ReminderTabProps) {
    const currentModule = {
        textColor: 'text-amber-600',
        bgLight: 'bg-amber-50',
        borderColor: 'border-amber-200',
    };

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

    return (
        <div className="space-y-3">
            {/* When (Date & Time) */}
            <div className="rounded-lg border border-slate-200 p-4">
                <Label className="mb-3 block text-sm font-medium text-slate-700">When</Label>
                <div className="flex flex-col gap-2 sm:flex-row">
                    <Popover open={showDatePicker} onOpenChange={setShowDatePicker}>
                        <PopoverTrigger asChild>
                            <Button
                                variant="outline"
                                className={cn(
                                    'h-10 flex-1 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 className="relative w-full sm:w-36">
                        <Clock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                        <Input
                            type="time"
                            value={startTime}
                            onChange={(e) => setStartTime(e.target.value)}
                            className="h-10 border-slate-200 pl-10"
                        />
                    </div>
                </div>
            </div>

            {/* People */}
            <div>
                <Label className="mb-3 block text-sm font-medium text-slate-700">People</Label>
                <div className="mb-3 flex flex-wrap gap-2">
                    {selectedParticipants.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={() => removeParticipant(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={showParticipantPicker} onOpenChange={setShowParticipantPicker}>
                    <PopoverTrigger asChild>
                        <Button variant="outline" size="sm" className="h-9 gap-2 border-dashed border-slate-300">
                            <UserPlus className="h-4 w-4" />
                            Add people
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-64 p-1" align="start">
                        <div className="max-h-48 overflow-y-auto">
                            {users
                                .filter((u) => !selectedParticipants.includes(u.value))
                                .map((user) => (
                                    <button
                                        key={user.value}
                                        onClick={() => addParticipant(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-amber-100 text-sm text-amber-600">
                                                {user.label.charAt(0).toUpperCase()}
                                            </AvatarFallback>
                                        </Avatar>
                                        <span className="font-medium">{user.label}</span>
                                    </button>
                                ))}
                            {users.filter((u) => !selectedParticipants.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>

            {/* Reminder Status */}
            <div className="rounded-lg border border-slate-200 p-4">
                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
                    <div className="flex items-center gap-2">
                        <Bell className="h-4 w-4 text-slate-400" />
                        <span className="text-sm font-medium text-slate-700">Status</span>
                    </div>
                    <div className="flex flex-wrap gap-2">
                        {REMINDER_STATUSES.map((s) => (
                            <button
                                key={s.value}
                                onClick={() => setReminderStatus(s.value)}
                                className={cn(
                                    'rounded-md px-3 py-1.5 text-xs font-medium transition-all whitespace-nowrap',
                                    reminderStatus === 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="rounded-lg border border-slate-200 bg-slate-50 p-4">
                    <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>
    );
}