import { useEffect, useState } from 'react'
import { AlertCircle, CheckCircle2 } from 'lucide-react'
import { Button } from '@/shared/ui'
import { listBranches } from '@/entities/repo'
import { checkMergeStatus, createPull } from '@/entities/pull-request'
import type { MergeStatus, Pull } from '@/entities/pull-request'
import { Modal, modalInputClass, modalLabelClass, modalTextareaClass } from '@/shared/ui'
import { useT } from '@/shared/i18n'

export interface PullFormModalProps {
  space: string
  repo: string
  defaultBase: string
  onClose: () => void
  onCreated: (pull: Pull) => void
}

/** 新建合并请求：选分支、填标题描述，并实时探测 base…head 的可合并性。 */
export function PullFormModal({ space, repo, defaultBase, onClose, onCreated }: PullFormModalProps) {
  const { t } = useT()
  const [branches, setBranches] = useState<string[]>([])
  const [head, setHead] = useState('')
  const [base, setBase] = useState(defaultBase)
  const [title, setTitle] = useState('')
  const [body, setBody] = useState('')
  const [draft, setDraft] = useState(false)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [probe, setProbe] = useState<{ key: string; value: MergeStatus | 'failed' } | null>(null)

  useEffect(() => {
    let active = true
    void listBranches(space, repo, 200)
      .then(page => {
        if (!active) return
        const names = page.items.map(item => item.name)
        setBranches(names)
        setHead(prev => prev || names.find(name => name !== defaultBase) || names[0] || '')
      })
      .catch(() => undefined)
    return () => { active = false }
  }, [space, repo, defaultBase])

  const pairKey = head && base && head !== base ? `${space}/${repo}:${base}...${head}` : ''
  // 'pending' is derived (pair selected, no result yet) so the effect only
  // writes state when the probe settles.
  const status: MergeStatus | 'pending' | null = !pairKey
    ? null
    : probe?.key === pairKey
      ? probe.value === 'failed' ? null : probe.value
      : 'pending'

  useEffect(() => {
    if (!pairKey) return
    let active = true
    const timer = setTimeout(() => {
      void checkMergeStatus(space, repo, base, head)
        .then(next => { if (active) setProbe({ key: pairKey, value: next }) })
        .catch(() => { if (active) setProbe({ key: pairKey, value: 'failed' }) })
    }, 400)
    return () => {
      active = false
      clearTimeout(timer)
    }
  }, [space, repo, base, head, pairKey])

  async function submit() {
    if (!title.trim() || !head || !base) {
      setError(t('pull.form.missingFields'))
      return
    }
    if (head === base) {
      setError(t('pull.form.sameBranch'))
      return
    }
    setBusy(true)
    setError(null)
    try {
      const pull = await createPull(space, repo, {
        title: title.trim(),
        head_branch: head,
        base_branch: base,
        body: body || null,
        draft,
      })
      onCreated(pull)
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : t('pull.form.createFailed'))
      setBusy(false)
    }
  }

  return (
    <Modal
      title={t('pull.form.title')}
      description={t('pull.form.description', { repo })}
      open
      onClose={onClose}
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>{t('common.action.cancel')}</Button>
          <Button disabled={busy} onClick={() => void submit()}>
            {busy ? t('pull.form.creating') : draft ? t('pull.form.createDraft') : t('pull.form.create')}
          </Button>
        </>
      }
    >
      <div className="grid gap-3 sm:grid-cols-2">
        <label>
          <span className={modalLabelClass}>{t('pull.form.head')}</span>
          <select className={modalInputClass} value={head} onChange={event => setHead(event.target.value)}>
            {branches.map(name => <option key={name} value={name}>{name}</option>)}
          </select>
        </label>
        <label>
          <span className={modalLabelClass}>{t('pull.form.base')}</span>
          <select className={modalInputClass} value={base} onChange={event => setBase(event.target.value)}>
            {branches.map(name => <option key={name} value={name}>{name}</option>)}
          </select>
        </label>
      </div>

      {head && base && head !== base ? (
        status === 'pending' ? (
          <p className="text-[12.5px] text-shell-ink-muted">{t('pull.form.comparing', { base, head })}</p>
        ) : status?.mergeable ? (
          <p className="flex items-center gap-1.5 text-[12.5px] text-[#1a7f37]">
            <CheckCircle2 className="h-3.5 w-3.5" aria-hidden />
            {t('pull.form.fastForward')}{status.fast_forwardable ? '' : t('pull.form.willMergeCommit')}
          </p>
        ) : status ? (
          <p className="flex items-start gap-1.5 text-[12.5px] text-[#b42318]">
            <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
            <span>
              {t('pull.form.conflicts', { count: status.conflicts.length })}
              {status.conflicts.length ? <span className="block break-all font-mono text-[11px]">{status.conflicts.slice(0, 5).join(', ')}{status.conflicts.length > 5 ? ' …' : ''}</span> : null}
              {t('pull.form.conflictsHint')}
            </span>
          </p>
        ) : null
      ) : null}

      <label>
        <span className={modalLabelClass}>{t('pull.title')}</span>
        <input className={modalInputClass} value={title} maxLength={200} placeholder={head ? t('pull.form.titlePlaceholder', { head, base }) : t('pull.form.titlePlaceholderFallback')} onChange={event => setTitle(event.target.value)} />
      </label>
      <label>
        <span className={modalLabelClass}>{t('pull.form.descriptionField')}</span>
        <textarea className={modalTextareaClass} rows={6} value={body} placeholder={t('pull.form.bodyPlaceholder')} onChange={event => setBody(event.target.value)} />
      </label>
      <label className="flex items-center gap-2 text-[13px]">
        <input type="checkbox" checked={draft} onChange={event => setDraft(event.target.checked)} />
        {t('pull.form.draftCheckbox')}
      </label>
      {error ? <p className="text-[12.5px] text-[#b42318]">{error}</p> : null}
    </Modal>
  )
}