import { useEffect, useState } from 'react';
import { api } from './api';
import type { Project } from './types';

const order = ['corpus', 'benchmark', 'code', 'demo'];

export default function App() {
  const [project, setProject] = useState<Project | null>(null);
  const [error, setError] = useState('');
  const [attempt, setAttempt] = useState(0);

  useEffect(() => {
    const controller = new AbortController();
    setError('');
    api.project(controller.signal)
      .then(data => { if (!controller.signal.aborted) setProject(data); })
      .catch(cause => {
        if (!controller.signal.aborted) {
          setError(cause instanceof Error ? cause.message : 'Unable to load project information.');
        }
      });
    return () => controller.abort();
  }, [attempt]);

  if (error) {
    return <main className="project-page feedback" role="alert">
      <h1>MedCaseAgent</h1>
      <p>{error}</p>
      <button onClick={() => setAttempt(value => value + 1)}>Try again</button>
    </main>;
  }

  if (!project) {
    return <main className="project-page feedback" role="status">Loading MedCaseAgent…</main>;
  }

  const resources = order.flatMap(id => project.resources.filter(resource => resource.id === id));

  return <main className="project-page">
    <header className="introduction">
      <p className="organization">{project.organization}</p>
      <h1>{project.name}</h1>
      <p className="subtitle">{project.title}</p>
      <p className="description">{project.description}</p>
    </header>

    <figure className="teaser">
      <a href="./teaser.pdf" target="_blank" rel="noreferrer" aria-label="Open the MedCaseAgent overview figure as a PDF">
        <img src="./teaser.png" width="2380" height="1020" alt="MedCaseAgent overview from the paper: fragmented clinical evidence and medical images are processed by planning, writing, and refinement agents with external medical tools to produce a case report." fetchPriority="high" />
      </a>
      <figcaption>MedCaseAgent at a glance. <a href="./teaser.pdf" target="_blank" rel="noreferrer">View figure <span aria-hidden="true">↗</span></a></figcaption>
    </figure>

    <section className="resources" aria-labelledby="resources-title">
      <h2 id="resources-title">Resources</h2>
      <ul>
        {resources.map(resource => <li key={resource.id}>
          {resource.url ? <a className="resource-link" href={resource.url} target="_blank" rel="noreferrer">
            <span className="resource-name">{resource.name}{resource.id === 'code' && <span className="code-label"> code</span>}</span>
            <span className="resource-description">{resource.description}</span>
            <span className="resource-arrow" aria-hidden="true">↗</span>
          </a> : <div className="resource-link"><span className="resource-name">{resource.name}</span><span className="resource-description">{resource.description}</span></div>}
        </li>)}
      </ul>
    </section>

    <footer>{project.organization} <span aria-hidden="true">·</span> {project.name}</footer>
  </main>;
}