import Link from "next/link";
import {
  deleteServiceAction,
  toggleServicePublishAction,
} from "@/app/dashboard/actions";
import {
  EmptyState,
  PrimaryButton,
} from "@/components/dashboard/empty-state";
import { DashboardPageHeader } from "@/components/dashboard/page-header";
import { DashboardShell } from "@/components/dashboard/dashboard-shell";
import { requireDashboardContext } from "@/core/auth/dashboard-context";
import { listDashboardServices } from "@/services/studio-services-service";

export default async function DashboardServicesPage() {
  const ctx = await requireDashboardContext("services:manage");
  const services = await listDashboardServices(ctx.tenant);
  const published = services.filter((s) => s.isPublished).length;

  return (
    <DashboardShell width="wide">
      <DashboardPageHeader
        eyebrow="Content"
        title="Offerings"
        description={`${published} published · ${services.length - published} hidden on public site.`}
        actions={
          <Link href="/dashboard/services/new" className="archi-btn-primary">
            New service
          </Link>
        }
      />

      {services.length === 0 ? (
        <div className="mt-10">
          <EmptyState
            title="No services yet"
            description="Add the offerings clients see on your public studio site."
            action={
              <PrimaryButton href="/dashboard/services/new">
                New service
              </PrimaryButton>
            }
          />
        </div>
      ) : (
        <div className="archi-panel mt-10 overflow-x-auto">
          <table className="w-full min-w-[720px] text-left text-sm">
            <thead className="border-b border-[var(--archi-line)] text-xs uppercase tracking-wider text-[var(--archi-ink-muted)]">
              <tr>
                <th className="px-4 py-3 pr-4 font-medium">Title</th>
                <th className="py-3 pr-4 font-medium">Status</th>
                <th className="py-3 pr-4 font-medium">Order</th>
                <th className="py-3 pr-4 font-medium">Actions</th>
              </tr>
            </thead>
            <tbody>
              {services.map((service) => (
                <tr
                  key={service.id}
                  className="border-b border-[var(--archi-line)] last:border-0"
                >
                  <td className="px-4 py-4 pr-4">
                    <Link
                      href={`/dashboard/services/${service.id}`}
                      className="font-medium"
                    >
                      {service.title}
                    </Link>
                    <p className="text-xs text-[var(--archi-ink-muted)]">
                      /{service.slug}
                    </p>
                  </td>
                  <td className="py-4 pr-4">
                    <span
                      className={
                        service.isPublished
                          ? "archi-status archi-status-published"
                          : "archi-status archi-status-hidden"
                      }
                    >
                      {service.isPublished ? "Published" : "Hidden"}
                    </span>
                  </td>
                  <td className="py-4 pr-4 text-[var(--archi-ink-muted)]">
                    {service.sortOrder}
                  </td>
                  <td className="py-4 pr-4">
                    <div className="flex flex-wrap gap-2">
                      <Link
                        href={`/dashboard/services/${service.id}`}
                        className="text-xs underline"
                      >
                        Edit
                      </Link>
                      <form
                        action={toggleServicePublishAction.bind(
                          null,
                          service.id,
                        )}
                      >
                        <button type="submit" className="text-xs underline">
                          {service.isPublished ? "Hide" : "Publish"}
                        </button>
                      </form>
                      <form action={deleteServiceAction.bind(null, service.id)}>
                        <button
                          type="submit"
                          className="text-xs text-red-800 underline"
                        >
                          Delete
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </DashboardShell>
  );
}