"use client";

import { useState, useTransition } from "react";
import { Button } from "@/components/ui";
import { restoreVersionAction } from "@/lib/actions/pages";
import type { EditorProps } from "./types";

export function VersionsPanel({ pageId, versions, draftVersion, publishedVersion, canEdit, dirty }: { pageId: string; versions: EditorProps["versions"]; draftVersion: number; publishedVersion: number | null; canEdit: boolean; dirty: boolean }) {
  const [pending, start] = useTransition();
  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);

  function restore(version: number) {
    if (dirty) return setMessage({ ok: false, text: "Save or discard your changes before restoring a version." });
    start(async () => {
      const res = await restoreVersionAction(pageId, version);
      if (res.ok) window.location.reload();
      else setMessage({ ok: false, text: res.error });
    });
  }

  return (
    <div className="space-y-3">
      <p className="text-xs text-muted-foreground">Every save that changes content creates a version. Restoring never deletes anything; it adds a new version copied from the old one.</p>
      {message ? <p role={message.ok ? "status" : "alert"} className={message.ok ? "text-sm text-success" : "text-sm text-danger"}>{message.text}</p> : null}
      <ol className="divide-y divide-border rounded-md border border-border">
        {versions.map((v) => (
          <li key={v.version} className="flex items-center justify-between gap-3 p-3 text-sm">
            <div>
              <p className="font-medium">
                Version {v.version}
                {v.version === draftVersion ? <span className="ml-2 text-xs text-muted-foreground">current draft</span> : null}
                {v.version === publishedVersion ? <span className="ml-2 text-xs text-success">live</span> : null}
              </p>
              <p className="text-xs text-muted-foreground">{new Date(v.createdAt).toLocaleString("en-GB")} · {v.author}{v.note ? ` · ${v.note}` : ""}</p>
            </div>
            {canEdit && v.version !== draftVersion ? <Button variant="secondary" disabled={pending} onClick={() => restore(v.version)}>Restore</Button> : null}
          </li>
        ))}
      </ol>
    </div>
  );
}