import { useRef } from "react";
import { motion, useInView, useAnimationFrame } from "framer-motion";
import SubHero from "../../components/SubHero";
import useFadeIn from "../../hooks/useFadeIn";

const ease = [0.22, 1, 0.36, 1];

const BUSINESS_NAV = [
  { label: "System Integration", to: "/business/si" },
  { label: "R&D", to: "/business/rnd" },
  { label: "운영 · 유지보수", to: "/business/maintenance" },
];

const SERVICES = [
  {
    num: "01",
    title: "모니터링",
    desc: "시스템·네트워크·애플리케이션 전 계층을 24/7 실시간으로 감시하여 장애 발생 전 이상 징후를 선제적으로 포착합니다.",
    img: "./images/mt_icon01.png",
  },
  {
    num: "02",
    title: "장애 대응",
    desc: "이상 감지 즉시 전담 엔지니어가 원인을 분석하고 신속하게 복구합니다. 단순 대응을 넘어 재발 방지까지 책임집니다.",
    img: "./images/mt_icon02.png",
  },
  {
    num: "03",
    title: "보안 관리",
    desc: "정기 취약점 점검과 패치 관리로 외부 위협으로부터 시스템을 보호합니다. 안전한 운영 환경을 지속적으로 유지합니다.",
    img: "./images/mt_icon03.png",
  },
  {
    num: "04",
    title: "기술 지원",
    desc: "운영 중 발생하는 기술적 문의에 신속히 응대하고, 가이드 및 교육을 통해 고객 역량 강화까지 지원합니다.",
    img: "./images/mt_icon04.png",
  },
  {
    num: "05",
    title: "지속적 개선",
    desc: "정기 리포트와 데이터 분석을 기반으로 서비스 품질을 꾸준히 높입니다. 운영 효율과 안정성을 함께 끌어올립니다.",
    img: "./images/mt_icon05.png",
  },
];

const KPI = [
  { value: "99.9%", label: "서비스 가용성" },
  { value: "24/7", label: "365일 실시간 운영" },
  { value: "10m 24s", label: "평균 응답 시간" },
  { value: "100%", label: "SLA 준수율" },
];

/* 아이콘 5개 위치 — 정오각형, 상단에서 시작 */
const NODE_ANGLES = [-90, -18, 54, 126, 198];
const CX = 320,
  CY = 320,
  R = 190,
  ICON_R = 44;

function OpsCircle({ inView }) {
  return (
    <div className="mt-ops">
      <svg className="mt-ops__svg" viewBox="0 0 640 640" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="mtOrbitGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#d94889" stopOpacity="0.5" />
            <stop offset="100%" stopColor="#1a1f5e" stopOpacity="0.2" />
          </linearGradient>
          <linearGradient id="mtLineGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#d94889" />
            <stop offset="100%" stopColor="#7b3fa0" />
          </linearGradient>
          <radialGradient id="mtPulse1" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#d94889" stopOpacity="0.08" />
            <stop offset="100%" stopColor="#d94889" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="mtPulse2" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#7b3fa0" stopOpacity="0.06" />
            <stop offset="100%" stopColor="#7b3fa0" stopOpacity="0" />
          </radialGradient>
          <filter id="mtGlow">
            <feGaussianBlur stdDeviation="3" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

        {/* pulse 링 — CSS 애니메이션 */}
        <circle cx={CX} cy={CY} r="80" fill="url(#mtPulse1)" className="mt-ops__pulse mt-ops__pulse--1" />
        <circle cx={CX} cy={CY} r="80" fill="url(#mtPulse2)" className="mt-ops__pulse mt-ops__pulse--2" />

        {/* 궤도 링 */}
        <circle cx={CX} cy={CY} r={R} stroke="url(#mtOrbitGrad)" strokeWidth="1.2" strokeDasharray="6 5" />

        {/* 연결선 아이콘 → 중심 */}
        {NODE_ANGLES.map((deg, i) => {
          const rad = (deg * Math.PI) / 180;
          const ix = CX + R * Math.cos(rad);
          const iy = CY + R * Math.sin(rad);
          const mx = CX + 80 * Math.cos(rad);
          const my = CY + 80 * Math.sin(rad);
          return <motion.line key={i} x1={ix} y1={iy} x2={mx} y2={my} stroke="url(#mtLineGrad)" strokeWidth="1" strokeDasharray="5 4" initial={{ pathLength: 0, opacity: 0 }} animate={inView ? { pathLength: 1, opacity: 0.45 } : {}} transition={{ delay: 0.8 + i * 0.12, duration: 0.6, ease }} />;
        })}

        {/* 아이콘 노드 원 배경 */}
        {NODE_ANGLES.map((deg, i) => {
          const rad = (deg * Math.PI) / 180;
          const ix = CX + R * Math.cos(rad);
          const iy = CY + R * Math.sin(rad);
          return <motion.circle key={i} cx={ix} cy={iy} r={ICON_R} fill="white" stroke="rgba(217,72,137,0.2)" strokeWidth="1.2" style={{ filter: "drop-shadow(0 4px 16px rgba(123,63,160,0.13))" }} initial={{ scale: 0, opacity: 0 }} animate={inView ? { scale: 1, opacity: 1 } : {}} transition={{ delay: 0.4 + i * 0.1, duration: 0.55, ease }} />;
        })}

        {/* 아이콘 이미지 — SVG foreignObject */}
        {NODE_ANGLES.map((deg, i) => {
          const rad = (deg * Math.PI) / 180;
          const ix = CX + R * Math.cos(rad);
          const iy = CY + R * Math.sin(rad);
          const size = 54;
          return (
            <motion.foreignObject key={i} x={ix - size / 2} y={iy - size / 2} width={size} height={size} initial={{ opacity: 0, scale: 0.6 }} animate={inView ? { opacity: 1, scale: 1 } : {}} transition={{ delay: 0.5 + i * 0.1, duration: 0.55, ease }}>
              <img src={SERVICES[i].img} alt={SERVICES[i].title} style={{ width: "100%", height: "100%", objectFit: "contain" }} />
            </motion.foreignObject>
          );
        })}

        {/* 아이콘 라벨 */}
        {NODE_ANGLES.map((deg, i) => {
          const rad = (deg * Math.PI) / 180;
          const ix = CX + R * Math.cos(rad);
          const iy = CY + R * Math.sin(rad);
          const labelOffset = 58;
          const lx = CX + (R + 68) * Math.cos(rad);
          const ly = CY + (R + 68) * Math.sin(rad);
          return (
            <motion.text key={i} x={lx} y={ly} textAnchor="middle" dominantBaseline="middle" fontSize="14" fontWeight="600" fill="#1a1f5e" opacity="0.75" initial={{ opacity: 0 }} animate={inView ? { opacity: 0.75 } : {}} transition={{ delay: 0.7 + i * 0.1, duration: 0.5 }}>
              {SERVICES[i].title}
            </motion.text>
          );
        })}
      </svg>

      {/* OPS CENTER 중앙 — DOM 오버레이 */}
      <motion.div className="mt-ops__center" initial={{ opacity: 0, scale: 0.75 }} animate={inView ? { opacity: 1, scale: 1 } : {}} transition={{ delay: 0.2, duration: 0.7, ease }}>
        <span className="mt-ops__center-label">OPS</span>
        <span className="mt-ops__center-sub">CENTER</span>
      </motion.div>
    </div>
  );
}

