import { useState } from 'react';
import type { Task, User } from './data';
import { PRIORITY_COLORS } from './data';
import { Avatar } from './Shared';

interface CalendarProps {
    tasks: Task[]; currentUser: User; calMonth: { year: number; month: number }; calView: string;
    onMonthChange: (m: { year: number; month: number }) => void; onViewChange: (v: string) => void;
    onTaskClick: (t: Task) => void; onDayClick: (date: string, el: HTMLElement) => void;
    filterUser: string | null; searchQuery: string; users: User[];
}

const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const DAYS = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];

function filterTasks(tasks: Task[], user: User, filterUser: string | null, search: string) {
    let t = tasks;
    if (user.role === 'employee') t = t.filter(x => x.assignee === user.id);
    if (filterUser) t = t.filter(x => x.assignee === filterUser);
    if (search) t = t.filter(x => x.title.toLowerCase().includes(search.toLowerCase()));
    return t;
}

function getMonthDays(year: number, month: number) {
    const first = new Date(year, month, 1);
    const startDay = first.getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const prevMonthDays = new Date(year, month, 0).getDate();
    const cells: { date: Date; isCurrentMonth: boolean }[] = [];
    for (let i = startDay - 1; i >= 0; i--) cells.push({ date: new Date(year, month - 1, prevMonthDays - i), isCurrentMonth: false });
    for (let i = 1; i <= daysInMonth; i++) cells.push({ date: new Date(year, month, i), isCurrentMonth: true });
    const rem = 42 - cells.length;
    for (let i = 1; i <= rem; i++) cells.push({ date: new Date(year, month + 1, i), isCurrentMonth: false });
    return cells;
}

function getWeekDays(_year: number, _month: number) {
    const today = new Date();
    const dayOfWeek = today.getDay();
    const start = new Date(today);
    start.setDate(today.getDate() - dayOfWeek);
    const cells: Date[] = [];
    for (let i = 0; i < 7; i++) { const d = new Date(start); d.setDate(start.getDate() + i); cells.push(d); }
    return cells;
}

function dateStr(d: Date) { return d.toISOString().split('T')[0]; }
function isToday(d: Date) { const t = new Date(); return d.getDate() === t.getDate() && d.getMonth() === t.getMonth() && d.getFullYear() === t.getFullYear(); }

function TaskChip({ task, onClick, users }: { task: Task; onClick: () => void; users: User[] }) {
    const p = PRIORITY_COLORS[task.priority];
    return (
        <div className="task-chip" style={{ background: p.bg, borderLeftColor: p.color }} onClick={e => { e.stopPropagation(); onClick(); }}>
            <span className="task-chip-dot" style={{ background: p.color }} />
            <span className="task-chip-title">{task.title}</span>
            <Avatar userId={task.assignee} size={14} users={users} />
        </div>
    );
}

function MorePopover({ tasks, onTaskClick, onClose, users }: { tasks: Task[]; onTaskClick: (t: Task) => void; onClose: () => void; users: User[] }) {
    return (
        <div className="more-popover" onClick={e => e.stopPropagation()}>
            <div className="more-popover-title">{tasks.length} tasks</div>
            {tasks.map(t => <TaskChip key={t.id} task={t} onClick={() => { onTaskClick(t); onClose(); }} users={users} />)}
        </div>
    );
}

