import { useState } from 'react';
import { authApi } from '../../api/endpoints';
import { ApiRequestError } from '../../api/client';
import { useAuthStore } from '../../store/authStore';
import { Button } from '../../components/ui/Button';
import './login.css';

/**
 * 초대 코드 참여 (SCR-01) — 장치업체(CONTRACTOR)는 사업자번호로 킨텍스 등록업체 검증.
 * 미등록 시 계약 NOT_REGISTERED_COMPANY(403) → 차단 모달 노출.
 */
export function InviteDialog({
  onClose,
  onSuccess,
}: {
  onClose: () => void;
  onSuccess?: () => void;
}) {
  const applyLogin = useAuthStore((s) => s.applyLogin);
  const [inviteCode, setInviteCode] = useState('');
  const [regNo, setRegNo] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [blocked, setBlocked] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setBlocked(false);
    setSubmitting(true);
    try {
      const res = await authApi.acceptInvite({
        inviteCode: inviteCode.trim(),
        companyRegistrationNo: regNo.trim(),
      });
      applyLogin(res);
      onSuccess?.();
      onClose();
    } catch (err) {
      if (err instanceof ApiRequestError) {
        if (err.code === 'NOT_REGISTERED_COMPANY') {
          setBlocked(true);
        } else if (err.code === 'NOT_IMPLEMENTED') {
          setError('초대 수락 서비스가 준비 중입니다.');
        } else {
          setError(err.message);
        }
      } else {
        setError('초대 수락 중 오류가 발생했습니다.');
      }
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="kx-modal" role="dialog" aria-modal="true" aria-labelledby="invite-title">
      <div className="kx-modal__backdrop" onClick={onClose} />
      <div className="kx-modal__panel">
        {blocked ? (
          <div className="kx-modal__blocked" role="alert">
            <span className="kx-modal__blocked-icon" aria-hidden="true">⛔</span>
            <h3 id="invite-title">참여할 수 없습니다</h3>
            <p>
              킨텍스 등록업체만 참여할 수 있습니다. 등록업체 확인 후 다시 시도하거나 주최자
              사무국에 문의해 주세요.
            </p>
            <div className="kx-modal__actions">
              <Button variant="secondary" onClick={() => setBlocked(false)}>
                다시 입력
              </Button>
              <Button onClick={onClose}>닫기</Button>
            </div>
          </div>
        ) : (
          <form onSubmit={submit}>
            <h3 id="invite-title" className="kx-modal__title">
              초대 코드로 참여하기
            </h3>
            <p className="kx-modal__desc">
              초대 링크에 포함된 코드를 입력하세요. 장치·시공업체는 사업자등록번호로 킨텍스
              등록업체 검증이 필요합니다.
            </p>

            <div className="kx-field">
              <label htmlFor="invite-code">초대 코드</label>
              <input
                id="invite-code"
                value={inviteCode}
                onChange={(e) => setInviteCode(e.target.value)}
                placeholder="INV-XXXX"
                required
              />
            </div>
            <div className="kx-field">
              <label htmlFor="reg-no">사업자등록번호 (장치·시공업체)</label>
              <input
                id="reg-no"
                value={regNo}
                onChange={(e) => setRegNo(e.target.value)}
                placeholder="123-45-67890"
                inputMode="numeric"
              />
            </div>

            {error && (
              <p className="kx-login__error" role="alert">
                {error}
              </p>
            )}

            <div className="kx-modal__actions">
              <Button variant="ghost" type="button" onClick={onClose}>
                취소
              </Button>
              <Button type="submit" disabled={submitting}>
                {submitting ? '확인 중…' : '참여하기'}
              </Button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}
