import { useMemo } from 'react'
import { estimateDuration } from './file-utils'
import type { SongBundle } from './types'
import styles from '../../pages/UploadPage.module.css'

type UploadBundleCardProps = {
  bundle: SongBundle
  onUpdateBundle: (id: string, patch: Partial<SongBundle>) => void
  onRemoveBundle: (id: string) => void
}

export function UploadBundleCard({ bundle, onUpdateBundle, onRemoveBundle }: UploadBundleCardProps) {
  const bgSrc = useMemo(() => {
    if (!bundle.bgFile) return null
    return URL.createObjectURL(bundle.bgFile)
  }, [bundle.bgFile])

  return (
    <div className={styles.songCard}>
      <div className={styles.songHeader}>
        {bgSrc ? <img className={styles.songBanner} src={bgSrc} alt="" /> : null}
        <div className={styles.songInfo}>
          <h3 className={`${styles.songTitle} font-title`}>{bundle.chart.title}</h3>
          <p className={styles.songArtist}>{bundle.chart.artist}</p>
          <p className={styles.songMeta}>
            {bundle.chart.bpm} BPM · {estimateDuration(bundle.chart)}
          </p>
        </div>
        <button
          className={styles.songRemoveBtn}
          onClick={() => onRemoveBundle(bundle.id)}
          title="Remove"
        >
          &times;
        </button>
      </div>

      <div className={styles.options}>
        <label className={styles.option}>
          Difficulty
          <select
            value={bundle.selectedDifficulty}
            onChange={(e) => onUpdateBundle(bundle.id, { selectedDifficulty: e.target.value })}
          >
            {bundle.chart.difficulties.map((d) => (
              <option key={d.difficulty} value={d.difficulty}>
                {d.difficulty} ({d.meter})
              </option>
            ))}
          </select>
        </label>

        <label
          className={styles.optionWithHelp}
          data-tooltip="Many StepMania charts require stepping in two directions at once. Since this game uses body tracking (not a dance pad), only one step can be detected at a time. Simplify removes simultaneous arrows so every note is hittable."
        >
          <input
            type="checkbox"
            checked={bundle.simplify}
            onChange={(e) => onUpdateBundle(bundle.id, { simplify: e.target.checked })}
          />
          Simplify (no simultaneous arrows)
        </label>
      </div>
    </div>
  )
}
