import { useState, useRef } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import Select from '../../../components/Select'
import ConfirmDialog from '../../../components/ConfirmDialog'

const TYPE_OPTIONS = [
  { value: '아케인', label: '아케인' },
  { value: '어센틱', label: '어센틱' },
  { value: '그랜드 어센틱', label: '그랜드 어센틱' },
]

const inputCls = 'w-full rounded-lg border border-white/10 bg-gray-950 px-3 py-2 text-sm outline-none focus:border-emerald-500/50 transition'

function formatMesoKorean(n) {
  if (!n || n <= 0) return ''
  const eok = Math.floor(n / 100_000_000)
  const man = Math.floor((n % 100_000_000) / 10_000)
  const parts = []
  if (eok) parts.push(`${eok}억`)
  if (man) parts.push(`${man.toLocaleString()}만`)
  if (!parts.length) return `${n.toLocaleString()}`
  return parts.join(' ')
}

function MesoInput({ value, onChange, ...rest }) {
  const display = value === '' || value == null ? '' : Number(String(value).replace(/[^\d]/g, '')).toLocaleString()
  const korean = formatMesoKorean(Number(String(value).replace(/[^\d]/g, '')) || 0)
  return (
    <div>
      <input
        type="text"
        inputMode="numeric"
        value={display}
        onChange={(e) => {
          const digits = e.target.value.replace(/[^\d]/g, '')
          onChange(digits)
        }}
        className={`${inputCls} tabular-nums text-right`}
        {...rest}
      />
      <div className="text-sm text-amber-300 mt-1 text-right tabular-nums min-h-[18px]">{korean || '\u00A0'}</div>
    </div>
  )
}

function Field({ label, hint, error, required, children }) {
  return (
    <div className="space-y-1.5">
      <div className="flex items-baseline justify-between">
        <label className="text-sm font-medium text-gray-300">
          {label} {required && <span className="text-red-400">*</span>}
        </label>
        {hint && <span className="text-xs text-gray-500">{hint}</span>}
      </div>
      {children}
      {error && <div className="text-[11px] text-red-400">{error}</div>}
    </div>
  )
}

