import React, { useState } from 'react';
import { Routes, Route, NavLink, Link } from 'react-router-dom';
import './Common.css';
import './NewsPage.css';

const SUB_NAV = [
  { path: '/news/newsroom', label: '뉴스룸' },
  { path: '/news/blog',     label: '기술 블로그' },
];

function SubNav({ title }) {
  return (
    <>
      <div className="page-hero">
        <div className="container">
          <span className="section-label">News</span>
          <h1 className="page-hero-title">{title}</h1>
        </div>
      </div>
      <nav className="sub-nav">
        <div className="container">
          {SUB_NAV.map(n => (
            <NavLink key={n.path} to={n.path}
              className={({ isActive }) => 'sub-nav-item' + (isActive ? ' active' : '')}>
              {n.label}
            </NavLink>
          ))}
        </div>
      </nav>
    </>
  );
}

/* ── 뉴스룸 ── */
const NEWS = [
  {
    id:1, cat:'제품 출시', date:'2026.05.15',
    title:'GUARDiA ITSM v2.0 정식 출시 — AI ChatOps 오케스트레이션 플랫폼',
    summary:'메신저 한 줄 명령으로 1,000개+ 공공기관 레거시 인프라를 자동 운영하는 GUARDiA ITSM v2.0이 정식 출시되었습니다. 신규 기능으로 AI 자연어 명령, 에이전트리스 배포 엔진, 멀티테넌트 지원이 추가됐습니다.',
    content: `GUARDiA ITSM v2.0은 공공기관의 레거시 IT 인프라 운영 자동화를 위한 AI 기반 플랫폼입니다.\n\n주요 신기능:\n- AI ChatOps: 메신저 자연어 명령 → Ollama LLM 파싱 → 자동 실행\n- 에이전트리스 배포: SSH/SFTP만으로 WAS 배포·롤백 자동화\n- 멀티테넌트: 1,000개+ 기관 동시 관리\n- GS인증 1등급 신청 완료\n\n자세한 사항은 GUARDiA 소개 페이지를 참조해 주십시오.`,
    hot: true,
  },
  {
    id:2, cat:'수주 소식', date:'2026.04.20',
    title:'삼성전자 차세대 CRM 시스템 DB 마이그레이션 프로젝트 수주',
    summary:'(주)지오정보기술이 삼성전자 차세대 CRM 구축 프로젝트의 DB Migration/DA/튜닝을 담당합니다. EDB PostgreSQL 환경으로의 전환을 포함한 대규모 DB 현대화 작업을 수행합니다.',
    content: '삼성전자와의 두 번째 협력 프로젝트로, DB 마이그레이션 및 성능 튜닝을 담당합니다.',
    hot: false,
  },
  {
    id:3, cat:'기술 인증', date:'2026.03.10',
    title:'GUARDiA ITSM GS인증 1등급 신청 완료 — TTA 심사 예정',
    summary:'GUARDiA ITSM이 한국정보통신기술협회(TTA)에 GS인증 1등급을 신청하였습니다. 기능적합성, 신뢰성, 사용성, 보안성 등 ISO/IEC 25010 기준 8대 품질 특성 심사를 앞두고 있습니다.',
    content: 'GS인증 심사는 2026년 9월 예정이며, 1등급 취득 시 조달청 나라장터 우선 등재가 가능합니다.',
    hot: false,
  },
  {
    id:4, cat:'수주 소식', date:'2026.02.15',
    title:'국민연금공단 차세대 시스템 구축 — AA 역할 수행',
    summary:'국민연금공단 차세대 시스템 구축 프로젝트에 Application Architect(AA)로 참여합니다. JSP/Java, Nexacro, Spring 기반의 대규모 공공기관 시스템 구축을 담당합니다.',
    content: '국민연금관리공단의 차세대 시스템은 수천만 가입자의 연금 관리 시스템으로, CI/CD 파이프라인 기반의 현대적인 개발 환경을 구축합니다.',
    hot: false,
  },
  {
    id:5, cat:'기업 소식', date:'2025.12.01',
    title:'2025년 사업실적 — 연간 프로젝트 10건 성공 수행',
    summary:'2025년 한 해 동안 삼성전자, 서울신용보증재단, 헌법재판소 등 10개 주요 프로젝트를 성공적으로 완료했습니다. 매출은 전년 대비 25% 성장하였습니다.',
    content: '창립 이래 최대 성과를 기록한 2025년 사업실적을 공유드립니다.',
    hot: false,
  },
  {
    id:6, cat:'파트너십', date:'2025.09.10',
    title:'Tibero 공식 파트너사 등록 — 공공기관 DB 전환 솔루션 강화',
    summary:'국산 DBMS Tibero의 공식 파트너사로 등록되었습니다. Oracle에서 Tibero로의 마이그레이션 및 공공기관 DB 현대화 사업을 공동으로 추진합니다.',
    content: '공공기관의 Oracle 라이선스 절감을 위한 Tibero 전환 프로젝트를 전문적으로 지원합니다.',
    hot: false,
  },
];

