/**
 * OurImpact Component - React Wrapper for Vendor JS
 *
 * @vendor-dependency @vendor-web/js/components/ourImpact.js
 * @cleanup-status ⚠️ Pending vendor update - needs cleanup function
 */

import React, { useRef, useEffect } from 'react';
import { OurImpact } from '@vendor-web/js/components/ourImpact.js';

interface KpiItem {
  value: number;
  formatted: string;
}

interface KpiData {
  kpi: {
    annual_conferences: KpiItem;
    programs: KpiItem;
    technical_study_cases: KpiItem;
    trainee_companies: KpiItem;
    trainee: KpiItem;
    industry_user_cases: KpiItem;
    lectures: KpiItem;
    industry_involved: KpiItem;
  };
  updated_at: string | null;
}

interface OurImpactProps {
  dataEnd?: boolean;
  kpiData?: KpiData;
}

// Default KPI values (fallback)
const DEFAULT_KPI: KpiData = {
  kpi: {
    annual_conferences: { value: 6, formatted: '6' },
    programs: { value: 129, formatted: '129' },
    technical_study_cases: { value: 661, formatted: '661' },
    trainee_companies: { value: 2157, formatted: '2,157' },
    trainee: { value: 11496, formatted: '11,496' },
    industry_user_cases: { value: 714, formatted: '714' },
    lectures: { value: 431, formatted: '431' },
    industry_involved: { value: 15, formatted: '15' },
  },
  updated_at: null,
};

export default function Impact({ dataEnd = false, kpiData = DEFAULT_KPI }: OurImpactProps) {
  const kpi = kpiData?.kpi ?? DEFAULT_KPI.kpi;
  const ourImpactRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ourImpactRef.current) return;

    // 初始化廠商 ourImpact.js
    const cleanup = OurImpact(ourImpactRef.current);

    // Cleanup 函數：當元件卸載時清理資源
    return () => {
      if (typeof cleanup === 'function') {
        cleanup();
      } else {
        // @todo Request vendor to add cleanup function
        // @see VENDOR-CLEANUP-REQUEST.md
        console.warn('[OurImpact] No cleanup function provided by vendor JS');
      }
    };
  }, []);
  return (
    <section ref={ourImpactRef} className="ourImpact" data-end={dataEnd ? 'true' : 'false'}>
      <div className="container h-full">
        <h2 className="ourImpact-heading text-h1-bold">Our Impact</h2>
        <div className="ourImpact-container">
          <i
            className={`ourImpact-logo logo-original ourImpact-logo ${dataEnd ? 'ourImpact-logo--step5' : 'ourImpact-logo--step1'}`}
          ></i>
          <div className={`ourImpact-scrollContainer container ${dataEnd ? 'opacity-0' : ''}`}>
            <ul className="ourImpact-scrollListContainer">
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-1.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">{kpi.annual_conferences.formatted}</span>
                Annual Conferences
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-3.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">{kpi.programs.formatted}</span>
                Programs
                <span className="text-t4-medium text-neutral-600 block">
                  in Management and Engineering
                </span>
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-5.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">{kpi.technical_study_cases.formatted}</span>
                Technical Study Cases
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-7.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">{kpi.trainee_companies.formatted}</span>
                Trainee Companies
              </li>
            </ul>
            <ul className="ourImpact-scrollListContainer">
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-8.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">{kpi.trainee.formatted}</span>
                Trainee
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-6.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">{kpi.industry_user_cases.formatted}</span>
                Industry User Cases
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-4.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">{kpi.lectures.formatted}</span>
                Lectures
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-2.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">{kpi.industry_involved.formatted}</span>
                Industry Involved
              </li>
            </ul>
          </div>
          <ul className="ourImpact-endingContainer container opacity-0">
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">{kpi.annual_conferences.formatted}</span>
              Annual Conferences
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">{kpi.industry_involved.formatted}</span>
              Industry Involved
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">{kpi.programs.formatted}</span>
              Programs
              <span className="text-caption-medium text-neutral-600 block">
                in Management and Engineering
              </span>
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">{kpi.lectures.formatted}</span>
              Lectures
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">{kpi.technical_study_cases.formatted}</span>
              Technical Study Cases
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">{kpi.industry_user_cases.formatted}</span>
              Industry User Cases
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">{kpi.trainee_companies.formatted}</span>
              Trainee Companies
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">{kpi.trainee.formatted}</span>
              Trainee
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}