import { useEffect, useRef, useState } from "react";
import type { QuestionRequest } from "@/lib/bridge";
import appr from "@/dsh/approval/ApprovalPanel.module.css";

type Props = {
  req: QuestionRequest;
  onAnswer: (answer: string) => void;
  onSkip: () => void;
};

export function QuestionCard({ req, onAnswer, onSkip }: Props) {
  const [text, setText] = useState("");
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    rootRef.current?.focus();
  }, [req.id]);

  return (
    <div className={appr.root}>
      <div
        className={appr.card}
        ref={rootRef}
        tabIndex={-1}
        role="group"
        aria-label="Question"
      >
        <div className={appr.strip}>Waiting for your answer</div>
        <div className={appr.body}>
          <div className={appr.headline}>{req.question}</div>
          {req.options.length > 0 ? (
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {req.options.map((opt) => (
                <button
                  key={opt}
                  type="button"
                  className="hermit-toolbar-btn"
                  onClick={() => onAnswer(opt)}
                >
                  {opt}
                </button>
              ))}
            </div>
          ) : null}
          <input
            className="question-input"
            style={{
              marginTop: 8,
              height: 32,
              width: "100%",
              boxSizing: "border-box",
              padding: "0 10px",
              borderRadius: "var(--dsw-radius-sm)",
              border: "0.5px solid var(--dsw-alias-border-l3)",
              background: "var(--dsw-alias-bg-layer-1)",
              color: "var(--dsw-alias-label-primary)",
              font: "inherit",
            }}
            value={text}
            placeholder={
              req.options.length > 0
                ? "Or type a custom answer…"
                : "Type your answer…"
            }
            onChange={(e) => setText(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && text.trim()) onAnswer(text.trim());
            }}
          />
        </div>
        <div className={appr.actionRow}>
          <button type="button" className="hermit-toolbar-btn" onClick={onSkip}>
            Skip
          </button>
          <button
            type="button"
            className="hermit-send"
            style={{ width: "auto", padding: "0 14px", borderRadius: 8 }}
            disabled={!text.trim() && req.options.length === 0}
            onClick={() => onAnswer(text.trim())}
          >
            Submit
          </button>
        </div>
      </div>
    </div>
  );
}