// Member view: personal Kanban board

function MemberView({ currentUser, tasks, onAddTask, onUpdateTask, onDeleteTask }) {
  const [modalState, setModalState] = useState(null); // { mode: 'create'|'edit', task, initialStatus }

  const myTasks = useMemo(
    () => tasks.filter((t) => t.ownerId === currentUser.id),
    [tasks, currentUser]
  );

  const columns = [
    { key: 'todo', label: 'รอดำเนินการ', dot: '#8B8B98' },
    { key: 'inprogress', label: 'กำลังทำ', dot: '#F59E0B' },
    { key: 'done', label: 'เสร็จแล้ว', dot: '#10B981' },
  ];

  function openCreate(status) {
    setModalState({ mode: 'create', task: { status, ownerId: currentUser.id }, initialStatus: status });
  }
  function openEdit(task) {
    setModalState({ mode: 'edit', task });
  }
  function handleSave(updatedTask) {
    if (modalState.mode === 'create') {
      onAddTask({ ...updatedTask, id: 't' + Date.now(), ownerId: currentUser.id });
    } else {
      onUpdateTask(updatedTask);
    }
    setModalState(null);
  }
  function handleDelete(task) {
    onDeleteTask(task);
    setModalState(null);
  }

  // overall stats
  const total = myTasks.length;
  const doneCount = myTasks.filter((t) => t.status === 'done').length;
  const overdueCount = myTasks.filter(isOverdue).length;

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">สวัสดี, {currentUser.nickname} 👋</h1>
          <p className="page-sub">
            งานของคุณทั้งหมด {total} ชิ้น · เสร็จแล้ว {doneCount}
            {overdueCount > 0 && <span style={{ color: 'var(--overdue)', fontWeight: 600 }}> · เลยกำหนด {overdueCount}</span>}
          </p>
        </div>
        <button className="btn btn-primary" onClick={() => openCreate('todo')}>
          <IconPlus />
          เพิ่มงานใหม่
        </button>
      </div>

      <div className="kanban">
        {columns.map((col) => {
          const cards = myTasks.filter((t) => t.status === col.key);
          // sort: overdue first, then by deadline
          cards.sort((a, b) => {
            if (col.key !== 'done') {
              const ao = isOverdue(a) ? 0 : 1;
              const bo = isOverdue(b) ? 0 : 1;
              if (ao !== bo) return ao - bo;
            }
            return (a.deadline || '').localeCompare(b.deadline || '');
          });
          return (
            <div className="kanban-col" key={col.key}>
              <div className="kanban-col-header">
                <div className="kanban-col-title">
                  <span className="dot" style={{ background: col.dot }} />
                  {col.label}
                </div>
                <span className="kanban-col-count">{cards.length}</span>
              </div>
              <div className="kanban-cards">
                {cards.length === 0 ? (
                  <div className="empty-col">ยังไม่มีงาน</div>
                ) : (
                  cards.map((task) => (
                    <TaskCard key={task.id} task={task} onClick={openEdit} />
                  ))
                )}
              </div>
              <button className="kanban-add-btn" onClick={() => openCreate(col.key)}>
                <IconPlus size={12} />
                เพิ่มงาน
              </button>
            </div>
          );
        })}
      </div>

      {modalState && (
        <TaskModal
          task={modalState.task}
          mode={modalState.mode}
          onClose={() => setModalState(null)}
          onSave={handleSave}
          onDelete={modalState.mode === 'edit' ? handleDelete : null}
        />
      )}
    </div>
  );
}

window.MemberView = MemberView;