"use client";

import { useMemo, useState } from "react";
import { useParams } from "next/navigation";
import { useForm } from "@refinedev/antd";
import { App, Button, Card, Form, Typography } from "antd";
import {
  PostFormFields,
  PostFormLoading,
} from "@/components/posts/PostFormFields";
import type { PostRecord } from "@/types/post";

import { PageContainer } from "@/components/admin/PageContainer";

const FORM_ID = "post-edit-form";

export default function EditPostPage() {
  const params = useParams<{ id?: string | string[] }>();
  const rawId = params?.id;
  const id = Array.isArray(rawId) ? rawId[0] : rawId;

  const { message } = App.useApp();
  const [publishing, setPublishing] = useState(false);

  const canPublish = useMemo(() => {
    try {
      const raw = localStorage.getItem("authUser");
      const u = raw ? (JSON.parse(raw) as { permissions?: string[] }) : null;
      return Array.isArray(u?.permissions) && u.permissions.includes("posts:publish");
    } catch {
      return false;
    }
  }, []);

  const { formProps, saveButtonProps, query, onFinish } = useForm<PostRecord>({
    resource: "posts",
    action: "edit",
    id: id ?? "",
    queryOptions: {
      enabled: Boolean(id),
    },
  });

  const server = query?.data?.data;

  async function handlePublish() {
    if (!id) return;
    const token = localStorage.getItem("accessToken");
    if (!token) {
      message.error("No permission");
      return;
    }
    const base = process.env.NEXT_PUBLIC_API_BASE_URL?.replace(/\/$/, "") ?? "";
    setPublishing(true);
    try {
      const res = await fetch(`${base}/posts/${id}/publish`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` },
      });
      const body = (await res.json().catch(() => ({}))) as {
        message?: string | string[];
      };
      if (!res.ok) {
        const msg = Array.isArray(body.message)
          ? body.message.join(", ")
          : typeof body.message === "string"
            ? body.message
            : "Publish failed";
        message.error(msg);
        return;
      }
      message.success("Published");
      await query?.refetch();
    } catch {
      message.error("Publish failed");
    } finally {
      setPublishing(false);
    }
  }

  if (!id) {
    return (
      <PageContainer className="pb-16 md:pb-20">
        <div className="rounded-xl border border-[rgba(15,23,42,0.08)] bg-white px-6 py-8 shadow-sm">
          <Typography.Text type="danger">Invalid post id</Typography.Text>
        </div>
      </PageContainer>
    );
  }

  return (
    <PageContainer className="pb-12 md:pb-16">
      <Card
        className="cms-crud-card overflow-hidden !border-[rgba(15,23,42,0.08)]"
        styles={{ body: { padding: 0 } }}
      >
        <div className="border-b border-[rgba(15,23,42,0.08)] px-8 pb-9 pt-9">
          <h1 className="m-0 text-2xl font-semibold tracking-tight text-[rgba(15,23,42,0.92)]">
            Edit post
          </h1>
          <p className="mb-0 mt-1 text-[15px] leading-relaxed text-[rgba(15,23,42,0.52)]">
            Update content and publishing options. Published posts keep a locked slug unless you use the
            legacy publish flow.
          </p>
        </div>

        {query?.isLoading ? (
          <PostFormLoading />
        ) : (
          <>
            <Form
              id={FORM_ID}
              {...formProps}
              layout="vertical"
              requiredMark
              className="mx-auto w-full max-w-[800px] px-8 pb-16 pt-9 [&_.ant-form-item-label>label]:!h-auto [&_.ant-form-item-label]:!pb-2.5"
              onFinish={async (values) => {
                const v = { ...values } as Record<string, unknown>;
                if (server?.status === "PUBLISHED") {
                  delete v.slug;
                }
                if (!(server?.status === "DRAFT" && canPublish)) {
                  delete v.status;
                }
                await onFinish(v as PostRecord);
              }}
            >
              <PostFormFields
                mode="edit"
                serverStatus={server?.status}
                canPublish={canPublish}
                onPublish={canPublish ? handlePublish : undefined}
                publishing={publishing}
              />
            </Form>

            <div className="flex justify-end border-t border-[rgba(15,23,42,0.08)] bg-[rgba(15,23,42,0.02)] px-8 py-7">
              <Button
                {...saveButtonProps}
                form={FORM_ID}
                type="primary"
                size="large"
                htmlType="submit"
                className="min-w-[168px]"
              >
                Save changes
              </Button>
            </div>
          </>
        )}
      </Card>
    </PageContainer>
  );
}