'use client';

/**
 * 1:1 문의 V2 클라이언트 컴포넌트
 *
 * V2 라우팅 패턴:
 * - /qna/[id] → 조회 모드 (기본)
 * - /qna/[id]?mode=edit → 수정 모드
 * - /qna/create → 등록 모드
 *
 * 기존 /qna/[id]/edit → /qna/[id]?mode=edit 으로 리다이렉트
 */

import { useState, useEffect, useCallback } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { InquiryDetail } from './InquiryDetail';
import { InquiryForm } from './InquiryForm';
import { transformPostToInquiry, type Inquiry, type Comment } from './types';
import {
  getPost,
  getComments,
  createComment,
  updateComment,
  deleteComment,
  deletePost,
} from '../shared/actions';
import { transformApiToComment } from '../shared/types';
import { DetailPageSkeleton } from '@/components/ui/skeleton';
import { ErrorCard } from '@/components/ui/error-card';

type DetailMode = 'view' | 'edit' | 'create';

interface InquiryDetailClientV2Props {
  inquiryId?: string;
  initialMode?: DetailMode;
}

const BASE_PATH = '/ko/customer-center/qna';

export function InquiryDetailClientV2({ inquiryId, initialMode }: InquiryDetailClientV2Props) {
  const router = useRouter();
  const searchParams = useSearchParams();

  // URL의 mode 쿼리 파라미터 확인
  const modeFromQuery = searchParams.get('mode') as DetailMode | null;
  const isCreateMode = !inquiryId || inquiryId === 'create';

  // 모드 결정: create > initialMode > query param > 기본값 'view'
  const [mode, setMode] = useState<DetailMode>(() => {
    if (isCreateMode) return 'create';
    if (initialMode) return initialMode;
    if (modeFromQuery === 'edit') return 'edit';
    return 'view';
  });

  // 데이터 상태
  const [inquiry, setInquiry] = useState<Inquiry | null>(null);
  const [comments, setComments] = useState<Comment[]>([]);
  const [isLoading, setIsLoading] = useState(!isCreateMode);
  const [error, setError] = useState<string | null>(null);
  const [currentUserId, setCurrentUserId] = useState<string>('');

  // 현재 사용자 ID 가져오기 (localStorage에서)
  useEffect(() => {
    const userStr = localStorage.getItem('user');
    if (userStr) {
      try {
        const user = JSON.parse(userStr);
        setCurrentUserId(String(user.id || ''));
      } catch {
        setCurrentUserId('');
      }
    }
  }, []);

  // 데이터 로드
  useEffect(() => {
    if (isCreateMode) return;

    async function fetchData() {
      setIsLoading(true);
      setError(null);

      // 게시글과 댓글 동시 로드
      const [postResult, commentsResult] = await Promise.all([
        getPost('qna', inquiryId!),
        getComments('qna', inquiryId!),
      ]);

      if (postResult.success && postResult.data) {
        setInquiry(transformPostToInquiry(postResult.data));
      } else {
        setError(postResult.error || '문의를 찾을 수 없습니다.');
      }

      if (commentsResult.success && commentsResult.data) {
        setComments(commentsResult.data.map(transformApiToComment));
      }

      setIsLoading(false);
    }

    fetchData();
  }, [inquiryId, isCreateMode]);

  // URL 쿼리 파라미터 변경 감지
  useEffect(() => {
    if (isCreateMode) return;

    if (modeFromQuery === 'edit') {
      setMode('edit');
    } else if (!modeFromQuery && mode !== 'view') {
      setMode('view');
    }
  }, [modeFromQuery, isCreateMode, mode]);

  // ===== 댓글 핸들러 =====
  const handleAddComment = useCallback(
    async (content: string) => {
      if (!inquiryId) return;
      const result = await createComment('qna', inquiryId, content);
      if (result.success && result.data) {
        setComments((prev) => [...prev, transformApiToComment(result.data!)]);
      } else {
        console.error('댓글 등록 실패:', result.error);
      }
    },
    [inquiryId]
  );

  const handleUpdateComment = useCallback(
    async (commentId: string, content: string) => {
      if (!inquiryId) return;
      const result = await updateComment('qna', inquiryId, commentId, content);
      if (result.success && result.data) {
        setComments((prev) =>
          prev.map((c) => (c.id === commentId ? transformApiToComment(result.data!) : c))
        );
      } else {
        console.error('댓글 수정 실패:', result.error);
      }
    },
    [inquiryId]
  );

  const handleDeleteComment = useCallback(
    async (commentId: string) => {
      if (!inquiryId) return;
      const result = await deleteComment('qna', inquiryId, commentId);
      if (result.success) {
        setComments((prev) => prev.filter((c) => c.id !== commentId));
      } else {
        console.error('댓글 삭제 실패:', result.error);
      }
    },
    [inquiryId]
  );

  // 문의 삭제
  const handleDeleteInquiry = useCallback(async () => {
    if (!inquiryId) return false;
    const result = await deletePost('qna', inquiryId);
    return result.success;
  }, [inquiryId]);

  // ===== 로딩 상태 =====
  if (isLoading) {
    return <DetailPageSkeleton sections={1} fieldsPerSection={4} />;
  }

  // ===== 에러 상태 =====
  if (error) {
    return (
      <ErrorCard
        type="not-found"
        title="문의를 찾을 수 없습니다"
        description={error}
        showHomeButton={false}
        onBack={() => router.push(BASE_PATH)}
        backButtonLabel="목록으로"
      />
    );
  }

  // ===== 등록 모드 =====
  if (mode === 'create') {
    return <InquiryForm mode="create" />;
  }

  // ===== 수정 모드 =====
  if (mode === 'edit' && inquiry) {
    return <InquiryForm mode="edit" initialData={inquiry} />;
  }

  // ===== 조회 모드 =====
  if (inquiry) {
    return (
      <InquiryDetail
        inquiry={inquiry}
        comments={comments}
        currentUserId={currentUserId}
        onAddComment={handleAddComment}
        onUpdateComment={handleUpdateComment}
        onDeleteComment={handleDeleteComment}
        onDeleteInquiry={handleDeleteInquiry}
      />
    );
  }

  // 데이터 없음 (비정상 상태)
  return (
    <ErrorCard
      type="error"
      title="오류가 발생했습니다"
      description="잠시 후 다시 시도해주세요."
      showHomeButton={false}
      onBack={() => router.push(BASE_PATH)}
      backButtonLabel="목록으로"
    />
  );
}

export default InquiryDetailClientV2;
