import { useState, useRef, useEffect, useCallback } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
  ArrowLeft,
  Camera,
  Check,
  Coins,
  Copy,
  FileText,
  Hash,
  Heart,
  LayoutDashboard,
  MessageCircle,
  PenLine,
  Settings,
  Star,
  Upload,
  X,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import UserBadges from '../components/UserBadges';
import PointsWalletPanel from '../components/PointsWalletPanel';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Spinner } from '@/components/ui/spinner';
import { notify } from '@/lib/notify';
import { useAuth } from '../hooks/useAuth';
import { useNoIndexSEO } from '../hooks/usePageSEO';
import { api } from '../api/client';
import type { PostItem, UserActivityStats } from '../api/types';
import { useForumLimits } from '../hooks/useForumLimits';
import AvatarCropDialog from '../components/AvatarCropDialog';
import PostListItem from '../components/PostListItem';
import FeedPagination from '../components/FeedPagination';
import { AVATAR_ACCEPT, validateAvatarFile } from '../utils/avatarCrop';
import { loginPath } from '../utils/authRedirect';
import { openForumPost } from '../utils/openPost';
import { formatDateTime } from '../utils/content';
import { InFlowSiteFooter } from '../components/SiteFooter';
import { userPath } from '../utils/userPath';
import { useSessionResource } from '../hooks/useSessionResource';

const nickSchema = z.object({
  nickname: z.string().min(1, '请输入昵称').max(64),
});

const sigSchema = (maxLen: number) => z.object({
  signature: z.string().max(maxLen > 0 ? maxLen : 512, `签名不能超过 ${maxLen || 512} 字`),
});

const pwdSchema = (minLen: number) => z.object({
  old_password: z.string().min(1, '请输入当前密码'),
  new_password: z.string().min(minLen, `新密码至少 ${minLen} 位`),
  confirm_password: z.string().min(1, '请确认新密码'),
}).refine(d => d.new_password === d.confirm_password, {
  message: '两次输入的新密码不一致',
  path: ['confirm_password'],
});

type NickValues = z.infer<typeof nickSchema>;
type SigValues = z.infer<ReturnType<typeof sigSchema>>;
type PwdValues = z.infer<ReturnType<typeof pwdSchema>>;
type ProfileTab = 'posts' | 'points' | 'settings' | 'security';

function parseTab(raw: string | null): ProfileTab {
  if (raw === 'settings' || raw === 'security' || raw === 'points' || raw === 'posts') return raw;
  return 'posts';
}

