import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { postLocalTaskComment } from '../../api/tasks';
import { MarkdownText } from '../../lib/markdown-text';

/**
 * AskUser の質問カード (issue #985)。
 *
 * kind='ask' コメントの本文が {type:'ask_questions'} JSON のとき、ChatMessage が
 * このカードを描画する。選択（または自由記述）をまとめ、既存のコメント送信 API に
 * 載せる — waiting_human のジョブはユーザーコメントで再開する既存経路をそのまま
 * 使うため、専用の回答 API は無い。回答テキストは「見出し: 選択」の平文で組み、
 * 会話履歴としてもエージェントの入力としてもそのまま読める形にする。
 */

export interface AskCardOption {
  label: string;
  description?: string;
}

export interface AskCardQuestion {
  question: string;
  header?: string;
  options: AskCardOption[];
  multiSelect?: boolean;
}

export interface AskQuestionsPayload {
  type: 'ask_questions';
  questions: AskCardQuestion[];
}

const OTHER = '__other__';

/** groupCommentsByMovement と同じユーザーコメント判定。 */
const isUserComment = (c: { author: string; kind: string }) =>
  c.kind === 'request' || c.kind === 'comment' || c.kind === 'interjection';

/**
 * いま回答を受け付けている ask コメントの id を返す（無ければ null）。
 * 条件: ジョブが waiting_human で、最後の ask より後にユーザーコメントが無いこと。
 * それ以外の ask カード（回答済み・タスク完了後の履歴）は読み取り専用で描画する —
 * カードの phase はローカル state なのでリロードで戻り、放置すると古いカードの
 * ワンタップで意図しない再実行が起こせてしまう。
 */
export function findInteractiveAskId(
  comments: ReadonlyArray<{ id: number; author: string; kind: string }>,
  jobStatus: string | null | undefined,
): number | null {
  if (jobStatus !== 'waiting_human') return null;
  for (let i = comments.length - 1; i >= 0; i--) {
    const c = comments[i]!;
    if (isUserComment(c)) return null;
    if (c.kind === 'ask') return c.id;
  }
  return null;
}

export function tryParseAskQuestions(body: string): AskQuestionsPayload | null {
  if (!body.startsWith('{')) return null;
  try {
    const data = JSON.parse(body) as AskQuestionsPayload;
    if (data?.type !== 'ask_questions' || !Array.isArray(data.questions) || data.questions.length === 0) return null;
    if (!data.questions.every(q => typeof q?.question === 'string' && Array.isArray(q.options) && q.options.length > 0)) return null;
    return data;
  } catch {
    return null;
  }
}

interface QuestionState {
  selected: Set<string>;
  otherText: string;
}

