import { useCallback, useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Inbox, RotateCcw, X, Send, CheckCircle2, AlertCircle, Image as ImageIcon, Loader2, ArrowLeft } from 'lucide-react';
import { fetchJson } from '../../auth/api-client';
import { EmptyState, LoadingState, PageFrame, SurfaceCard } from '../../components/ui/surface';

interface FeedbackItem {
  id: number;
  type: 'dimension' | 'bug' | 'ux' | 'other';
  module: string | null;
  content: string;
  contact: string | null;
  screenshots: string[] | string | null;
  user_id: string | null;
  user_name: string | null;
  status: 'open' | 'in_progress' | 'done' | 'rejected';
  reply_content: string | null;
  reply_user: string | null;
  reply_at: string | null;
  created_at: string;
}

const TYPE_LABEL: Record<string, string> = {
  dimension: '新维度',
  bug: 'Bug',
  ux: '体验',
  other: '其他',
};

const STATUS_OPTIONS: { key: FeedbackItem['status']; label: string; cls: string }[] = [
  { key: 'open',        label: '待处理', cls: 'bg-slate-100 text-slate-500 border-slate-200' },
  { key: 'in_progress', label: '处理中', cls: 'bg-amber-100 text-amber-600 border-amber-200' },
  { key: 'done',        label: '已完成', cls: 'bg-emerald-100 text-emerald-600 border-emerald-200' },
  { key: 'rejected',    label: '已忽略', cls: 'bg-rose-100 text-rose-500 border-rose-200' },
];

const MODULE_LABELS: Record<string, string> = {
  assets: '资产管理',
  mileage: '里程管理',
  energy: '能源管理',
  scheduling: '智能调度',
  ele: '充电导入',
};

function parseScreenshots(s: FeedbackItem['screenshots']): string[] {
  if (!s) return [];
  if (Array.isArray(s)) return s;
  try { return JSON.parse(String(s)); } catch { return []; }
}

