"use client";

import { useRef, useState } from "react";

// A view/edit surface for the context that will be sent to the model — the
// replayed conversation + retrieved excerpts, serialized as USER:/ASSISTANT:
// blocks. The human can prune it for a leaner, cheaper starting point (mid-
// conversation) and "apply" it: the edit becomes the seed the conversation
// continues from (the display resets to it). This is also the "forward to a new
// session" path after an error.
//
// The textarea is uncontrolled (seeded via defaultValue + a remount key that
// changes only when the underlying context changes) so a human's edits are never
// clobbered by a re-render.
export function ContextPanel({
  contextText,
  overrideActive,
  busy,
  onApply,
  onClear,
}: {
  contextText: string;
  overrideActive: boolean;
  busy: boolean;
  onApply: (text: string) => void;
  onClear: () => void;
}) {
  const [open, setOpen] = useState(false);
  const taRef = useRef<HTMLTextAreaElement>(null);
  // Bump to force the uncontrolled textarea to remount and reseed from the
  // current context (on open, and on an explicit "Reload").
  const [seed, setSeed] = useState(0);

  const onToggle = (e: React.SyntheticEvent<HTMLDetailsElement>) => {
    const isOpen = e.currentTarget.open;
    setOpen(isOpen);
    if (isOpen) setSeed((n) => n + 1);
  };

  const empty = contextText.trim() === "";

  return (
    <details
      className="rounded-lg border border-border bg-card/40"
      onToggle={onToggle}
      open={open}
    >
      <summary className="flex cursor-pointer items-center gap-2 px-4 py-2.5 text-sm font-medium text-foreground">
        Context
        {overrideActive && (
          <span className="rounded bg-brand-soft px-1.5 py-0.5 font-mono text-[0.7rem] text-brand-strong">
            edited
          </span>
        )}
        <span
          className="ml-auto font-mono text-xs text-muted-foreground/70"
          title="Rough estimate — actual token count and cost depend on your provider"
        >
          ~{Math.round(contextText.length / 4).toLocaleString()} tokens
        </span>
      </summary>
      {open && (
      <div className="flex flex-col gap-3 border-t border-border px-4 py-3">
        <p className="text-xs text-muted-foreground">
          This is what the model receives as prior context on your next question.
          Prune it for a leaner, cheaper starting point, then apply — the
          conversation continues from the trimmed context.
        </p>
        <textarea
          key={`${seed}:${contextText.length}`}
          ref={taRef}
          defaultValue={contextText}
          rows={10}
          spellCheck={false}
          placeholder={empty ? "(no context yet — ask a question first)" : ""}
          className="w-full resize-y rounded-md border border-border bg-background px-3 py-2 font-mono text-xs leading-relaxed text-foreground"
        />
        <div className="flex flex-wrap items-center gap-2">
          <button
            type="button"
            disabled={busy}
            onClick={() => onApply(taRef.current?.value ?? "")}
            className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-brand-strong disabled:opacity-50"
          >
            Apply as starting point
          </button>
          <button
            type="button"
            disabled={busy}
            onClick={() => setSeed((n) => n + 1)}
            className="rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
          >
            Reload from conversation
          </button>
          {overrideActive && (
            <button
              type="button"
              disabled={busy}
              onClick={onClear}
              className="rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
            >
              Clear edit
            </button>
          )}
        </div>
      </div>
      )}
    </details>
  );
}