import { Trash2 } from 'lucide-react'
import { useState } from 'react'
import type React from 'react'

type DeletableModule = {
  name: string
}

type ModuleDeleteConfirmProps<Module extends DeletableModule> = {
  dark: boolean
  module: Module
  onCancel: () => void
  onConfirm: (module: Module, options: { deleteRepository: boolean }) => void
}

export default function ModuleDeleteConfirm<Module extends DeletableModule>({
  dark,
  module,
  onCancel,
  onConfirm
}: ModuleDeleteConfirmProps<Module>): React.JSX.Element {
  const [deleteRepository, setDeleteRepository] = useState(false)

  return (
    <div className="absolute inset-0 z-50 grid place-items-center bg-black/36">
      <section
        className={[
          'w-[360px] overflow-hidden rounded-lg border shadow-[0_24px_70px_rgba(0,0,0,0.42)]',
          dark ? 'border-white/10 bg-[#252525] text-white' : 'border-[#d8dee9] bg-white text-[#111520]'
        ].join(' ')}
      >
        <div className={['flex items-center gap-2 border-b px-4 py-3', dark ? 'border-white/10' : 'border-[#d8dde8]'].join(' ')}>
          <Trash2 size={15} className="text-[#e87979]" />
          <strong className="text-[13px] font-bold">삭제</strong>
        </div>
        <div className="p-4">
          <p className={['text-[13px] font-semibold', dark ? 'text-white' : 'text-[#111520]'].join(' ')}>
            {module.name} 삭제할까요?
          </p>
          <p className={['mt-2 text-[12px] font-medium leading-relaxed', dark ? 'text-white/45' : 'text-[#727b8c]'].join(' ')}>
            워크스페이스에 설치된 모듈 폴더가 삭제됩니다.
          </p>
          <label
            className={[
              'mt-4 flex cursor-pointer items-start gap-2 rounded-md border p-3',
              dark ? 'border-white/10 bg-white/[0.03]' : 'border-[#d8dee9] bg-[#f8fafc]'
            ].join(' ')}
          >
            <input
              type="checkbox"
              checked={deleteRepository}
              onChange={(event) => setDeleteRepository(event.target.checked)}
              className="mt-[2px] h-4 w-4 cursor-pointer accent-[#d14b4b]"
            />
            <span>
              <span className={['block text-[12px] font-bold', dark ? 'text-white/82' : 'text-[#1f2937]'].join(' ')}>
                학생 저장소도 함께 삭제
              </span>
              <span className={['mt-1 block text-[11px] font-medium leading-relaxed', dark ? 'text-white/42' : 'text-[#7a8494]'].join(' ')}>
                제출 커밋과 작업 이력이 삭제되고, 다음 설치 시 템플릿 저장소 기준으로 새로 생성됩니다.
              </span>
            </span>
          </label>
          <div className="mt-4 flex justify-end gap-2">
            <button
              type="button"
              onClick={onCancel}
              className={[
                'h-8 cursor-pointer rounded-md border px-3 text-[12px] font-bold transition',
                dark ? 'border-white/12 text-white/62 hover:bg-white/8 hover:text-white' : 'border-[#cfd6e4] text-[#687284] hover:bg-[#eef1f7] hover:text-[#111520]'
              ].join(' ')}
            >
              취소
            </button>
            <button
              type="button"
              onClick={() => onConfirm(module, { deleteRepository })}
              className="h-8 cursor-pointer rounded-md bg-[#d14b4b] px-3 text-[12px] font-bold text-white transition hover:bg-[#bd3838]"
            >
              삭제
            </button>
          </div>
        </div>
      </section>
    </div>
  )
}