'use client';

/**
 * 메인 대시보드 페이지
 * [2026-02-23] 즐겨찾기(하트), 카드/리스트 뷰 토글, 그리드 5열/2열 개선
 */

import { useAuth } from '@/contexts/AuthContext';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState, Suspense } from 'react';
import { collection, query, orderBy, where, getDocs, limit } from 'firebase/firestore';
import { db } from '@/lib/firebase';
import Link from 'next/link';
import DailyNoteButton from '@/components/DailyNoteButton';
import { stripMarkdown } from '@/lib/utils/text';
import { COLLECTIONS, Document as WikiDocument, DocumentCategory } from '@/types/firestore';
import { formatAuthorName } from '@/lib/constants';
import { useWikiFilter } from '@/hooks/useWikiFilter';
import GlobalHeader from '@/components/GlobalHeader';
import HubDocuments from '@/components/HubDocuments';
import { useSwipeableTabs } from '@/hooks/useSwipeableTabs';
import SourceBadge from '@/components/SourceBadge';

const CATEGORY_TABS: { id: DocumentCategory | 'all'; label: string; icon: string }[] = [
  { id: 'all', label: '전체', icon: '🔍' },
  { id: 'medical', label: '의료', icon: '🏥' },
  { id: 'casualty', label: '손해', icon: '🚗' },
  { id: 'wealth', label: '자산', icon: '💰' },
  { id: 'practice', label: '실무', icon: '⚖️' },
];

export default function Home() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-indigo-600"></div>
      </div>
    }>
      <HomeContent />
    </Suspense>
  );
}

