import Link from "next/link";
import {
  archiveJournalAction,
  deleteJournalAction,
  publishJournalAction,
} 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 { listDashboardJournal } from "@/services/journal-service";

function statusClass(status: string) {
  if (status === "published") return "archi-status archi-status-published";
  if (status === "archived") return "archi-status archi-status-archived";
  return "archi-status archi-status-draft";
}

export default async function DashboardJournalPage() {
  const ctx = await requireDashboardContext("journal:manage");
  const posts = await listDashboardJournal(ctx.tenant);
  const published = posts.filter((p) => p.status === "published").length;

  return (
    <DashboardShell width="wide">
      <DashboardPageHeader
        eyebrow="Content"
        title="Writing"
        description={`${published} published · ${posts.length - published} draft or archived.`}
        actions={
          <Link href="/dashboard/journal/new" className="archi-btn-primary">
            New post
          </Link>
        }
      />

      {posts.length === 0 ? (
        <div className="mt-10">
          <EmptyState
            title="No journal posts yet"
            description="Share process notes and studio thinking on your public site."
            action={
              <PrimaryButton href="/dashboard/journal/new">
                New post
              </PrimaryButton>
            }
          />
        </div>
      ) : (
        <div className="archi-panel mt-10 overflow-x-auto">
          <table className="w-full min-w-[640px] 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">Actions</th>
              </tr>
            </thead>
            <tbody>
              {posts.map((post) => (
                <tr
                  key={post.id}
                  className="border-b border-[var(--archi-line)] last:border-0"
                >
                  <td className="px-4 py-4 pr-4">
                    <Link
                      href={`/dashboard/journal/${post.id}`}
                      className="font-medium"
                    >
                      {post.title}
                    </Link>
                    <p className="text-xs text-[var(--archi-ink-muted)]">
                      /{post.slug}
                    </p>
                  </td>
                  <td className="py-4 pr-4">
                    <span className={statusClass(post.status)}>
                      {post.status}
                    </span>
                  </td>
                  <td className="py-4 pr-4">
                    <div className="flex flex-wrap gap-2">
                      <Link
                        href={`/dashboard/journal/${post.id}`}
                        className="text-xs underline"
                      >
                        Edit
                      </Link>
                      {post.status !== "published" ? (
                        <form action={publishJournalAction.bind(null, post.id)}>
                          <button type="submit" className="text-xs underline">
                            Publish
                          </button>
                        </form>
                      ) : (
                        <form action={archiveJournalAction.bind(null, post.id)}>
                          <button type="submit" className="text-xs underline">
                            Archive
                          </button>
                        </form>
                      )}
                      <form action={deleteJournalAction.bind(null, post.id)}>
                        <button
                          type="submit"
                          className="text-xs text-red-800 underline"
                        >
                          Delete
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </DashboardShell>
  );
}