import wingCompGearIcon from '../../../assets/icons/wing-comp-gear.svg';
import wingCompSearchIcon from '../../../assets/icons/wing-comp-search.svg';
import wingCompCloseIcon from '../../../assets/icons/wing-comp-close.svg';
import wingCompMenuIcon from '../../../assets/icons/wing-comp-menu.svg';

interface IconButtonItem {
  icon: string;
  label: string;
}

interface StatusBadge {
  label: string;
  color: string;
  bg: string;
}

interface DataTag {
  label: string;
  color: string;
  dotColor: string;
  bg: string;
}

const iconButtons: IconButtonItem[] = [
  { icon: wingCompGearIcon, label: 'Settings' },
  { icon: wingCompSearchIcon, label: 'Search' },
  { icon: wingCompCloseIcon, label: 'Close' },
  { icon: wingCompMenuIcon, label: 'Menu' },
];

const statusBadges: StatusBadge[] = [
  { label: '정상', color: '#22c55e', bg: 'rgba(34,197,94,0.10)' },
  { label: '주의', color: '#eab308', bg: 'rgba(234,179,8,0.10)' },
  { label: '위험', color: '#ef4444', bg: 'rgba(239,68,68,0.10)' },
  { label: '진행중', color: '#3b82f6', bg: 'rgba(59,130,246,0.10)' },
  { label: '완료', color: '#9ba3b8', bg: 'rgba(155,163,184,0.10)' },
];

const dataTags: DataTag[] = [
  { label: 'VESSEL_A', color: '#22c55e', dotColor: '#22c55e', bg: 'rgba(34,197,94,0.10)' },
  { label: 'PRIORITY_H', color: '#eab308', dotColor: '#eab308', bg: 'rgba(234,179,8,0.10)' },
  { label: 'CRITICAL_ERR', color: '#ef4444', dotColor: '#ef4444', bg: 'rgba(239,68,68,0.10)' },
  { label: 'ACTIVE_SYNC', color: '#3b82f6', dotColor: '#3b82f6', bg: 'rgba(59,130,246,0.10)' },
];