export function AskUserCard({ taskId, commentId, payload, readOnly = false }: { taskId: number; commentId?: number; payload: AskQuestionsPayload; readOnly?: boolean }) {
  const { t } = useTranslation('chat');
  const [states, setStates] = useState<QuestionState[]>(
    () => payload.questions.map(() => ({ selected: new Set<string>(), otherText: '' })),
  );
  const [phase, setPhase] = useState<'idle' | 'sending' | 'done' | 'error'>('idle');

  const toggle = (qi: number, label: string, multi: boolean | undefined) => {
    setStates(prev => prev.map((s, i) => {
      if (i !== qi) return s;
      const selected = new Set(multi ? s.selected : []);
      if (s.selected.has(label) && multi) selected.delete(label);
      else selected.add(label);
      return { ...s, selected };
    }));
  };

  const answered = (qi: number): boolean => {
    const s = states[qi]!;
    if (s.selected.has(OTHER)) return s.otherText.trim().length > 0;
    return s.selected.size > 0;
  };
  const allAnswered = payload.questions.every((_, qi) => answered(qi));

  const submit = async () => {
    if (phase === 'sending' || phase === 'done') return;
    setPhase('sending');
    const lines = payload.questions.map((q, qi) => {
      const s = states[qi]!;
      const picks = [...s.selected].filter(l => l !== OTHER);
      if (s.selected.has(OTHER)) picks.push(s.otherText.trim());
      return `${q.header ?? q.question}: ${picks.join(', ')}`;
    });
    try {
      await postLocalTaskComment(taskId, lines.join('\n'));
      setPhase('done');
    } catch {
      setPhase('error');
    }
  };

  const disabled = readOnly || phase === 'sending' || phase === 'done';

  return (
    <div className="flex justify-start">
      <div className="max-w-[82%] min-w-[280px] bg-amber-50 dark:bg-amber-500/15 border border-amber-200 dark:border-amber-500/30 rounded-2xl rounded-bl-md px-4 py-3 shadow-sm space-y-3">
        {payload.questions.map((q, qi) => (
          <div key={qi}>
            {q.header ? (
              <div className="text-2xs font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-300">{q.header}</div>
            ) : null}
            {/* 質問文はエージェントが書く地の文で、箇条書き・強調・コード片が普通に
                入ってくる (issue #1197)。自由文の ask 吹き出し・結果バブルと同じ
                MarkdownText に相乗りする — 生 HTML のエスケープと DOMPurify も
                そこで揃うので、ここだけ緩くならない。
                選択肢のラベルと補足 (下の <button> の中) は素のままにしてある。
                MarkdownText は <div>/<p> を吐くので、phrasing content しか置けない
                <button> の中には入れられない。 */}
            <div
              data-dictionary-eligible={commentId === undefined ? undefined : `message-${commentId}-question-${qi}`}
              className="mt-0.5 text-slate-900 dark:text-slate-100"
            >
              <MarkdownText text={q.question} />
            </div>
            <div className="mt-2 flex flex-col gap-1.5" role="group" aria-label={q.header ?? q.question}>
              {q.options.map(option => {
                const active = states[qi]!.selected.has(option.label);
                return (
                  <button
                    key={option.label}
                    type="button"
                    disabled={disabled}
                    aria-pressed={active}
                    onClick={() => toggle(qi, option.label, q.multiSelect)}
                    className={`rounded-lg border px-3 py-2 text-left text-sm transition-colors disabled:opacity-60 ${
                      active
                        ? 'border-accent bg-accent/10 text-slate-900 dark:text-slate-100'
                        : 'border-amber-200 dark:border-amber-500/30 bg-white/70 dark:bg-slate-900/30 text-slate-700 dark:text-slate-200 hover:bg-white'
                    }`}
                  >
                    <span className="font-medium">{option.label}</span>
                    {option.description ? (
                      <span className="block text-2xs text-slate-500 dark:text-slate-400">{option.description}</span>
                    ) : null}
                  </button>
                );
              })}
              <button
                type="button"
                disabled={disabled}
                aria-pressed={states[qi]!.selected.has(OTHER)}
                onClick={() => toggle(qi, OTHER, q.multiSelect)}
                className={`rounded-lg border border-dashed px-3 py-2 text-left text-sm transition-colors disabled:opacity-60 ${
                  states[qi]!.selected.has(OTHER)
                    ? 'border-accent bg-accent/10 text-slate-900 dark:text-slate-100'
                    : 'border-amber-300 dark:border-amber-500/40 text-slate-500 dark:text-slate-400 hover:bg-white/60'
                }`}
              >
                {t('askCard.other')}
              </button>
              {states[qi]!.selected.has(OTHER) ? (
                <input
                  type="text"
                  disabled={disabled}
                  value={states[qi]!.otherText}
                  onChange={e => setStates(prev => prev.map((s, i) => (i === qi ? { ...s, otherText: e.target.value } : s)))}
                  placeholder={t('askCard.otherPlaceholder')}
                  className="rounded-lg border border-amber-200 dark:border-amber-500/30 bg-white dark:bg-slate-900/40 px-3 py-2 text-sm"
                />
              ) : null}
            </div>
          </div>
        ))}
        {readOnly ? (
          <div className="pt-1 text-2xs text-slate-500 dark:text-slate-400">{t('askCard.closed')}</div>
        ) : (
          <div className="flex items-center gap-2 pt-1">
            <button
              type="button"
              onClick={() => void submit()}
              disabled={disabled || !allAnswered}
              className="rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg disabled:opacity-50"
            >
              {phase === 'done' ? t('askCard.submitted') : phase === 'sending' ? t('askCard.sending') : t('askCard.submit')}
            </button>
            {phase === 'error' ? (
              <span role="alert" className="text-xs text-red-600 dark:text-red-300">{t('askCard.failed')}</span>
            ) : null}
          </div>
        )}
      </div>
    </div>
  );
}