// Main app: role switcher + user picker + view router

function App() {
  const [role, setRole] = useState('member');
  const [currentMemberId, setCurrentMemberId] = useState('u1');
  const [memberPickerOpen, setMemberPickerOpen] = useState(false);
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);

  const currentMember = MEMBERS.find((m) => m.id === currentMemberId);

  // Load tasks from API on mount
  useEffect(() => {
    fetch('/api/tasks')
      .then((r) => r.json())
      .then((data) => {
        // DB uses snake_case (owner_id); frontend expects ownerId
        setTasks(data.map(({ owner_id, desc, ...rest }) => ({ ...rest, ownerId: owner_id, desc: desc || '' })));
      })
      .catch(() => setTasks(SEED_TASKS)) // fallback to seed data if API unavailable
      .finally(() => setLoading(false));
  }, []);

  // close dropdown when clicking outside
  useEffect(() => {
    function onClick(e) {
      if (!e.target.closest('.member-picker') && !e.target.closest('.dropdown')) {
        setMemberPickerOpen(false);
      }
    }
    if (memberPickerOpen) {
      document.addEventListener('click', onClick);
      return () => document.removeEventListener('click', onClick);
    }
  }, [memberPickerOpen]);

  async function handleAddTask(t) {
    const payload = { id: t.id, title: t.title, desc: t.desc, status: t.status, deadline: t.deadline, owner_id: t.ownerId };
    await fetch('/api/tasks', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
    setTasks((prev) => [{ ...t }, ...prev]);
  }

  async function handleUpdateTask(t) {
    const payload = { title: t.title, desc: t.desc, status: t.status, deadline: t.deadline, owner_id: t.ownerId };
    await fetch(`/api/tasks/${t.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
    setTasks((prev) => prev.map((x) => (x.id === t.id ? t : x)));
  }

  async function handleDeleteTask(t) {
    await fetch(`/api/tasks/${t.id}`, { method: 'DELETE' });
    setTasks((prev) => prev.filter((x) => x.id !== t.id));
  }

  if (loading) {
    return (
      <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', background: 'var(--bg)' }}>
        <div style={{ textAlign: 'center', color: 'var(--text-soft)' }}>
          <div style={{ fontSize: 28, marginBottom: 12 }}>⏳</div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>กำลังโหลด...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="app">
      <header className="topbar">
        <div className="topbar-left">
          <div className="brand">
            <div className="brand-mark">T</div>
            TeamTodo
          </div>
          <div className="brand-sub">ระบบติดตามงานของทีม</div>
        </div>

        <div className="topbar-right">
          <div style={{ fontSize: 11, color: 'var(--text-soft)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
            มุมมอง
          </div>
          <div className="role-switch">
            <button className={role === 'member' ? 'active' : ''} onClick={() => setRole('member')}>
              ลูกทีม
            </button>
            <button className={role === 'manager' ? 'active' : ''} onClick={() => setRole('manager')}>
              หัวหน้าทีม
            </button>
          </div>

          {role === 'member' ? (
            <div className="member-picker" onClick={(e) => { e.stopPropagation(); setMemberPickerOpen(!memberPickerOpen); }}>
              <Avatar member={currentMember} size="sm" />
              <span>{currentMember.nickname}</span>
              <span className="caret"><IconChevronDown /></span>
              {memberPickerOpen && (
                <div className="dropdown">
                  <div style={{ fontSize: 11, color: 'var(--text-soft)', fontWeight: 600, padding: '6px 10px 4px', letterSpacing: '0.04em', textTransform: 'uppercase' }}>
                    สลับเป็นลูกทีมคนอื่น
                  </div>
                  {MEMBERS.map((m) => (
                    <div
                      key={m.id}
                      className={`dropdown-item ${m.id === currentMemberId ? 'active' : ''}`}
                      onClick={() => { setCurrentMemberId(m.id); setMemberPickerOpen(false); }}
                    >
                      <Avatar member={m} size="sm" />
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 13, fontWeight: 600 }}>{m.nickname}</div>
                        <div style={{ fontSize: 11, color: 'var(--text-soft)', fontWeight: 500 }}>{m.role}</div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ) : (
            <div className="member-picker" style={{ cursor: 'default' }}>
              <Avatar member={MANAGER} size="sm" />
              <span>{MANAGER.nickname}</span>
            </div>
          )}
        </div>
      </header>

      {role === 'member' ? (
        <MemberView
          currentUser={currentMember}
          tasks={tasks}
          onAddTask={handleAddTask}
          onUpdateTask={handleUpdateTask}
          onDeleteTask={handleDeleteTask}
        />
      ) : (
        <ManagerView tasks={tasks} members={MEMBERS} />
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);