'use client';
import React, { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useAuth } from '@/contexts/AuthContext';
import { useRouter } from 'next/navigation';
import Header from '@/components/Header';

// ─── Types ────────────────────────────────────────────────────────────────────

interface ForumThread {
  id: string;
  title: string;
  author_name: string;
  body: string;
  reply_count: number;
  view_count: number;
  upvotes: number;
  is_pinned: boolean;
  is_featured: boolean;
  is_locked: boolean;
  is_flagged: boolean;
  flag_reason: string | null;
  created_at: string;
  forum_categories: { name: string; slug: string } | null;
}

interface ForumReply {
  id: string;
  body: string;
  author_name: string;
  is_hidden: boolean;
  is_flagged: boolean;
  flag_reason: string | null;
  created_at: string;
  forum_threads: { id: string; title: string } | null;
}

type Tab = 'threads' | 'replies';
type ThreadFilter = 'all' | 'flagged' | 'ai_flagged' | 'pinned' | 'featured' | 'locked';
type ReplyFilter = 'all' | 'flagged' | 'ai_flagged' | 'hidden';

// ─── Helpers ──────────────────────────────────────────────────────────────────

function timeAgo(dateStr: string): string {
  const diff = Date.now() - new Date(dateStr).getTime();
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return 'just now';
  if (mins < 60) return `${mins}m ago`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h ago`;
  return `${Math.floor(hrs / 24)}d ago`;
}

// ─── Flag Modal ───────────────────────────────────────────────────────────────

interface FlagModalProps {
  onConfirm: (reason: string) => void;
  onCancel: () => void;
}

function FlagModal({ onConfirm, onCancel }: FlagModalProps) {
  const [reason, setReason] = useState('');
  return (
    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4">
      <div className="bg-[#1a1a1a] border border-[#333] rounded-xl p-6 w-full max-w-md">
        <h3 className="text-white font-heading font-bold text-lg mb-2">Flag Content</h3>
        <p className="text-[#888] font-body text-sm mb-4">Provide a reason for flagging this content (optional).</p>
        <textarea
          value={reason}
          onChange={e => setReason(e.target.value)}
          rows={3}
          placeholder="e.g. Spam, harassment, off-topic..."
          className="w-full bg-[#0d0d0d] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#ef4444] resize-none mb-4"
        />
        <div className="flex gap-3 justify-end">
          <button onClick={onCancel} className="px-4 py-2 text-sm font-body text-[#888] hover:text-white bg-[#252525] hover:bg-[#333] rounded-lg transition-colors">
            Cancel
          </button>
          <button onClick={() => onConfirm(reason)} className="px-4 py-2 text-sm font-body font-semibold text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors">
            Flag Content
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Action Badge ─────────────────────────────────────────────────────────────

function StatusBadge({ label, color }: { label: string; color: string }) {
  return (
    <span className={`inline-flex items-center gap-1 text-xs font-body font-semibold px-2 py-0.5 rounded-full ${color}`}>
      {label}
    </span>
  );
}

// ─── Thread Row ───────────────────────────────────────────────────────────────

interface ThreadRowProps {
  thread: ForumThread;
  onAction: (id: string, action: string, flagReason?: string) => Promise<void>;
  loadingId: string | null;
}

function ThreadRow({ thread, onAction, loadingId }: ThreadRowProps) {
  const [showFlagModal, setShowFlagModal] = useState(false);
  const isLoading = loadingId === thread.id;
  const isAiFlagged = thread.is_flagged && thread.flag_reason?.startsWith('[AI]');

  return (
    <>
      {showFlagModal && (
        <FlagModal
          onConfirm={async (reason) => {
            setShowFlagModal(false);
            await onAction(thread.id, 'flag', reason);
          }}
          onCancel={() => setShowFlagModal(false)}
        />
      )}
      <div className={`bg-[#111] border rounded-lg p-4 transition-colors ${isAiFlagged ? 'border-purple-500/50' : thread.is_flagged ? 'border-red-500/40' : 'border-[#252525]'}`}>
        <div className="flex items-start gap-3">
          <div className="flex-1 min-w-0">
            {/* Title + badges */}
            <div className="flex flex-wrap items-center gap-2 mb-1">
              <Link
                href={`/forum/thread/${thread.id}`}
                className="text-white font-body font-semibold text-sm hover:text-[#3b82f6] transition-colors truncate max-w-xs"
                target="_blank"
              >
                {thread.title}
              </Link>
              {thread.is_pinned && <StatusBadge label="📌 Pinned" color="text-amber-400 bg-amber-400/10" />}
              {thread.is_featured && <StatusBadge label="⭐ Featured" color="text-yellow-400 bg-yellow-400/10" />}
              {thread.is_locked && <StatusBadge label="🔒 Locked" color="text-orange-400 bg-orange-400/10" />}
              {isAiFlagged && <StatusBadge label="🤖 AI Flagged" color="text-purple-400 bg-purple-400/10" />}
              {thread.is_flagged && !isAiFlagged && <StatusBadge label="🚩 Flagged" color="text-red-400 bg-red-400/10" />}
            </div>
            {/* Meta */}
            <div className="flex flex-wrap items-center gap-3 text-xs text-[#666] font-body">
              <span>by <span className="text-[#aaa]">{thread.author_name}</span></span>
              <span>{thread.forum_categories?.name || '—'}</span>
              <span>{thread.reply_count} replies</span>
              <span>{thread.view_count} views</span>
              <span>{timeAgo(thread.created_at)}</span>
            </div>
            {thread.flag_reason && (
              <p className={`text-xs font-body mt-1 ${isAiFlagged ? 'text-purple-400' : 'text-red-400'}`}>
                {isAiFlagged ? '🤖 ' : ''}Flag reason: {thread.flag_reason.replace('[AI] ', '')}
              </p>
            )}
          </div>

          {/* Actions */}
          <div className="flex flex-wrap gap-1.5 flex-shrink-0">
            <button
              disabled={isLoading}
              onClick={() => onAction(thread.id, thread.is_pinned ? 'unpin' : 'pin')}
              className={`px-2.5 py-1 text-xs font-body font-semibold rounded-md transition-colors disabled:opacity-50 ${
                thread.is_pinned
                  ? 'bg-amber-400/20 text-amber-400 hover:bg-amber-400/30' :'bg-[#1a1a1a] text-[#888] hover:bg-[#252525] hover:text-amber-400'
              }`}
            >
              {thread.is_pinned ? 'Unpin' : 'Pin'}
            </button>
            <button
              disabled={isLoading}
              onClick={() => onAction(thread.id, thread.is_featured ? 'unfeature' : 'feature')}
              className={`px-2.5 py-1 text-xs font-body font-semibold rounded-md transition-colors disabled:opacity-50 ${
                thread.is_featured
                  ? 'bg-yellow-400/20 text-yellow-400 hover:bg-yellow-400/30' :'bg-[#1a1a1a] text-[#888] hover:bg-[#252525] hover:text-yellow-400'
              }`}
            >
              {thread.is_featured ? 'Unfeature' : 'Feature'}
            </button>
            <button
              disabled={isLoading}
              onClick={() => onAction(thread.id, thread.is_locked ? 'unlock' : 'lock')}
              className={`px-2.5 py-1 text-xs font-body font-semibold rounded-md transition-colors disabled:opacity-50 ${
                thread.is_locked
                  ? 'bg-orange-400/20 text-orange-400 hover:bg-orange-400/30' :'bg-[#1a1a1a] text-[#888] hover:bg-[#252525] hover:text-orange-400'
              }`}
            >
              {thread.is_locked ? 'Unlock' : 'Lock'}
            </button>
            {thread.is_flagged ? (
              <button
                disabled={isLoading}
                onClick={() => onAction(thread.id, 'unflag')}
                className={`px-2.5 py-1 text-xs font-body font-semibold rounded-md transition-colors disabled:opacity-50 ${
                  isAiFlagged
                    ? 'bg-purple-400/20 text-purple-400 hover:bg-purple-400/30' :'bg-red-400/20 text-red-400 hover:bg-red-400/30'
                }`}
              >
                Unflag
              </button>
            ) : (
              <button
                disabled={isLoading}
                onClick={() => setShowFlagModal(true)}
                className="px-2.5 py-1 text-xs font-body font-semibold rounded-md bg-[#1a1a1a] text-[#888] hover:bg-[#252525] hover:text-red-400 transition-colors disabled:opacity-50"
              >
                Flag
              </button>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

// ─── Reply Row ────────────────────────────────────────────────────────────────

interface ReplyRowProps {
  reply: ForumReply;
  onAction: (id: string, action: string, flagReason?: string) => Promise<void>;
  loadingId: string | null;
}

function ReplyRow({ reply, onAction, loadingId }: ReplyRowProps) {
  const [showFlagModal, setShowFlagModal] = useState(false);
  const isLoading = loadingId === reply.id;
  const isAiFlagged = reply.is_flagged && reply.flag_reason?.startsWith('[AI]');

  return (
    <>
      {showFlagModal && (
        <FlagModal
          onConfirm={async (reason) => {
            setShowFlagModal(false);
            await onAction(reply.id, 'flag', reason);
          }}
          onCancel={() => setShowFlagModal(false)}
        />
      )}
      <div className={`bg-[#111] border rounded-lg p-4 transition-colors ${isAiFlagged ? 'border-purple-500/50' : reply.is_flagged ? 'border-red-500/40' : reply.is_hidden ? 'border-[#333] opacity-60' : 'border-[#252525]'}`}>
        <div className="flex items-start gap-3">
          <div className="flex-1 min-w-0">
            {/* Thread link + badges */}
            <div className="flex flex-wrap items-center gap-2 mb-1">
              {reply.forum_threads && (
                <Link
                  href={`/forum/thread/${reply.forum_threads.id}`}
                  className="text-[#3b82f6] font-body text-xs hover:underline truncate max-w-xs"
                  target="_blank"
                >
                  ↗ {reply.forum_threads.title}
                </Link>
              )}
              {reply.is_hidden && <StatusBadge label="👁 Hidden" color="text-[#888] bg-[#252525]" />}
              {isAiFlagged && <StatusBadge label="🤖 AI Flagged" color="text-purple-400 bg-purple-400/10" />}
              {reply.is_flagged && !isAiFlagged && <StatusBadge label="🚩 Flagged" color="text-red-400 bg-red-400/10" />}
            </div>
            {/* Body preview */}
            <p className="text-[#ccc] font-body text-sm line-clamp-2 mb-1">{reply.body}</p>
            <div className="flex flex-wrap items-center gap-3 text-xs text-[#666] font-body">
              <span>by <span className="text-[#aaa]">{reply.author_name}</span></span>
              <span>{timeAgo(reply.created_at)}</span>
            </div>
            {reply.flag_reason && (
              <p className={`text-xs font-body mt-1 ${isAiFlagged ? 'text-purple-400' : 'text-red-400'}`}>
                {isAiFlagged ? '🤖 ' : ''}Flag reason: {reply.flag_reason.replace('[AI] ', '')}
              </p>
            )}
          </div>

          {/* Actions */}
          <div className="flex flex-wrap gap-1.5 flex-shrink-0">
            <button
              disabled={isLoading}
              onClick={() => onAction(reply.id, reply.is_hidden ? 'unhide' : 'hide')}
              className={`px-2.5 py-1 text-xs font-body font-semibold rounded-md transition-colors disabled:opacity-50 ${
                reply.is_hidden
                  ? 'bg-[#252525] text-[#aaa] hover:bg-[#333]'
                  : 'bg-[#1a1a1a] text-[#888] hover:bg-[#252525] hover:text-white'
              }`}
            >
              {reply.is_hidden ? 'Unhide' : 'Hide'}
            </button>
            {reply.is_flagged ? (
              <button
                disabled={isLoading}
                onClick={() => onAction(reply.id, 'unflag')}
                className={`px-2.5 py-1 text-xs font-body font-semibold rounded-md transition-colors disabled:opacity-50 ${
                  isAiFlagged
                    ? 'bg-purple-400/20 text-purple-400 hover:bg-purple-400/30' :'bg-red-400/20 text-red-400 hover:bg-red-400/30'
                }`}
              >
                Unflag
              </button>
            ) : (
              <button
                disabled={isLoading}
                onClick={() => setShowFlagModal(true)}
                className="px-2.5 py-1 text-xs font-body font-semibold rounded-md bg-[#1a1a1a] text-[#888] hover:bg-[#252525] hover:text-red-400 transition-colors disabled:opacity-50"
              >
                Flag
              </button>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

// ─── Main Page ────────────────────────────────────────────────────────────────

export default function ForumModerationPage() {
  const { user, loading } = useAuth();
  const router = useRouter();

  const [activeTab, setActiveTab] = useState<Tab>('threads');
  const [threadFilter, setThreadFilter] = useState<ThreadFilter>('all');
  const [replyFilter, setReplyFilter] = useState<ReplyFilter>('all');
  const [threads, setThreads] = useState<ForumThread[]>([]);
  const [replies, setReplies] = useState<ForumReply[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loadingData, setLoadingData] = useState(true);
  const [loadingId, setLoadingId] = useState<string | null>(null);
  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

  const showToast = (message: string, type: 'success' | 'error' = 'success') => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 3000);
  };

  const fetchData = useCallback(async () => {
    setLoadingData(true);
    try {
      const filter = activeTab === 'threads' ? threadFilter : replyFilter;
      const res = await fetch(`/api/admin/forum-moderation?tab=${activeTab}&filter=${filter}&page=${page}`);
      const data = await res.json();
      if (activeTab === 'threads') {
        setThreads(data.threads || []);
      } else {
        setReplies(data.replies || []);
      }
      setTotal(data.total || 0);
    } catch {
      showToast('Failed to load data', 'error');
    } finally {
      setLoadingData(false);
    }
  }, [activeTab, threadFilter, replyFilter, page]);

  useEffect(() => {
    if (!loading && !user) router.push('/login');
  }, [user, loading, router]);

  useEffect(() => {
    if (user) fetchData();
  }, [user, fetchData]);

  const handleThreadAction = async (id: string, action: string, flagReason?: string) => {
    setLoadingId(id);
    try {
      const res = await fetch('/api/admin/forum-moderation', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type: 'thread', id, action, flag_reason: flagReason }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error);
      setThreads(prev => prev.map(t => t.id === id ? { ...t, ...data.thread } : t));
      showToast(`Thread ${action}ned successfully`);
    } catch (err: any) {
      showToast(err.message || 'Action failed', 'error');
    } finally {
      setLoadingId(null);
    }
  };

  const handleReplyAction = async (id: string, action: string, flagReason?: string) => {
    setLoadingId(id);
    try {
      const res = await fetch('/api/admin/forum-moderation', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type: 'reply', id, action, flag_reason: flagReason }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error);
      setReplies(prev => prev.map(r => r.id === id ? { ...r, ...data.reply } : r));
      showToast(`Reply ${action === 'hide' ? 'hidden' : action + 'ed'} successfully`);
    } catch (err: any) {
      showToast(err.message || 'Action failed', 'error');
    } finally {
      setLoadingId(null);
    }
  };

  const totalPages = Math.ceil(total / 20);

  if (loading) {
    return (
      <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
        <div className="w-8 h-8 border-2 border-[#3b82f6] border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  if (!user) return null;

  const THREAD_FILTERS: { value: ThreadFilter; label: string }[] = [
    { value: 'all', label: 'All Threads' },
    { value: 'flagged', label: '🚩 Flagged' },
    { value: 'ai_flagged', label: '🤖 AI Flagged' },
    { value: 'pinned', label: '📌 Pinned' },
    { value: 'featured', label: '⭐ Featured' },
    { value: 'locked', label: '🔒 Locked' },
  ];

  const REPLY_FILTERS: { value: ReplyFilter; label: string }[] = [
    { value: 'all', label: 'All Replies' },
    { value: 'flagged', label: '🚩 Flagged' },
    { value: 'ai_flagged', label: '🤖 AI Flagged' },
    { value: 'hidden', label: '👁 Hidden' },
  ];

  return (
    <>
      <Header />
      <main className="min-h-screen bg-[#0a0a0a]">
        {/* Toast */}
        {toast && (
          <div className={`fixed top-4 right-4 z-50 px-4 py-3 rounded-lg text-sm font-body font-semibold shadow-lg transition-all ${
            toast.type === 'success' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
          }`}>
            {toast.message}
          </div>
        )}

        {/* Page Header */}
        <div className="bg-[#1a2535] border-b border-[#2a3a50]">
          <div className="max-w-7xl mx-auto px-4 py-6">
            <nav className="text-sm font-body text-[#666] mb-2">
              <Link href="/admin" className="hover:text-[#3b82f6] transition-colors">Admin</Link>
              <span className="mx-2">›</span>
              <span className="text-[#aab4c4]">Forum Moderation</span>
            </nav>
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
              <div>
                <h1 className="text-2xl font-heading font-bold text-white">Forum Moderation</h1>
                <p className="text-[#aab4c4] font-body text-sm mt-1">
                  Pin, feature, lock threads · Flag inappropriate content · Hide replies
                </p>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-xs text-purple-400 font-body bg-purple-400/10 border border-purple-400/20 px-3 py-1.5 rounded-lg">
                  🤖 Claude AI Auto-Moderation Active
                </span>
                <span className="text-xs text-[#555] font-body bg-[#1a1a1a] border border-[#252525] px-3 py-1.5 rounded-lg">
                  🛡 Moderator View
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="max-w-7xl mx-auto px-4 py-6">
          {/* Tabs */}
          <div className="flex gap-1 bg-[#111] border border-[#252525] rounded-lg p-1 w-fit mb-6">
            {(['threads', 'replies'] as Tab[]).map(tab => (
              <button
                key={tab}
                onClick={() => { setActiveTab(tab); setPage(1); }}
                className={`px-5 py-2 text-sm font-body font-semibold rounded-md transition-colors capitalize ${
                  activeTab === tab
                    ? 'bg-[#3b82f6] text-white'
                    : 'text-[#888] hover:text-white'
                }`}
              >
                {tab === 'threads' ? '💬 Threads' : '↩ Replies'}
              </button>
            ))}
          </div>

          {/* Filters */}
          <div className="flex flex-wrap gap-2 mb-5">
            {activeTab === 'threads'
              ? THREAD_FILTERS.map(f => (
                  <button
                    key={f.value}
                    onClick={() => { setThreadFilter(f.value); setPage(1); }}
                    className={`px-3 py-1.5 text-xs font-body font-semibold rounded-lg transition-colors ${
                      threadFilter === f.value
                        ? 'bg-[#3b82f6] text-white'
                        : 'bg-[#1a1a1a] text-[#888] hover:bg-[#252525] hover:text-white border border-[#252525]'
                    }`}
                  >
                    {f.label}
                  </button>
                ))
              : REPLY_FILTERS.map(f => (
                  <button
                    key={f.value}
                    onClick={() => { setReplyFilter(f.value); setPage(1); }}
                    className={`px-3 py-1.5 text-xs font-body font-semibold rounded-lg transition-colors ${
                      replyFilter === f.value
                        ? 'bg-[#3b82f6] text-white'
                        : 'bg-[#1a1a1a] text-[#888] hover:bg-[#252525] hover:text-white border border-[#252525]'
                    }`}
                  >
                    {f.label}
                  </button>
                ))
            }
            <span className="ml-auto text-xs text-[#555] font-body self-center">{total} total</span>
          </div>

          {/* Content */}
          {loadingData ? (
            <div className="flex items-center justify-center py-20">
              <div className="w-7 h-7 border-2 border-[#3b82f6] border-t-transparent rounded-full animate-spin" />
            </div>
          ) : activeTab === 'threads' ? (
            <>
              {threads.length === 0 ? (
                <div className="text-center py-16 text-[#555] font-body text-sm">No threads found for this filter.</div>
              ) : (
                <div className="space-y-3">
                  {threads.map(thread => (
                    <ThreadRow
                      key={thread.id}
                      thread={thread}
                      onAction={handleThreadAction}
                      loadingId={loadingId}
                    />
                  ))}
                </div>
              )}
            </>
          ) : (
            <>
              {replies.length === 0 ? (
                <div className="text-center py-16 text-[#555] font-body text-sm">No replies found for this filter.</div>
              ) : (
                <div className="space-y-3">
                  {replies.map(reply => (
                    <ReplyRow
                      key={reply.id}
                      reply={reply}
                      onAction={handleReplyAction}
                      loadingId={loadingId}
                    />
                  ))}
                </div>
              )}
            </>
          )}

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="flex items-center justify-center gap-3 mt-8">
              <button
                disabled={page === 1}
                onClick={() => setPage(p => p - 1)}
                className="px-4 py-2 text-sm font-body text-[#888] bg-[#1a1a1a] border border-[#252525] rounded-lg hover:bg-[#252525] disabled:opacity-40 transition-colors"
              >
                ← Prev
              </button>
              <span className="text-sm font-body text-[#666]">Page {page} of {totalPages}</span>
              <button
                disabled={page === totalPages}
                onClick={() => setPage(p => p + 1)}
                className="px-4 py-2 text-sm font-body text-[#888] bg-[#1a1a1a] border border-[#252525] rounded-lg hover:bg-[#252525] disabled:opacity-40 transition-colors"
              >
                Next →
              </button>
            </div>
          )}
        </div>
      </main>
    </>
  );
}