Refactor a messy React component into clean, reusable pieces

Refactor the following React component. Do not change its visible behavior — this is a structural refactor, not a feature change.

[paste the full component code here]

Tech context: React [version], TypeScript, [state management, e.g. useState/useContext/Zustand/Redux], styling with [Tailwind/CSS modules/styled-components].

Goals:
1. Split the component into smaller, single-responsibility pieces (presentational vs. logic, extracted subcomponents where it improves readability)
2. Extract repeated logic into custom hooks where it makes sense
3. Add or fix TypeScript types — no `any`, and props should have explicit interfaces
4. Remove dead code, unused props, and unnecessary re-renders (e.g. inline function definitions causing child re-renders, missing memoization where it actually matters)
5. Keep all existing behavior identical — same props in, same rendered output and interactions out

For each change, briefly explain WHY you made it, not just what changed.

After refactoring:
- List every new file/component you created and where it lives
- Point out anything you noticed that looks like a pre-existing bug, without fixing it unless I ask
- Suggest tests I should add to lock in the current behavior before this refactor ships