import Link from "next/link";
import { PageTitle, Card, TableShell } from "@/components/panel/ui";
import { services } from "@/lib/content/services";
import { products } from "@/lib/content/products";
import { sharedPlans, vpsPlans, dedicatedPlans } from "@/lib/content/hosting";

export default function AdminCatalogPage() {
  return (
    <>
      <PageTitle
        title="Site catalog"
        sub="What the public website currently sells. Content lives in code (lib/content) so changes ship through review, like everything else."
      />
      <div className="grid gap-6">
        <Card>
          <h2 className="px-5 pt-5 font-semibold text-thi">Service practices</h2>
          <div className="mt-2">
            <TableShell head={["Practice", "Positioning", "Page"]}>
              {services.map((s) => (
                <tr key={s.slug} className="border-b border-white/5 last:border-0">
                  <td className="px-5 py-3.5 font-medium text-thi">{s.name}</td>
                  <td className="px-5 py-3.5 text-[0.85rem] text-tmid">{s.summary}</td>
                  <td className="px-5 py-3.5">
                    <Link href={`/services/${s.slug}`} className="text-[0.85rem] text-ice hover:underline">
                      /services/{s.slug}
                    </Link>
                  </td>
                </tr>
              ))}
            </TableShell>
          </div>
        </Card>

        <Card>
          <h2 className="px-5 pt-5 font-semibold text-thi">Products</h2>
          <div className="mt-2">
            <TableShell head={["Product", "Category", "From (SAR)"]}>
              {products.map((p) => (
                <tr key={p.slug} className="border-b border-white/5 last:border-0">
                  <td className="px-5 py-3.5 font-medium text-thi">
                    {p.name} <span className="text-[0.8rem] text-tlo">— {p.descriptor}</span>
                  </td>
                  <td className="px-5 py-3.5 text-[0.85rem] text-tmid">{p.category}</td>
                  <td className="px-5 py-3.5 font-[family-name:var(--font-mono)] text-[0.85rem] text-azure-bright tnum">
                    {p.priceFromSar.toLocaleString()}
                  </td>
                </tr>
              ))}
            </TableShell>
          </div>
        </Card>

        <Card>
          <h2 className="px-5 pt-5 font-semibold text-thi">Hosting plans</h2>
          <div className="mt-2">
            <TableShell head={["Plan", "Tier", "SAR / month"]}>
              {[
                ...sharedPlans.map((p) => ({ ...p, tier: "Shared" })),
                ...vpsPlans.map((p) => ({ ...p, tier: "Managed VPS" })),
                ...dedicatedPlans.map((p) => ({ ...p, tier: "Dedicated" })),
              ].map((p) => (
                <tr key={p.name} className="border-b border-white/5 last:border-0">
                  <td className="px-5 py-3.5 font-medium text-thi">
                    {p.name} <span className="ar text-[0.85rem] text-ice" lang="ar">{p.arName}</span>
                  </td>
                  <td className="px-5 py-3.5 text-[0.85rem] text-tmid">{p.tier}</td>
                  <td className="px-5 py-3.5 font-[family-name:var(--font-mono)] text-[0.85rem] text-azure-bright tnum">
                    {p.priceSar.toLocaleString()}
                  </td>
                </tr>
              ))}
            </TableShell>
          </div>
        </Card>
      </div>
    </>
  );
}