/* eslint-disable */
// Task Board — Kanban with three columns and click-to-move

const SEED_TASKS = [
  { id: 1, title: "Pick up dry cleaning",          column: "todo",     priority: "medium", dueDate: "May 18, 2026", tags: ["Errands"] },
  { id: 2, title: "Book dentist appointments",     column: "todo",     priority: "high",   dueDate: null,           tags: [] },
  { id: 3, title: "Order Mom's birthday cake",     column: "todo",     priority: "high",   dueDate: "May 22, 2026", tags: ["Birthday"] },
  { id: 4, title: "Plan summer trip to Goa",       column: "progress", priority: "medium", dueDate: "Jun 1, 2026",  tags: ["Travel"] },
  { id: 5, title: "Service the AC",                column: "progress", priority: "low",    dueDate: null,           tags: ["Home"] },
  { id: 6, title: "Renew car insurance",           column: "done",     priority: "low",    dueDate: null,           tags: ["Insurance"] },
  { id: 7, title: "File April expenses",           column: "done",     priority: "medium", dueDate: null,           tags: [] },
];

const PRIORITY_TONE = { low: "success", medium: "warn", high: "danger" };
const WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];

const RecurrenceEditor = ({ value, onChange }) => {
  const rec = value || { pattern: "", interval: 1, daysOfWeek: [], dayOfMonth: 1, endDate: "" };
  const update = (k, v) => onChange({ ...rec, [k]: v });
  const toggleDay = (d) => {
    const days = rec.daysOfWeek || [];
    update("daysOfWeek", days.includes(d) ? days.filter(x => x !== d) : [...days, d]);
  };
  return (
    <div className="space-y-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
      <div>
        <Label>Recurrence Pattern</Label>
        <Select value={rec.pattern} onChange={e => onChange({ ...rec, pattern: e.target.value, interval: 1, daysOfWeek: [], dayOfMonth: 1 })}>
          <option value="">None</option>
          <option value="daily">Daily</option>
          <option value="weekly">Weekly</option>
          <option value="monthly">Monthly</option>
          <option value="yearly">Yearly</option>
        </Select>
      </div>
      {rec.pattern && (
        <div>
          <Label>Every</Label>
          <div className="flex items-center gap-2">
            <Input type="number" min="1" max="99" value={rec.interval} onChange={e => update("interval", parseInt(e.target.value) || 1)} className="!w-20" />
            <span className="text-sm text-gray-600 dark:text-gray-400">
              {rec.pattern === "daily" ? "day(s)" : rec.pattern === "weekly" ? "week(s)" : rec.pattern === "monthly" ? "month(s)" : "year(s)"}
            </span>
          </div>
        </div>
      )}
      {rec.pattern === "weekly" && (
        <div>
          <Label>On these days</Label>
          <div className="flex gap-1">
            {WEEKDAY_LABELS.map((label, i) => (
              <button
                key={i}
                type="button"
                onClick={() => toggleDay(i)}
                className={"w-9 h-9 rounded-full text-xs font-medium transition-colors " +
                  ((rec.daysOfWeek || []).includes(i)
                    ? "bg-blue-600 text-white"
                    : "bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-500")}
              >{label}</button>
            ))}
          </div>
        </div>
      )}
      {rec.pattern === "monthly" && (
        <div>
          <Label>Day of month</Label>
          <Input type="number" min="1" max="31" value={rec.dayOfMonth} onChange={e => update("dayOfMonth", parseInt(e.target.value) || 1)} className="!w-24" />
        </div>
      )}
      {rec.pattern && (
        <div>
          <Label>End date (optional)</Label>
          <Input type="date" value={rec.endDate || ""} onChange={e => update("endDate", e.target.value)} />
        </div>
      )}
    </div>
  );
};