export default function ProfilePage() {
  const nav = useNavigate();
  const [params, setParams] = useSearchParams();
  const tab = parseTab(params.get('tab'));
  const { user, loading: authLoading, refresh, logout } = useAuth();
  useNoIndexSEO('个人中心');
  const [nickLoading, setNickLoading] = useState(false);
  const [sigLoading, setSigLoading] = useState(false);
  const [pwdLoading, setPwdLoading] = useState(false);
  const [avatarLoading, setAvatarLoading] = useState(false);
  const [pendingAvatar, setPendingAvatar] = useState<File | null>(null);
  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
  const [cropOpen, setCropOpen] = useState(false);
  const [cropImageSrc, setCropImageSrc] = useState<string | null>(null);
  const [cropFileName, setCropFileName] = useState('');
  const [dragOver, setDragOver] = useState(false);
  const [idCopied, setIdCopied] = useState(false);
  const fileRef = useRef<HTMLInputElement>(null);
  const dragCounter = useRef(0);
  const copyTimer = useRef<ReturnType<typeof setTimeout>>();
  const sigSectionRef = useRef<HTMLDivElement>(null);
  const pendingFocusSig = useRef(false);

  const { limits } = useForumLimits();
  const pageSize = limits.page_size_default > 0 ? limits.page_size_default : 20;

  const nickForm = useForm<NickValues>({
    resolver: zodResolver(nickSchema),
    values: { nickname: user?.nickname ?? '' },
  });

  const sigMax = limits.signature_max > 0 ? limits.signature_max : 200;
  const sigForm = useForm<SigValues>({
    resolver: zodResolver(sigSchema(sigMax)),
    values: { signature: user?.signature ?? '' },
  });

  const pwdForm = useForm<PwdValues>({
    resolver: zodResolver(pwdSchema(limits.password_min_len)),
    defaultValues: { old_password: '', new_password: '', confirm_password: '' },
  });

  const setTab = (next: ProfileTab) => {
    const nextParams = new URLSearchParams(params);
    if (next === 'posts') nextParams.delete('tab');
    else nextParams.set('tab', next);
    setParams(nextParams, { replace: true });
  };

  const focusSignatureField = useCallback(() => {
    sigSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
    window.setTimeout(() => {
      sigSectionRef.current?.querySelector('textarea')?.focus();
    }, 80);
  }, []);

  /** 顶部签名 /「编辑资料」：跳到资料 Tab 并聚焦签名框 */
  const goEditSignature = () => {
    if (tab !== 'settings') {
      pendingFocusSig.current = true;
      setTab('settings');
      return;
    }
    focusSignatureField();
  };

  const goEditProfile = () => {
    if (tab !== 'settings') {
      setTab('settings');
      return;
    }
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  useEffect(() => {
    if (tab !== 'settings' || !pendingFocusSig.current) return;
    pendingFocusSig.current = false;
    const t = window.setTimeout(focusSignatureField, 40);
    return () => window.clearTimeout(t);
  }, [tab, focusSignatureField]);

  useEffect(() => {
    if (!authLoading && !user) {
      nav(loginPath('/profile'));
    }
  }, [authLoading, user, nav]);

  useEffect(() => {
    return () => {
      if (avatarPreview) URL.revokeObjectURL(avatarPreview);
    };
  }, [avatarPreview]);

  useEffect(() => {
    return () => {
      if (cropImageSrc) URL.revokeObjectURL(cropImageSrc);
    };
  }, [cropImageSrc]);

  useEffect(() => () => {
    if (copyTimer.current) clearTimeout(copyTimer.current);
  }, []);

  const { data: stats = null, loading: statsLoading } = useSessionResource<UserActivityStats | null>(
    user ? `profile:stats:${user.id}` : null,
    () => api.profileStats().then(d => d.stats ?? null),
    { enabled: !!user },
  );

  const [postPage, setPostPage] = useState(1);
  const postsKey = user && tab === 'posts' ? `profile:posts:${user.id}:${postPage}:${pageSize}` : null;
  const { data: postsSnap, loading: postsLoading } = useSessionResource<{ posts: PostItem[]; total: number }>(
    postsKey,
    () => api.posts({ user_id: user!.id, page: postPage, size: pageSize, sort: 'latest' })
      .then(d => ({ posts: Array.isArray(d.posts) ? d.posts : [], total: d.total ?? 0 })),
    {
      enabled: !!postsKey,
      onError: (e) => notify.error(e instanceof Error ? e.message : '加载帖子失败'),
    },
  );
  const posts = postsSnap?.posts ?? [];
  const postTotal = postsSnap?.total ?? 0;
  const totalPages = Math.max(1, Math.ceil(postTotal / pageSize));

  const closeCropDialog = useCallback((open: boolean) => {
    if (!open) {
      setCropOpen(false);
      setCropImageSrc(prev => {
        if (prev) URL.revokeObjectURL(prev);
        return null;
      });
      setCropFileName('');
      if (fileRef.current) fileRef.current.value = '';
    }
  }, []);

  if (authLoading) {
    return <div className="flex justify-center py-16"><Spinner size="lg" /></div>;
  }

  if (!user) return null;

  const onUpdateNick = async (values: NickValues) => {
    setNickLoading(true);
    try {
      await api.updateNickname(values.nickname);
      await refresh();
      notify.success('昵称已更新');
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '更新失败');
    } finally {
      setNickLoading(false);
    }
  };

  const onUpdateSig = async (values: SigValues) => {
    setSigLoading(true);
    try {
      await api.updateSignature(values.signature);
      await refresh();
      notify.success('签名已更新');
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '更新失败');
    } finally {
      setSigLoading(false);
    }
  };

  const onUpdatePwd = async (values: PwdValues) => {
    setPwdLoading(true);
    try {
      await api.updatePassword(values.old_password, values.new_password);
      notify.success('密码已修改，请重新登录');
      pwdForm.reset();
      await logout();
      nav('/login');
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '修改失败');
    } finally {
      setPwdLoading(false);
    }
  };

  const clearPendingAvatar = () => {
    if (avatarPreview) URL.revokeObjectURL(avatarPreview);
    setPendingAvatar(null);
    setAvatarPreview(null);
    if (fileRef.current) fileRef.current.value = '';
  };

  const openCropForFile = (file: File) => {
    const err = validateAvatarFile(file);
    if (err) {
      notify.error(err);
      if (fileRef.current) fileRef.current.value = '';
      return;
    }
    if (cropImageSrc) URL.revokeObjectURL(cropImageSrc);
    setCropFileName(file.name);
    setCropImageSrc(URL.createObjectURL(file));
    setCropOpen(true);
  };

  const onAvatarSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) openCropForFile(file);
  };

  const onCropConfirm = (file: File) => {
    if (avatarPreview) URL.revokeObjectURL(avatarPreview);
    setPendingAvatar(file);
    setAvatarPreview(URL.createObjectURL(file));
  };

  const onSaveAvatar = async () => {
    if (!pendingAvatar) return;
    setAvatarLoading(true);
    try {
      await api.uploadAvatar(pendingAvatar);
      await refresh();
      clearPendingAvatar();
      notify.success('头像已更新');
    } catch (err: unknown) {
      notify.error(err instanceof Error ? err.message : '上传失败');
    } finally {
      setAvatarLoading(false);
    }
  };

  const onDragEnter = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter.current += 1;
    if (e.dataTransfer.types.includes('Files')) {
      setDragOver(true);
    }
  };

  const onDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter.current -= 1;
    if (dragCounter.current <= 0) {
      dragCounter.current = 0;
      setDragOver(false);
    }
  };

  const onDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const onDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter.current = 0;
    setDragOver(false);
    if (avatarLoading) return;
    const file = e.dataTransfer.files?.[0];
    if (file) openCropForFile(file);
  };

  const copyUserId = async () => {
    try {
      await navigator.clipboard.writeText(String(user.id));
      setIdCopied(true);
      notify.success('已复制用户 ID');
      if (copyTimer.current) clearTimeout(copyTimer.current);
      copyTimer.current = setTimeout(() => setIdCopied(false), 1600);
    } catch {
      notify.error('复制失败，请手动选择');
    }
  };

  const displayAvatar = avatarPreview ?? user.avatar;
  const joinedAt = user.created_at ? formatDateTime(user.created_at) : '';

  const tabs: { key: ProfileTab; label: string; count?: number }[] = [
    { key: 'posts', label: '我的帖子', count: stats?.post_count },
    { key: 'points', label: '积分' },
    { key: 'settings', label: '资料' },
    { key: 'security', label: '安全' },
  ];

  return (
    <div className="page-wrap">
      <div className="page-inner-wide page-inner-wide--profile">
        <Button variant="ghost" className="mb-3" onClick={() => nav(-1)}>
          <ArrowLeft />
          返回
        </Button>
        <h1 className="page-title mb-4">个人中心</h1>

        <div
          className={`profile-header-card${dragOver ? ' profile-header-card--dragover' : ''}`}
          onDragEnter={onDragEnter}
          onDragLeave={onDragLeave}
          onDragOver={onDragOver}
          onDrop={onDrop}
        >
          {dragOver && (
            <div className="profile-drop-overlay">
              <Upload size={28} strokeWidth={1.5} />
              <span>松开以上传头像</span>
            </div>
          )}

          <input
            ref={fileRef}
            type="file"
            accept={AVATAR_ACCEPT}
            className="sr-only"
            onChange={onAvatarSelect}
          />
          <button
            type="button"
            className="profile-avatar-btn"
            title="点击或拖拽图片到此处更换头像"
            disabled={avatarLoading}
            onClick={() => fileRef.current?.click()}
          >
            <div className={`profile-avatar-lg${pendingAvatar ? ' profile-avatar-lg--pending' : ''}`}>
              {displayAvatar
                ? <img src={displayAvatar} alt="" loading="lazy" decoding="async" />
                : user.nickname[0]}
              <span className="profile-avatar-overlay">
                {avatarLoading
                  ? <Spinner size="sm" className="text-white" />
                  : <Camera size={22} strokeWidth={1.75} />}
              </span>
            </div>
          </button>

          <div className="profile-header-info">
            <div className="profile-header-main">
              <div className="profile-name-row">
                <h2 className="profile-display-name">{user.nickname}</h2>
                <UserBadges user={user} compact={false} maxAchievement={6} />
              </div>
              <div className="profile-username">@{user.username}</div>
              <div className="profile-id-row">
                <span className="profile-id-chip" title="用户 ID">
                  <Hash size={13} aria-hidden />
                  UID {user.id}
                </span>
                <button
                  type="button"
                  className="profile-id-copy"
                  onClick={copyUserId}
                  aria-label="复制用户 ID"
                >
                  {idCopied ? <Check size={14} /> : <Copy size={14} />}
                  {idCopied ? '已复制' : '复制'}
                </button>
                <button
                  type="button"
                  className="profile-id-copy"
                  onClick={() => nav(userPath(user.id))}
                >
                  公开主页
                </button>
                <button
                  type="button"
                  className="profile-id-copy"
                  onClick={goEditProfile}
                >
                  <PenLine size={13} aria-hidden />
                  编辑资料
                </button>
              </div>
              {user.signature?.trim() ? (
                <button
                  type="button"
                  className="profile-signature profile-signature--editable"
                  onClick={goEditSignature}
                  title="编辑个性签名"
                >
                  <span className="profile-signature-text">{user.signature}</span>
                  <span className="profile-signature-edit">
                    <PenLine size={13} aria-hidden />
                    编辑
                  </span>
                </button>
              ) : (
                <button
                  type="button"
                  className="profile-signature profile-signature--empty profile-signature--editable"
                  onClick={goEditSignature}
                >
                  <PenLine size={14} aria-hidden />
                  点击设置个性签名
                </button>
              )}
            </div>
            {pendingAvatar && (
              <div className="profile-avatar-actions">
                <span className="profile-avatar-hint">已裁剪，待保存</span>
                <Button size="sm" loading={avatarLoading} onClick={onSaveAvatar}>
                  保存头像
                </Button>
                <Button
                  size="sm"
                  variant="ghost"
                  disabled={avatarLoading}
                  onClick={clearPendingAvatar}
                  aria-label="取消"
                >
                  <X size={16} />
                </Button>
              </div>
            )}
          </div>

          <div className="profile-stat-grid" aria-label="活动统计">
            <button type="button" className="profile-stat" onClick={() => setTab('posts')}>
              <FileText size={16} aria-hidden />
              <strong>{statsLoading ? '—' : (stats?.post_count ?? 0)}</strong>
              <span>帖子</span>
            </button>
            <div className="profile-stat">
              <MessageCircle size={16} aria-hidden />
              <strong>{statsLoading ? '—' : (stats?.comment_count ?? 0)}</strong>
              <span>评论</span>
            </div>
            <button type="button" className="profile-stat" onClick={() => nav('/favorites')}>
              <Star size={16} aria-hidden />
              <strong>{statsLoading ? '—' : (stats?.favorite_count ?? 0)}</strong>
              <span>收藏</span>
            </button>
            <div className="profile-stat">
              <Heart size={16} aria-hidden />
              <strong>{statsLoading ? '—' : (stats?.like_received ?? 0)}</strong>
              <span>获赞</span>
            </div>
          </div>
        </div>

        <AvatarCropDialog
          open={cropOpen}
          imageSrc={cropImageSrc}
          fileName={cropFileName}
          maxMb={limits.avatar_max_mb}
          onOpenChange={closeCropDialog}
          onConfirm={onCropConfirm}
        />

        {user.role === 'admin' && (
          <div className="admin-entry-bar">
            <span className="admin-entry-bar-label">
              <Settings size={14} aria-hidden />
              站长
            </span>
            <div className="admin-entry-bar-actions">
              <Button size="sm" variant="outline" onClick={() => nav('/admin/boards')}>
                管理板块
              </Button>
              <Button size="sm" onClick={() => nav('/admin/dashboard')}>
                <LayoutDashboard size={14} />
                系统后台
              </Button>
            </div>
          </div>
        )}

        <div className="profile-tabs" role="tablist" aria-label="个人中心分区">
          {tabs.map(t => (
            <button
              key={t.key}
              type="button"
              role="tab"
              aria-selected={tab === t.key}
              className={`profile-tab${tab === t.key ? ' active' : ''}`}
              onClick={() => setTab(t.key)}
            >
              {t.key === 'points' && <Coins size={14} aria-hidden className="profile-tab-icon" />}
              {t.label}
              {typeof t.count === 'number' && (
                <span className="profile-tab-count">{t.count}</span>
              )}
            </button>
          ))}
        </div>

        {tab === 'posts' && (
          <div className="profile-panel">
            {postsLoading ? (
              <div className="flex justify-center py-12"><Spinner size="lg" /></div>
            ) : posts.length === 0 ? (
              <div className="empty-state">
                <PenLine className="empty-state-icon" aria-hidden size={36} strokeWidth={1.5} />
                <p>还没有发布过帖子</p>
                <Button onClick={() => nav('/compose')}>去发帖</Button>
              </div>
            ) : (
              <>
                <div className="content-surface">
                  {posts.map(post => (
                    <PostListItem
                      key={post.id}
                      post={post}
                      onSelect={(id) => openForumPost(nav, id, limits.open_posts_in_new_tab)}
                    />
                  ))}
                </div>
                {totalPages > 1 && (
                  <FeedPagination
                    page={postPage}
                    totalPages={totalPages}
                    postTotal={postTotal}
                    loading={postsLoading}
                    onPageChange={setPostPage}
                  />
                )}
              </>
            )}
          </div>
        )}

        {tab === 'points' && (
          <div className="profile-panel profile-panel--points">
            <PointsWalletPanel />
          </div>
        )}

        {tab === 'settings' && (
          <div className="section-card">
            <div className="section-card-title">展示资料</div>
            <p className="profile-settings-lead">
              昵称与个性签名会显示在公开主页和帖子旁
            </p>
            <Form {...nickForm}>
              <form onSubmit={nickForm.handleSubmit(onUpdateNick)} className="profile-form">
                <FormField
                  control={nickForm.control}
                  name="nickname"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>昵称</FormLabel>
                      <FormControl>
                        <Input maxLength={64} placeholder="显示名称" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <div className="profile-form-footer">
                  <span className="profile-form-hint">
                    头像可在上方点击或拖拽更换；支持 JPG / PNG / GIF / WebP，裁剪后不超过 {limits.avatar_max_mb}MB
                  </span>
                  <Button type="submit" loading={nickLoading}>保存昵称</Button>
                </div>
              </form>
            </Form>

            <div className="profile-form-divider" />

            <div ref={sigSectionRef} id="profile-signature">
              <Form {...sigForm}>
                <form onSubmit={sigForm.handleSubmit(onUpdateSig)} className="profile-form">
                  <FormField
                    control={sigForm.control}
                    name="signature"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>个性签名</FormLabel>
                        <FormControl>
                          <Textarea
                            rows={3}
                            maxLength={sigMax}
                            placeholder="写一句介绍自己的话，会显示在公开主页与个人中心顶部"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <div className="profile-form-footer">
                    <span className="profile-form-hint">
                      {(sigForm.watch('signature') || '').length}/{sigMax}
                    </span>
                    <Button type="submit" loading={sigLoading}>保存签名</Button>
                  </div>
                </form>
              </Form>
            </div>

            <div className="profile-form-divider" />

            <div className="section-card-title section-card-title--sub">账号信息</div>
            <div className="profile-form profile-form--readonly">
              <div className="profile-readonly-field">
                <Label htmlFor="profile-readonly-id">用户 ID</Label>
                <Input id="profile-readonly-id" value={String(user.id)} disabled />
              </div>
              <div className="profile-readonly-field">
                <Label htmlFor="profile-readonly-username">用户名</Label>
                <Input id="profile-readonly-username" value={user.username} disabled />
              </div>
              <div className="profile-readonly-field">
                <Label htmlFor="profile-readonly-email">邮箱</Label>
                <Input id="profile-readonly-email" value={user.email || '未设置'} disabled />
              </div>
              {joinedAt && (
                <div className="profile-readonly-field">
                  <Label htmlFor="profile-readonly-joined">注册时间</Label>
                  <Input id="profile-readonly-joined" value={joinedAt} disabled />
                </div>
              )}
              <p className="profile-form-hint">用户名与 ID 注册后不可修改</p>
            </div>
          </div>
        )}

        {tab === 'security' && (
          <div className="section-card">
            <div className="section-card-title">修改密码</div>
            <Form {...pwdForm}>
              <form onSubmit={pwdForm.handleSubmit(onUpdatePwd)} className="profile-form">
                <FormField
                  control={pwdForm.control}
                  name="old_password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>当前密码</FormLabel>
                      <FormControl>
                        <Input type="password" placeholder="输入当前密码" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={pwdForm.control}
                  name="new_password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>新密码</FormLabel>
                      <FormControl>
                        <Input type="password" placeholder={`至少 ${limits.password_min_len} 位`} {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={pwdForm.control}
                  name="confirm_password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>确认新密码</FormLabel>
                      <FormControl>
                        <Input type="password" placeholder="再次输入新密码" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <div className="profile-form-footer profile-form-footer--end">
                  <Button type="submit" variant="destructive" loading={pwdLoading}>
                    修改密码
                  </Button>
                </div>
              </form>
            </Form>
          </div>
        )}
      </div>
      <InFlowSiteFooter />
    </div>
  );
}