"use client";

// components/EditDirectorButton.tsx
// Tiny client island for the director detail page — opens the existing
// EditEntityModal with the director record pre-loaded. The detail page
// is a server component, so it can't host useState itself; this wrapper
// does it. After save, force a hard reload so the page definitely
// shows the just-saved values. router.refresh() alone wasn't always
// picking up server-rendered changes (likely browser back-forward cache
// or React Server Component patching edges); a hard reload is the
// most reliable way to guarantee the user sees fresh data.

import { useState } from "react";
import EditEntityModal from "@/components/EditEntityModal";
import type { YsterbaardDirector } from "@/lib/types";

interface Props {
  director: YsterbaardDirector;
}

export default function EditDirectorButton({ director }: Props) {
  const [open, setOpen] = useState(false);

  const refreshPage = () => {
    if (typeof window !== "undefined") {
      window.location.reload();
    }
  };

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-md border border-border bg-surface text-fg text-sm font-semibold hover:bg-surface-warm transition-colors"
        aria-label="Edit director"
      >
        <svg
          viewBox="0 0 24 24"
          className="w-4 h-4"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          aria-hidden="true"
        >
          <path d="M12 20h9" strokeLinecap="round" strokeLinejoin="round" />
          <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        Edit
      </button>
      <EditEntityModal
        entity="director"
        record={director}
        open={open}
        onClose={() => {
          setOpen(false);
          // Always hard-reload on close so any cached or stale view is
          // replaced with the latest server data.
          refreshPage();
        }}
        onAfterSave={() => {
          // After a successful save, hard-reload so the user immediately
          // sees the persisted values (and not a stale view that may
          // still be in the back-forward cache or React Server Component
          // patch state).
          refreshPage();
        }}
      />
    </>
  );
}