import { useRef, useState, useEffect } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import SubHero from "../../components/SubHero";

const COMPANY_NAV = [
  { label: "회사소개", to: "/company/about" },
  { label: "인증 및 특허현황", to: "/company/cert" },
  { label: "연혁", to: "/company/history" },
  { label: "고객 및 협력사", to: "/company/partners" },
  { label: "찾아오시는 길", to: "/company/location" },
];

const TABS = ["2020's", "2010's"];

const HISTORY = {
  "2020's": [
    {
      year: "2026",
      items: [
        "KAC 드론교통관리 시스템 구축 (한국공항공사)",
        "공공용 UTM 시작품 정보공유체계 개발 (한국공항공사)",
        "DA42NG VR 시뮬레이터 구축 (청주대학교)",
        "국방벤처 혁신기술 지원사업 기업 선정 (인천국방벤처센터)",
        "인천 파브(PAV) 시제기 비행시험 지원사업 (인천테크노파크)",
        "인천광역시 지역혁신중심 대학지원체계(i-RISE) 산학공동 기술개발사업 (인하공업전문대학)\n- 저고도 드론 비행정보 기반 UTM 비정상상황 탐지·알림 시제품 개발",
        "인천지역 드론기업 바우처 지원사업 (인천테크노파크)",
        "감항인증 전문교육과정 위탁사업 (방위산업청)",
        "교육현안 해결형 에듀테크 프로젝트 선정 (한국교육학술정보원)\n- 경계선 지능 학생을 위한 맞춤형 AI 에듀테크 플랫폼 구축",
        "인천 파브(PAV) 시제기 개발 지원사업 (인천테크노파크)\n- K-인증기반 인천PAV 실증 및 핵심 부품 국산화",
      ],
    },
    {
      year: "2025",
      items: [
        "KAC 드론교통관리(UTM) 시스템 구축사업 (한국공항공사)",
        "항공우주 부트캠프사업단 홈페이지 구축 (청주대학교)",
        "DIAMOND DA40NG Simulator 구축 (청주대학교)",
        "UTM 시뮬레이터를 활용한 비행관제 시스템 전시 (부산 벡스코 드론쇼코리아)",
        "인천 파브(PAV) 기업대상 기업홍보 지원사업 선정 (인천테크노파크)",
        "파브(PAV) 부품기술개발 지원사업 (인천테크노파크)",
        "감항인증 전문교육과정 위탁사업 홈페이지 운영 (방위산업청)",
        "공공용 UTM 시작품 정보공유체계 개발 (한국공항공사)",
        "IBE 개발 및 안정화 (섬에어)",
        "기술혁신형 중소기업 이노비즈 취득",
      ],
    },
    {
      year: "2024",
      items: [
        "강화도 화개정원 유지보수 (강화군)",
        "타이드스퀘어 PRIVIA 항공 개발 업무 (타이드스퀘어)",
        "항공교통데이터시스템 (아이비리더스)",
        "24년 군 감항인증 전문교육과정 홈페이지 유지보수 (방위사업청)",
        "HILS 기반 PAV 부품 성능시험 시스템 (인하공업전문대학)",
        "PAV 원격 모니터링 시스템 (인천테크노파크)",
        "드론 지형추적비행 매뉴얼 개발 용역 (소방청 국립소방연구소)",
        "UTM 팀코리아(UTK) 워킹그룹 참여 (국토교통부)",
        "KAC 드론교통관리(UTM) 시스템 구축사업 (한국공항공사)",
        "도심항공교통(UTM, AAM등) 관련 사업 분석 위탁용역 (인천테크노파크)",
      ],
    },
    {
      year: "2023",
      items: [
        "섬에어(주) 항공운항 예약시스템 구축",
        "남원시 드론 실증도시 구축사업 협약 체결 (국토교통부)",
        "팔네트웍스와 베셀 MOU 체결",
        "UTM 운항 공역 비행체 감시 기술개발 사전기획 (인천테크노파크)",
        "블록체인 기반 드론교통관리(UTM) 시스템 정보공유체계 개발 (한국공항공사)",
        "UTM 컨설팅 (SKT)",
        "항공모빌리티(PAV) 부품 기술개발 지원사업 (인천테크노파크)",
        "LAANC/드론/PAV/UTM 비행상황관리 시스템 전시 (서울 ADEX 2023)",
        "UTM 비행상황관리 시스템 전시 (2023 K-UTM CONFEX)",
        "PAV GNSS 시뮬레이터 1세트 등 3종 제작 구매 (인하공업전문대)",
      ],
    },
    {
      year: "2022",
      items: [
        "현대자동차 QR 코드 출입시스템 운영 및 유지보수 (현대자동차)",
        "군감항인증전문교육과정위탁사업 (방위산업청)",
        "항공모빌리티(PAV) 부품 기술개발 (인천테크노파크)",
        "XR 메타버스 인천이음 프로젝트 활용확산 콘텐츠 개발 (인천테크노파크)",
        "드론교통관리(UTM) 시스템 설계",
        "남원시 항공산업(드론·UTM) 클러스터 조성 연구용역",
        "K-UTM CONFEX 전시회 참가 (무인비행장치 관제시스템)",
        "남원시 항공산업 업무협약",
      ],
    },
    {
      year: "2021",
      items: [
        "현대자동차 QR코드 출입시스템 운영 및 유지보수 (현대자동차)",
        "파브 기술 및 기업/산업 현황 분석 (인천테크노파크)",
        "KT 클라우드 인천총판 등록 (KT)",
        "드론 규제 샌드박스 사업 - 비행 관제시스템 구축 (항공안전기술원)",
        "KB 국민은행 소프트웨어 경진대회 메타버스 구축 (사피엔스 4.0)",
        "드론 실증 비즈니스 사업화(공공서비스 기술 고도화) 선정",
        "캐플릭스 OTA 항공서비스 구축 (제주패스)",
        "ADEX 2021 전시회 참가",
        "인천 PAV 컨소시엄 선정",
        "KMF(Korea Metaverse Festival) 전시회 참가",
      ],
    },
    {
      year: "2020",
      items: [
        "하이에어 통합시스템 유지보수 (하이에어)",
        "VR·AR 융합콘텐츠 실증 및 개발지원 과제 선정 (인천테크노파크)",
        "QR코드 활용 방문자 방역관리 모바일웹 개발 (인천관광공사)",
        "QR 출입명부 및 자동도어제어 시스템 개발 (현대자동차)",
        "하이에어 웹투어 연동 (하이에어)",
        "IATA Online Agency Accreditation 인증",
      ],
    },
  ],
  "2010's": [
    {
      year: "2019",
      items: [
        "IBS(PSS, 승무원 스케쥴, MRO) MOU 체결",
        "하이에어 IBS PSS 개발 및 납품",
        "하이에어 안전보안시스템(E-SMS) 개발",
        "하이에어 Weight & Balance System 개발",
      ],
    },
    {
      year: "2018",
      items: [
        "항공사 홈페이지 예약시스템 구축 (에어필립)",
        "드론을 활용한 항공등화시설 정밀점검 (항공안전기술원)",
        "PAL&TOUR 국외여행업 등록",
        "벤처기업 인증",
        "시험용 UTM 시스템 DB 구축 용역 개발 (KT)",
        "인천광역시 인천 항공 유망기업 지정",
      ],
    },
    {
      year: "2017",
      items: [
        "경량항공기 내비게이션 및 비행상황관리시스템 개발 (국토교통부)",
        "A CDM 설계 및 RMS 개선용역 (한국공항공사)",
        "IBTP MOU 체결",
        "항공사 정비시스템 구축 (에어필립)",
        "본사 로봇타워 이전",
      ],
    },
    {
      year: "2016",
      items: ["항공인력양성사업 정보화시스템 개선 및 유지보수 (항공협회)"],
    },
    {
      year: "2015",
      items: [
        "주민자치센터 홈페이지 운영시스템 (인천시)",
        "기업부설연구소 인정",
        "아우리포탈 ActiveX 제거사업 (인천공항공사)",
        "㈜팔네트웍스 법인 전환",
        "중소기업청 창업성장과제 채택 (완료: 성공판정)",
      ],
    },
    {
      year: "2014",
      items: [
        "개인기업 '팔네트웍스' 개업",
        "항공인력양성사업 정보화시스템 보완 용역 (항공협회)",
        "미얀마국제항공 웹사이트 구축 (크리스탈에비에이션)",
        "직접생산등록",
        "세계 책의 수도 홈페이지 구축용역 (인천시)",
      ],
    },
  ],
};