const getRecurringDates = (task, year, month) => {
  const rec = task.recurrence;
  if (!rec || !rec.pattern) return [];
  const startStr = task.dueDate;
  if (!startStr) return [];
  const sp = startStr.split("-");
  if (sp.length !== 3) return [];
  const start = new Date(parseInt(sp[0]), parseInt(sp[1]) - 1, parseInt(sp[2]));
  if (isNaN(start)) return [];
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const ep = rec.endDate ? rec.endDate.split("-") : null;
  const endLimit = ep && ep.length === 3 ? new Date(parseInt(ep[0]), parseInt(ep[1]) - 1, parseInt(ep[2])) : null;
  const dates = [];

  for (let day = 1; day <= daysInMonth; day++) {
    const d = new Date(year, month, day);
    if (d < start) continue;
    if (endLimit && d > endLimit) continue;
    const diffTime = d.getTime() - start.getTime();
    const diffDays = Math.round(diffTime / 86400000);

    if (rec.pattern === "daily") {
      if (diffDays % (rec.interval || 1) === 0) dates.push(day);
    } else if (rec.pattern === "weekly") {
      const diffWeeks = Math.floor(diffDays / 7);
      if (diffWeeks % (rec.interval || 1) === 0 && (rec.daysOfWeek || []).includes(d.getDay())) dates.push(day);
    } else if (rec.pattern === "monthly") {
      const diffMonths = (d.getFullYear() - start.getFullYear()) * 12 + (d.getMonth() - start.getMonth());
      if (diffMonths >= 0 && diffMonths % (rec.interval || 1) === 0 && day === (rec.dayOfMonth || start.getDate())) dates.push(day);
    } else if (rec.pattern === "yearly") {
      const diffYears = d.getFullYear() - start.getFullYear();
      if (diffYears >= 0 && diffYears % (rec.interval || 1) === 0 && d.getMonth() === start.getMonth() && day === start.getDate()) dates.push(day);
    }
  }
  return dates;
};

const TaskCard = ({ task, onMove, onDelete, onEdit, approvedUsers }) => {
  const prevColumn = task.column === "done" ? "progress" : task.column === "progress" ? "todo" : null;
  const nextColumn = task.column === "todo" ? "progress" : task.column === "progress" ? "done" : null;
  return (
    <div className="bg-gray-50 dark:bg-gray-700 rounded p-4 border border-gray-200 dark:border-gray-600">
      <div className="flex items-center gap-2 mb-2">
        <h4 className="font-semibold text-gray-900 dark:text-white">{task.title}</h4>
        {task.recurrence?.pattern && <span title={"Recurring: " + task.recurrence.pattern + " every " + (task.recurrence.interval || 1)} className="text-sm">🔁</span>}
      </div>
      {task.dueDate && (
        <p className="text-xs text-gray-600 dark:text-gray-400 mb-2">📅 {task.dueDate}</p>
      )}
      {task.createdBy && (
        <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">👤 {task.createdBy}</p>
      )}
      {task.assignees?.length > 0 && (
        <p className="text-xs text-blue-600 dark:text-blue-400 mb-2">
          🔔 {task.assignees.map(a => {
            if (typeof a === 'object' && a.name) return a.name;
            const u = (approvedUsers || []).find(u => u.uid === a);
            return u ? (u.displayName || u.email) : a;
          }).join(', ')}
        </p>
      )}
      <div className="flex gap-2 flex-wrap mb-3">
        <ChipSq tone={PRIORITY_TONE[task.priority]}>{task.priority}</ChipSq>
        {(Array.isArray(task.tags) ? task.tags : []).map((t) => <ChipSq key={t} tone="info">{t}</ChipSq>)}
      </div>
      <div className="flex gap-3 text-xs">
        {prevColumn && (
          <button onClick={() => onMove(task.id, prevColumn)} className="text-gray-500 dark:text-gray-400 hover:underline">
            ← Back
          </button>
        )}
        {nextColumn && (
          <button onClick={() => onMove(task.id, nextColumn)} className="text-blue-600 dark:text-blue-400 hover:underline">
            → Move
          </button>
        )}
        <button onClick={() => onEdit(task)} className="text-blue-600 dark:text-blue-400 hover:underline">Edit</button>
        <button onClick={() => onDelete(task.id)} className="text-red-600 dark:text-red-400 hover:underline">Delete</button>
      </div>
    </div>
  );
};

