"use client";

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

export default function SitesPage() {
  const { sites } = useDemoStore();

  return <>
    <PageTitle title="Sites" description="WordPress sites connected to this WooCommerce account." />
    <section className="plugin-onboarding" aria-labelledby="plugin-onboarding-title">
      <div><h2 id="plugin-onboarding-title">Connect a WordPress site</h2><p>Install AI Web Command on each site you want to manage. The plugin provides the secure site connection and AI Chat; your WooCommerce subscription sets the available sites and features.</p></div>
      <a className="btn btn-primary" href="/downloads/ai-web-command.zip" download><Download size={16} /> Download plugin</a>
      <ol><li>In WordPress, open Plugins &gt; Add New &gt; Upload Plugin, choose the ZIP, then activate it.</li><li>Open AI Web Command &gt; Connection and select Connect to AI Web Command.</li><li>Approve the access level, complete pairing here, and check that the license shows Active in WordPress.</li></ol>
    </section>
    {sites.length === 0 ? <section className="empty-panel"><Server size={30} /><h2>No sites connected yet</h2><p>Once the plugin is installed, start the connection from its WordPress admin screen.</p></section>
      : <section className="panel data-table-wrap"><table><thead><tr><th>Site</th><th>Status</th><th>License</th><th>Plugin</th><th>Last seen</th><th>Environment</th><th aria-label="Actions" /></tr></thead><tbody>{sites.map((site) => <tr key={site.id}><td><strong>{site.name}</strong><small className="table-sub">{site.url}</small></td><td><StatusBadge tone={site.status === "Connected" ? "success" : "warning"}>{site.status}</StatusBadge></td><td><StatusBadge tone={site.licenseActive ? "success" : "warning"}>{site.licenseActive ? "Active" : "Needs sync"}</StatusBadge></td><td className="muted">{site.pluginVersion ? `v${site.pluginVersion}` : "-"}</td><td className="muted">{site.lastSeenAt}</td><td className="muted">{site.environment}</td><td><Link className="table-action" href={`/sites/${site.id}`}>View <ArrowRight size={14} /></Link></td></tr>)}</tbody></table></section>}
  </>;
}