import { ChevronLeft, X } from 'lucide-react'
import type React from 'react'
import PlatformLoadingOverlay from '../../components/PlatformLoadingOverlay'

type PlatformSelectModalProps = {
  mode: 'select' | 'settings'
  weekLabel: string
  loading: boolean
  loadingTitle: string
  loadingDescription: string
  onBack: () => void
  onClose: () => void
  children: React.ReactNode
}

export default function PlatformSelectModal({
  mode,
  weekLabel,
  loading,
  loadingTitle,
  loadingDescription,
  onBack,
  onClose,
  children
}: PlatformSelectModalProps): React.JSX.Element {
  return (
    <div className="fixed bottom-0 left-0 right-0 top-[38px] z-50 grid place-items-center bg-[#080a10]/35 p-6 backdrop-blur-[2px]">
      <section className="flex h-[min(660px,calc(100vh-86px))] w-full max-w-[560px] flex-col overflow-hidden rounded-xl border border-[#dfe3ed] bg-white shadow-[0_28px_80px_rgba(8,10,16,0.28)]">
        <header className="flex items-start justify-between gap-4 border-b border-[#e5e8ef] px-6 pb-4 pt-5">
          <div>
            <span className="text-[12px] font-medium text-[#6f4df6]">{weekLabel}</span>
            <h2 data-help="platform-modal-title" className="mt-1 flex items-center gap-2 text-[22px] font-bold leading-tight text-[#111520]">
              {mode === 'settings' && (
                <button
                  type="button"
                  aria-label="플랫폼 선택으로 돌아가기"
                  onClick={onBack}
                  className="grid h-7 w-7 cursor-pointer place-items-center rounded-md text-[#697386] transition hover:bg-[#f0f2f7] hover:text-[#111520]"
                >
                  <ChevronLeft size={18} />
                </button>
              )}
              {mode === 'settings' ? '플랫폼 설정' : '플랫폼 선택'}
            </h2>
            <p className="mt-2 text-[13px] font-medium text-[#5f6878]">
              {mode === 'settings'
                ? '플랫폼별 개발 환경 설정을 관리하세요.'
                : '실습을 진행할 플랫폼을 선택하고 제어권을 요청하세요.'}
            </p>
          </div>
          <button
            type="button"
            aria-label="닫기"
            onClick={onClose}
            className="grid h-8 w-8 shrink-0 cursor-pointer place-items-center rounded-md text-[#697386] transition hover:bg-[#f0f2f7] hover:text-[#111520]"
          >
            <X size={17} />
          </button>
        </header>

        <div className="relative min-h-0 flex-1 overflow-hidden">
          <div
            className={[
              'flex h-full w-[200%] transition-[transform,opacity] duration-300 ease-out',
              mode === 'settings' ? '-translate-x-1/2' : 'translate-x-0'
            ].join(' ')}
          >
            {children}
          </div>
        </div>
        {loading && (
          <PlatformLoadingOverlay
            title={loadingTitle}
            description={loadingDescription}
          />
        )}
      </section>
    </div>
  )
}