const Column = ({ title, accent, tasks, onMove, onDelete, onEdit, approvedUsers }) => (
  <div className={"bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 " + accent}>
    <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
      {title} <span className="text-sm font-normal text-gray-500 dark:text-gray-400">({tasks.length})</span>
    </h3>
    <div className="space-y-3 min-h-[12rem]">
      {tasks.length === 0 && (
        <p className="text-xs text-gray-400 dark:text-gray-500 text-center py-6">Nothing here yet.</p>
      )}
      {tasks.map((t) => <TaskCard key={t.id} task={t} onMove={onMove} onDelete={onDelete} onEdit={onEdit} approvedUsers={approvedUsers} />)}
    </div>
  </div>
);

const AssigneeSelector = ({ value, onChange, approvedUsers }) => {
  const selected = value || [];
  const getUid = (s) => (typeof s === 'object' ? s.uid : s);
  const isSelected = (uid) => selected.some(s => getUid(s) === uid);
  const toggle = (u) => {
    if (isSelected(u.uid)) {
      onChange(selected.filter(s => getUid(s) !== u.uid));
    } else {
      onChange([...selected, { uid: u.uid, name: u.displayName || u.email || u.uid }]);
    }
  };
  if (!approvedUsers.length) return (
    <p className="text-xs text-gray-400 dark:text-gray-500 italic">No approved family members found.</p>
  );
  return (
    <div className="flex flex-wrap gap-2">
      {approvedUsers.map(u => (
        <button
          key={u.uid}
          type="button"
          onClick={() => toggle(u)}
          className={"px-3 py-1 rounded-full text-xs font-medium border transition-colors " +
            (isSelected(u.uid)
              ? "bg-blue-600 border-blue-600 text-white"
              : "bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-300 hover:border-blue-400")}
        >
          {u.displayName || u.email}
        </button>
      ))}
    </div>
  );
};

