/* eslint-disable @typescript-eslint/no-explicit-any */
import React from 'react';

interface RecurringTasksManagerProps {
    isOpen: boolean;
    onClose: () => void;
    tasks: any[];
}

export default function RecurringTasksManager({ isOpen, onClose, tasks }: RecurringTasksManagerProps) {
    if (!isOpen) return null;

    // Filter tasks that are recurring
    const recurringTasks = tasks.filter(t => t.isRecurring);

    return (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" onClick={onClose}>
            <div className="bg-white rounded-lg shadow-2xl w-[800px] max-w-full h-[600px] flex flex-col" onClick={e => e.stopPropagation()}>
                <div className="p-6 flex items-center justify-between border-b border-gray-100">
                    <h2 className="text-xl font-bold text-gray-800">Recurring to-dos</h2>
                    <button onClick={onClose} className="text-gray-400 hover:text-gray-600 font-bold text-xl">
                        &times;
                    </button>
                </div>

                <div className="flex-1 overflow-y-auto p-8">
                    {recurringTasks.length === 0 ? (
                        <div className="flex flex-col items-start max-w-lg">
                            <p className="text-gray-600 mb-6">
                                You don&apos;t have any recurring to-dos yet.
                            </p>

                            <button className="bg-[#333] text-white px-4 py-2 rounded text-sm font-medium flex items-center gap-2 hover:bg-black transition-colors mb-8">
                                <span>+</span> Recurring to-do
                            </button>

                            <p className="text-gray-800 font-medium mb-4">Or, type a frequency to the end of a to-do.</p>

                            <div className="bg-gray-100 p-8 rounded mb-8 w-full flex items-center justify-center">
                                <div className="bg-white p-6 shadow-sm rounded text-center w-64">
                                    <div className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">OCT 5, 2023</div>
                                    <div className="text-xl font-bold text-gray-900 uppercase tracking-wider mb-4">THURSDAY</div>
                                    <div className="h-6 w-1 bg-black animate-pulse mx-auto"></div>
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-8 text-sm w-full">
                                <div>
                                    <h4 className="italic text-gray-500 mb-2">Frequencies:</h4>
                                    <ul className="text-gray-500 italic space-y-1">
                                        <li>every day</li>
                                        <li>every week</li>
                                        <li>every other week</li>
                                        <li>every month</li>
                                        <li>every year</li>
                                    </ul>
                                </div>
                                <div>
                                    <h4 className="italic text-gray-500 mb-2">Examples:</h4>
                                    <ul className="text-gray-500 italic space-y-1">
                                        <li>Brush teeth every day</li>
                                        <li>Management meeting every week</li>
                                        <li>Piano lessons every other week</li>
                                        <li>Pay rent every month</li>
                                        <li>Garret&apos;s birthday every year</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className="space-y-4">
                            {recurringTasks.map(task => (
                                <div key={task.id} className="flex items-center justify-between p-4 bg-gray-50 rounded border border-gray-100">
                                    <div>
                                        <div className="font-medium text-gray-900">{task.title}</div>
                                        <div className="text-xs text-gray-500 mt-1">
                                            Repeats every {task.recurrenceInterval} {task.recurrenceUnit}
                                        </div>
                                    </div>
                                    <button className="text-red-500 text-sm hover:underline">Stop Details</button>
                                </div>
                            ))}
                        </div>
                    )}
                </div>

                <div className="p-4 border-t border-gray-100 flex justify-end">
                    <button
                        onClick={onClose}
                        className="w-10 h-10 bg-[#333] rounded-full flex items-center justify-center text-white hover:bg-black transition-colors text-xl font-bold"
                    >
                        +
                    </button>
                </div>
            </div>
        </div>
    );
}