import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useSearchParams, useNavigate } from 'react-router-dom';
import { 
  Menu, 
  X, 
  ChevronRight, 
  Home, 
  Download, 
  Search, 
  Globe, 
  Phone, 
  Mail,
  FileText,
  List as ListIcon
} from 'lucide-react';

/**
 * [설정] PHP API 주소
 * 실제 운영 서버의 api_view.php 경로로 변경해야 합니다.
 * 예: 'http://localhost/kr/contents/api_view.php'
 */
const API_URL = '/kr/contents/api_view.php'; // 개발 환경에 맞게 수정 필요

// --- 컴포넌트: 헤더 (GNB) ---
const Header = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // 실제로는 여기서 api_menu.php를 호출하여 전체 트리 메뉴를 가져와야 합니다.
  // 여기서는 UI 시뮬레이션을 위해 하드코딩된 메뉴를 사용합니다.
  const gnbItems = [
    { id: 10, title: '회사소개' },
    { id: 20, title: 'H/W 솔루션' },
    { id: 30, title: 'S/W 솔루션' }, // 주요 테스트 대상
    { id: 40, title: 'SI 비즈니스' },
    { id: 50, title: '고객지원' },
  ];

  return (
    <header className="sticky top-0 z-50 w-full bg-white border-b border-gray-200 shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-20 items-center">
          {/* 로고 */}
          <div className="flex-shrink-0 flex items-center cursor-pointer" onClick={() => window.location.href='/'}>
            <div className="w-10 h-10 bg-blue-700 rounded-lg flex items-center justify-center text-white font-bold text-xl mr-3">J</div>
            <div className="flex flex-col">
              <span className="text-xl font-bold text-slate-800 tracking-tight">Jeongwon Ensys</span>
              <span className="text-xs text-slate-500 tracking-wider">Total IT Solution</span>
            </div>
          </div>

          {/* 데스크탑 메뉴 */}
          <nav className="hidden md:flex space-x-8">
            {gnbItems.map((item) => (
              <Link 
                key={item.id} 
                to={`/?menu_id=${item.id}`}
                className="text-slate-600 hover:text-blue-700 font-medium px-3 py-2 text-base transition-colors"
              >
                {item.title}
              </Link>
            ))}
          </nav>

          {/* 모바일 메뉴 버튼 */}
          <div className="md:hidden">
            <button 
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="p-2 rounded-md text-slate-600 hover:bg-slate-100"
            >
              {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>

      {/* 모바일 메뉴 드롭다운 */}
      {isMobileMenuOpen && (
        <div className="md:hidden bg-white border-t border-gray-100 absolute w-full shadow-lg">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            {gnbItems.map((item) => (
              <Link
                key={item.id}
                to={`/?menu_id=${item.id}`}
                className="block px-3 py-4 rounded-md text-base font-medium text-slate-700 hover:bg-blue-50 hover:text-blue-700 border-b border-gray-50"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                {item.title}
              </Link>
            ))}
          </div>
        </div>
      )}
    </header>
  );
};

// --- 컴포넌트: 푸터 ---
const Footer = () => {
  return (
    <footer className="bg-slate-900 text-slate-400 py-12 mt-auto">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8 border-b border-slate-800 pb-8">
          <div className="col-span-1 md:col-span-2">
            <h3 className="text-white text-lg font-bold mb-4">정원엔시스(주)</h3>
            <p className="text-sm leading-relaxed mb-4">
              정원엔시스는 기업 종합 IT 솔루션 기업으로 우수한 전문기술인력과 <br/>
              유수의 글로벌 하드웨어 벤더와의 업무경험을 바탕으로 최상의 서비스를 제공합니다.
            </p>
          </div>
          <div>
            <h4 className="text-white font-medium mb-4">Contact Us</h4>
            <ul className="space-y-2 text-sm">
              <li className="flex items-center gap-2"><Phone size={16} /> 02-6925-5508</li>
              <li className="flex items-center gap-2"><Mail size={16} /> marketing@bandisnc.com</li>
              <li className="flex items-center gap-2"><Globe size={16} /> 서울 성동구 상원12길 34</li>
            </ul>
          </div>
          <div>
            <h4 className="text-white font-medium mb-4">Quick Links</h4>
            <ul className="space-y-2 text-sm">
              <li className="text-slate-400">개인정보처리방침</li>
              <li><a href="#" className="hover:text-white">이용약관</a></li>
              <li><a href="#" className="hover:text-white">오시는 길</a></li>
            </ul>
          </div>
        </div>
        <div className="text-center text-xs text-slate-600">
          COPYRIGHT © JEONGWON ENSYS. ALL RIGHTS RESERVED.
        </div>
      </div>
    </footer>
  );
};