function MaintenancePage() {
  const ref = useFadeIn();
  const introRef = useRef(null);
  const kpiRef = useRef(null);
  const colsRef = useRef(null);
  const introInView = useInView(introRef, { once: true, margin: "-80px" });
  const kpiInView = useInView(kpiRef, { once: true, margin: "-80px" });
  const colsInView = useInView(colsRef, { once: true, margin: "-60px" });

  return (
    <article ref={ref}>
      <SubHero
        label="BUSINESS"
        title={
          <>
            <em>Maintenance</em>
          </>
        }
        navItems={BUSINESS_NAV}
      />

      <div className="sub-content">
        <div className="inner-wrap">
          {/* ── 인트로 ── */}
          <section className="mt-intro" ref={introRef}>
            <div className="mt-intro__left">
              <motion.span className="fc-eyebrow" initial={{ opacity: 0, y: 14 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}>
                OUR SERVICE
              </motion.span>

              <div className="mt-intro__title-wrap">
                {["운영·유지보수는", "서비스의 안정성을", "완성합니다"].map((line, i) => (
                  <div className="mt-title-line" key={i}>
                    <motion.h2 className="mt-intro__title" initial={{ y: "105%" }} animate={introInView ? { y: "0%" } : {}} transition={{ duration: 1.1, ease, delay: 0.15 + i * 0.1 }}>
                      {line}
                    </motion.h2>
                  </div>
                ))}
              </div>

              <motion.p className="mt-intro__desc" initial={{ opacity: 0, y: 16 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.7, ease, delay: 0.5 }}>
                PAL Networks는 24/7 통합 모니터링과 체계적인 유지보수로
                <br />
                시스템의 가용성과 안정성을 지속적으로 보장합니다.
              </motion.p>

              <motion.a className="mt-intro__cta" href="/contact" initial={{ opacity: 0, y: 12 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease, delay: 0.62 }}>
                서비스 자세히 보기
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </motion.a>
            </div>

            <div className="mt-intro__right">
              <OpsCircle inView={introInView} />
            </div>
          </section>
        </div>

        {/* ── KPI 바 ── */}
        <section className="mt-kpi" ref={kpiRef}>
          <div className="inner-wrap">
            <div className="mt-kpi__grid">
              {KPI.map((k, i) => (
                <motion.div key={i} className="mt-kpi__item" initial={{ opacity: 0, y: 20 }} animate={kpiInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease, delay: i * 0.1 }}>
                  <span className="mt-kpi__value">{k.value}</span>
                  <span className="mt-kpi__label">{k.label}</span>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* ── 5컬럼 서비스 ── */}
        <div className="inner-wrap">
          <section className="mt-services" ref={colsRef}>
            <div className="mt-services__grid">
              {SERVICES.map((svc, i) => (
                <motion.div key={i} className="mt-service-card" initial={{ opacity: 0, y: 32 }} animate={colsInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.65, ease, delay: i * 0.1 }}>
                  <div className="mt-service-card__img-wrap">
                    <img src={svc.img} alt={svc.title} className="mt-service-card__img" />
                  </div>
                  <span className="mt-service-card__num">{svc.num}</span>
                  <h3 className="mt-service-card__title">{svc.title}</h3>
                  <p className="mt-service-card__desc">{svc.desc}</p>
                  <div className="mt-service-card__line" />
                </motion.div>
              ))}
            </div>
          </section>
        </div>
      </div>
    </article>
  );
}

export default MaintenancePage;