"use client";

import { useEffect, useState } from "react";

import Link from "next/link";

import { api, Investigation } from "@/lib/api";

export default function Investigations() {

  const [invs, setInvs] = useState<Investigation[]>([]);

  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {

    api.investigations().then(setInvs)

      .catch((e) => setErr(e.status === 401 ? "Sign in to view investigations." : String(e)));

  }, []);

  return (

    <div>

      <h1>Investigations</h1>

      {err && <div className="badge danger">{err}</div>}

      <div className="card" style={{ marginTop: 12 }}>

        <table>

          <thead><tr><th>Title</th><th>Status</th><th>Priority</th><th>Created</th></tr></thead>

          <tbody>

            {invs.map((i) => (

              <tr key={i.id}>

                <td><Link href={`/investigations/${i.id}`}>{i.title}</Link></td>

                <td><span className="badge">{i.status}</span></td>

                <td>{i.priority}</td>

                <td className="muted">{new Date(i.created_at).toLocaleDateString()}</td>

              </tr>

            ))}

            {!invs.length && !err && <tr><td colSpan={4} className="muted">No investigations.</td></tr>}

          </tbody>

        </table>

      </div>

    </div>

  );

}