export function QuickAddPanel({ date, onAdd, onOpenFull, onClose, users }: { date: string; onAdd: (t: Partial<Task>) => void; onOpenFull: () => void; onClose: () => void; users: User[] }) {
    const [title, setTitle] = useState('');
    const [assignee, setAssignee] = useState(users[0]?.id || '');
    const [priority, setPriority] = useState<'medium' | 'low' | 'high' | 'critical'>('medium');

    const submit = () => {
        if (!title.trim()) return;
        onAdd({ title, assignee, priority, dueDate: date, status: 'todo', description: '', tags: [], subtasks: [], comments: [], activity: [] });
        setTitle('');
    };

    return (
        <div className="quick-add-panel" onClick={e => e.stopPropagation()}>
            <button className="quick-add-close" onClick={onClose}>✕</button>
            <div className="quick-add-header">📅 Add Task — {new Date(date + 'T00:00:00').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}</div>
            <input className="quick-add-input" placeholder="Task title..." value={title} autoFocus
                onChange={e => setTitle(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} />
            <div className="quick-add-row">
                <select className="quick-add-select" value={assignee} onChange={e => setAssignee(e.target.value)}>
                    {users.map(u => <option key={u.id} value={u.id}>{u.avatar} {u.name}</option>)}
                </select>
                <select className="quick-add-select" value={priority} onChange={e => setPriority(e.target.value as any)}>
                    {['critical', 'high', 'medium', 'low'].map(p => <option key={p} value={p}>{p}</option>)}
                </select>
            </div>
            <div className="quick-add-actions">
                <button className="quick-add-submit" onClick={submit}>Add Task</button>
                <button className="quick-add-link" onClick={onOpenFull}>Open Full Form</button>
            </div>
        </div>
    );
}

export function CalendarView({ tasks, currentUser, calMonth, calView, onMonthChange, onViewChange, onTaskClick, onDayClick, filterUser, searchQuery, users }: CalendarProps) {
    const [morePopover, setMorePopover] = useState<{ date: string; tasks: Task[] } | null>(null);
    const filtered = filterTasks(tasks, currentUser, filterUser, searchQuery);

    const prevMonth = () => {
        if (calView === 'week') { const d = new Date(); d.setDate(d.getDate() - 7); onMonthChange({ year: d.getFullYear(), month: d.getMonth() }); return; }
        const m = calMonth.month === 0 ? 11 : calMonth.month - 1;
        const y = calMonth.month === 0 ? calMonth.year - 1 : calMonth.year;
        onMonthChange({ year: y, month: m });
    };
    const nextMonth = () => {
        if (calView === 'week') { const d = new Date(); d.setDate(d.getDate() + 7); onMonthChange({ year: d.getFullYear(), month: d.getMonth() }); return; }
        const m = calMonth.month === 11 ? 0 : calMonth.month + 1;
        const y = calMonth.month === 11 ? calMonth.year + 1 : calMonth.year;
        onMonthChange({ year: y, month: m });
    };
    const goToday = () => { const n = new Date(); onMonthChange({ year: n.getFullYear(), month: n.getMonth() }); };

    return (
        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
            <div className="calendar-toolbar">
                <div className="cal-nav">
                    <button className="cal-nav-btn" onClick={prevMonth}>←</button>
                    <span className="cal-month-label">{MONTHS[calMonth.month]} {calMonth.year}</span>
                    <button className="cal-nav-btn" onClick={nextMonth}>→</button>
                    <button className="cal-today-btn" onClick={goToday}>Today</button>
                </div>
                <div className="cal-view-toggle">
                    <button className={`cal-view-btn ${calView === 'month' ? 'active' : ''}`} onClick={() => onViewChange('month')}>Month</button>
                    <button className={`cal-view-btn ${calView === 'week' ? 'active' : ''}`} onClick={() => onViewChange('week')}>Week</button>
                </div>
            </div>

            {calView === 'month' ? (
                <div className="month-grid" style={{ gridTemplateRows: 'auto repeat(6, 1fr)' }}>
                    {DAYS.map(d => <div key={d} className="month-grid-header">{d}</div>)}
                    {getMonthDays(calMonth.year, calMonth.month).map((cell, i) => {
                        const ds = dateStr(cell.date);
                        const dayTasks = filtered.filter(t => t.dueDate === ds);
                        const show = dayTasks.slice(0, 3);
                        const extra = dayTasks.length - 3;
                        return (
                            <div key={i} className="day-cell" onClick={e => { if (!(e.target as HTMLElement).closest('.task-chip,.more-tasks-link,.more-popover')) onDayClick(ds, e.currentTarget); }}>
                                <div className={`day-number ${isToday(cell.date) ? 'today' : ''} ${!cell.isCurrentMonth ? 'other-month' : ''}`}>
                                    {cell.date.getDate()}
                                </div>
                                <div className="day-tasks">
                                    {show.map(t => <TaskChip key={t.id} task={t} onClick={() => onTaskClick(t)} users={users} />)}
                                    {extra > 0 && (
                                        <span className="more-tasks-link" onClick={e => { e.stopPropagation(); setMorePopover({ date: ds, tasks: dayTasks }); }}>
                                            +{extra} more
                                        </span>
                                    )}
                                </div>
                                {morePopover?.date === ds && <MorePopover tasks={morePopover.tasks} onTaskClick={onTaskClick} onClose={() => setMorePopover(null)} users={users} />}
                            </div>
                        );
                    })}
                </div>
            ) : (
                <div className="week-grid" style={{ gridTemplateRows: 'auto 1fr' }}>
                    {getWeekDays(calMonth.year, calMonth.month).map((d, i) => (
                        <div key={i} className={`week-header-cell ${isToday(d) ? 'today' : ''}`}>
                            {DAYS[d.getDay()]} {d.getDate()}
                        </div>
                    ))}
                    {getWeekDays(calMonth.year, calMonth.month).map((d, i) => {
                        const ds = dateStr(d);
                        const dayTasks = filtered.filter(t => t.dueDate === ds);
                        return (
                            <div key={i} className="week-day-cell" onClick={e => { if (!(e.target as HTMLElement).closest('.task-chip,.week-chip')) onDayClick(ds, e.currentTarget); }}>
                                {dayTasks.map(t => {
                                    const p = PRIORITY_COLORS[t.priority];
                                    return (
                                        <div key={t.id} className="week-chip" style={{ background: p.bg, borderLeftColor: p.color }} onClick={e => { e.stopPropagation(); onTaskClick(t); }}>
                                            <span className="task-chip-dot" style={{ background: p.color }} />
                                            <span className="task-chip-title">{t.title}</span>
                                        </div>
                                    );
                                })}
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
}