velxio/frontend/src/pages/ProjectPage.tsx

import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { getProject } from '../services/projectService';
import { useEditorStore } from '../store/useEditorStore';
import { useSimulatorStore } from '../store/useSimulatorStore';
import { useProjectStore } from '../store/useProjectStore';
import { EditorPage } from './EditorPage';

export const ProjectPage: React.FC = () => {
  const { username, projectName } = useParams<{ username: string; projectName: string }>();
  const navigate = useNavigate();
  const setCode = useEditorStore((s) => s.setCode);
  const { setComponents, setWires, setBoardType } = useSimulatorStore();
  const setCurrentProject = useProjectStore((s) => s.setCurrentProject);
  const [ready, setReady] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!username || !projectName) return;
    getProject(username, projectName)
      .then((project) => {
        setCode(project.code);
        setBoardType(project.board_type as any);
        try {
          setComponents(JSON.parse(project.components_json));
          setWires(JSON.parse(project.wires_json));
        } catch {
          // keep defaults if JSON is malformed
        }
        setCurrentProject({
          id: project.id,
          slug: project.slug,
          ownerUsername: project.owner_username,
          isPublic: project.is_public,
        });
        setReady(true);
      })
      .catch((err) => {
        const status = err?.response?.status;
        if (status === 404) setError('Project not found.');
        else if (status === 403) setError('This project is private.');
        else setError('Failed to load project.');
      });
  }, [username, projectName]);

  if (error) {
    return (
      <div style={{ minHeight: '100vh', background: '#1e1e1e', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ color: '#f44747', fontSize: 16, textAlign: 'center' }}>
          <p>{error}</p>
          <button onClick={() => navigate('/')} style={{ marginTop: 12, background: '#0e639c', border: 'none', color: '#fff', padding: '8px 16px', borderRadius: 4, cursor: 'pointer' }}>
            Go to home
          </button>
        </div>
      </div>
    );
  }

  if (!ready) {
    return (
      <div style={{ minHeight: '100vh', background: '#1e1e1e', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <p style={{ color: '#9d9d9d' }}>Loading project…</p>
      </div>
    );
  }

  return <EditorPage />;
};