import React, { useState } from 'react';

interface RecurrenceModalProps {
    task: any;
    onClose: () => void;
    onSave: (taskId: string, recurrence: any) => Promise<void>;
}

export default function RecurrenceModal({ task, onClose, onSave }: RecurrenceModalProps) {
    const [isRecurring, setIsRecurring] = useState(task.isRecurring || false);
    const [interval, setInterval] = useState(task.recurrenceInterval || 1);
    const [unit, setUnit] = useState(task.recurrenceUnit || 'weeks');
    const [endDate, setEndDate] = useState(task.recurrenceEndDate ? new Date(task.recurrenceEndDate).toISOString().split('T')[0] : '');
    const [isSaving, setIsSaving] = useState(false);

    const handleSave = async () => {
        setIsSaving(true);
        try {
            await onSave(task.id, {
                isRecurring,
                recurrenceInterval: isRecurring ? interval : null,
                recurrenceUnit: isRecurring ? unit : null,
                recurrenceEndDate: isRecurring && endDate ? new Date(endDate) : null
            });
            onClose();
        } catch (error) {
            console.error('Failed to save recurrence', error);
            setIsSaving(false);
        }
    };

    return (
        <div className="weekly-modal-overlay" onClick={onClose}>
            <div className="weekly-modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '400px' }}>
                <h3 style={{ marginBottom: '1.5rem' }}>Recurring Task</h3>

                <div style={{ marginBottom: '1.5rem' }}>
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
                        <input
                            type="checkbox"
                            id="isRecurring"
                            checked={isRecurring}
                            onChange={e => setIsRecurring(e.target.checked)}
                            style={{ width: '18px', height: '18px', marginRight: '10px' }}
                        />
                        <label htmlFor="isRecurring" style={{ fontSize: '1rem', fontWeight: 500 }}>Enable Recurrence</label>
                    </div>

                    {isRecurring && (
                        <div style={{ paddingLeft: '28px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
                            <div>
                                <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', color: '#666' }}>Repeat every</label>
                                <div style={{ display: 'flex', gap: '8px' }}>
                                    <input
                                        type="number"
                                        min="1"
                                        value={interval}
                                        onChange={e => setInterval(parseInt(e.target.value) || 1)}
                                        style={{ width: '60px', padding: '6px', borderRadius: '4px', border: '1px solid #ddd' }}
                                    />
                                    <select
                                        value={unit}
                                        onChange={e => setUnit(e.target.value)}
                                        style={{ flex: 1, padding: '6px', borderRadius: '4px', border: '1px solid #ddd' }}
                                    >
                                        <option value="days">Days</option>
                                        <option value="weeks">Weeks</option>
                                        <option value="months">Months</option>
                                        <option value="years">Years</option>
                                    </select>
                                </div>
                            </div>

                            <div>
                                <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', color: '#666' }}>End Date (Optional)</label>
                                <input
                                    type="date"
                                    value={endDate}
                                    onChange={e => setEndDate(e.target.value)}
                                    style={{ width: '100%', padding: '6px', borderRadius: '4px', border: '1px solid #ddd' }}
                                />
                            </div>
                        </div>
                    )}
                </div>

                <div className="weekly-modal-actions">
                    <button
                        className="weekly-btn weekly-btn-primary"
                        onClick={handleSave}
                        disabled={isSaving}
                    >
                        {isSaving ? 'Saving...' : 'Save'}
                    </button>
                    <button
                        className="weekly-btn weekly-btn-secondary"
                        onClick={onClose}
                        disabled={isSaving}
                    >
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    );
}