import { useEffect, useState } from 'react';
import { layoutApi, renderApi } from '../../api/endpoints';
import { ApiRequestError } from '../../api/client';
import { subscribeRenderJob } from '../../api/websocket';
import { Button } from '../../components/ui/Button';
import { AiLabel } from '../../components/ui/Badge';
import { AiImage } from '../../components/ui/AiImage';
import { ErrorState } from '../../components/ui/States';
import type { AutoLayoutOption, RenderJobDto } from '../../api/types';
import './auto-layout.css';

/*
 * AI 자동배치 (SCR-03 → SCR-04 브릿지).
 * 조건 입력 → auto-generate로 1·2·3안 생성 → S7 조감(RenderJob) WebSocket 수신 →
 * 라디오 선택 → "이 안으로 편집 시작"(병합/적용). 실제 병합은 상위에서 처리(onApply).
 */
interface AutoLayoutDialogProps {
  eventId: string;
  hallId: string;
  onClose: () => void;
  onApply: (option: AutoLayoutOption) => void;
}

const DEFAULT_REQ = {
  targetBoothCount: 510,
  premiumRatio: 0.15,
  stageCount: 1,
  loungeCount: 1,
  mainEntranceCount: 2,
  optionCount: 3,
};

export function AutoLayoutDialog({ eventId, hallId, onClose, onApply }: AutoLayoutDialogProps) {
  const [req, setReq] = useState(DEFAULT_REQ);
  const [phase, setPhase] = useState<'form' | 'generating' | 'result'>('form');
  const [options, setOptions] = useState<AutoLayoutOption[]>([]);
  const [renderJobs, setRenderJobs] = useState<Record<string, RenderJobDto>>({});
  const [selected, setSelected] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  // 자연어 조건 해석 상태 (AI가 문장을 폼 값으로 파싱 — 최종 권위는 폼).
  const [nlText, setNlText] = useState('');
  const [interpreting, setInterpreting] = useState(false);
  const [nlNote, setNlNote] = useState<string | null>(null);
  const [nlDegraded, setNlDegraded] = useState(false);

  async function interpret() {
    if (!nlText.trim() || interpreting) return;
    setInterpreting(true);
    setError(null);
    try {
      const res = await layoutApi.interpret(eventId, hallId, { text: nlText });
      // 서버 클램핑된 조건으로 폼 자동 채움 — 사용자가 확인·수정 가능.
      setReq({
        targetBoothCount: res.request.targetBoothCount,
        premiumRatio: res.request.premiumRatio,
        stageCount: res.request.stageCount,
        loungeCount: res.request.loungeCount,
        mainEntranceCount: res.request.mainEntranceCount,
        optionCount: Math.min(3, Math.max(1, res.request.optionCount)),
      });
      setNlNote(res.interpretedNote);
      setNlDegraded(res.degraded);
    } catch {
      // 해석 실패도 수동 폼은 유지 — 안내만.
      setNlNote('AI 해석을 사용할 수 없습니다. 아래 값을 직접 입력해 주세요.');
      setNlDegraded(true);
    } finally {
      setInterpreting(false);
    }
  }

  // S7 조감 RenderJob 구독 (옵션별 s7RenderJobId).
  useEffect(() => {
    if (phase !== 'result') return;
    const unsubs = options
      .filter((o) => o.s7RenderJobId)
      .map((o) =>
        subscribeRenderJob(o.s7RenderJobId, (job) =>
          setRenderJobs((prev) => ({ ...prev, [o.optionId]: job })),
        ),
      );
    // 폴백: 구독 즉시 현재 상태 1회 조회
    options.forEach(async (o) => {
      if (!o.s7RenderJobId) return;
      try {
        const job = await renderApi.status(eventId, o.s7RenderJobId);
        setRenderJobs((prev) => ({ ...prev, [o.optionId]: job }));
      } catch {
        /* 미구현/미완 무시 */
      }
    });
    return () => unsubs.forEach((u) => u());
  }, [phase, options, eventId]);

  async function generate() {
    setError(null);
    setPhase('generating');
    try {
      // ai=true — 각 안에 엔진 metrics 근거 AI 장단점 요약 부가(실패해도 배치는 성공).
      const res = await layoutApi.autoGenerate(eventId, hallId, req, true);
      setOptions(res);
      setSelected(res[0]?.optionId ?? null);
      setPhase('result');
    } catch (err) {
      if (err instanceof ApiRequestError) {
        setError(
          err.code === 'NOT_IMPLEMENTED'
            ? 'AI 자동배치 엔진이 준비 중입니다(백엔드 매퍼 대기).'
            : err.message,
        );
      } else {
        setError('자동배치 생성 중 오류가 발생했습니다.');
      }
      setPhase('form');
    }
  }

  const selectedOption = options.find((o) => o.optionId === selected) ?? null;

  return (
    <div className="kx-modal" role="dialog" aria-modal="true" aria-labelledby="auto-title">
      <div className="kx-modal__backdrop" onClick={onClose} />
      <div className="kx-auto">
        <header className="kx-auto__header">
          <div>
            <h3 id="auto-title" className="kx-auto__title">
              <AiLabel>AI 자동배치</AiLabel> 배치안 생성
            </h3>
            <p className="kx-auto__sub">
              제약조건을 입력하면 복수 배치안을 생성합니다. 마음에 드는 안을 선택해 편집을
              시작하세요.
            </p>
          </div>
          <button className="kx-auto__close" onClick={onClose} aria-label="닫기">
            ✕
          </button>
        </header>

        {phase === 'form' && (
          <div className="kx-auto__body">
            <div className="kx-auto__nl">
              <label className="kx-auto__nl-label" htmlFor="auto-nl">
                <AiLabel>WISE AI</AiLabel> 자연어로 조건 입력
              </label>
              <div className="kx-auto__nl-row">
                <input
                  id="auto-nl"
                  className="kx-auto__nl-input"
                  type="text"
                  value={nlText}
                  placeholder="예: 부스 120개, 프리미엄 3할, 무대 1개, 입구 2개로 3안 뽑아줘"
                  onChange={(e) => setNlText(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      e.preventDefault();
                      interpret();
                    }
                  }}
                />
                <Button
                  variant="ai"
                  leadingIcon="✦"
                  onClick={interpret}
                  disabled={!nlText.trim() || interpreting}
                >
                  {interpreting ? '해석 중…' : 'AI 해석'}
                </Button>
              </div>
              {nlNote && (
                <p
                  className={`kx-auto__nl-note ${nlDegraded ? 'is-degraded' : ''}`}
                  aria-live="polite"
                >
                  {nlDegraded ? '⚠ ' : '✓ '}
                  {nlNote}
                  {!nlDegraded && ' 아래 값을 확인·수정한 뒤 생성하세요.'}
                </p>
              )}
            </div>
            <div className="kx-auto__form">
              <NumField
                label="목표 부스 수"
                value={req.targetBoothCount}
                onChange={(v) => setReq({ ...req, targetBoothCount: v })}
              />
              <NumField
                label="프리미엄 비율 (%)"
                value={Math.round(req.premiumRatio * 100)}
                onChange={(v) => setReq({ ...req, premiumRatio: v / 100 })}
              />
              <NumField
                label="무대 수"
                value={req.stageCount}
                onChange={(v) => setReq({ ...req, stageCount: v })}
              />
              <NumField
                label="주출입구 수"
                value={req.mainEntranceCount}
                onChange={(v) => setReq({ ...req, mainEntranceCount: v })}
              />
              <NumField
                label="생성 안 수"
                value={req.optionCount}
                onChange={(v) => setReq({ ...req, optionCount: Math.min(3, Math.max(1, v)) })}
              />
            </div>
            {error && <ErrorState message={error} onRetry={generate} />}
            <div className="kx-modal__actions">
              <Button variant="ghost" onClick={onClose}>
                취소
              </Button>
              <Button variant="ai" leadingIcon="✦" onClick={generate}>
                배치안 생성
              </Button>
            </div>
          </div>
        )}

        {phase === 'generating' && (
          <div className="kx-auto__generating" aria-live="polite">
            <span className="kx-aiimg__spinner" aria-hidden="true" />
            <p>제약조건 풀이 중… 복수 안 생성</p>
          </div>
        )}

        {phase === 'result' && (
          <div className="kx-auto__body">
            <div className="kx-auto__grid">
              {options.map((o) => {
                const job = renderJobs[o.optionId];
                const isSel = o.optionId === selected;
                return (
                  <label
                    key={o.optionId}
                    className={`kx-auto__card ${isSel ? 'is-selected' : ''}`}
                  >
                    <input
                      type="radio"
                      name="auto-option"
                      checked={isSel}
                      onChange={() => setSelected(o.optionId)}
                    />
                    <AiImage
                      imageUrl={job?.imageUrl ?? null}
                      status={job?.status ?? 'QUEUED'}
                      watermarkText={
                        job?.watermarkText ?? 'AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있습니다'
                      }
                      notice={
                        job?.notice ??
                        'AI 생성 이미지는 계약·심사 서류에 사용할 수 없습니다 — 시공 기준은 도면입니다'
                      }
                      shotLabel="S7 홀 전경"
                      alt={`${o.label} 조감`}
                    />
                    <div className="kx-auto__card-body">
                      <span className="kx-auto__card-title">{o.label}</span>
                      <ul className="kx-auto__metrics tnum">
                        <li>부스 {o.summary.boothCount} / {o.summary.targetBoothCount}</li>
                        <li>판매면적 {o.summary.salesAreaM2.toLocaleString()}㎡</li>
                        <li>최소 통로폭 {o.summary.minAisleWidthM}m</li>
                        <li
                          className={
                            o.summary.violationBlock > 0 ? 'kx-auto__viol-bad' : 'kx-auto__viol-ok'
                          }
                        >
                          위반 {o.summary.violationBlock + o.summary.violationWarn}건
                        </li>
                      </ul>
                      {o.aiSummary && (
                        <div className="kx-auto__ai-summary">
                          <AiLabel>WISE AI</AiLabel>
                          <p className="kx-auto__ai-summary-text">{o.aiSummary}</p>
                        </div>
                      )}
                    </div>
                  </label>
                );
              })}
            </div>
            <div className="kx-modal__actions">
              <Button variant="ghost" onClick={() => setPhase('form')}>
                조건 수정
              </Button>
              <Button
                disabled={!selectedOption}
                onClick={() => selectedOption && onApply(selectedOption)}
              >
                이 안으로 편집 시작
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function NumField({
  label,
  value,
  onChange,
}: {
  label: string;
  value: number;
  onChange: (v: number) => void;
}) {
  return (
    <div className="kx-field">
      <label>{label}</label>
      <input
        type="number"
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="tnum"
      />
    </div>
  );
}