// --- 컴포넌트: 게시판 (Board) ---
// * 참고: 현재 게시판 API는 구현되지 않았으므로 Mockup으로 대체합니다.
// * 추후 api_board.php 등을 만들어 JSON을 반환하게 하면 이 컴포넌트에서 fetch하면 됩니다.
const BoardComponent = ({ boardId, mode }) => {
  const [posts, setPosts] = useState([
    { id: 1, title: '제우스(JEUS) v21.0 패치 업데이트 안내', writer: '관리자', date: '2023-11-20', hits: 154 },
    { id: 2, title: '2024년 정기 시스템 점검 일정', writer: '운영팀', date: '2023-11-15', hits: 89 },
    { id: 3, title: '웹투비(WebtoB) 보안 설정 가이드', writer: '기술지원', date: '2023-11-10', hits: 342 },
  ]);

  return (
    <div className="mt-8">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-xl font-bold text-slate-800 flex items-center gap-2">
          <ListIcon className="text-blue-600" /> 게시판 (ID: {boardId})
        </h3>
        <button className="bg-slate-800 text-white px-4 py-2 rounded text-sm hover:bg-slate-700">글쓰기</button>
      </div>
      
      <div className="overflow-x-auto bg-white border border-slate-200 rounded-lg shadow-sm">
        <table className="w-full text-sm text-left text-slate-600">
          <thead className="text-xs text-slate-700 uppercase bg-slate-50 border-b border-slate-200">
            <tr>
              <th className="px-6 py-3 w-16 text-center">No</th>
              <th className="px-6 py-3">제목</th>
              <th className="px-6 py-3 w-24 text-center">작성자</th>
              <th className="px-6 py-3 w-32 text-center">날짜</th>
              <th className="px-6 py-3 w-20 text-center">조회</th>
            </tr>
          </thead>
          <tbody>
            {posts.map((post) => (
              <tr key={post.id} className="bg-white border-b hover:bg-slate-50 transition-colors cursor-pointer">
                <td className="px-6 py-4 text-center">{post.id}</td>
                <td className="px-6 py-4 font-medium text-slate-900">{post.title}</td>
                <td className="px-6 py-4 text-center">{post.writer}</td>
                <td className="px-6 py-4 text-center">{post.date}</td>
                <td className="px-6 py-4 text-center">{post.hits}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="mt-4 text-center text-xs text-slate-400">
        * 이것은 React 데모용 Mock Data입니다. 실제 데이터는 API 연동이 필요합니다.
      </div>
    </div>
  );
};

// --- 핵심 컴포넌트: 페이지 뷰어 (Controller + View 역할) ---
const PageViewer = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const navigate = useNavigate();
  const menuId = searchParams.get('menu_id') || '30'; // 기본값: 30 (S/W 솔루션)

  const [pageData, setPageData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        // [중요] 실제 환경에서는 fetch(API_URL + `?menu_id=${menuId}`) 로 호출
        // 여기서는 데모를 위해 가상의 API 응답을 시뮬레이션 합니다.
        // 실제 코드 적용 시 아래 mockResponse 부분을 fetch 호출로 대체하세요.
        
        /* const response = await fetch(`${API_URL}?menu_id=${menuId}`);
        const json = await response.json();
        */

        // --- Mock Data Start (api_view.php의 응답 예시) ---
        await new Promise(r => setTimeout(r, 500)); // 로딩 시뮬레이션
        const mockResponse = {
          status: 'success',
          meta: { target_id: menuId, menu_type: 'content', redirect_to: null },
          data: {
            page_title: 'S/W 솔루션',
            breadcrumbs: [{ id: 30, title: 'S/W 솔루션' }, { id: 32, title: 'Tmax Soft' }, { id: 321, title: 'Jeus' }],
            depth2_menu: [
              { id: 31, title: 'VMware' },
              { id: 32, title: 'Tmax Soft' },
              { id: 33, title: 'CoreBridge' },
              { id: 34, title: 'Data Protector' }
            ],
            depth3_menu: [
              { id: 321, title: 'Jeus' },
              { id: 322, title: 'WebToB' },
              { id: 323, title: 'Tibero' }
            ],
            content: {
              title: 'Jeus',
              subtitle: 'Global IT Partner, Jeongwon Ensys',
              // PHP Summernote에서 저장된 HTML 데이터 예시
              body: `
                <div style="text-align: center; margin-bottom: 40px;">
                  <span style="background-color: #eff6ff; color: #2563eb; padding: 4px 12px; border-radius: 9999px; font-weight: bold; font-size: 0.875rem;">WAS | 티맥스 소프트</span>
                  <h2 style="font-size: 3rem; font-weight: 800; margin: 20px 0; color: #1e293b;">Jeus</h2>
                  <p style="font-size: 1.125rem; color: #475569; line-height: 1.75; max-width: 800px; margin: 0 auto;">
                    정원엔시스는 기업 종합 IT 솔루션 기업으로 우수한 전문기술인력과 유수의 글로벌 하드웨어 벤더와의 업무경험을 바탕으로 
                    제우스, 웹투비등 티맥스소프트 솔루션 판매 및 안정적인 유지보수를 제공하게 되어 H/W와 더불어 고객에게 보다 더 효율적인 통합 서비스를 제공합니다.
                  </p>
                </div>
                <div style="display: flex; justify-content: center; gap: 10px; margin-top: 30px;">
                   <button style="background-color: #0f172a; color: white; padding: 12px 24px; border-radius: 9999px; font-weight: bold; border: none; cursor: pointer;">브로슈어 다운로드</button>
                   <button style="background-color: white; color: #0f172a; padding: 12px 24px; border-radius: 9999px; font-weight: bold; border: 1px solid #cbd5e1; cursor: pointer;">나라장터(Engine)</button>
                </div>
                <div style="margin-top: 60px; padding: 40px; background-color: #f8fafc; border-radius: 12px;">
                  <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 20px;">Key Features</h3>
                  <ul style="list-style-type: disc; padding-left: 20px; color: #475569; line-height: 1.8;">
                    <li>Java EE 7 인증을 획득한 세계 최초의 WAS</li>
                    <li>대용량 트랜잭션의 안정적인 처리</li>
                    <li>클라우드 환경에 최적화된 아키텍처</li>
                  </ul>
                </div>
              `
            }
          }
        };

        // menu_id가 변경되면 다른 데이터를 주는 척 시뮬레이션
        if (menuId === '40') {
           mockResponse.data.page_title = 'SI 비즈니스';
           mockResponse.data.breadcrumbs = [{ id: 40, title: 'SI 비즈니스' }];
           mockResponse.data.depth2_menu = [];
           mockResponse.data.depth3_menu = [];
           mockResponse.data.content.body = '<div style="text-align:center; padding:100px;">SI 비즈니스 소개 페이지입니다.</div>';
        }
        // 게시판 시뮬레이션
        if (menuId === '50') {
            mockResponse.meta.menu_type = 'board';
            mockResponse.data.page_title = '고객지원';
            mockResponse.data.board_config = { board_id: 50, mode: 'list' };
            mockResponse.data.content = null;
        }

        // --- Mock Data End ---

        const json = mockResponse;

        if (json.meta.redirect_to) {
          setSearchParams({ menu_id: json.meta.redirect_to });
          return;
        }
        
        setPageData(json.data);

      } catch (err) {
        setError('데이터를 불러오는 중 오류가 발생했습니다.');
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [menuId, setSearchParams]);

  if (loading) return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-white">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-700"></div>
      <p className="mt-4 text-slate-500 font-medium">콘텐츠 로딩중...</p>
    </div>
  );

  if (error) return (
    <div className="min-h-screen flex items-center justify-center bg-white text-red-600">
      <p>{error}</p>
    </div>
  );

  if (!pageData) return null;

  return (
    <main className="flex-grow bg-white">
      {/* 1. 비주얼 히어로 섹션 */}
      <section className="relative h-64 md:h-80 bg-slate-900 flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-slate-900 to-blue-900 opacity-90 z-10"></div>
        {/* 배경 패턴 */}
        <div className="absolute inset-0 z-0 opacity-20" style={{ backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)', backgroundSize: '30px 30px' }}></div>
        
        <div className="relative z-20 text-center px-4">
          <h1 className="text-3xl md:text-5xl font-bold text-white mb-4 tracking-tight">{pageData.page_title}</h1>
          <p className="text-slate-300 text-lg md:text-xl font-light">
             Global IT Partner, Jeongwon Ensys
          </p>
        </div>
      </section>

      {/* 2. 네비게이션 (Depth 2 - Tabs) */}
      {pageData.depth2_menu && pageData.depth2_menu.length > 0 && (
        <div className="border-b border-gray-200 bg-white sticky top-20 z-40 shadow-sm">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex overflow-x-auto no-scrollbar space-x-8">
              {pageData.depth2_menu.map(menu => (
                <button
                  key={menu.id}
                  onClick={() => setSearchParams({ menu_id: menu.id })}
                  className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
                    // 간단한 활성화 로직 (실제로는 부모 ID 체크 등 필요)
                    String(menuId).startsWith(String(menu.id).substring(0, 2)) 
                      ? 'border-blue-600 text-blue-600'
                      : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
                  }`}
                >
                  {menu.title}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* 3. 네비게이션 (Depth 3 - Pills) */}
      {pageData.depth3_menu && pageData.depth3_menu.length > 0 && (
        <div className="bg-slate-50 py-4">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex flex-wrap gap-2 justify-center">
              {pageData.depth3_menu.map(menu => (
                <button
                  key={menu.id}
                  onClick={() => setSearchParams({ menu_id: menu.id })}
                  className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
                    String(menu.id) === String(menuId)
                      ? 'bg-blue-600 text-white shadow-md'
                      : 'bg-white text-slate-600 border border-slate-200 hover:bg-white hover:border-blue-400'
                  }`}
                >
                  {menu.title}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* 4. 브레드크럼 (Breadcrumbs) */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="flex justify-end text-xs text-slate-500 items-center gap-1">
          <Home size={12} />
          <span>HOME</span>
          {pageData.breadcrumbs.map((crumb) => (
            <React.Fragment key={crumb.id}>
              <ChevronRight size={12} />
              <span className={String(crumb.id) === String(menuId) ? 'font-bold text-slate-800' : ''}>
                {crumb.title}
              </span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* 5. 메인 콘텐츠 영역 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-24 min-h-[500px]">
        {/* A. 일반 콘텐츠 (CMS 본문) */}
        {pageData.content && (
          <div className="prose prose-lg max-w-none text-slate-700">
            {/* [핵심] PHP Summernote에서 저장한 HTML을 렌더링
              React에서는 보안상 HTML 출력을 막으므로 dangerouslySetInnerHTML 사용 
            */}
            <div dangerouslySetInnerHTML={{ __html: pageData.content.body }} />
          </div>
        )}

        {/* B. 게시판 (Board) */}
        {pageData.board_config && (
          <BoardComponent 
            boardId={pageData.board_config.board_id} 
            mode={pageData.board_config.mode} 
          />
        )}
      </div>
    </main>
  );
};

// --- 메인 앱 ---
export default function GardenReactApp() {
  return (
    <Router>
      <div className="flex flex-col min-h-screen font-sans bg-white text-slate-900">
        <Header />
        <Routes>
          {/* 모든 경로는 PageViewer가 처리 (menu_id 파라미터 기반) */}
          <Route path="/" element={<PageViewer />} />
          <Route path="/view" element={<PageViewer />} />
        </Routes>
        <Footer />
      </div>
    </Router>
  );
}