"use client";

import { useCallback, useState } from "react";
import { toast } from "sonner";
import { api, AdminError, type AdminPost } from "@/lib/api";
import { usePagedList } from "@/lib/use-paged-list";
import { ListShell, EmptyRow } from "@/components/list-shell";
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { useConfirm } from "@/components/confirm";
import { fmtDate } from "@/lib/utils";
import { Clamp } from "@/components/ui/clamp";

export default function PostsPage() {
  const [q, setQ] = useState("");
  const fetcher = useCallback(
    (limit: number, offset: number) => api.posts(q, limit, offset),
    [q],
  );
  const list = usePagedList<AdminPost>(fetcher, [q]);
  const confirm = useConfirm();

  async function run(action: Promise<unknown>, successMsg: string) {
    try {
      await action;
      toast.success(successMsg);
      list.refresh();
    } catch (err) {
      toast.error(err instanceof AdminError ? err.message : "Action failed.");
    }
  }

  async function onDelete(p: AdminPost) {
    if (
      await confirm({
        title: "Delete this post?",
        message: "It will be removed from the app. You can restore it here later.",
        confirmLabel: "Delete post",
        destructive: true,
      })
    ) {
      run(api.deletePost(p.id), "Post deleted.");
    }
  }

  return (
    <ListShell
      title="Posts"
      total={list.total}
      searchPlaceholder="Search caption, source, or author…"
      onQueryChange={setQ}
      list={list}
    >
      <Table>
        <THead>
          <TR>
            <TH>Post</TH>
            <TH>Author</TH>
            <TH>Engagement</TH>
            <TH>Created</TH>
            <TH className="text-right">Actions</TH>
          </TR>
        </THead>
        <tbody>
          {list.items.length === 0 && !list.loading ? (
            <EmptyRow cols={5} label="No posts found." />
          ) : (
            list.items.map((p) => (
              <TR key={p.id} className={p.deleted_at ? "opacity-60" : ""}>
                <TD className="max-w-md">
                  <Clamp lines={2}>{p.caption || "—"}</Clamp>
                  <div className="mt-0.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
                    {p.source_title ? (
                      <Clamp lines={2} className="max-w-full">
                        {p.source_title}
                      </Clamp>
                    ) : null}
                    {p.deleted_at ? (
                      <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive whitespace-nowrap">
                        Deleted
                      </span>
                    ) : p.is_hidden ? (
                      <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide whitespace-nowrap">
                        Hidden
                      </span>
                    ) : null}
                  </div>
                </TD>
                <TD className="max-w-[14rem]">
                  <Clamp className="font-medium">{p.author_name}</Clamp>
                  <Clamp className="text-xs text-muted-foreground">
                    {`@${p.author_handle}`}
                  </Clamp>
                </TD>
                <TD className="whitespace-nowrap text-xs text-muted-foreground">
                  {p.likes_count} likes · {p.comments_count} comments
                </TD>
                <TD className="whitespace-nowrap">{fmtDate(p.created_at)}</TD>
                <TD className="text-right">
                  <div className="flex flex-wrap justify-end gap-2">
                    {p.deleted_at ? (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => run(api.restorePost(p.id), "Post restored.")}
                      >
                        Restore
                      </Button>
                    ) : (
                      <>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() =>
                            run(
                              p.is_hidden
                                ? api.unhidePost(p.id)
                                : api.hidePost(p.id),
                              p.is_hidden ? "Post unhidden." : "Post hidden.",
                            )
                          }
                        >
                          {p.is_hidden ? "Unhide" : "Hide"}
                        </Button>
                        <Button
                          size="sm"
                          variant="destructive"
                          onClick={() => onDelete(p)}
                        >
                          Delete
                        </Button>
                      </>
                    )}
                  </div>
                </TD>
              </TR>
            ))
          )}
        </tbody>
      </Table>
    </ListShell>
  );
}