import { useState } from 'react'
import { createPost, updatePost, type Post, type PostError } from '../api/posts'
import { Markdown } from './Markdown'

interface PostEditorProps {
  token: string
  post?: Post
  onSaved: () => void
  onCancel: () => void
}

const ERROR_TEXT: Record<PostError, string> = {
  full: '文章数已达上限（200 篇）',
  'too-large': '正文太长了（上限 64KB）',
  'bad-input': '标题不能为空，标签也别太长',
  failed: '保存失败，稍后再试',
}

export function PostEditor({ token, post, onSaved, onCancel }: PostEditorProps) {
  const [title, setTitle] = useState(post?.title ?? '')
  const [tag, setTag] = useState(post?.tag ?? '')
  const [body, setBody] = useState(post?.body ?? '')
  const [preview, setPreview] = useState(false)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const save = async () => {
    setSaving(true)
    setError(null)
    try {
      const input = { title, tag, body }
      if (post) await updatePost(token, post.id, input)
      else await createPost(token, input)
      onSaved()
    } catch (e) {
      const reason = (e as Error).message as PostError
      setError(ERROR_TEXT[reason] ?? ERROR_TEXT.failed)
      setSaving(false)
    }
  }

  return (
    <section className="w-full px-6 py-14">
      <div className="mb-8 flex items-center justify-between">
        <h2 className="text-xs font-medium uppercase tracking-[0.3em] text-muted">
          {post ? 'Edit post' : 'New post'}
        </h2>
        <button
          onClick={() => setPreview((p) => !p)}
          className="rounded-full border border-line px-4 py-1.5 text-xs font-medium uppercase tracking-[0.16em] text-muted transition-colors hover:border-accent hover:text-accent"
        >
          {preview ? 'Write' : 'Preview'}
        </button>
      </div>

      {preview ? (
        <article>
          <h1 className="mb-6 font-display text-3xl font-medium text-text">
            {title || '（无标题）'}
          </h1>
          <Markdown>{body || '_正文为空_'}</Markdown>
        </article>
      ) : (
        <div className="flex flex-col gap-4">
          <input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="标题"
            className="w-full rounded-lg border border-line bg-surface px-4 py-3 font-display text-2xl text-text outline-none focus:border-accent"
          />
          <input
            value={tag}
            onChange={(e) => setTag(e.target.value)}
            placeholder="标签（如 Rust、随笔）"
            className="w-full rounded-lg border border-line bg-surface px-4 py-2 text-sm text-text outline-none focus:border-accent"
          />
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
            placeholder="正文，支持 Markdown…"
            rows={16}
            className="w-full resize-y rounded-lg border border-line bg-surface px-4 py-3 font-mono text-sm leading-relaxed text-text outline-none focus:border-accent"
          />
        </div>
      )}

      {error && <p className="mt-4 text-sm text-[#ff8585]">{error}</p>}

      <div className="mt-8 flex items-center gap-3">
        <button
          onClick={save}
          disabled={saving}
          className="rounded-full bg-accent px-6 py-2 text-sm font-medium text-bg transition-opacity hover:opacity-90 disabled:opacity-50"
        >
          {saving ? '保存中…' : '保存'}
        </button>
        <button
          onClick={onCancel}
          disabled={saving}
          className="rounded-full border border-line px-6 py-2 text-sm font-medium text-muted transition-colors hover:border-accent hover:text-accent disabled:opacity-50"
        >
          取消
        </button>
      </div>
    </section>
  )
}