import { useEffect, useRef, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, Check, Loader2, ImagePlus, IdCard } from 'lucide-react';
import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
import { markdown } from '@codemirror/lang-markdown';
import { oneDark } from '@codemirror/theme-one-dark';
import { motion } from 'framer-motion';
import { api } from '../../api';
import { Markdown } from '../../components/Markdown';
import { useThemeStore } from '../../store/theme';
import { defaultProfile, parseProfile, type ProfileContent } from '../../config/profile';

/** 后台"个人主页"编辑：名片信息（头像/联系方式）+ Markdown 正文 */
export function AdminProfilePage() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { theme } = useThemeStore();

  const [content, setContent] = useState('');
  const [card, setCard] = useState<ProfileContent>(defaultProfile);
  const [initialized, setInitialized] = useState(false);
  const [savedAt, setSavedAt] = useState<Date | null>(null);
  const [showCard, setShowCard] = useState(false);
  const editorRef = useRef<ReactCodeMirrorRef>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const avatarInputRef = useRef<HTMLInputElement>(null);

  const { data: page, isLoading } = useQuery({
    queryKey: ['page', 'profile'],
    queryFn: () => api.getPage('profile'),
  });

  const { data: cardPage } = useQuery({
    queryKey: ['page', 'profile-card'],
    queryFn: () => api.getPage('profile-card'),
  });

  useEffect(() => {
    if (!initialized && page && cardPage) {
      setContent(page.content_md || '# 关于我\n\n');
      setCard(parseProfile(cardPage.content_md));
      setInitialized(true);
    }
  }, [page, cardPage, initialized]);

  const saveMutation = useMutation({
    mutationFn: () => api.savePage('profile', content),
    onSuccess: () => {
      setSavedAt(new Date());
      queryClient.invalidateQueries({ queryKey: ['page', 'profile'] });
    },
  });

  const saveCardMutation = useMutation({
    mutationFn: () => api.savePage('profile-card', JSON.stringify(card)),
    onSuccess: () => {
      setSavedAt(new Date());
      queryClient.invalidateQueries({ queryKey: ['page', 'profile-card'] });
    },
  });

  const uploadMutation = useMutation({
    mutationFn: (file: File) => api.uploadImage(file),
    onSuccess: ({ url }, file) => {
      // 在光标处插入图片 Markdown，没有光标就追加到末尾
      const view = editorRef.current?.view;
      const snippet = `![${file.name}](${url})`;
      if (view) {
        const pos = view.state.selection.main.head;
        view.dispatch({ changes: { from: pos, insert: snippet } });
      } else {
        setContent((c) => `${c}\n${snippet}\n`);
      }
    },
    onError: (e) => alert(`上传失败：${e.message}`),
  });

  const avatarUploadMutation = useMutation({
    mutationFn: (file: File) => api.uploadImage(file),
    onSuccess: ({ url }) => setCard((c) => ({ ...c, avatar_url: url })),
    onError: (e) => alert(`上传失败：${e.message}`),
  });

  if (isLoading || !initialized) {
    return (
      <div className="flex h-screen items-center justify-center">
        <Loader2 className="animate-spin text-indigo-500" size={32} />
      </div>
    );
  }

  const inputCls =
    'w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm outline-none focus:border-indigo-500 dark:border-indigo-500/20 dark:bg-space-800 dark:text-star';
  const labelCls = 'mb-1 block text-xs font-medium text-slate-500 dark:text-star-dim';
  const setCardField = (key: keyof ProfileContent) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setCard({ ...card, [key]: e.target.value });

  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex h-screen flex-col pt-16">
      <header className="flex items-center justify-between border-b border-slate-200 bg-white/90 px-4 py-3 backdrop-blur dark:border-indigo-500/10 dark:bg-space-900/90">
        <div className="flex items-center gap-3">
          <button
            onClick={() => navigate('/admin')}
            className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 dark:text-star-dim dark:hover:bg-space-800"
          >
            <ArrowLeft size={18} />
          </button>
          <span className="text-lg font-bold text-slate-900 dark:text-star">个人主页</span>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => setShowCard(!showCard)}
            className={`inline-flex items-center gap-1 rounded-lg border px-3 py-2 text-sm transition-colors ${
              showCard
                ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-nebula dark:bg-indigo-500/10 dark:text-nebula-glow'
                : 'border-slate-200 bg-white text-slate-600 hover:border-indigo-500 dark:border-indigo-500/20 dark:bg-space-800 dark:text-star-dim'
            }`}
          >
            <IdCard size={14} /> 名片信息
          </button>
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            className="hidden"
            onChange={(e) => {
              const file = e.target.files?.[0];
              if (file) uploadMutation.mutate(file);
              e.target.value = '';
            }}
          />
          <button
            onClick={() => fileInputRef.current?.click()}
            disabled={uploadMutation.isPending}
            className="inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-600 transition-colors hover:border-indigo-500 dark:border-indigo-500/20 dark:bg-space-800 dark:text-star-dim"
          >
            {uploadMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <ImagePlus size={14} />}
            上传图片
          </button>
          <button
            onClick={() => saveMutation.mutate()}
            disabled={saveMutation.isPending}
            className="inline-flex items-center gap-1 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50 dark:bg-nebula"
          >
            {saveMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
            保存正文
          </button>
        </div>
      </header>

      {/* 名片信息面板 */}
      {showCard && (
        <motion.div
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: 'auto', opacity: 1 }}
          className="border-b border-slate-200 bg-slate-50 px-6 py-4 dark:border-indigo-500/10 dark:bg-space-900"
        >
          <div className="grid gap-4 md:grid-cols-3">
            <div className="md:col-span-1">
              <label className={labelCls}>头像</label>
              <div className="flex items-center gap-3">
                {card.avatar_url ? (
                  <img src={card.avatar_url} alt="avatar" className="h-12 w-12 rounded-full object-cover" />
                ) : (
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-lg font-bold text-white">
                    {card.name.charAt(0).toUpperCase()}
                  </div>
                )}
                <input
                  ref={avatarInputRef}
                  type="file"
                  accept="image/*"
                  className="hidden"
                  onChange={(e) => {
                    const file = e.target.files?.[0];
                    if (file) avatarUploadMutation.mutate(file);
                    e.target.value = '';
                  }}
                />
                <button
                  onClick={() => avatarInputRef.current?.click()}
                  disabled={avatarUploadMutation.isPending}
                  className="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 hover:border-indigo-500 dark:border-indigo-500/20 dark:bg-space-800 dark:text-star-dim"
                >
                  {avatarUploadMutation.isPending ? '上传中...' : '上传头像'}
                </button>
              </div>
              <input
                value={card.avatar_url}
                onChange={setCardField('avatar_url')}
                className={`${inputCls} mt-2`}
                placeholder="或直接粘贴图片 URL"
              />
            </div>
            <div>
              <label className={labelCls}>名字</label>
              <input value={card.name} onChange={setCardField('name')} className={inputCls} />
              <label className={`${labelCls} mt-3`}>GitHub</label>
              <input value={card.github} onChange={setCardField('github')} className={inputCls} placeholder="https://github.com/..." />
            </div>
            <div>
              <label className={labelCls}>一句话简介</label>
              <input value={card.bio} onChange={setCardField('bio')} className={inputCls} />
              <div className="mt-3 grid grid-cols-2 gap-3">
                <div>
                  <label className={labelCls}>邮箱</label>
                  <input value={card.email} onChange={setCardField('email')} className={inputCls} />
                </div>
                <div>
                  <label className={labelCls}>个人网站</label>
                  <input value={card.website} onChange={setCardField('website')} className={inputCls} placeholder="留空不显示" />
                </div>
              </div>
            </div>
          </div>
          <button
            onClick={() => saveCardMutation.mutate()}
            disabled={saveCardMutation.isPending}
            className="mt-4 inline-flex items-center gap-1 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50 dark:bg-nebula"
          >
            {saveCardMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
            保存名片
          </button>
        </motion.div>
      )}

      <div className="relative flex flex-1 overflow-hidden">
        <div className="flex w-1/2 flex-col border-r border-slate-200 dark:border-indigo-500/20">
          <CodeMirror
            ref={editorRef}
            value={content}
            height="100%"
            theme={theme === 'dark' ? oneDark : 'light'}
            extensions={[markdown()]}
            onChange={(value) => setContent(value)}
            className="flex-1 min-h-0 text-sm"
            basicSetup={{ lineNumbers: true, highlightActiveLineGutter: true, highlightActiveLine: true, foldGutter: false }}
          />
        </div>
        <div className="w-1/2 overflow-y-auto bg-slate-50 dark:bg-space-950">
          <div className="prose prose-lg max-w-none p-8 dark:prose-invert">
            <Markdown content={content} />
          </div>
        </div>
      </div>

      <footer className="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-2 text-xs text-slate-500 dark:border-indigo-500/10 dark:bg-space-900 dark:text-star-dim">
        <span>{content.length} 字符</span>
        {savedAt && <span>已保存 {savedAt.toLocaleTimeString()}</span>}
      </footer>
    </motion.div>
  );
}