/*
 * SCR-23 신고서류 작성 (웹폼 → HWP/PDF) [M6 / F022]. Stitch scr_23_report_authoring 이식.
 * 진입: SCR-22 서류·마일스톤에서 "[작성]" (design.md §3 SCR-23).
 * 구성: ①좌 웹폼(섹션 아코디언 + AI 자동채움 + 필수 검증) ②우 실시간 A4 문서 미리보기
 *       ③하단 고정 액션 바(임시 저장·HWP 생성·PDF 생성·제출 / kxwp 릴레이 안내).
 * ★ 임시저장/제출은 실 API(POST /documents/{docType} — save|submit) 배선.
 *   HWP/PDF 생성은 파일 큐 후속 → 해당 버튼 disabled + 툴팁 유지.
 */
import { useCallback, useEffect, useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { AiLabel } from '../../components/ui/Badge';
import { Button } from '../../components/ui/Button';
import { ErrorState, Skeleton } from '../../components/ui/States';
import { IconChevronDown, IconDocument, IconSpark, IconWarning } from '../../components/ui/icons';
import { ApiRequestError } from '../../api/client';
import { useResolvedEventId } from '../../hooks/useResolvedEventId';
import { docsApi, type DocAction } from './docsApi';
import './docs.css';

const RENDER_TOOLTIP = 'HWP/PDF 생성은 파일 큐 연동 후속(준비중)';

/** 서류 표시명 → doc_type 코드(백엔드 required_document.doc_type). 미매핑 시 재해대처계획서. */
const DOC_TYPE_CODE: Record<string, string> = {
  행사운영계획서: 'operation_plan',
  부스배치도: 'booth_layout',
  재해대처계획서: 'disaster_plan',
  '리깅 구조계산서': 'rigging_calc',
  '방화관리 책임서약서': 'fire_safety',
  '주차관리 신청서': 'parking',
  '보안요원 배치계획': 'security',
  '위험물 반입신고서': 'hazmat',
};

interface ReportForm {
  eventName: string;
  eventDate: string;
  venue: string;
  visitors: string;
  safetyManager: string;
  safetyPhone: string;
  guardCount: string;
  fireStation: string;
  policeStation: string;
  medical: string;
  hazardous: string;
}

const EMPTY_FORM: ReportForm = {
  eventName: '',
  eventDate: '',
  venue: '제1전시장 1~3홀',
  visitors: '',
  safetyManager: '',
  safetyPhone: '',
  guardCount: '',
  fireStation: '',
  policeStation: '',
  medical: '',
  hazardous: '',
};

const AUTOFILL: ReportForm = {
  eventName: '2026 스마트팩토리 코리아',
  eventDate: '2026-08-11',
  venue: '제1전시장 1~3홀',
  visitors: '15000',
  safetyManager: '김안전',
  safetyPhone: '031-810-8000',
  guardCount: '45',
  fireStation: '고양소방서 (031-909-0119)',
  policeStation: '일산동부경찰서 (031-8073-0112)',
  medical: '현장 의무실 1개소 · 상주 간호사 2명',
  hazardous: 'LPG 소형용기 2조, 배터리 시연 셀 (안전관리자 상시 배치)',
};

const VENUES = [
  '제1전시장 1~3홀',
  '제1전시장 4~5홀',
  '제2전시장 7~8홀',
  '제2전시장 9~10홀',
];

type SectionId = 'overview' | 'safety' | 'contact' | 'hazard';
const SECTIONS: { id: SectionId; label: string }[] = [
  { id: 'overview', label: '1. 행사 개요' },
  { id: 'safety', label: '2. 안전 관리 담당' },
  { id: 'contact', label: '3. 비상 연락 체계' },
  { id: 'hazard', label: '4. 위험물 목록' },
];

/** 로컬 샘플 데이터의 로딩/성공/에러 3상태 시뮬레이션(실 API 호출 없음). */
function useSampleReady() {
  const [status, setStatus] = useState<'loading' | 'error' | 'success'>('loading');
  const load = useCallback(() => {
    setStatus('loading');
    const t = setTimeout(() => setStatus('success'), 300);
    return () => clearTimeout(t);
  }, []);
  useEffect(load, [load]);
  return { status, retry: load };
}

/** 미리보기용 날짜 포맷: "2026-08-11" → "2026. 08. 11." */
function fmtDate(v: string): string {
  if (!v) return '—';
  const [y, m, d] = v.split('-');
  return `${y}. ${m}. ${d}.`;
}

export function ReportAuthoringPage({ docType = '재해대처계획서' }: { docType?: string }) {
  const { status, retry } = useSampleReady();
  const eventId = useResolvedEventId();
  const queryClient = useQueryClient();
  const docTypeCode = DOC_TYPE_CODE[docType] ?? 'disaster_plan';
  const [form, setForm] = useState<ReportForm>(EMPTY_FORM);
  const [open, setOpen] = useState<Record<SectionId, boolean>>({
    overview: true,
    safety: false,
    contact: false,
    hazard: false,
  });
  const [showErrors, setShowErrors] = useState(false);
  const [toast, setToast] = useState<string | null>(null);

  useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(null), 2200);
    return () => clearTimeout(t);
  }, [toast]);

  const set = <K extends keyof ReportForm>(k: K, v: ReportForm[K]) =>
    setForm((f) => ({ ...f, [k]: v }));
  const toggle = (id: SectionId) => setOpen((o) => ({ ...o, [id]: !o[id] }));

  const invalid = {
    eventName: !form.eventName.trim(),
    eventDate: !form.eventDate,
    safetyManager: !form.safetyManager.trim(),
  };
  const hasError = Object.values(invalid).some(Boolean);

  const transition = useMutation({
    mutationFn: (action: DocAction) =>
      docsApi.transition(eventId as string, docTypeCode, action),
    onSuccess: (_data, action) => {
      // 목록(SCR-22) 캐시 무효화 — 되돌아갈 때 상태 최신화.
      queryClient.invalidateQueries({ queryKey: ['docs-documents', eventId] });
      queryClient.invalidateQueries({ queryKey: ['docs-review', eventId] });
      setToast(
        action === 'submit'
          ? '제출 완료 — kxwp에 업로드할 파일을 생성하세요.'
          : '임시 저장 완료',
      );
    },
    onError: (e) => {
      const msg = e instanceof ApiRequestError ? e.message : '저장에 실패했습니다.';
      setToast(msg);
    },
  });

  function saveDraft() {
    if (!eventId) {
      setToast('대상 행사를 확인할 수 없습니다.');
      return;
    }
    transition.mutate('save');
  }

  function submit() {
    if (hasError) {
      setShowErrors(true);
      setOpen((o) => ({ ...o, overview: true, safety: true }));
      setToast('필수 항목을 입력하세요.');
      return;
    }
    if (!eventId) {
      setToast('대상 행사를 확인할 수 없습니다.');
      return;
    }
    transition.mutate('submit');
  }

  if (status === 'loading') {
    return (
      <div className="kx-page" aria-busy="true">
        <div className="kx-rep">
          <div className="kx-rep__form">
            <Skeleton height={56} />
            <Skeleton height={220} />
          </div>
          <div className="kx-card">
            <Skeleton height={420} />
          </div>
        </div>
      </div>
    );
  }
  if (status === 'error') {
    return (
      <div className="kx-page">
        <ErrorState message="작성 서식을 불러오지 못했습니다." onRetry={retry} />
      </div>
    );
  }

  return (
    <div className="kx-page">
      <header className="kx-doc__head">
        <div>
          <h1 className="kx-doc__title">{docType} 작성</h1>
          <p className="kx-doc__subtitle">행사 성격에 맞는 안전 관리 계획을 수립하세요 · 웹폼 → HWP/PDF</p>
        </div>
      </header>

      <div className="kx-rep">
        {/* 좌: 폼 */}
        <form className="kx-rep__form" onSubmit={(e) => e.preventDefault()}>
          <Button
            type="button"
            variant="ai"
            className="kx-rep__autofill"
            leadingIcon={<IconSpark size={16} />}
            onClick={() => {
              setForm(AUTOFILL);
              setShowErrors(false);
              setToast('행사 데이터로 자동 채움 완료 (AI)');
            }}
          >
            행사 데이터로 자동 채움
          </Button>
          <AiLabel>AI 자동 채움 — 검토 후 제출</AiLabel>

          {SECTIONS.map((sec) => (
            <div key={sec.id} className={`kx-rep__acc ${open[sec.id] ? 'is-open' : ''}`}>
              <button
                type="button"
                className="kx-rep__acc-head"
                aria-expanded={open[sec.id]}
                onClick={() => toggle(sec.id)}
              >
                <h3>{sec.label}</h3>
                <span className="kx-rep__chev" aria-hidden="true">
                  <IconChevronDown size={20} />
                </span>
              </button>
              {open[sec.id] && (
                <div className="kx-rep__acc-body">
                  {sec.id === 'overview' && (
                    <>
                      <label className="kx-doc__field kx-doc__field--full">
                        <span className="kx-doc__label">행사명 *</span>
                        <input
                          className={`kx-doc__input ${showErrors && invalid.eventName ? 'is-invalid' : ''}`}
                          value={form.eventName}
                          placeholder="예: 2026 스마트팩토리 코리아"
                          onChange={(e) => set('eventName', e.target.value)}
                        />
                        {showErrors && invalid.eventName && (
                          <span className="kx-doc__err">행사명은 필수입니다.</span>
                        )}
                      </label>
                      <label className="kx-doc__field">
                        <span className="kx-doc__label">개최 일시 *</span>
                        <input
                          type="date"
                          className={`kx-doc__input ${showErrors && invalid.eventDate ? 'is-invalid' : ''}`}
                          value={form.eventDate}
                          onChange={(e) => set('eventDate', e.target.value)}
                        />
                        {showErrors && invalid.eventDate && (
                          <span className="kx-doc__err">개최 일시는 필수입니다.</span>
                        )}
                      </label>
                      <label className="kx-doc__field">
                        <span className="kx-doc__label">장소</span>
                        <select
                          className="kx-doc__select"
                          value={form.venue}
                          onChange={(e) => set('venue', e.target.value)}
                        >
                          {VENUES.map((v) => (
                            <option key={v} value={v}>
                              {v}
                            </option>
                          ))}
                        </select>
                      </label>
                      <label className="kx-doc__field kx-doc__field--full">
                        <span className="kx-doc__label">예상 관람객 수(명)</span>
                        <input
                          type="number"
                          min={0}
                          className="kx-doc__input"
                          value={form.visitors}
                          placeholder="15000"
                          onChange={(e) => set('visitors', e.target.value)}
                        />
                      </label>
                    </>
                  )}

                  {sec.id === 'safety' && (
                    <>
                      <label className="kx-doc__field">
                        <span className="kx-doc__label">총괄 안전책임자 *</span>
                        <input
                          className={`kx-doc__input ${showErrors && invalid.safetyManager ? 'is-invalid' : ''}`}
                          value={form.safetyManager}
                          placeholder="성명"
                          onChange={(e) => set('safetyManager', e.target.value)}
                        />
                        {showErrors && invalid.safetyManager && (
                          <span className="kx-doc__err">안전책임자는 필수입니다.</span>
                        )}
                      </label>
                      <label className="kx-doc__field">
                        <span className="kx-doc__label">비상 연락처</span>
                        <input
                          className="kx-doc__input"
                          value={form.safetyPhone}
                          placeholder="031-000-0000"
                          onChange={(e) => set('safetyPhone', e.target.value)}
                        />
                      </label>
                      <label className="kx-doc__field kx-doc__field--full">
                        <span className="kx-doc__label">현장 안전요원 수(명)</span>
                        <input
                          type="number"
                          min={0}
                          className="kx-doc__input"
                          value={form.guardCount}
                          placeholder="45"
                          onChange={(e) => set('guardCount', e.target.value)}
                        />
                      </label>
                    </>
                  )}

                  {sec.id === 'contact' && (
                    <>
                      <label className="kx-doc__field kx-doc__field--full">
                        <span className="kx-doc__label">관할 소방서</span>
                        <input
                          className="kx-doc__input"
                          value={form.fireStation}
                          placeholder="소방서명 · 연락처"
                          onChange={(e) => set('fireStation', e.target.value)}
                        />
                      </label>
                      <label className="kx-doc__field kx-doc__field--full">
                        <span className="kx-doc__label">관할 경찰서</span>
                        <input
                          className="kx-doc__input"
                          value={form.policeStation}
                          placeholder="경찰서명 · 연락처"
                          onChange={(e) => set('policeStation', e.target.value)}
                        />
                      </label>
                      <label className="kx-doc__field kx-doc__field--full">
                        <span className="kx-doc__label">의무·응급 체계</span>
                        <input
                          className="kx-doc__input"
                          value={form.medical}
                          placeholder="현장 의무실 · 상주 인력"
                          onChange={(e) => set('medical', e.target.value)}
                        />
                      </label>
                    </>
                  )}

                  {sec.id === 'hazard' && (
                    <label className="kx-doc__field kx-doc__field--full">
                      <span className="kx-doc__label">위험물 목록·관리 방안</span>
                      <textarea
                        className="kx-doc__textarea"
                        value={form.hazardous}
                        placeholder="반입 위험물 종류·수량·안전관리 방안을 기재하세요."
                        onChange={(e) => set('hazardous', e.target.value)}
                      />
                    </label>
                  )}
                </div>
              )}
            </div>
          ))}
        </form>

        {/* 우: A4 실시간 미리보기 */}
        <div className="kx-rep__preview" aria-label="문서 미리보기">
          <article className="kx-rep__a4">
            <div className="kx-rep__a4-title">
              <h2><IconDocument className="kx-title-ic" size={18} />{docType}</h2>
            </div>
            <table className="kx-rep__table">
              <tbody>
                <tr>
                  <th>행 사 명</th>
                  <td colSpan={3}>{form.eventName || '—'}</td>
                </tr>
                <tr>
                  <th>일 시</th>
                  <td>{fmtDate(form.eventDate)}</td>
                  <th>장 소</th>
                  <td>{form.venue}</td>
                </tr>
                <tr>
                  <th>주최/주관</th>
                  <td>KINTEX 조직위원회</td>
                  <th>예상인원</th>
                  <td>
                    {form.visitors
                      ? `${Number(form.visitors).toLocaleString()}명`
                      : '—'}
                  </td>
                </tr>
              </tbody>
            </table>

            <section>
              <h4>1. 안전관리 조직체계</h4>
              <div className="kx-rep__box">
                총괄 안전책임자 {form.safetyManager || '(미지정)'}
                {form.safetyPhone ? ` (${form.safetyPhone})` : ''} 지휘 하에 현장 안전요원{' '}
                {form.guardCount || '0'}인을 배치한다. 각 홀 출입구에 안전요원을 상주시켜 밀집도를
                관리하며, 정기 장내 방송으로 안전 수칙을 안내한다.
              </div>
            </section>

            <section>
              <h4>2. 비상 연락 체계</h4>
              <ul>
                <li>관할 소방서: {form.fireStation || '—'}</li>
                <li>관할 경찰서: {form.policeStation || '—'}</li>
                <li>의무·응급: {form.medical || '—'}</li>
              </ul>
            </section>

            <section>
              <h4>3. 주요 재해대처 방안</h4>
              <ul>
                <li>화재 시: 소방시설 즉시 가동 및 안내 방송을 통한 관람객 대피 유도</li>
                <li>응급환자 발생 시: 현장 의무실 이송 및 119 구급대 협조 요청</li>
                <li>정전 시: 비상 발전기 가동 및 유도등 점등 확인</li>
              </ul>
            </section>

            <section>
              <h4>4. 위험물 관리</h4>
              <div className="kx-rep__box">{form.hazardous || '해당 없음'}</div>
            </section>

            <div className="kx-rep__sign">
              <div className="kx-rep__sign-date">{fmtDate(form.eventDate)}</div>
              <div className="kx-rep__sign-row">
                <span className="kx-rep__sign-name">주식회사 킨텍스 대표이사</span>
                <span className="kx-rep__stamp" aria-hidden="true">
                  KINTEX
                  <br />
                  직인
                </span>
              </div>
            </div>
          </article>
        </div>
      </div>

      {/* 하단 고정 액션 바 */}
      <div className="kx-rep__bar">
        <p className="kx-rep__bar-note">
          <IconWarning size={16} /> 제출은 kxwp 업로드용 파일 생성 방식입니다
        </p>
        <div className="kx-rep__bar-actions">
          <Button variant="ghost" onClick={saveDraft} disabled={transition.isPending}>
            임시 저장
          </Button>
          <Button variant="secondary" disabled title={RENDER_TOOLTIP}>
            HWP 생성
          </Button>
          <Button variant="secondary" disabled title={RENDER_TOOLTIP}>
            PDF 생성
          </Button>
          <Button onClick={submit} disabled={transition.isPending}>
            제출
          </Button>
        </div>
      </div>

      {toast && (
        <div className="kx-doc__toast" role="status">
          {toast}
        </div>
      )}
    </div>
  );
}
