"use client";

import Link from "next/link";
import { ArrowLeft, ExternalLink, Server } from "lucide-react";
import { useParams } from "next/navigation";
import { PageTitle } from "@/components/page-title";
import { StatusBadge } from "@/components/status-badge";
import { useDemoStore } from "@/components/demo-store";

export default function SiteDetailPage() {
  const { siteId } = useParams<{ siteId: string }>();
  const { sites } = useDemoStore();
  const site = sites.find((item) => item.id === siteId);

  if (!site) return <section className="empty-panel"><Server size={30} /><h2>Site not found</h2><p>This site is not in your current workspace.</p><Link className="button button-primary" href="/sites"><ArrowLeft size={16} /> Back to sites</Link></section>;

  return <>
    <PageTitle title={site.name} description={site.url} action={<Link className="button" href="/sites"><ArrowLeft size={16} /> All sites</Link>} />
    <section className="site-summary">
      <article className="panel"><div className="panel-head"><div><h2>Connection</h2><p>Last verified {site.lastSeenAt}</p></div><StatusBadge tone={site.status === "Connected" ? "success" : "warning"}>{site.status}</StatusBadge></div><dl className="detail-list"><div><dt>Environment</dt><dd>{site.environment}</dd></div><div><dt>Plugin version</dt><dd>{site.pluginVersion ? `v${site.pluginVersion}` : "Not reported"}</dd></div><div><dt>Plugin site ID</dt><dd className="mono-value">{site.siteId || "Not reported"}</dd></div></dl></article>
      <article className="panel"><div className="panel-head"><div><h2>WordPress access</h2><p>Manage the plugin and its connection credentials in WordPress.</p></div></div><div className="action-stack"><a className="button button-primary" href={new URL("/wp-admin/admin.php?page=site-agent-connection", site.url).toString()} target="_blank" rel="noopener noreferrer"><ExternalLink size={16} /> Open plugin settings</a>{site.capabilitiesUrl ? <a className="button" href={site.capabilitiesUrl} target="_blank" rel="noopener noreferrer"><ExternalLink size={16} /> View capabilities</a> : null}</div></article>
    </section>
    {site.notes ? <section className="panel note-panel"><div><h2>Internal notes</h2><p>{site.notes}</p></div></section> : null}
  </>;
}