import pdfFileIcon from '../../../assets/icons/wing-pdf-file.svg';
import pdfFileDisabledIcon from '../../../assets/icons/wing-pdf-file-disabled.svg';

interface ButtonRow {
  label: string;
  defaultBtn: React.ReactNode;
  hoverBtn: React.ReactNode;
  disabledBtn: React.ReactNode;
}

const buttonRows: ButtonRow[] = [
  {
    label: '프라이머리 (그라디언트)',
    defaultBtn: (
      <div
        className="rounded-md pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative"
        style={{
          background:
            'linear-gradient(120.41deg, rgba(6, 182, 212, 1) 0%, rgba(59, 130, 246, 1) 100%)',
        }}
      >
        <div className="text-white text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          실행
        </div>
      </div>
    ),
    hoverBtn: (
      <div
        className="rounded-md pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative"
        style={{
          background:
            'linear-gradient(120.41deg, rgba(6, 182, 212, 1) 0%, rgba(59, 130, 246, 1) 100%)',
          boxShadow: '0px 0px 12px 0px rgba(6, 182, 212, 0.4)',
        }}
      >
        <div className="text-white text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          확인
        </div>
      </div>
    ),
    disabledBtn: (
      <div
        className="bg-[#334155] rounded-md pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative"
        style={{ opacity: 0.5 }}
      >
        <div className="text-[#64748b] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          저장
        </div>
      </div>
    ),
  },
  {
    label: '세컨더리 (솔리드)',
    defaultBtn: (
      <div className="bg-[#1a2236] rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
        <div className="text-[#c0c8dc] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          취소
        </div>
      </div>
    ),
    hoverBtn: (
      <div className="bg-[#1e2844] rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
        <div className="text-[#c0c8dc] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          닫기
        </div>
      </div>
    ),
    disabledBtn: (
      <div className="bg-[rgba(26,34,54,0.50)] rounded-md border border-solid border-[rgba(30,42,66,0.30)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
        <div className="text-[rgba(192,200,220,0.30)] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          취소
        </div>
      </div>
    ),
  },
  {
    label: '아웃라인 (고스트)',
    defaultBtn: (
      <div className="rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
        <div className="text-[#c0c8dc] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          더보기
        </div>
      </div>
    ),
    hoverBtn: (
      <div className="bg-[#1e2844] rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
        <div className="text-[#c0c8dc] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          필터
        </div>
      </div>
    ),
    disabledBtn: (
      <div className="rounded-md border border-solid border-[rgba(30,42,66,0.30)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
        <div className="text-[rgba(192,200,220,0.30)] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          더보기
        </div>
      </div>
    ),
  },
  {
    label: 'PDF 액션',
    defaultBtn: (
      <div className="bg-[rgba(59,130,246,0.08)] rounded-md border border-solid border-[rgba(59,130,246,0.30)] pt-1.5 pr-3 pb-1.5 pl-3 flex flex-row gap-2 items-center justify-start shrink-0 relative">
        <img className="shrink-0 relative overflow-visible" src={pdfFileIcon} alt="PDF 아이콘" />
        <div className="text-[#3b82f6] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          PDF 다운로드
        </div>
      </div>
    ),
    hoverBtn: (
      <div
        className="bg-[rgba(59,130,246,0.15)] rounded-md border border-solid border-[rgba(59,130,246,0.50)] pt-1.5 pr-3 pb-1.5 pl-3 flex flex-row gap-2 items-center justify-start shrink-0 relative"
        style={{ boxShadow: '0px 0px 8px 0px rgba(59, 130, 246, 0.2)' }}
      >
        <img className="shrink-0 relative overflow-visible" src={pdfFileIcon} alt="PDF 아이콘" />
        <div className="text-[#3b82f6] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          PDF 다운로드
        </div>
      </div>
    ),
    disabledBtn: (
      <div className="bg-[rgba(59,130,246,0.04)] rounded-md border border-solid border-[rgba(59,130,246,0.10)] pt-1.5 pr-3 pb-1.5 pl-3 flex flex-row gap-2 items-center justify-start shrink-0 relative">
        <img
          className="shrink-0 relative overflow-visible"
          src={pdfFileDisabledIcon}
          alt="PDF 아이콘 (비활성)"
        />
        <div className="text-[rgba(59,130,246,0.40)] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          PDF 다운로드
        </div>
      </div>
    ),
  },
  {
    label: '경고 (삭제)',
    defaultBtn: (
      <div className="bg-[rgba(239,68,68,0.10)] rounded-md border border-solid border-[rgba(239,68,68,0.30)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
        <div className="text-[#ef4444] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          삭제
        </div>
      </div>
    ),
    hoverBtn: (
      <div
        className="bg-[rgba(239,68,68,0.20)] rounded-md border border-solid border-[rgba(239,68,68,0.50)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative"
        style={{ boxShadow: '0px 0px 8px 0px rgba(239, 68, 68, 0.15)' }}
      >
        <div className="text-[#ef4444] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          삭제
        </div>
      </div>
    ),
    disabledBtn: (
      <div className="bg-[rgba(239,68,68,0.05)] rounded-md border border-solid border-[rgba(239,68,68,0.15)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative">
        <div className="text-[rgba(239,68,68,0.40)] text-center font-korean text-label-2 font-medium relative flex items-center justify-center">
          초기화
        </div>
      </div>
    ),
  },
];

