import { useState } from "react";

export const NOTES_MAX_LENGTH = 1000;

interface OrderNotesProps {
  notes: string;
  onSave: (notes: string) => Promise<void>;
}

export function OrderNotesPanel({ notes, onSave }: OrderNotesProps) {
  const [draft, setDraft] = useState(notes);
  const [isSaving, setIsSaving] = useState(false);
  const trimmed = draft.trim();
  const isDisabled = isSaving || trimmed.length === 0 || trimmed === notes;

  async function handleSave() {
    if (isDisabled) {
      return;
    }

    setIsSaving(true);
    try {
      await onSave(trimmed);
    } finally {
      setIsSaving(false);
    }
  }

  return (
    <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      <div className="mb-3 flex items-center justify-between">
        <h3 className="text-sm font-semibold text-slate-700">Internal notes</h3>
        <span className="text-xs text-slate-500">{draft.length}/{NOTES_MAX_LENGTH}</span>
      </div>
      {notes ? (
        <p className="mb-3 whitespace-pre-wrap text-sm text-slate-700">{notes}</p>
      ) : (
        <p className="mb-3 text-sm text-slate-400">No internal notes yet. Add context for teammates following up on this order.</p>
      )}
      <textarea
        className="w-full resize-y rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-blue-500 focus:outline-none"
        maxLength={NOTES_MAX_LENGTH}
        onChange={(event) => setDraft(event.target.value)}
        placeholder="Add internal notes..."
        rows={3}
        value={draft}
      />
      <div className="mt-3 flex justify-end">
        <button
          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
          disabled={isDisabled}
          onClick={() => void handleSave()}
          type="button"
        >
          {isSaving ? "Saving..." : "Save notes"}
        </button>
      </div>
    </section>
  );
}