"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { setOrderInternalNotesAction } from "@/lib/actions/admin";

export function InternalNotesPanel({ orderId, notes }: { orderId: string; notes: string }) {
  const [pending, startTransition] = useTransition();
  const [value, setValue] = useState(notes);
  const [saved, setSaved] = useState(false);
  const router = useRouter();

  function save() {
    startTransition(async () => {
      await setOrderInternalNotesAction(orderId, value);
      setSaved(true);
      setTimeout(() => setSaved(false), 1500);
      router.refresh();
    });
  }

  return (
    <div className="border border-amber-400/20 bg-amber-400/[0.03] rounded-xl p-5">
      <p className="text-xs uppercase tracking-[0.1em] text-amber-400 mb-1">Interne Notiz</p>
      <p className="text-[0.65rem] text-[var(--rk-ink-muted)] mb-3">
        Nur fürs Team sichtbar — der Kunde sieht das nicht, anders als der Chat-Verlauf.
      </p>
      <textarea
        value={value}
        disabled={pending}
        onChange={(e) => setValue(e.target.value)}
        rows={3}
        maxLength={4000}
        placeholder="z. B. Besonderheiten, interne Absprachen, Erinnerungen…"
        className="w-full bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-xs text-[var(--rk-ink)] focus:outline-none focus:border-white/50 disabled:opacity-50 resize-y"
      />
      <div className="mt-2 flex items-center gap-3">
        <button
          disabled={pending || value === notes}
          onClick={save}
          className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
        >
          Speichern
        </button>
        {saved && <span className="text-xs text-emerald-400">Gespeichert.</span>}
      </div>
    </div>
  );
}