import React, {useState} from "react";
import Tabs, {TabItem} from "@/components/common/Tabs";

const tabItems: TabItem[] = [
  {id: '1', label: '현재'},
  {id: '2', label: '2010 ~ 2020'},
  {id: '3', label: '~ 2010'},
];

const tabYears: Record<string, { start: string; end: string }> = {
  '1': { start: '2021', end: '현재' },
  '2': { start: '2010', end: '2020' },
  '3': { start: '1994', end: '2009' },
};

const tabDescriptions: Record<string, string> = {
  '1': '지속가능한 성장과<br/>미래를 준비하는 반도산전',
  '2': '새로운 출발과 함께<br/>반도산전의 경쟁력 강화',
  '3': '기술혁신과 함께<br/>미래를 향한 도약',
};

const historyItems = [
  { date: '1994.09', description: '반도정보통신(주)설립 - 사업개시' },
  { date: '1995.12', description: '정보통신공사업등록(제120234호)' },
  { date: '2001.03', description: '부산광역시 기장군 정관면(정관산업단지)으로 공장이전' },
  { date: '2001.06', description: 'KSA9001/ISO9001 품질경영인증취득' },
  { date: '2002.01', description: '공장등록(기장군청)' },
  { date: '2003.01', description: '부설연구소설립인가(한국산업기술진흥협회)' },
  { date: '2003.04', description: '공장설립및등록(해운대구청)' },
  { date: '2003.07', description: '벤처기업확인획득(기술보증기금)' },
  { date: '2004.01', description: '정보통신부정보통신기기CATV기자재25개\n품목 형식승인취득(전파연구소)' },
  { date: '2004.11', description: 'ISO9001:2000 인증획득(한국품질재단)' },
  { date: '2005.01', description: '(주)KT 1군 협력업체 선정' },
  { date: '2005.03', description: '수출유망중소기업지정(중소기업청)' },
  { date: '2005.10', description: '국가 사회복지발전 공로 표창장 수상\n(보건복지부장관)(제51636호)' },
  { date: '2006.03', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
  { date: '2006.12', description: '부산광역시장 표창장수여(부산광역시청)' },
  { date: '2007.01', description: '㈜반도산전 법인전환' },
  { date: '2007.03', description: '부산중소기업청장 표창장 수여(중소기업청)' },
  { date: '2007.04', description: '산업자원부장관 표창장 수여(산업자원부)' },
  { date: '2007.06', description: '고객만족경영대상 최우수상 수상(산업자원부)' },
  { date: '2007.11', description: '기술혁신개발사업 성공판정(중소기업청)' },
  { date: '2008.01', description: '병역특례지정업체 선정(병무청)' },
  { date: '2008.03', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
  { date: '2008.11', description: '부산지방중소기업청장 표창장 수여(중소기업청)' },
  { date: '2009.03', description: '기업부설연구소 인정(한국산업기술진흥협회)' },
  { date: '2009.07', description: '연구개발전담부서 인정(한국산업기술진흥협회)' },
  { date: '2010.01', description: '산업디자인전문회사 신고(산업자원부)' },
  { date: '2010.11', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
  { date: '2010.12', description: '연구개발전담부서 인정(한국산업기술진흥협회)' },
  { date: '2011.02', description: '중소기업청장표창장수여(제80335호)' },
  { date: '2011.06', description: '기업부설연구소설립(한국산업기술진흥협회)' },
  { date: '2011.09', description: '환경경영인증취득(ISO14001:2004)', image: '/static/img/logo.png' },
  { date: '2011.10', description: '부산지방경찰청장감사장(제255호)' },
  { date: '2012.06', description: '기장군 일자리창출 우수기업선정(부산광역시기장군)' },
  { date: '2012.07', description: '본사사옥이전(해운대구 센텀중앙로78, 센텀그린타워 1308)' },
  { date: '2013.12', description: '부산시 전략사업선도기업 인증(부산광역시청)' },
  { date: '2014.01', description: '기장군 일자리창출 우수기업선정(부산광역시기장군)' },
  { date: '2014.06', description: '부산광역시 일자리창출 우수기업선정(부산광역시청)' },
  { date: '2015.03', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
  { date: '2016.05', description: '벤처기업확인(기술보증기금)' },
  { date: '2016.12', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
  { date: '2017.12', description: '산업통상자원부장관 표창장 수여(산업통상자원부)' },
  { date: '2018.07', description: '기장군 우수중소기업 인증(부산광역시기장군)' },
  { date: '2018.12', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
  { date: '2019.01', description: '기장군 우수중소기업 인증(부산광역시기장군)' },
  { date: '2020.06', description: '기장군 우수중소기업 인증(부산광역시기장군)' },
  { date: '2021.01', description: '부산시 전략사업 선도기업 인증(부산광역시청)' },
  { date: '2022.01', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소벤처기업부)' },
  { date: '2023.06', description: '기장군 우수중소기업 인증(부산광역시기장군)' },
  { date: '2024.06', description: '부산광역시 일자리창출 우수기업선정(부산광역시청)' }
];

const History: React.FC = () => {
  const [activeTab, setActiveTab] = useState('1');
  
  // 연도 필터링 함수
  const getFilteredHistory = (tabId: string) => {
    if (tabId === '1') {
      return historyItems.filter(item => parseInt(item.date) >= 2021);
    }
    if (tabId === '2') {
      return historyItems.filter(item => {
        const year = parseInt(item.date);
        return year >= 2010 && year <= 2020;
      });
    }
    if (tabId === '3') {
      return historyItems.filter(item => parseInt(item.date) < 2010);
    }
    return historyItems;
  };

  const filteredItems = getFilteredHistory(activeTab);
  const timeLineClass = 'before:content-[\'\'] before:block before:absolute before:top-[2.4rem] before:left-0 before:w-0.5 before:h-[calc(100%-2.4rem)] before:bg-[#b1b3ba] before:-z-10';
  const ballClass = 'before:content-[\'\'] before:block before:absolute before:top-[1.5rem] before:left-[-0.4rem] before:w-[1rem] before:h-[1rem] before:bg-[#2C3E50] before:rounded-full';
  const yearRange = tabYears[activeTab];
  const description = tabDescriptions[activeTab];
  
  return (
    <div className="max-w-7xl mx-auto my-20">
      <div className="text-center justify-center text-neutral-800 text-2xl font-medium font-['Inter'] leading-10 mb-10">
        반도산전은 1996년 설립 이래 30년의 시간 동안 멈추지 않고 기술혁신과 내실을 다져왔습니다.<br/>대한민국을 선도하는 기업으로 도약해 나갈 것 입니다.
      </div>
      <Tabs
        items={tabItems}
        activeTab={activeTab}
        onTabChange={setActiveTab}
      >
        <div className="flex max-w-7xl mx-auto">
          <div className="flex-1 pt-30 space-y-10 text-center">
            <h2 className="text-[28px] font-semibold">
              <span className="text-black text-5xl">{yearRange.start}</span>
              <span className="relative -top-0 mx-4 text-black text-5xl">-</span>
              <span className="text-[#0033A0] text-6xl">{yearRange.end}</span>
            </h2>
            <p className="mt-1 text-3xl font-semibold text-neutral-600 leading-tight">
              새로운 출발과 함께<br/>
              반도산전의 경쟁력 강화
            </p>
          </div>
          <div id="history-list" className={`pt-9 relative flex-1 flex flex-col gap-[3rem] w-[calc(100%-52rem)] ${timeLineClass}`}>
            {filteredItems.map(({date, description, image}) => (
              <div key={date + description} className={`relative px-15 ${image && ballClass}`}>
                <div className="text-[#1e293b] font-bold text-2xl leading-tight">
                  {date}
                </div>
                <div className="text-[#334155] text-xl leading-snug whitespace-pre-line">
                  {description}
                </div>
              </div>
            ))}
          </div>
        </div>
      </Tabs>
    </div>
  );
};

export default History;