"use client";

import { useState } from "react";
import { LineItemsEditor } from "@/components/po/po-line-items-editor";
import { managerEditLineItems } from "./manager-line-edit-actions";
import type { LineItemInput } from "@/lib/validations/po";

interface Props {
  poId: string;
  initialItems: LineItemInput[];
}

export function ManagerLineItemsEditor({ poId, initialItems }: Props) {
  const [editing, setEditing] = useState(false);
  const [items, setItems] = useState<LineItemInput[]>(initialItems);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState("");
  const [saved, setSaved] = useState(false);

  async function handleSave() {
    setPending(true);
    setError("");
    const result = await managerEditLineItems({ poId, lineItems: items });
    if ("error" in result) {
      setError(result.error);
      setPending(false);
    } else {
      setSaved(true);
      setEditing(false);
      setPending(false);
    }
  }

  function handleCancel() {
    setItems(initialItems);
    setEditing(false);
    setError("");
  }

  if (!editing) {
    return (
      <div className="mt-2">
        {saved && (
          <p className="mb-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-3 py-1.5">
            Line items updated. The original values are shown with strikethrough on the detail view.
          </p>
        )}
        <button
          onClick={() => setEditing(true)}
          className="text-sm text-amber-700 hover:text-amber-800 font-medium underline underline-offset-2"
        >
          Edit line items
        </button>
      </div>
    );
  }

  return (
    <div className="mt-4 rounded-lg border-2 border-amber-300 bg-amber-50 p-4">
      <p className="text-xs font-semibold text-amber-700 mb-3 uppercase tracking-wide">
        Manager — Editing Line Items
      </p>
      <LineItemsEditor items={items} onChange={setItems} />
      {error && <p className="mt-2 text-sm text-danger-700">{error}</p>}
      <div className="mt-4 flex gap-3">
        <button
          onClick={handleSave}
          disabled={pending}
          className="rounded-lg bg-amber-600 px-4 py-2 text-sm font-semibold text-white hover:bg-amber-700 disabled:opacity-60 transition-colors"
        >
          {pending ? "Saving…" : "Save Changes"}
        </button>
        <button
          onClick={handleCancel}
          disabled={pending}
          className="rounded-lg border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 disabled:opacity-60"
        >
          Cancel
        </button>
      </div>
    </div>
  );
}