const TaskBoardScreen = () => {
  const [tasks, setTasks] = React.useState(() => {
    const stored = Storage.getArray('familyhub_kanban', 'tasks');
    return stored;
  });
  const [approvedUsers, setApprovedUsers] = React.useState([]);
  const [showAdd, setShowAdd] = React.useState(false);
  const [editTask, setEditTask] = React.useState(null);
  const emptyRec = { pattern: "", interval: 1, daysOfWeek: [], dayOfMonth: 1, endDate: "" };
  const [draft, setDraft] = React.useState({ title: "", priority: "medium", dueDate: "", tags: "", assignees: [], recurrence: { ...emptyRec } });

  React.useEffect(() => {
    const db = window._db;
    if (!db) return;
    db.collection('users').where('status', '==', 'approved').get()
      .then(snap => setApprovedUsers(snap.docs.map(d => ({ uid: d.id, ...d.data() }))))
      .catch(() => {});
  }, []);

  const saveTasks = (newTasks) => { setTasks(newTasks); Storage.set('familyhub_kanban', { tasks: newTasks }); };
  const move = (id, col) => { const updated = tasks.map(t => t.id === id ? { ...t, column: col } : t); saveTasks(updated); };
  const remove = (id) => { if (!window.confirm("Are you sure you want to delete this task?")) return; const updated = tasks.filter(t => t.id !== id); saveTasks(updated); };
  const add = () => {
    if (!draft.title.trim()) return;
    const updated = [...tasks, {
      id: Date.now(), title: draft.title.trim(), column: "todo",
      priority: draft.priority, dueDate: draft.dueDate || null, tags: draft.tags ? draft.tags.split(',').map(t => t.trim()).filter(Boolean) : [],
      assignees: draft.assignees || [],
      recurrence: draft.recurrence?.pattern ? draft.recurrence : null,
      createdBy: firebase.auth().currentUser?.displayName || firebase.auth().currentUser?.email || 'Unknown',
    }];
    saveTasks(updated);
    setDraft({ title: "", priority: "medium", dueDate: "", tags: "", assignees: [], recurrence: { ...emptyRec } });
    setShowAdd(false);
  };
  const startEdit = (task) => {
    setEditTask({ ...task, tags: Array.isArray(task.tags) ? task.tags.join(', ') : (task.tags || ''), dueDate: task.dueDate || '', assignees: task.assignees || [], recurrence: task.recurrence || { ...emptyRec } });
  };
  const saveEdit = () => {
    if (!editTask.title.trim()) return;
    const updated = tasks.map(t => t.id === editTask.id ? { ...t, title: editTask.title.trim(), priority: editTask.priority, dueDate: editTask.dueDate || null, tags: editTask.tags ? editTask.tags.split(',').map(x => x.trim()).filter(Boolean) : [], assignees: editTask.assignees || [], recurrence: editTask.recurrence?.pattern ? editTask.recurrence : null } : t);
    saveTasks(updated);
    setEditTask(null);
  };

  const todo = tasks.filter(t => t.column === "todo");
  const inProgress = tasks.filter(t => t.column === "progress");
  const done = tasks.filter(t => t.column === "done");

  return (
    <section className="p-4 md:p-6">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Task Board</h2>
        <BtnPrimary onClick={() => setShowAdd(true)}>+ Add Task</BtnPrimary>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Column title="To Do"       accent="border-blue-500"   tasks={todo}       onMove={move} onDelete={remove} onEdit={startEdit} approvedUsers={approvedUsers} />
        <Column title="In Progress" accent="border-yellow-500" tasks={inProgress} onMove={move} onDelete={remove} onEdit={startEdit} approvedUsers={approvedUsers} />
        <Column title="Done"        accent="border-green-500"  tasks={done}       onMove={move} onDelete={remove} onEdit={startEdit} approvedUsers={approvedUsers} />
      </div>

      {editTask && (
        <Modal title="Edit Task" onClose={() => setEditTask(null)} onSubmit={saveEdit} submitLabel="Save">
          <div className="space-y-4">
            <div><Label required>Task Title</Label><Input value={editTask.title} onChange={e => setEditTask({...editTask, title: e.target.value})} autoFocus /></div>
            <div><Label>Priority</Label><Select value={editTask.priority} onChange={e => setEditTask({...editTask, priority: e.target.value})}><option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option></Select></div>
            <div><Label>Due Date</Label><Input type="date" value={editTask.dueDate} onChange={e => setEditTask({...editTask, dueDate: e.target.value})} /></div>
            <div><Label>Tags (comma separated)</Label><Input value={editTask.tags} onChange={e => setEditTask({...editTask, tags: e.target.value})} /></div>
            <div>
              <Label>Send Reminders To</Label>
              <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Select who receives email reminders for this task. Leave empty to notify all approved members.</p>
              <AssigneeSelector value={editTask.assignees} onChange={uids => setEditTask({...editTask, assignees: uids})} approvedUsers={approvedUsers} />
            </div>
            <RecurrenceEditor value={editTask.recurrence} onChange={rec => setEditTask({...editTask, recurrence: rec})} />
          </div>
        </Modal>
      )}

      {showAdd && (
        <Modal title="Add New Task" onClose={() => setShowAdd(false)} onSubmit={add} submitLabel="Add Task">
          <div className="space-y-4">
            <div>
              <Label required>Task Title</Label>
              <Input
                placeholder="What needs to be done?"
                value={draft.title}
                onChange={(e) => setDraft({ ...draft, title: e.target.value })}
                autoFocus
              />
            </div>
            <div>
              <Label>Priority</Label>
              <Select
                value={draft.priority}
                onChange={(e) => setDraft({ ...draft, priority: e.target.value })}
              >
                <option value="low">Low</option>
                <option value="medium">Medium</option>
                <option value="high">High</option>
              </Select>
            </div>
            <div>
              <Label>Due Date</Label>
              <Input type="date" value={draft.dueDate} onChange={(e) => setDraft({ ...draft, dueDate: e.target.value })} />
            </div>
            <div>
              <Label>Tags (comma separated)</Label>
              <Input placeholder="Errands, Home, Travel..." value={draft.tags} onChange={(e) => setDraft({ ...draft, tags: e.target.value })} />
            </div>
            <div>
              <Label>Send Reminders To</Label>
              <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Select who receives email reminders for this task. Leave empty to notify all approved members.</p>
              <AssigneeSelector value={draft.assignees} onChange={uids => setDraft({...draft, assignees: uids})} approvedUsers={approvedUsers} />
            </div>
            <RecurrenceEditor value={draft.recurrence} onChange={rec => setDraft({...draft, recurrence: rec})} />
          </div>
        </Modal>
      )}
    </section>
  );
};

window.TaskBoardScreen = TaskBoardScreen;