import { useState, useEffect } from "react";
import { invoke } from "@tauri-apps/api/core";
import { useNavigate } from "react-router-dom";

interface Workspace {
  id: string;
  name: string;
  slug: string;
}

export default function WorkspacePage() {
  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
  const [error, setError] = useState<string | null>(null);
  const navigate = useNavigate();

  useEffect(() => {
    invoke<Workspace[]>("list_workspaces")
      .then(setWorkspaces)
      .catch((e) => setError(String(e)));
  }, []);

  return (
    <div style={{ maxWidth: 600, margin: "60px auto", padding: 24 }}>
      <h1>Workspaces</h1>
      {error && <p style={{ color: "red" }}>{error}</p>}
      {workspaces.map((ws) => (
        <div
          key={ws.id}
          onClick={() => navigate(`/workspaces/${ws.id}`)}
          style={{ padding: 16, border: "1px solid #ccc", marginBottom: 8, cursor: "pointer", borderRadius: 4 }}
        >
          <strong>{ws.name}</strong>
          <span style={{ marginLeft: 8, color: "#888" }}>/{ws.slug}</span>
        </div>
      ))}
      {workspaces.length === 0 && !error && <p>No workspaces found.</p>}
    </div>
  );
}