"use client";

import {useEffect,useState} from "react";

export default function DeploymentWorkspace(){

const [deployments,setDeployments]=useState([]);
const [status,setStatus]=useState("Loading...");

async function load(){

try{

const r=await fetch("/api/workspace/deploy/status");

if(r.ok){

const data=await r.json();

setDeployments(data.deployments||[]);
setStatus(data.status||"Ready");

}else{

setStatus("Unavailable");

}

}catch{

setStatus("Backend offline");

}

}

useEffect(()=>{
load();
},[]);

return(

<div className="h-full flex flex-col bg-neutral-950 text-white">

<div className="border-b border-neutral-800 p-3 text-lg font-bold">
Deployment Center
</div>

<div className="p-4">

<div className="mb-4">
Status: <span className="font-semibold">{status}</span>
</div>

<table className="w-full text-sm">

<thead>

<tr className="border-b border-neutral-800">

<th className="text-left p-2">Target</th>
<th className="text-left p-2">Status</th>
<th className="text-left p-2">Time</th>

</tr>

</thead>

<tbody>

{deployments.length===0?

<tr>
<td colSpan="3" className="p-4">
No deployments.
</td>
</tr>

:

deployments.map((d,i)=>(

<tr key={i} className="border-b border-neutral-900">

<td className="p-2">{d.target||"-"}</td>
<td className="p-2">{d.status||"-"}</td>
<td className="p-2">{d.time||"-"}</td>

</tr>

))

}

</tbody>

</table>

</div>

</div>

);

}