export const ButtonCatalogSection = () => {
  return (
    <div className="bg-[#1a2236] rounded-[10px] border border-solid border-[#1e2a42] flex flex-col gap-0 items-start justify-start overflow-hidden w-full">
      {/* 카드 헤더 */}
      <div className="border-b border-solid 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-[#06b6d4] rounded-xl shrink-0 w-1 h-4 relative" />
        <div
          className="text-[#22d3ee] text-left font-korean text-caption leading-4 font-medium uppercase relative flex items-center justify-start"
          style={{ letterSpacing: '1.2px' }}
        >
          제어 인터페이스: 버튼
        </div>
      </div>

      {/* 테이블 본문 */}
      <div className="p-6 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative overflow-hidden">
        <div className="flex flex-col items-start justify-start self-stretch shrink-0 relative">
          {/* 헤더 행 */}
          <div className="border-b border-solid border-[#1e2a42] flex flex-row gap-0 items-start justify-center self-stretch shrink-0 relative">
            {['버튼 유형', '기본 상태', '호버 상태', '비활성 상태'].map((header) => (
              <div
                key={header}
                className="pt-px pr-2 pb-[17.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative"
              >
                <div
                  className="text-[#64748b] text-left font-korean text-caption font-medium uppercase relative flex items-center justify-start"
                  style={{ letterSpacing: '-0.55px' }}
                >
                  {header}
                </div>
              </div>
            ))}
          </div>

          {/* 데이터 행 */}
          <div
            className="flex flex-col items-start justify-start self-stretch shrink-0 relative"
            style={{ margin: '-1px 0 0 0' }}
          >
            {buttonRows.map((row, index) => (
              <div
                key={row.label}
                className="border-t border-solid border-[rgba(30,42,66,0.50)] flex flex-row gap-0 items-start justify-center self-stretch shrink-0 relative"
                style={index === 0 ? { borderTopColor: 'transparent' } : { margin: '-1px 0 0 0' }}
              >
                {/* 버튼 유형 레이블 */}
                <div className="pt-[31.5px] pr-2 pb-[31.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative">
                  <div className="text-[#bcc9cd] text-left font-korean text-caption font-medium relative flex items-center justify-start">
                    {row.label}
                  </div>
                </div>

                {/* 기본 상태 */}
                <div className="pt-[24.5px] pr-2 pb-[24.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative">
                  {row.defaultBtn}
                </div>

                {/* 호버 상태 */}
                <div className="pt-[24.5px] pr-2 pb-[24.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative">
                  {row.hoverBtn}
                </div>

                {/* 비활성 상태 */}
                <div className="pt-[24.5px] pr-2 pb-[24.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative">
                  {row.disabledBtn}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};