function YearGroup({ group }) {
  const ref = useRef(null);
  const [active, setActive] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      ([entry]) => setActive(entry.isIntersecting),
      { rootMargin: "-30% 0px -60% 0px" },
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={ref} className="ht-group">
      <div className={`ht-dot${active ? " is-active" : ""}`} />
      <motion.h3
        className="ht-year"
        animate={{ color: active ? "var(--color-primary)" : "#ccc" }}
        transition={{ duration: 0.4 }}
      >
        {group.year}
      </motion.h3>
      <ul className="ht-list">
        {group.items.map((text, i) => (
          <motion.li
            key={i}
            className="ht-item"
            initial={{ opacity: 0, y: 8 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-40px" }}
            transition={{ delay: i * 0.04, duration: 0.3 }}
          >
            <span className="ht-bullet" />
            <span className="ht-text">{text}</span>
          </motion.li>
        ))}
      </ul>
    </div>
  );
}

function TimelinePanel({ tab }) {
  const groups = HISTORY[tab];
  const containerRef = useRef(null);

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start 15%", "end 85%"],
  });
  const lineScaleY = useTransform(scrollYProgress, [0, 1], [0, 1]);

  return (
    <div className="ht-panel" ref={containerRef}>
      {/* 왼쪽 연대 */}
      <div className="ht-sidebar">
        <div className="ht-decade">{tab}</div>
        <div className="ht-since">Since 2014</div>
      </div>

      {/* 중앙 라인 — 1px 얇은 선 */}
      <div className="ht-line-col">
        <div className="ht-line-bg" />
        <motion.div
          className="ht-line-fill"
          style={{ scaleY: lineScaleY, transformOrigin: "top" }}
        />
      </div>

      {/* 오른쪽 콘텐츠 */}
      <div className="ht-content">
        {groups.map((group) => (
          <YearGroup key={group.year} group={group} />
        ))}
      </div>
    </div>
  );
}