async function patchItem(id: number, data: { status?: string; reply?: string }): Promise<void> {
  const token = sessionStorage.getItem('bi_jwt');
  const res = await fetch(`/api/feedback/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
    body: JSON.stringify(data),
  });
  const json = await res.json();
  if (!res.ok || !json.ok) throw new Error(json.message || `更新失败 (${res.status})`);
}

export default function FeedbackAdminPage() {
  const [items, setItems] = useState<FeedbackItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [statusFilter, setStatusFilter] = useState<'' | FeedbackItem['status']>('');
  const [active, setActive] = useState<FeedbackItem | null>(null);
  const [replyDraft, setReplyDraft] = useState('');
  const [replyStatus, setReplyStatus] = useState<FeedbackItem['status']>('done');
  const [saving, setSaving] = useState(false);
  const [hint, setHint] = useState<string | null>(null);

  const reload = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams();
      if (statusFilter) params.set('status', statusFilter);
      params.set('limit', '200');
      const d = await fetchJson<{ items: FeedbackItem[] }>(`/api/feedback/list?${params.toString()}`);
      setItems(d.items);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setLoading(false);
    }
  }, [statusFilter]);

  useEffect(() => { reload(); }, [reload]);

  const open = (it: FeedbackItem) => {
    setActive(it);
    setReplyDraft(it.reply_content || '');
    setReplyStatus(it.status === 'open' ? 'done' : it.status);
  };

  const save = async () => {
    if (!active) return;
    setSaving(true);
    setHint(null);
    try {
      await patchItem(active.id, { status: replyStatus, reply: replyDraft });
      setHint('已保存');
      setActive(null);
      await reload();
    } catch (e) {
      setHint(e instanceof Error ? e.message : String(e));
    } finally {
      setSaving(false);
      setTimeout(() => setHint(null), 3000);
    }
  };

  const setStatusOnly = async (it: FeedbackItem, status: FeedbackItem['status']) => {
    try {
      await patchItem(it.id, { status });
      await reload();
    } catch (e) {
      setHint(e instanceof Error ? e.message : String(e));
      setTimeout(() => setHint(null), 3000);
    }
  };

  const counters = items.reduce<Record<string, number>>((m, it) => {
    m[it.status] = (m[it.status] || 0) + 1;
    return m;
  }, {});

  return (
    <PageFrame
      title="用户反馈管理"
      subtitle="查看、回复、跟进用户提交的建议，形成从问题发现到处理闭环的运营后台。"
      icon={Inbox}
      eyebrow="FEEDBACK OPS"
      meta={`当前 ${items.length} 条反馈`}
      actions={(
        <div className="flex items-center gap-2">
            <button
              onClick={() => {
                // 优先 history.back（来自 SPA 内部跳转）；否则回到主页
                if (window.history.length > 1) window.history.back();
                else { window.location.hash = '#mileage'; }
              }}
              className="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-100 bg-white text-slate-500 transition-colors hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600"
              title="返回"
            >
              <ArrowLeft size={16} />
            </button>
          <button onClick={reload} className="flex h-9 w-9 items-center justify-center rounded-xl bg-slate-900 text-white shadow-sm transition-colors hover:bg-slate-800" title="刷新">
            <RotateCcw size={16} className={loading ? 'animate-spin' : ''} />
          </button>
        </div>
      )}
      maxWidth="max-w-5xl"
    >

        {/* 状态过滤 */}
        <SurfaceCard className="p-2">
        <div className="flex items-center gap-1 overflow-x-auto">
          <button
            onClick={() => setStatusFilter('')}
            className={`px-3 py-1.5 rounded-lg text-[11px] font-bold whitespace-nowrap ${statusFilter === '' ? 'bg-blue-50 text-blue-600' : 'text-slate-500 hover:bg-slate-50'}`}
          >全部 {items.length}</button>
          {STATUS_OPTIONS.map(o => (
            <button
              key={o.key}
              onClick={() => setStatusFilter(statusFilter === o.key ? '' : o.key)}
              className={`px-3 py-1.5 rounded-lg text-[11px] font-bold whitespace-nowrap ${statusFilter === o.key ? `${o.cls} border` : 'text-slate-500 hover:bg-slate-50'}`}
            >
              {o.label} {counters[o.key] ?? 0}
            </button>
          ))}
        </div>
        </SurfaceCard>

        {error && (
          <div className="bg-rose-50 border border-rose-100 rounded-xl p-3 flex items-center gap-2 text-[12px] font-bold text-rose-600">
            <AlertCircle size={14} /> {error}
          </div>
        )}
        <AnimatePresence>
          {hint && (
            <motion.div
              initial={{ opacity: 0, y: -8 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              className="bg-emerald-50 border border-emerald-100 rounded-xl p-3 flex items-center gap-2 text-[12px] font-bold text-emerald-600"
            >
              <CheckCircle2 size={14} /> {hint}
            </motion.div>
          )}
        </AnimatePresence>

        {/* 列表 */}
        <div className="space-y-2">
          {loading && items.length === 0 ? (
            <LoadingState label="正在加载用户反馈" />
          ) : items.length === 0 ? (
            <EmptyState title="还没有反馈" description="新的用户反馈会出现在这里" />
          ) : items.map(it => {
            const shots = parseScreenshots(it.screenshots);
            const statusOpt = STATUS_OPTIONS.find(o => o.key === it.status);
            return (
              <div
                key={it.id}
                className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4 cursor-pointer hover:border-blue-200 transition-colors"
                onClick={() => open(it)}
              >
                <div className="flex items-center gap-1.5 flex-wrap mb-1.5">
                  <span className="text-[11px] font-bold text-slate-500">{TYPE_LABEL[it.type] || it.type}</span>
                  {it.module && <span className="text-[10px] text-slate-400 font-bold">{MODULE_LABELS[it.module] || it.module}</span>}
                  <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded border ${statusOpt?.cls || 'bg-slate-50 text-slate-400 border-slate-200'}`}>
                    {statusOpt?.label || it.status}
                  </span>
                  <span className="text-[10px] text-slate-400 ml-auto">
                    {(it.user_name || it.user_id || '匿名')} · {(it.created_at || '').replace('T', ' ').slice(0, 16)}
                  </span>
                </div>
                <div className="text-[12px] text-slate-700 leading-relaxed line-clamp-2 break-words">{it.content}</div>
                {(shots.length > 0 || it.contact) && (
                  <div className="flex items-center gap-3 mt-2 text-[10px] text-slate-400 font-bold">
                    {shots.length > 0 && <span className="flex items-center gap-0.5"><ImageIcon size={11} />{shots.length} 张</span>}
                    {it.contact && <span>联系 {it.contact}</span>}
                  </div>
                )}
                {it.reply_content && (
                  <div className="bg-blue-50 border border-blue-100 rounded-lg px-2.5 py-1.5 mt-2 text-[11px] text-slate-600 line-clamp-1">
                    回复: {it.reply_content}
                  </div>
                )}
                {it.status === 'open' && (
                  <div className="flex gap-1 mt-2 pt-2 border-t border-slate-50" onClick={(e) => e.stopPropagation()}>
                    <button onClick={() => setStatusOnly(it, 'in_progress')} className="flex-1 px-2 py-1 rounded text-[10px] font-bold bg-amber-50 text-amber-600 hover:bg-amber-100">标记处理中</button>
                    <button onClick={() => setStatusOnly(it, 'rejected')} className="px-2 py-1 rounded text-[10px] font-bold bg-rose-50 text-rose-500 hover:bg-rose-100">忽略</button>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      {/* 详情 / 回复弹窗 */}
      <AnimatePresence>
        {active && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[80] bg-slate-900/40 backdrop-blur-sm flex items-end md:items-center justify-center"
            onClick={() => setActive(null)}
          >
            <motion.div
              initial={{ y: '100%', opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: '100%', opacity: 0 }}
              transition={{ y: { type: 'spring', damping: 28, stiffness: 320 }, opacity: { duration: 0.18 } }}
              className="bg-white w-full md:max-w-xl md:rounded-3xl rounded-t-3xl shadow-2xl max-h-[92vh] overflow-hidden flex flex-col"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="flex justify-center pt-2.5 pb-1">
                <div className="w-10 h-1 rounded-full bg-slate-300" />
              </div>
              <div className="px-4 pb-3 border-b border-slate-100 flex items-center gap-2">
                <div className="flex-1">
                  <div className="text-sm font-black text-slate-800 leading-tight">反馈详情 #{active.id}</div>
                  <div className="text-[10px] text-slate-400 font-bold">
                    {active.user_name || active.user_id || '匿名'} · {(active.created_at || '').replace('T', ' ').slice(0, 16)}
                  </div>
                </div>
                <button onClick={() => setActive(null)} className="p-1.5 text-slate-400 hover:text-slate-700">
                  <X size={18} />
                </button>
              </div>
              <div className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
                <div className="bg-slate-50 rounded-xl p-3 space-y-2">
                  <div className="flex items-center gap-1.5 flex-wrap text-[10px] font-bold">
                    <span className="text-slate-500">{TYPE_LABEL[active.type] || active.type}</span>
                    {active.module && <span className="text-slate-400">板块: {MODULE_LABELS[active.module] || active.module}</span>}
                    {active.contact && <span className="text-slate-400">联系: {active.contact}</span>}
                  </div>
                  <div className="text-[12px] text-slate-700 leading-relaxed whitespace-pre-wrap break-words">{active.content}</div>
                  {parseScreenshots(active.screenshots).length > 0 && (
                    <div className="flex flex-wrap gap-1.5 mt-2">
                      {parseScreenshots(active.screenshots).map((u, i) => (
                        <a key={i} href={u} target="_blank" rel="noreferrer" className="block w-20 h-20 rounded-lg overflow-hidden border border-slate-200">
                          <img src={u} alt="" className="w-full h-full object-cover" />
                        </a>
                      ))}
                    </div>
                  )}
                </div>

                <div>
                  <p className="text-[10px] font-bold text-slate-400 uppercase mb-1.5">状态</p>
                  <div className="flex gap-1 flex-wrap">
                    {STATUS_OPTIONS.map(o => (
                      <button
                        key={o.key}
                        onClick={() => setReplyStatus(o.key)}
                        className={`px-3 py-1 rounded-full text-[11px] font-bold border ${replyStatus === o.key ? o.cls : 'bg-white text-slate-500 border-slate-200 hover:border-slate-300'}`}
                      >
                        {o.label}
                      </button>
                    ))}
                  </div>
                </div>

                <div>
                  <p className="text-[10px] font-bold text-slate-400 uppercase mb-1.5">回复内容</p>
                  <textarea
                    value={replyDraft}
                    onChange={(e) => setReplyDraft(e.target.value)}
                    rows={4}
                    maxLength={2000}
                    placeholder="给用户的回复（用户在「我的反馈」里能看到）"
                    className="w-full bg-slate-50 border-none rounded-xl p-3 text-[12px] text-slate-700 outline-none focus:ring-2 focus:ring-blue-500/20 resize-none"
                  />
                  <div className="text-right text-[10px] text-slate-300 font-bold mt-1">{replyDraft.length} / 2000</div>
                </div>
              </div>
              <div className="px-4 py-3 border-t border-slate-100 flex items-center gap-2">
                <div className="flex-1" />
                <button
                  onClick={() => setActive(null)}
                  className="px-3 py-2 rounded-xl text-[12px] font-bold text-slate-500 hover:bg-slate-50"
                >取消</button>
                <button
                  onClick={save}
                  disabled={saving}
                  className="px-4 py-2 rounded-xl text-[12px] font-bold bg-blue-600 text-white shadow shadow-blue-100 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none flex items-center gap-1"
                >
                  {saving ? <Loader2 size={14} className="animate-spin" /> : <Send size={13} />}
                  {saving ? '保存中…' : '保存'}
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </PageFrame>
  );
}