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

interface NoteTabProps {
    date: string;
    setDate: (value: string) => void;
    noteStatus: number;
    setNoteStatus: (value: number) => void;
    notePeople: string[];
    setNotePeople: (value: string[]) => void;
    users: any[];
    showNotePeoplePicker: boolean;
    setShowNotePeoplePicker: (value: boolean) => void;
    getUserDetails: (userId: string) => any;
    showAdvanced: boolean;
    setShowAdvanced: (value: boolean) => void;
    description: string;
    setDescription: (value: string) => void;
    NOTE_STATUSES: any[];
}

export function NoteTab({
    date, setDate, noteStatus, setNoteStatus,
    notePeople, setNotePeople, users,
    showNotePeoplePicker, setShowNotePeoplePicker,
    getUserDetails, showAdvanced, setShowAdvanced,
    description, setDescription, NOTE_STATUSES
}: NoteTabProps) {
    const currentModule = {
        textColor: 'text-emerald-600',
        bgLight: 'bg-emerald-50',
        borderColor: 'border-emerald-200',
    };

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

    return (
        <div className="space-y-3">
            {/* Date */}
            <div className="rounded-lg border border-slate-200 p-4">
                <Label className="mb-3 block font-medium text-slate-700">
                    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>

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

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

            {/* 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">Content</Label>
                    <Textarea
                        value={description}
                        onChange={(e) => setDescription(e.target.value)}
                        placeholder="Write your note..."
                        className="min-h-25 resize-none border-slate-200"
                    />
                </div>
            )}
        </div>
    );
}