import { useI18n } from "../i18n";
import { useState } from "react";
import { useUnsavedDraft } from "../hooks/useUnsavedDraft";
import type { WidgetProps } from "./types";

export function FallbackWidget({ descriptor, onRespond }: WidgetProps) {
  const { t: translate } = useI18n();
  const [text, setText] = useState("");
  useUnsavedDraft(text);
  return (
    <div className="rounded-xl border border-border/70 bg-card p-3 shadow-sm space-y-2">
      <p className="text-sm text-warning">{translate("Unsupported widget (kind: {kind}) — respond manually", { kind: descriptor.widget })}</p>
      <pre className="text-xs font-mono overflow-auto max-h-48 rounded-lg bg-muted p-2">{JSON.stringify(descriptor, null, 2)}</pre>
      <textarea aria-label={translate("Manual response")} className="w-full rounded-lg border border-input bg-card p-2 text-sm shadow-xs outline-none transition-[border-color,box-shadow] focus:border-primary/50 focus:ring-2 focus:ring-ring/20" value={text} onChange={(e) => setText(e.target.value)} />
      <button className="rounded-md border border-border/70 px-2 py-1 text-sm shadow-xs transition-colors hover:bg-accent" onClick={() => {
        onRespond({ id: descriptor.id, control: "freetext", text });
      }}>{translate("Send")}</button>
    </div>
  );
}