"use client";

import { useState, useTransition } from "react";
import { Button, StatusBadge } from "@/components/ui";
import { Field, inputClass } from "@/components/ui/form";
import { createPreviewLinkAction, deletePageAction, duplicatePageAction, publishLatestAction, transitionPageAction } from "@/lib/actions/pages";
import type { PageStatus } from "@/lib/domain/enums";
import type { EditorProps } from "./types";

function label(from: PageStatus, to: PageStatus): string {
  if (to === "IN_REVIEW") return "Submit for review";
  if (to === "PUBLISHED") return from === "IN_REVIEW" ? "Approve & publish" : "Publish now";
  if (to === "SCHEDULED") return "Schedule…";
  if (to === "ARCHIVED") return "Archive";
  if (from === "ARCHIVED") return "Restore to draft";
  if (from === "IN_REVIEW") return "Request changes";
  return "Unpublish";
}

export function WorkflowPanel({ props, dirty }: { props: EditorProps & { page: NonNullable<EditorProps["page"]> }; dirty: boolean }) {
  const { page, perms, base } = props;
  const [pending, start] = useTransition();
  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);
  const [scheduling, setScheduling] = useState(false);
  const [publishAt, setPublishAt] = useState("");
  const [unpublishAt, setUnpublishAt] = useState("");
  const [link, setLink] = useState<string | null>(null);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const iso = (v: string) => (v ? new Date(v).toISOString() : null);
  const live = page.status === "PUBLISHED" || page.status === "SCHEDULED";

  function run(fn: () => Promise<{ ok: boolean; error?: string; message?: string }>, reload = true) {
    if (dirty) return setMessage({ ok: false, text: "Save your changes first so the action applies to what you see." });
    start(async () => {
      const res = await fn();
      if (res.ok) {
        if (reload) window.location.reload();
        else setMessage({ ok: true, text: res.message ?? "Done" });
      } else setMessage({ ok: false, text: res.error ?? "Something went wrong" });
    });
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-2 text-sm">
        <StatusBadge value={page.status} />
        <span className="text-muted-foreground">
          draft v{page.draftVersion}{page.publishedVersion !== null ? ` · live v${page.publishedVersion}` : ""}
        </span>
      </div>
      {page.status === "SCHEDULED" && page.publishAt ? <p className="text-sm">Goes live {new Date(page.publishAt).toLocaleString("en-GB")}.</p> : null}
      {page.unpublishAt && page.status !== "DRAFT" ? <p className="text-sm">Comes down {new Date(page.unpublishAt).toLocaleString("en-GB")}.</p> : null}
      {message ? <p role={message.ok ? "status" : "alert"} className={message.ok ? "text-sm text-success" : "text-sm text-danger"}>{message.text}</p> : null}
      {dirty ? <p className="text-xs text-warning">You have unsaved changes. Workflow actions are disabled until you save.</p> : null}

      <div className="flex flex-wrap gap-2">
        {perms.transitions.map((to) =>
          to === "SCHEDULED" ? (
            <Button key={to} variant="secondary" disabled={pending || dirty} onClick={() => setScheduling((s) => !s)}>{label(page.status, to)}</Button>
          ) : (
            <Button key={to} variant={to === "PUBLISHED" ? "primary" : "secondary"} disabled={pending || dirty} onClick={() => run(() => transitionPageAction({ pageId: page.id, to, unpublishAt: to === "PUBLISHED" ? iso(unpublishAt) : null }))}>
              {label(page.status, to)}
            </Button>
          ),
        )}
        {props.hasUnpublishedChanges && perms.publish ? (
          <Button disabled={pending || dirty} onClick={() => run(() => publishLatestAction(page.id))}>Publish latest changes</Button>
        ) : null}
      </div>

      {perms.transitions.includes("SCHEDULED") || perms.transitions.includes("PUBLISHED") ? (
        <Field id="wf-unpublish" label="Optional take-down time" help="Applies when you publish now or schedule.">
          <input id="wf-unpublish" type="datetime-local" value={unpublishAt} onChange={(e) => setUnpublishAt(e.target.value)} className={inputClass} />
        </Field>
      ) : null}

      {scheduling ? (
        <div className="space-y-3 rounded-md border border-border p-3">
          <Field id="wf-publish-at" label="Publish at (your local time)">
            <input id="wf-publish-at" type="datetime-local" value={publishAt} onChange={(e) => setPublishAt(e.target.value)} className={inputClass} />
          </Field>
          <Button disabled={pending || !publishAt} onClick={() => run(() => transitionPageAction({ pageId: page.id, to: "SCHEDULED", publishAt: iso(publishAt), unpublishAt: iso(unpublishAt) }))}>Confirm schedule</Button>
        </div>
      ) : null}

      <div className="space-y-2 border-t border-border pt-4">
        <p className="text-xs font-medium">Share a draft</p>
        <Button variant="secondary" disabled={pending} onClick={() => start(async () => {
          const res = await createPreviewLinkAction(page.id);
          if (res.ok && res.data) setLink(`${window.location.origin}${res.data.path}`);
          else if (!res.ok) setMessage({ ok: false, text: res.error });
        })}>Create preview link</Button>
        {link ? (
          <div className="space-y-1">
            <input readOnly aria-label="Preview link" value={link} onFocus={(e) => e.currentTarget.select()} className={inputClass} />
            <p className="text-xs text-muted-foreground">Anyone with this link can view the latest saved draft for 24 hours.</p>
          </div>
        ) : null}
      </div>

      <div className="flex flex-wrap gap-2 border-t border-border pt-4">
        {perms.create ? <Button variant="secondary" disabled={pending} onClick={() => start(async () => { const r = await duplicatePageAction(base, page.id); if (r && !r.ok) setMessage({ ok: false, text: r.error }); })}>Duplicate</Button> : null}
        {perms.publish && !live ? (
          confirmDelete ? (
            <>
              <Button variant="danger" disabled={pending} onClick={() => start(async () => { const r = await deletePageAction(base, page.id); if (r && !r.ok) setMessage({ ok: false, text: r.error }); })}>Confirm delete</Button>
              <Button variant="ghost" onClick={() => setConfirmDelete(false)}>Cancel</Button>
            </>
          ) : (
            <Button variant="ghost" disabled={pending} onClick={() => setConfirmDelete(true)}>Delete page</Button>
          )
        ) : null}
      </div>
    </div>
  );
}