import { useState } from 'react'
import { PROJECT_TYPES, PROJECT_TYPE_KEY, getCustomTags } from '../utils/style'
import StyleSelector from './StyleSelector'
import CustomTagsEditor from './CustomTagsEditor'

interface CreateProjectModalProps {
  open: boolean
  onClose: () => void
  onSubmit: (name: string, style: Record<string, string>) => Promise<void>
}

export default function CreateProjectModal({
  open,
  onClose,
  onSubmit,
}: CreateProjectModalProps) {
  const [name, setName] = useState('')
  const [style, setStyle] = useState<Record<string, string>>({})
  const [submitting, setSubmitting] = useState(false)

  if (!open) return null

  const handleStyleChange = (key: string, value: string) => {
    setStyle(prev =>
      prev[key] === value
        ? (() => {
            const { [key]: _, ...rest } = prev
            return rest
          })()
        : { ...prev, [key]: value }
    )
  }

  const handleSubmit = async () => {
    if (!name.trim()) return
    setSubmitting(true)
    try {
      await onSubmit(name.trim(), style)
      setName('')
      setStyle({})
      onClose()
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 1000,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
      onClick={onClose}
    >
      <div
        className="card"
        style={{
          position: 'relative',
          width: '100%',
          maxWidth: 520,
          maxHeight: '80vh',
          overflow: 'auto',
          zIndex: 1,
        }}
        onClick={e => e.stopPropagation()}
      >
        <h2 style={{ fontSize: 18, marginBottom: 20 }}>新建工程</h2>

        <label style={{ display: 'block', marginBottom: 16 }}>
          <span style={{ display: 'block', fontSize: 13, fontWeight: 600, marginBottom: 6, color: 'var(--text-secondary)' }}>
            工程名称
          </span>
          <input
            type="text"
            value={name}
            onChange={e => setName(e.target.value)}
            placeholder="输入工程名称"
            style={{ width: '100%' }}
          />
        </label>

        <div style={{ marginBottom: 16 }}>
          <StyleSelector
            value={style}
            onChange={handleStyleChange}
            compact
            categories={[{
              key: PROJECT_TYPE_KEY,
              label: '工程类型',
              options: PROJECT_TYPES.map(p => ({ value: p.value, label: p.label })),
            }]}
            customTags={getCustomTags(style)}
          />
          <CustomTagsEditor style={style} onChange={setStyle} />
        </div>

        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
          <button className="btn-secondary" onClick={onClose} disabled={submitting}>
            取消
          </button>
          <button
            className="btn-primary"
            onClick={handleSubmit}
            disabled={!name.trim() || submitting}
          >
            {submitting ? '创建中...' : '创建'}
          </button>
        </div>
      </div>
    </div>
  )
}