function Newsroom() {
  const [selected, setSelected] = useState(null);
  const item = NEWS.find(n => n.id === selected);
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="뉴스룸" />
      <section className="section">
        <div className="container">
          {item ? (
            <div style={{ maxWidth: '760px', margin: '0 auto' }}>
              <button className="notice-back" onClick={() => setSelected(null)}>← 뉴스 목록</button>
              <div className="news-detail card" style={{ padding: '40px' }}>
                <span className="news-cat-badge" style={{ background: 'var(--primary-light)', color: 'var(--primary)' }}>{item.cat}</span>
                <h2 style={{ fontSize: '24px', fontWeight: '900', margin: '16px 0 8px', lineHeight: '1.4' }}>{item.title}</h2>
                <p style={{ fontSize: '13px', color: 'var(--gray-400)', marginBottom: '32px' }}>{item.date}</p>
                <div className="divider divider-left" style={{ marginBottom: '32px' }} />
                {item.content.split('\n').map((p, i) => (
                  p.trim() ? <p key={i} style={{ fontSize: '15px', color: 'var(--gray-700)', lineHeight: '1.85', marginBottom: '16px' }}>{p}</p> : null
                ))}
              </div>
            </div>
          ) : (
            <>
              {/* 메인 뉴스 */}
              <div className="news-main card" onClick={() => setSelected(NEWS[0].id)}>
                <div className="news-main-content">
                  <span className="news-cat-badge hot">🔥 {NEWS[0].cat}</span>
                  <h2 className="news-main-title">{NEWS[0].title}</h2>
                  <p className="news-main-summary">{NEWS[0].summary}</p>
                  <span className="news-date">{NEWS[0].date}</span>
                </div>
              </div>
              <div className="grid-3" style={{ marginTop: '24px' }}>
                {NEWS.slice(1).map(n => (
                  <div key={n.id} className="card news-card" onClick={() => setSelected(n.id)}>
                    <span className="news-cat-badge" style={{ background: 'var(--primary-light)', color: 'var(--primary)' }}>{n.cat}</span>
                    <h3 className="news-card-title">{n.title}</h3>
                    <p className="news-card-summary">{n.summary}</p>
                    <span className="news-date">{n.date}</span>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      </section>
    </main>
  );
}

/* ── 기술 블로그 ── */
const BLOGS = [
  {
    id:1, tag:'AI·LLM', date:'2026.05.20',
    title:'온프레미스 Ollama로 폐쇄망 ChatOps 구현하기',
    summary:'인터넷 없이 내부망에서 LLM을 운영하는 방법. Llama-3-8B 모델을 Ollama로 구동하고 FastAPI와 연동하는 전체 과정을 설명합니다.',
    readMin: 12,
  },
  {
    id:2, tag:'DevOps', date:'2026.05.10',
    title:'에이전트리스 WAS 배포 자동화 — paramiko SSH로 레거시 서버 관리',
    summary:'JEUS·Tomcat 등 레거시 WAS에 SSH/SFTP만으로 배포하는 방법. 백업→배포→헬스체크→롤백 파이프라인 구현 예제.',
    readMin: 15,
  },
  {
    id:3, tag:'보안', date:'2026.04.28',
    title:'AES-256-GCM으로 서버 자격증명을 안전하게 저장하는 법',
    summary:'공공기관 서버 SSH 비밀번호를 DB에 안전하게 암호화 저장하는 방법. IV·암호문·GCM Tag 구조 설계와 Python 구현.',
    readMin: 8,
  },
  {
    id:4, tag:'데이터베이스', date:'2026.04.15',
    title:'Oracle 19c → EDB PostgreSQL 마이그레이션 실전 가이드',
    summary:'삼성전자 CRM 프로젝트에서 실제 수행한 Oracle→EDB 마이그레이션 경험 공유. Smeta, ExemOne 활용 SQL 변환 전략.',
    readMin: 20,
  },
  {
    id:5, tag:'성능', date:'2026.03.25',
    title:'공공기관 행정정보시스템 SQL 튜닝 — 서울시립대 사례',
    summary:'대학행정정보시스템 성능 개선 프로젝트 실전 사례. JMeter 부하테스트와 Oracle 실행계획 분석으로 응답시간 60% 단축.',
    readMin: 18,
  },
  {
    id:6, tag:'아키텍처', date:'2026.03.10',
    title:'FastAPI 비동기 WebSocket으로 실시간 대시보드 구축하기',
    summary:'GUARDiA ITSM 실시간 모니터링 대시보드 구현 방법. FastAPI SSE + WebSocket + React를 조합한 풀스택 아키텍처.',
    readMin: 14,
  },
];

const TAG_COLORS = {
  'AI·LLM': '#7c3aed', 'DevOps': '#0051A2', '보안': '#dc2626',
  '데이터베이스': '#d97706', '성능': '#059669', '아키텍처': '#0891b2'
};

function Blog() {
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="기술 블로그" />
      <section className="section">
        <div className="container">
          <div className="section-header">
            <span className="section-label">Tech Blog</span>
            <h2 className="section-title">기술 인사이트 공유</h2>
            <p className="section-desc">20년 이상의 프로젝트 경험에서 얻은 기술 노하우를 공유합니다</p>
          </div>
          <div className="grid-3">
            {BLOGS.map(b => (
              <div key={b.id} className="card blog-card">
                <div className="blog-tag" style={{ background: TAG_COLORS[b.tag] + '18', color: TAG_COLORS[b.tag] }}>
                  {b.tag}
                </div>
                <h3 className="blog-title">{b.title}</h3>
                <p className="blog-summary">{b.summary}</p>
                <div className="blog-meta">
                  <span>📅 {b.date}</span>
                  <span>⏱ {b.readMin}분 읽기</span>
                </div>
                <button className="blog-read-btn" onClick={() => alert('블로그 상세 페이지는 준비 중입니다.')}>
                  읽기 →
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

export default function NewsPage() {
  return (
    <Routes>
      <Route path="newsroom" element={<Newsroom />} />
      <Route path="blog"     element={<Blog />} />
      <Route path="press"    element={<Newsroom />} />
      <Route path="*"        element={<Newsroom />} />
    </Routes>
  );
}