function HomeContent() {
  const { user, loading } = useAuth();
  const router = useRouter();
  const searchParams = useSearchParams();

  const [documents, setDocuments] = useState<WikiDocument[]>([]);
  const [isLoadingDocs, setIsLoadingDocs] = useState(true);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [activeTab, setActiveTab] = useState<'wiki' | 'my' | 'daily'>(
    (searchParams.get('tab') as 'wiki' | 'my' | 'daily') || 'wiki'
  );

  const TAB_ORDER: ('wiki' | 'my' | 'daily')[] = ['wiki', 'my', 'daily'];
  const activeTabIndex = TAB_ORDER.indexOf(activeTab);

  // (A) 탭 변경 헬퍼: 상태 + URL 동기화
  const handleTabChange = (tab: 'wiki' | 'my' | 'daily') => {
    setActiveTab(tab);
    router.replace(`/?tab=${tab}`, { scroll: false });
  };

  const { containerRef } = useSwipeableTabs({
    tabs: TAB_ORDER,
    activeIndex: activeTabIndex,
    onTabChange: (index) => handleTabChange(TAB_ORDER[index]),
  });

  const [selectedCategory, setSelectedCategory] = useState<DocumentCategory | 'all'>('all');
  const [viewMode, setViewMode] = useState<'card' | 'list'>('card');
  const [favorites, setFavorites] = useState<Set<string>>(new Set());

  // 위키 탭의 문서들만 useWikiFilter에 전달
  const wikiDocuments = documents.filter(doc =>
    (doc.visibility === 'public' || !doc.visibility) && !doc.isDeleted
  );
  const { filteredDocuments: wikiFiltered, state: filterState, actions: filterActions } = useWikiFilter(wikiDocuments, favorites);

  // localStorage에서 즐겨찾기·뷰모드 로드
  useEffect(() => {
    if (!user) return;
    try {
      const saved = localStorage.getItem(`insuwiki-favorites-${user.uid}`);
      if (saved) setFavorites(new Set(JSON.parse(saved)));
    } catch { }
    const savedView = localStorage.getItem('insuwiki-viewmode') as 'card' | 'list' | null;
    if (savedView) setViewMode(savedView);
  }, [user]);

  const toggleFavorite = (e: React.MouseEvent, docId: string) => {
    e.preventDefault();
    e.stopPropagation();
    setFavorites(prev => {
      const next = new Set(prev);
      if (next.has(docId)) next.delete(docId);
      else next.add(docId);
      try {
        localStorage.setItem(`insuwiki-favorites-${user?.uid}`, JSON.stringify([...next]));
      } catch { }
      return next;
    });
  };

  const handleSetView = (mode: 'card' | 'list') => {
    setViewMode(mode);
    localStorage.setItem('insuwiki-viewmode', mode);
  };

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

  // 문서 목록 로딩
  const fetchDocuments = async () => {
    if (!user) return;
    setIsRefreshing(true);
    if (documents.length === 0) setIsLoadingDocs(true);
    try {
      const publicQuery = query(
        collection(db, COLLECTIONS.DOCUMENTS),
        where('visibility', '==', 'public'),
        orderBy('updatedAt', 'desc'),
        limit(50)
      );
      const myQuery = query(
        collection(db, COLLECTIONS.DOCUMENTS),
        where('authorId', '==', user.uid),
        orderBy('updatedAt', 'desc'),
        limit(50)
      );
      const [publicSnapshot, mySnapshot] = await Promise.all([getDocs(publicQuery), getDocs(myQuery)]);
      const docMap = new Map<string, WikiDocument>();
      for (const snapshot of [publicSnapshot, mySnapshot]) {
        snapshot.forEach((doc) => {
          const data = doc.data() as WikiDocument;
          if (data.isDeleted) return;
          const inferredType = data.docType || (data.title.match(/^\d{4}-\d{2}-\d{2}$/) ? 'daily' : 'wiki');
          docMap.set(doc.id, { ...data, id: doc.id, docType: inferredType });
        });
      }
      setDocuments(Array.from(docMap.values()));
    } catch (error) {
      console.error('문서 로딩 실패:', error);
    } finally {
      setIsLoadingDocs(false);
      setIsRefreshing(false);
    }
  };

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

  useEffect(() => {
    const tab = searchParams.get('tab') as 'wiki' | 'my' | 'daily';
    if (tab) {
      // URL이 이미 일치하므로 setActiveTab만 호출 (router.replace 호출 시 무한 루프 방지)
      if (tab !== activeTab) setActiveTab(tab);
    } else {
      if (window.innerWidth < 768) setActiveTab('daily');
    }
  }, [searchParams]);

  const filteredDocuments = (() => {
    let docs: WikiDocument[];

    if (activeTab === 'wiki') {
      docs = wikiFiltered;
    } else if (activeTab === 'my') {
      docs = documents.filter(doc => doc.visibility === 'private' && doc.authorId === user?.uid && doc.docType !== 'daily');
    } else {
      docs = documents.filter(doc => doc.docType === 'daily');
    }

    // DocumentCategory 필터 (wiki/my 탭)
    if ((activeTab === 'wiki' || activeTab === 'my') && selectedCategory !== 'all') {
      docs = docs.filter(doc => (doc.category || 'general') === selectedCategory);
    }

    // 즐겨찾기 정렬 (wiki 탭은 useWikiFilter에서 처리)
    if (activeTab === 'daily') {
      docs = [...docs].sort((a, b) => b.title.localeCompare(a.title));
    } else if (activeTab !== 'wiki') {
      docs = [...docs].sort((a, b) => {
        const aFav = favorites.has(a.id);
        const bFav = favorites.has(b.id);
        if (aFav !== bFav) return aFav ? -1 : 1;
        return 0;
      });
    }

    return docs;
  })();

  // (B) filteredDocuments 변경 시 sessionStorage에 카드 id 목록 저장
  const filteredIds = filteredDocuments.map(d => d.id).join(',');
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    if (typeof window === 'undefined') return;
    const ids = filteredIds ? filteredIds.split(',') : [];
    try {
      sessionStorage.setItem(`insuwiki_card_list_${activeTab}`, JSON.stringify(ids));
    } catch { }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeTab, filteredIds]);

  if (loading || (isLoadingDocs && documents.length === 0) || !user) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-600 mb-4"></div>
        <p className="text-gray-500 font-medium">인슈위키 로딩 중...</p>
      </div>
    );
  }

  const formatDate = (updatedAt: any) => {
    const d = updatedAt instanceof Date ? updatedAt : updatedAt?.toDate?.();
    if (!d) return '';
    return d.toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' });
  };

  const catBadgeStyle: Record<string, string> = {
    medical: 'bg-indigo-50/70 text-indigo-700 border-indigo-100',
    casualty: 'bg-blue-50/70 text-blue-700 border-blue-100',
    wealth: 'bg-amber-50/70 text-amber-700 border-amber-100',
    practice: 'bg-slate-100/70 text-slate-700 border-slate-200',
  };
  const catLabel: Record<string, string> = {
    medical: '🏥 의료', casualty: '🚗 손해', wealth: '💰 자산', practice: '⚖️ 실무',
  };

  const tabAccent = {
    wiki: { bg: 'bg-indigo-600', hover: 'hover:bg-indigo-700', text: 'text-indigo-600', border: 'border-indigo-500', hoverBorder: 'hover:border-indigo-200', light: 'bg-indigo-50 text-indigo-400' },
    my: { bg: 'bg-violet-600', hover: 'hover:bg-violet-700', text: 'text-violet-600', border: 'border-violet-500', hoverBorder: 'hover:border-violet-200', light: 'bg-violet-50 text-violet-400' },
    daily: { bg: 'bg-emerald-500', hover: 'hover:bg-emerald-600', text: 'text-emerald-600', border: 'border-emerald-400', hoverBorder: 'hover:border-emerald-200', light: 'bg-emerald-50 text-emerald-400' },
  }[activeTab];

  // 하트 버튼 컴포넌트 (항상 표시: 즐겨찾기=빨간 ♥, 미즐겨찾기=반투명 회색 ♡)
  const HeartBtn = ({ docId, cls = '' }: { docId: string; cls?: string }) => (
    <button
      onClick={(e) => toggleFavorite(e, docId)}
      className={`flex items-center justify-center rounded-full bg-white/90 backdrop-blur-sm shadow transition-all hover:scale-110 active:scale-95 ${cls}`}
      title={favorites.has(docId) ? '즐겨찾기 해제' : '즐겨찾기'}
    >
      {favorites.has(docId) ? (
        // 즐겨찾기 상태: 빨간 채워진 하트
        <svg className="w-4 h-4 text-rose-500" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
        </svg>
      ) : (
        // 미즐겨찾기 상태: 반투명 회색 빈 하트
        <svg className="w-4 h-4 text-gray-400 opacity-40 hover:opacity-80 hover:text-rose-400 transition-all" fill="currentColor" viewBox="0 0 24 24">
          <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" />
        </svg>
      )}
    </button>
  );

  return (
    <div className={`min-h-screen transition-colors duration-500 ${activeTab === 'wiki' ? 'bg-slate-50' : activeTab === 'my' ? 'bg-violet-50/30' : 'bg-emerald-50/30'}`}>
      <GlobalHeader variant={activeTab} onTabChange={(tab) => handleTabChange(tab)} />

      <main ref={containerRef} className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-8">
        <div className="mb-8 md:mb-10">
          <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 md:gap-6 border-b-2 border-gray-100 pb-3 md:pb-8">
            {/* 타이틀 영역 */}
            <div className="flex items-center gap-3 md:gap-5">
              <div className={`p-2 md:p-4 rounded-2xl ${tabAccent.bg} text-white shadow-xl`}>
                {activeTab === 'wiki' ? (
                  <svg className="w-8 h-8 md:w-10 md:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                  </svg>
                ) : activeTab === 'my' ? (
                  <svg className="w-8 h-8 md:w-10 md:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                ) : (
                  <svg className="w-8 h-8 md:w-10 md:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                  </svg>
                )}
              </div>
              <div>
                <h2 className="text-lg md:text-4xl font-extrabold text-gray-900 leading-tight">
                  {activeTab === 'wiki' ? 'Knowledge Wiki' : activeTab === 'my' ? 'My Private Space' : 'Daily Notes'}
                </h2>
                <div className="flex items-center gap-2">
                  <p className="text-xs md:text-base text-gray-500 font-medium mt-1">
                    {activeTab === 'wiki' ? '보험 전문가의 정제된 지식 창고' : activeTab === 'my' ? '나만의 개인 기록과 초안을 관리하는 공간' : '매일의 경험과 생각을 기록하는 메모장'}
                  </p>
                  <button
                    onClick={fetchDocuments}
                    disabled={isRefreshing}
                    className={`text-gray-400 hover:text-indigo-600 transition-colors p-1 ${isRefreshing ? 'animate-spin' : ''}`}
                    title="목록 새로고침"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>

            {/* 우측: 뷰 토글 + 새 문서 버튼 */}
            <div className="flex items-center gap-3 w-full md:w-auto">
              {/* 카드/리스트 뷰 토글 */}
              <div className="flex items-center gap-0.5 bg-gray-100/80 rounded-xl p-1 border border-gray-200/60 flex-shrink-0">
                <button
                  onClick={() => handleSetView('card')}
                  className={`p-2 rounded-lg transition-all ${viewMode === 'card' ? `bg-white shadow-sm ${tabAccent.text}` : 'text-gray-400 hover:text-gray-600'}`}
                  title="카드 뷰"
                >
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z" />
                  </svg>
                </button>
                <button
                  onClick={() => handleSetView('list')}
                  className={`p-2 rounded-lg transition-all ${viewMode === 'list' ? `bg-white shadow-sm ${tabAccent.text}` : 'text-gray-400 hover:text-gray-600'}`}
                  title="리스트 뷰"
                >
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M3 5h2v2H3V5zm4 0h14v2H7V5zM3 11h2v2H3v-2zm4 0h14v2H7v-2zM3 17h2v2H3v-2zm4 0h14v2H7v-2z" />
                  </svg>
                </button>
              </div>

              {/* 새 문서 버튼 */}
              {activeTab === 'wiki' ? (
                <Link
                  href="/new"
                  className={`flex-1 md:flex-none justify-center ${tabAccent.bg} text-white px-6 py-3.5 rounded-2xl ${tabAccent.hover} transition-all shadow-md hover:shadow-xl inline-flex items-center gap-3 font-bold text-sm border ${tabAccent.border} active:scale-95`}
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <span>새 위키 문서 작성</span>
                </Link>
              ) : activeTab === 'my' ? (
                <Link
                  href="/new?visibility=private"
                  className="flex-1 md:flex-none justify-center bg-violet-600 text-white px-6 py-3.5 rounded-2xl hover:bg-violet-700 transition-all shadow-md hover:shadow-xl inline-flex items-center gap-3 font-bold text-sm border border-violet-500 active:scale-95"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <span>새 개인 문서 작성</span>
                </Link>
              ) : (
                <div className="flex-1 md:flex-none flex justify-center">
                  <DailyNoteButton variant="primary" />
                </div>
              )}
            </div>
          </div>

          {/* 카테고리 필터 (Wiki & My 탭) */}
          {(activeTab === 'wiki' || activeTab === 'my') && (
            <div className="mt-8 flex justify-start border-b border-gray-200">
              <nav className="-mb-px flex space-x-6 md:space-x-8 overflow-x-auto pb-0" aria-label="Tabs">
                {CATEGORY_TABS.map((tab) => {
                  const isActive = selectedCategory === tab.id;
                  const activeColor = activeTab === 'wiki' ? 'border-indigo-500 text-indigo-600' : 'border-violet-500 text-violet-600';
                  const inactiveColor = 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300';
                  return (
                    <button
                      key={tab.id}
                      onClick={() => setSelectedCategory(tab.id)}
                      className={`whitespace-nowrap py-3 px-1 border-b-2 font-bold text-sm md:text-base transition-colors flex items-center gap-2 ${isActive ? activeColor : inactiveColor
                        }`}
                    >
                      <span className={isActive ? '' : 'opacity-70'}>{tab.icon}</span>
                      <span>{tab.label}</span>
                    </button>
                  );
                })}
              </nav>
            </div>
          )}

          {/* 카테고리 칩 + 정렬/검증 토글 (Wiki 탭만) */}
          {activeTab === 'wiki' && (
            <div className="mt-3 flex items-center gap-2 overflow-x-auto pb-1">
              {/* 카테고리 칩 */}
              {(['all', 'regulation', 'court_ruling', 'policy', 'expert', 'community'] as const).map((cat) => {
                const labels: Record<string, string> = {
                  all: '전체', regulation: '법규', court_ruling: '판례',
                  policy: '정책', expert: '전문가', community: '커뮤니티'
                };
                const isActive = filterState.category === cat;
                return (
                  <button
                    key={cat}
                    onClick={() => filterActions.setCategory(cat)}
                    className={`px-3 py-1.5 rounded-full text-xs font-bold border transition-all whitespace-nowrap ${
                      isActive
                        ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm'
                        : 'bg-white text-gray-600 border-gray-200 hover:border-indigo-300 hover:text-indigo-600'
                    }`}
                  >
                    {labels[cat]}
                  </button>
                );
              })}

              {/* 구분선 */}
              <div className="w-px h-6 bg-gray-200 mx-1 flex-shrink-0" />

              {/* 정렬 토글 */}
              <button
                onClick={() => filterActions.setSortBy(filterState.sortBy === 'updatedAt' ? 'authorityTier' : 'updatedAt')}
                className={`px-3 py-1.5 rounded-full text-xs font-bold border transition-all whitespace-nowrap ${
                  filterState.sortBy === 'authorityTier'
                    ? 'bg-amber-500 text-white border-amber-500 shadow-sm'
                    : 'bg-white text-gray-600 border-gray-200 hover:border-amber-300 hover:text-amber-600'
                }`}
              >
                {filterState.sortBy === 'authorityTier' ? '신뢰도순' : '최신순'}
              </button>

              {/* 검증만 보기 토글 */}
              <button
                onClick={filterActions.toggleVerifiedOnly}
                className={`px-3 py-1.5 rounded-full text-xs font-bold border transition-all whitespace-nowrap ${
                  filterState.verifiedOnly
                    ? 'bg-emerald-500 text-white border-emerald-500 shadow-sm'
                    : 'bg-white text-gray-600 border-gray-200 hover:border-emerald-300 hover:text-emerald-600'
                }`}
              >
                {filterState.verifiedOnly ? '✓ 검증만' : '검증만 보기'}
              </button>
            </div>
          )}
        </div>

        {/* 허브 문서 (Wiki 탭) */}
        {activeTab === 'wiki' && (
          <div className="mb-8">
            <HubDocuments maxItems={5} />
          </div>
        )}

        {/* 빈 상태 */}
        {filteredDocuments.length === 0 ? (
          <div className="bg-white rounded-3xl shadow-sm p-10 md:p-20 text-center border border-gray-100">
            <div className={`w-20 h-20 md:w-24 md:h-24 rounded-full flex items-center justify-center mx-auto mb-6 md:mb-8 ${tabAccent.light}`}>
              {activeTab === 'wiki' ? (
                <svg className="w-10 h-10 md:w-12 md:h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                </svg>
              ) : activeTab === 'my' ? (
                <svg className="w-10 h-10 md:w-12 md:h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              ) : (
                <svg className="w-10 h-10 md:w-12 md:h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
              )}
            </div>
            <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-3">
              {activeTab === 'wiki' ? '등록된 위키 문서가 없습니다' : activeTab === 'my' ? '개인 문서가 없습니다' : '작성된 데일리 노트가 없습니다'}
            </h3>
            <p className="text-gray-500 mb-8 max-w-sm mx-auto font-medium text-base leading-relaxed">
              {activeTab === 'wiki' ? '보험 약관, 미팅 요약, 지식 노하우를 위키 문서로 기록하고 관리하세요.'
                : activeTab === 'my' ? '나만의 아이디어와 초안을 이곳에 자유롭게 기록해보세요.'
                  : '오늘 있었던 일들과 떠오르는 생각들을 오늘의 데일리 노트에 담아보세요.'}
            </p>
            {activeTab === 'wiki' ? (
              <Link href="/new" className="inline-flex items-center gap-3 bg-indigo-600 text-white px-8 py-3 rounded-2xl font-bold hover:bg-indigo-700 transition-all shadow-md">
                첫 번째 위키 작성하기 &rarr;
              </Link>
            ) : activeTab === 'my' ? (
              <Link href="/new?visibility=private" className="inline-flex items-center gap-3 bg-violet-600 text-white px-8 py-3 rounded-2xl font-bold hover:bg-violet-700 transition-all shadow-md">
                첫 번째 개인 문서 작성하기 &rarr;
              </Link>
            ) : (
              <div className="flex justify-center"><DailyNoteButton variant="primary" /></div>
            )}
          </div>

        ) : viewMode === 'list' ? (
          /* ── 리스트 뷰 ── */
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden divide-y divide-gray-100">
            {filteredDocuments.map((doc) => (
              <div key={doc.id} className="group flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
                {/* 하트 */}
                <HeartBtn docId={doc.id} cls="w-8 h-8 flex-shrink-0" />
                {/* 문서 링크 */}
                <Link href={`/docs/${doc.id}?from=${activeTab}`} className="flex-1 flex items-center gap-3 min-w-0">
                  <span className="flex-1 font-semibold text-gray-900 truncate group-hover:text-indigo-600 transition-colors text-sm md:text-base">
                    {doc.title}
                  </span>
                  {activeTab === 'wiki' && doc.category && catLabel[doc.category] && (
                    <span className={`hidden md:inline-flex px-2 py-0.5 rounded-lg text-xs font-bold border flex-shrink-0 ${catBadgeStyle[doc.category] || ''}`}>
                      {catLabel[doc.category]}
                    </span>
                  )}
                  {activeTab === 'wiki' && doc.sourceType && (
                    <span className="flex-shrink-0">
                      <SourceBadge sourceType={doc.sourceType} authorityTier={doc.authorityTier} size="sm" />
                    </span>
                  )}
                  {activeTab === 'wiki' && (
                    <span className="text-sm text-gray-500 flex-shrink-0 hidden md:block">
                      {formatAuthorName(doc.authorName || user?.email?.split('@')[0] || '익명')}
                    </span>
                  )}
                  <span className="text-xs text-gray-400 flex-shrink-0">{formatDate(doc.updatedAt)}</span>
                </Link>
              </div>
            ))}
          </div>

        ) : (
          /* ── 카드 뷰: PC 5열 / 태블릿 3열 / 모바일 2열 ── */
          <div className="grid gap-3 sm:gap-4 grid-cols-2 md:grid-cols-3 xl:grid-cols-5">
            {filteredDocuments.map((doc) => (
              <div key={doc.id} className="relative group">
                <Link
                  href={`/docs/${doc.id}?from=${activeTab}`}
                  className={`block bg-white rounded-2xl shadow-sm border border-gray-100/50 hover:shadow-md hover:-translate-y-1 transition-all duration-300 overflow-hidden h-full relative ${tabAccent.hoverBorder}`}
                >
                  {/* 하트 버튼: Link 안에 위치해야 카드 hover 애니메이션과 함께 움직임 */}
                  <HeartBtn
                    docId={doc.id}
                    cls="absolute top-2 right-2 z-10 w-7 h-7"
                  />
                  {/* 커버 이미지 */}
                  {doc.coverImage && (
                    <div className="relative w-full h-24 overflow-hidden bg-gray-100">
                      <img
                        src={`/api/drive-image/${doc.coverImage}`}
                        alt="Cover"
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        loading="lazy"
                        onError={(e) => {
                          e.currentTarget.style.display = 'none';
                          e.currentTarget.parentElement?.classList.add('hidden');
                        }}
                      />
                    </div>
                  )}

                  {/* 카드 내용 */}
                  <div className="p-3 md:p-4">
                    <h3 className="font-bold text-gray-900 text-sm leading-snug truncate mb-1 group-hover:text-indigo-600 transition-colors">
                      {doc.title}
                    </h3>

                    <p className="text-xs text-gray-500 line-clamp-2 leading-relaxed mb-2">
                      {stripMarkdown(doc.content).slice(0, 80) || '내용이 없습니다.'}
                    </p>
                    <div className={activeTab === 'wiki' ? "flex items-center justify-between" : "flex items-center justify-end"}>
                      {activeTab === 'wiki' && (
                        <span className="text-xs text-gray-400 truncate">
                          {formatAuthorName(doc.authorName || user?.email?.split('@')[0] || '익명')}
                        </span>
                      )}
                      <span className="text-xs text-gray-400 flex-shrink-0 ml-1">{formatDate(doc.updatedAt)}</span>
                    </div>
                    {activeTab === 'wiki' && doc.category && catLabel[doc.category] && (
                      <div className="mt-2">
                        <span className={`px-2 py-0.5 rounded-lg text-[10px] font-bold border ${catBadgeStyle[doc.category] || ''}`}>
                          {catLabel[doc.category]}
                        </span>
                      </div>
                    )}
                    {activeTab === 'wiki' && doc.sourceType && (
                      <div className="mt-1">
                        <SourceBadge sourceType={doc.sourceType} authorityTier={doc.authorityTier} size="sm" />
                      </div>
                    )}
                  </div>
                </Link>
              </div>
            ))}
          </div>
        )}
      </main>
    </div>
  );
}