import wingAnchorIcon from '../../../assets/icons/wing-anchor.svg';
import wingCargoIcon from '../../../assets/icons/wing-cargo.svg';
import wingAlertTriangleIcon from '../../../assets/icons/wing-alert-triangle.svg';
import wingChartBarIcon from '../../../assets/icons/wing-chart-bar.svg';
import wingWaveGraph from '../../../assets/icons/wing-wave-graph.svg';

interface LogisticsItem {
  icon: string;
  label: string;
  progress: string;
}

const logisticsItems: LogisticsItem[] = [
  { icon: wingAnchorIcon, label: '화물 통관', progress: '진행률: 84%' },
  { icon: wingCargoIcon, label: '화물 통관', progress: '진행률: 84%' },
  { icon: wingAlertTriangleIcon, label: '화물 통관', progress: '진행률: 84%' },
];

export const CardSection = () => {
  return (
    <div
      className="grid gap-6 w-full"
      style={{
        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
      }}
    >
      {/* col 3: 활성 물류 현황 카드 */}
      <div
        className="bg-[#1a2236] rounded-[10px] border border-[#1e2a42] p-6 flex flex-col gap-6 items-start justify-start relative"
        style={{ gridColumn: '3 / span 1', gridRow: '1 / span 1' }}
      >
        {/* 카드 헤더 */}
        <div className="border-l-2 border-[#06b6d4] pl-3 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative">
          <div
            className="text-[#64748b] text-left font-korean text-caption leading-[15px] font-medium uppercase relative flex items-center justify-start"
            style={{ letterSpacing: '1px' }}
          >
            활성 물류 현황
          </div>
        </div>

        {/* 물류 아이템 목록 */}
        <div className="flex flex-col gap-4 items-start justify-start self-stretch shrink-0 relative">
          {logisticsItems.map((item, index) => (
            <div
              key={index}
              className="flex flex-row gap-4 items-center justify-start self-stretch shrink-0 relative"
            >
              <div className="bg-[#1e293b] rounded-md flex flex-row gap-0 items-center justify-center shrink-0 w-10 h-10 relative">
                <img
                  className="shrink-0 relative overflow-visible"
                  src={item.icon}
                  alt={item.label}
                />
              </div>
              <div className="flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative">
                <div className="flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative">
                  <div className="text-[#dfe2f3] text-left font-korean text-label-2 leading-[16.5px] font-medium relative flex items-center justify-start">
                    {item.label}
                  </div>
                </div>
                <div className="flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative">
                  <div className="text-[#64748b] text-left font-sans text-caption leading-[15px] font-normal relative flex items-center justify-start">
                    {item.progress}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 대응팀 배치 버튼 */}
        <div className="pt-2 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative">
          <div
            className="rounded-md pt-2 pb-2 flex flex-col gap-0 items-center justify-center self-stretch shrink-0 relative"
            style={{
              background:
                'linear-gradient(97.29deg, rgba(6, 182, 212, 1) 0%, rgba(59, 130, 246, 1) 100%)',
            }}
          >
            <div className="text-white text-center font-korean text-label-2 leading-[16.5px] font-medium relative flex items-center justify-center">
              대응팀 배치
            </div>
          </div>
        </div>
      </div>

      {/* col 1-2 span: 실시간 텔레메트리 카드 */}
      <div
        className="bg-[#1a2236] rounded-[10px] border border-[#1e2a42] p-6 flex flex-col items-start justify-between min-h-[240px] relative overflow-hidden"
        style={{ gridColumn: '1 / span 2', gridRow: '1 / span 1' }}
      >
        {/* 배경 파형 (opacity 0.3) */}
        <div
          className="flex flex-col gap-0 items-start justify-center shrink-0 h-24 absolute right-px left-px bottom-[1.5px]"
          style={{ opacity: 0.3 }}
        >
          <img
            className="self-stretch shrink-0 h-24 relative overflow-visible"
            src={wingWaveGraph}
            alt="wave graph"
          />
        </div>

        {/* 상단 콘텐츠 */}
        <div className="flex flex-col gap-6 items-start justify-start self-stretch shrink-0 relative">
          {/* 제목 영역 */}
          <div className="flex flex-row items-start justify-between self-stretch shrink-0 relative">
            <div className="flex flex-col gap-[4.5px] items-start justify-start shrink-0 relative">
              <div
                className="text-[#22d3ee] text-left font-korean text-caption leading-[15px] font-medium uppercase relative flex items-center justify-start"
                style={{ letterSpacing: '1px' }}
              >
                실시간 텔레메트리
              </div>
              <div className="text-[#dfe2f3] text-left font-korean text-2xl leading-8 font-medium relative flex items-center justify-start">
                선박 속도 오버레이
              </div>
            </div>
            <img
              className="shrink-0 w-[13.5px] h-[13.5px] relative overflow-visible"
              src={wingChartBarIcon}
              alt="chart bar"
            />
          </div>

          {/* 속도 수치 */}
          <div className="flex flex-row gap-2 justify-start self-stretch shrink-0 relative">
            <div className="text-white text-left font-sans font-bold text-4xl leading-10 relative flex items-center justify-start">
              24.8
            </div>
            <div className="text-[#64748b] text-left font-sans font-semibold text-body-2 leading-5 relative flex items-center justify-start">
              노트 (knots)
            </div>
          </div>
        </div>

        {/* 하단 뱃지 + 버튼 */}
        <div className="flex flex-row items-center justify-between self-stretch shrink-0 relative">
          {/* 정상 가동중 뱃지 */}
          <div className="bg-[rgba(34,197,94,0.10)] rounded-xl pt-0.5 pr-2 pb-0.5 pl-2 flex flex-col gap-0 items-start justify-start shrink-0 relative">
            <div className="text-[#22c55e] text-left font-korean text-caption leading-[13.5px] font-medium relative flex items-center justify-start">
              정상 가동중
            </div>
          </div>

          {/* 대응팀 배치 아웃라인 버튼 */}
          <div className="rounded-md border border-[#1e2a42] pt-1 pr-3 pb-1 pl-3 flex flex-col gap-0 items-center justify-center shrink-0 relative">
            <div className="text-[#c0c8dc] text-center font-korean text-caption leading-[15px] font-medium relative flex items-center justify-center">
              대응팀 배치
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