export default function SymbolForm() {
  const navigate = useNavigate()
  const { id } = useParams()
  const isEdit = !!id
  const fileInputRef = useRef(null)

  const [type, setType] = useState('아케인')
  const [region, setRegion] = useState('')
  const [maxLevel, setMaxLevel] = useState('')
  const [dailyDefault, setDailyDefault] = useState('')
  const [weeklyDefault, setWeeklyDefault] = useState('')
  const [imageFile, setImageFile] = useState(null)
  const [imagePreview, setImagePreview] = useState(null)
  const [levels, setLevels] = useState([])
  const [confirmDelete, setConfirmDelete] = useState(false)

  const handleFile = (e) => {
    const file = e.target.files?.[0]
    if (!file) return
    setImageFile(file)
    setImagePreview(URL.createObjectURL(file))
  }

  const updateLevel = (idx, field, val) => {
    setLevels((prev) => prev.map((l, i) => (i === idx ? { ...l, [field]: val } : l)))
  }

  const adjustLevelRows = (newMax) => {
    const n = Number(newMax)
    if (!n || n < 2) return
    setLevels((prev) => {
      const rows = Array.from({ length: n - 1 }, (_, i) => {
        const level = i + 1
        return prev.find((l) => l.level === level) || { level, required_count: '', meso_cost: '' }
      })
      return rows
    })
  }

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div>
        <h2 className="text-lg font-semibold">{isEdit ? '심볼 편집' : '심볼 추가'}</h2>
        <p className="text-sm text-gray-500 mt-0.5">심볼 정보와 레벨별 필요 개수/메소를 입력합니다</p>
      </div>

      {/* 기본 정보 */}
      <div className="rounded-2xl border border-white/5 bg-gray-900/40 p-6 space-y-5">
        <div className="text-sm font-semibold text-emerald-300">기본 정보</div>

        <Field label="심볼 이미지" required={!isEdit}>
          <label className="flex items-center gap-4 rounded-xl border-2 border-dashed border-white/10 hover:border-emerald-500/40 hover:bg-emerald-500/5 bg-gray-950/50 p-4 transition cursor-pointer">
            <div className="w-32 h-32 rounded-lg bg-gray-900 border border-white/5 flex items-center justify-center overflow-hidden shrink-0">
              {imagePreview ? (
                <img src={imagePreview} alt="" className="w-full h-full object-contain" style={{ imageRendering: 'pixelated' }} />
              ) : (
                <span className="text-5xl text-gray-700">+</span>
              )}
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-sm font-medium text-gray-300">
                {imagePreview ? '클릭하여 이미지 변경' : '클릭하여 이미지 업로드'}
              </div>
              <p className="text-xs text-gray-500 mt-1">PNG, JPG, GIF 등 → WebP로 자동 변환됩니다</p>
              {imageFile && (
                <div className="text-xs text-emerald-400 mt-2 truncate">📎 {imageFile.name}</div>
              )}
            </div>
            <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFile} className="hidden" />
          </label>
        </Field>

        <div className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <Field label="심볼 종류" required>
                <Select value={type} onChange={setType} options={TYPE_OPTIONS} />
              </Field>
              <Field label="지역 이름" required hint="예: 소멸의 여로">
                <input
                  type="text"
                  value={region}
                  onChange={(e) => setRegion(e.target.value)}
                  className={inputCls}
                  placeholder="소멸의 여로"
                />
              </Field>
            </div>

            <div className="grid gap-4 sm:grid-cols-3">
              <Field label="만렙" required>
                <input
                  type="number"
                  value={maxLevel}
                  onChange={(e) => { setMaxLevel(e.target.value); adjustLevelRows(e.target.value) }}
                  className={inputCls}
                  min="2"
                />
              </Field>
              <Field label="기본 일퀘 획득량">
                <input
                  type="number"
                  value={dailyDefault}
                  onChange={(e) => setDailyDefault(e.target.value)}
                  className={inputCls}
                />
              </Field>
              <Field label="기본 주간퀘 획득량">
                <input
                  type="number"
                  value={weeklyDefault}
                  onChange={(e) => setWeeklyDefault(e.target.value)}
                  className={inputCls}
                />
              </Field>
            </div>

          </div>
      </div>

      {/* 레벨별 설정 */}
      <div className="rounded-2xl border border-white/5 bg-gray-900/40 p-6 space-y-4">
        <div className="flex items-baseline justify-between">
          <div className="text-sm font-semibold text-emerald-300">레벨별 필요 개수 · 메소</div>
          <div className="text-xs text-gray-500">레벨 N → N+1 업그레이드 기준 (만렙-1행)</div>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-xs text-gray-500 uppercase border-b border-white/5">
                <th className="py-2 px-3 text-left font-medium w-20">레벨</th>
                <th className="py-2 px-3 text-left font-medium">필요 심볼 수</th>
                <th className="py-2 px-3 text-left font-medium">메소</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-white/5">
              {levels.map((l, idx) => (
                <tr key={l.level}>
                  <td className="py-1.5 px-3 text-gray-400 tabular-nums">
                    Lv.<span className="text-gray-200 font-semibold">{l.level}</span>
                    <span className="text-gray-600 mx-1">→</span>
                    {l.level + 1}
                  </td>
                  <td className="py-1.5 px-3">
                    <input
                      type="number"
                      value={l.required_count}
                      onChange={(e) => updateLevel(idx, 'required_count', e.target.value)}
                      className={`${inputCls} max-w-36`}
                      placeholder="0"
                    />
                  </td>
                  <td className="py-1.5 px-3">
                    <div className="max-w-48">
                      <MesoInput
                        value={l.meso_cost}
                        onChange={(v) => updateLevel(idx, 'meso_cost', v)}
                        placeholder="0"
                      />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* 하단 버튼 */}
      <div className="flex items-center justify-between gap-3">
        <div>
          {isEdit && (
            <button
              type="button"
              onClick={() => setConfirmDelete(true)}
              className="rounded-lg border border-red-500/40 bg-red-500/10 hover:bg-red-500/20 text-red-300 px-4 py-2 text-sm font-medium transition"
            >
              삭제
            </button>
          )}
        </div>
        <div className="flex gap-2">
          <button
            type="button"
            onClick={() => navigate('..')}
            className="rounded-lg border border-white/10 hover:bg-white/5 text-gray-300 px-4 py-2 text-sm transition"
          >
            취소
          </button>
          <button
            type="button"
            className="rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white px-5 py-2 text-sm font-semibold shadow-lg shadow-emerald-500/20 transition"
          >
            {isEdit ? '저장' : '추가'}
          </button>
        </div>
      </div>

      <ConfirmDialog
        open={confirmDelete}
        onClose={() => setConfirmDelete(false)}
        onConfirm={() => setConfirmDelete(false)}
        title="심볼 삭제"
        description="이 심볼을 삭제하시겠습니까?\n레벨별 데이터도 함께 삭제됩니다."
        confirmText="삭제"
        destructive
      />
    </div>
  )
}