export default function HistoryPage() {
  const [activeTab, setActiveTab] = useState("2020's");

  return (
    <article>
      <SubHero
        label="Company"
        title={
          <>
            <em>HISTORY</em>
          </>
        }
        navItems={COMPANY_NAV}
      />

      <div className="sub-content">
        <div className="inner-wrap">
          {/* 상단 타이틀 */}
          <motion.div
            className="ht-header"
            initial={{ opacity: 0, y: 32 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-80px" }}
            transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
          >
            <p className="ht-header-title">
              Leading the Future
              <br />
              <em>
                <span>of</span> <b>Aviation Technology</b>
              </em>
            </p>
            <em className="ht-header-sub">
              항공 IT 소프트웨어 개발부터 드론·UTM·UATM 미래 모빌리티까지,
              <br />
              하늘길을 개척해온 팔네트웍스의 10년 발자취를 담았습니다.
            </em>
          </motion.div>

          {/* 연혁 카드 박스 */}
          <div className="ht-card">
            <div className="ht-tabs">
              {TABS.map((tab) => (
                <button
                  key={tab}
                  className={`ht-tab${activeTab === tab ? " is-active" : ""}`}
                  onClick={() => setActiveTab(tab)}
                >
                  {tab}
                </button>
              ))}
            </div>
            <TimelinePanel key={activeTab} tab={activeTab} />
          </div>
        </div>
      </div>
    </article>
  );
}