export const IconBadgeSection = () => {
  return (
    <div
      className="grid gap-8 w-full"
      style={{
        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
      }}
    >
      {/* 좌측 카드: 제어 인터페이스 — 아이콘 버튼 */}
      <div
        className="bg-[#1a2236] rounded-[10px] border border-[#1e2a42] flex flex-col gap-0 items-start justify-start relative overflow-hidden"
        style={{ gridColumn: '1 / span 1', gridRow: '1 / span 1' }}
      >
        {/* 카드 헤더 */}
        <div className="border-b border-[#1e2a42] pt-4 pr-6 pb-4 pl-6 flex flex-row gap-3 items-center justify-start self-stretch shrink-0 relative">
          <div className="bg-[#e89337] rounded-xl shrink-0 w-1 h-4 relative"></div>
          <div className="flex flex-col gap-0 items-start justify-start shrink-0 relative">
            <div
              className="text-[#22d3ee] text-left font-korean text-xs leading-4 font-medium uppercase relative flex items-center justify-start"
              style={{ letterSpacing: '1.2px' }}
            >
              마이크로 컨트롤: 아이콘 버튼
            </div>
          </div>
        </div>

        {/* 아이콘 버튼 목록 */}
        <div className="p-8 flex flex-row gap-6 items-start justify-evenly self-stretch shrink-0 relative">
          {iconButtons.map((btn) => (
            <div
              key={btn.label}
              className="flex flex-col gap-3 items-center justify-start self-stretch shrink-0 relative"
            >
              <div className="bg-[#1a2236] rounded-md border border-[#1e2a42] flex flex-row gap-0 items-center justify-center shrink-0 w-9 h-9 relative">
                <img
                  className="shrink-0 relative overflow-visible"
                  src={btn.icon}
                  alt={btn.label}
                />
              </div>
              <div className="flex flex-col gap-0 items-start justify-start shrink-0 relative">
                <div
                  className="text-[#64748b] text-left font-sans font-bold text-caption leading-[15px] uppercase relative flex items-center justify-start"
                  style={{ letterSpacing: '0.9px' }}
                >
                  {btn.label}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 카드 푸터 */}
        <div className="bg-[rgba(15,23,42,0.30)] pt-4 pr-6 pb-4 pl-6 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">
            Standard dimensions: 36x36px with radius-md (6px)
          </div>
        </div>
      </div>

      {/* 우측 카드: 마이크로 컨트롤 — 뱃지 & 태그 */}
      <div
        className="bg-[#1a2236] rounded-[10px] border border-[#1e2a42] flex flex-col gap-0 items-start justify-start relative overflow-hidden"
        style={{ gridColumn: '2 / span 1', gridRow: '1 / span 1' }}
      >
        {/* 카드 헤더 */}
        <div className="border-b border-[#1e2a42] pt-4 pr-6 pb-4 pl-6 flex flex-row gap-3 items-center justify-start self-stretch shrink-0 relative">
          <div className="bg-[#93000a] rounded-xl shrink-0 w-1 h-4 relative"></div>
          <div className="flex flex-col gap-0 items-start justify-start shrink-0 relative">
            <div
              className="text-[#22d3ee] text-left font-korean text-xs leading-4 font-medium uppercase relative flex items-center justify-start"
              style={{ letterSpacing: '1.2px' }}
            >
              마이크로 컨트롤: 아이콘 버튼
            </div>
          </div>
        </div>

        {/* 카드 바디 */}
        <div className="p-6 flex flex-col gap-8 items-start justify-start self-stretch shrink-0 relative">
          {/* Operational Status 섹션 */}
          <div className="flex flex-col gap-4 items-start justify-start self-stretch shrink-0 relative">
            <div className="border-l-2 border-[#0e7490] pl-3 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative">
              <div
                className="text-[#64748b] text-left font-sans font-bold text-caption leading-[15px] uppercase relative flex items-center justify-start"
                style={{ letterSpacing: '1px' }}
              >
                Operational Status
              </div>
            </div>
            <div className="flex flex-row gap-3 items-start justify-start self-stretch shrink-0 relative">
              {statusBadges.map((badge) => (
                <div
                  key={badge.label}
                  className="rounded-xl pt-0.5 pr-2 pb-0.5 pl-2 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative"
                  style={{ backgroundColor: badge.bg }}
                >
                  <div
                    className="text-left font-korean text-caption leading-[15px] font-medium relative flex items-center justify-start"
                    style={{ color: badge.color }}
                  >
                    {badge.label}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Data Classification 섹션 */}
          <div className="flex flex-col gap-4 items-start justify-start self-stretch shrink-0 relative">
            <div className="border-l-2 border-[#0e7490] pl-3 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative">
              <div
                className="text-[#64748b] text-left font-sans font-bold text-caption leading-[15px] uppercase relative flex items-center justify-start"
                style={{ letterSpacing: '1px' }}
              >
                Data Classification
              </div>
            </div>
            <div className="flex flex-row gap-4 items-start justify-start self-stretch shrink-0 relative">
              {dataTags.map((tag) => (
                <div
                  key={tag.label}
                  className="rounded-xl pt-0.5 pr-2 pb-0.5 pl-2 flex flex-row gap-2 items-center justify-start self-stretch shrink-0 relative"
                  style={{ backgroundColor: tag.bg }}
                >
                  <div
                    className="rounded-xl shrink-0 w-1.5 h-1.5 relative"
                    style={{ backgroundColor: tag.dotColor }}
                  ></div>
                  <div className="flex flex-col gap-0 items-start justify-start shrink-0 relative">
                    <div
                      className="text-left font-sans font-bold text-caption leading-[15px] relative flex items-center justify-start"
                      style={{ color: tag.color }}
                    >
                      {tag.label}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};