ERP-node/frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx

"use client";

import React, { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  Inbox,
  Mail,
  RefreshCw,
  Loader2,
  CheckCircle,
  Paperclip,
  AlertCircle,
  Search,
  Filter,
  SortAsc,
  SortDesc,
  ChevronRight,
  Reply,
  Forward,
  Trash2,
} from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { Separator } from "@/components/ui/separator";
import {
  MailAccount,
  ReceivedMail,
  MailDetail,
  getMailAccounts,
  getReceivedMails,
  testImapConnection,
  getMailDetail,
  markMailAsRead,
  downloadMailAttachment,
} from "@/lib/api/mail";
import { apiClient } from "@/lib/api/client";
import DOMPurify from "isomorphic-dompurify";

export default function MailReceivePage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [accounts, setAccounts] = useState<MailAccount[]>([]);
  const [selectedAccountId, setSelectedAccountId] = useState<string>("");
  const [mails, setMails] = useState<ReceivedMail[]>([]);
  const [loading, setLoading] = useState(false);
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState<{
    success: boolean;
    message: string;
  } | null>(null);

  // 메일 상세 상태 (모달 대신 패널)
  const [selectedMailId, setSelectedMailId] = useState<string>("");
  const [selectedMailDetail, setSelectedMailDetail] = useState<MailDetail | null>(null);
  const [loadingDetail, setLoadingDetail] = useState(false);
  const [deleting, setDeleting] = useState(false);

  // 검색 및 필터 상태
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [filterStatus, setFilterStatus] = useState<string>("all"); // all, unread, read, attachment
  const [sortBy, setSortBy] = useState<string>("date-desc"); // date-desc, date-asc, from-asc, from-desc

  // 페이지네이션
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10);
  const [totalPages, setTotalPages] = useState(1);
  const [allMails, setAllMails] = useState<ReceivedMail[]>([]); // 전체 메일 저장

  // 계정 목록 로드
  useEffect(() => {
    loadAccounts();
  }, []);

  // 계정 선택 시 메일 로드
  useEffect(() => {
    if (selectedAccountId) {
      setCurrentPage(1); // 계정 변경 시 첫 페이지로
      loadMails();
    }
  }, [selectedAccountId]);

  // 페이지 변경 시 페이지네이션 재적용
  useEffect(() => {
    if (allMails.length > 0) {
      applyPagination(allMails);
    }
  }, [currentPage]);

  // URL 파라미터에서 mailId 읽기 및 자동 선택
  useEffect(() => {
    const mailId = searchParams.get('mailId');
    const accountId = searchParams.get('accountId');
    
    if (mailId && accountId) {
      // console.log('📧 URL에서 메일 ID 감지:', mailId, accountId);
      setSelectedAccountId(accountId);
      setSelectedMailId(mailId);
      // 메일 상세 로드는 handleMailClick에서 처리됨
    }
  }, [searchParams]);

  // 메일 목록 로드 후 URL에서 지정된 메일 자동 선택
  useEffect(() => {
    if (selectedMailId && mails.length > 0 && !selectedMailDetail) {
      const mail = mails.find(m => m.id === selectedMailId);
      if (mail) {
        // console.log('🎯 URL에서 지정된 메일 자동 선택:', selectedMailId);
        handleMailClick(mail);
      }
    }
  }, [mails, selectedMailId, selectedMailDetail]); // selectedMailDetail 추가로 무한 루프 방지

  // 자동 새로고침 (30초마다)
  useEffect(() => {
    if (!selectedAccountId) return;

    const interval = setInterval(() => {
      loadMails();
    }, 30000); // 30초

    return () => clearInterval(interval);
  }, [selectedAccountId]);

  const loadAccounts = async () => {
    try {
      const data = await getMailAccounts();
      if (Array.isArray(data)) {
        const activeAccounts = data.filter((acc) => acc.status === "active");
        setAccounts(activeAccounts);
        if (activeAccounts.length > 0 && !selectedAccountId) {
          setSelectedAccountId(activeAccounts[0].id);
        }
      }
    } catch (error) {
      // console.error("계정 로드 실패:", error);
    }
  };

  const loadMails = async () => {
    if (!selectedAccountId) return;

    setLoading(true);
    setTestResult(null);
    try {
      const data = await getReceivedMails(selectedAccountId, 200); // 더 많이 가져오기
      
      // 현재 로컬에서 읽음 처리한 메일들의 상태를 유지
      const processedMails = data.map(mail => ({
        ...mail,
        isRead: mail.isRead
      }));
      
      setAllMails(processedMails); // 전체 메일 저장
      
      // 페이지네이션 적용
      applyPagination(processedMails);
      
      // 알림 갱신 이벤트 발생 (새 메일이 있을 수 있음)
      window.dispatchEvent(new CustomEvent('mail-received'));
    } catch (error) {
      // console.error("메일 로드 실패:", error);
      alert(
        error instanceof Error
          ? error.message
          : "메일을 불러오는데 실패했습니다."
      );
      setMails([]);
      setAllMails([]);
    } finally {
      setLoading(false);
    }
  };

  const applyPagination = (mailList: ReceivedMail[]) => {
    const totalItems = mailList.length;
    const totalPagesCalc = Math.ceil(totalItems / itemsPerPage);
    setTotalPages(totalPagesCalc);

    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const paginatedMails = mailList.slice(startIndex, endIndex);

    setMails(paginatedMails);
  };

  const handleTestConnection = async () => {
    if (!selectedAccountId) return;

    setTesting(true);
    setTestResult(null);
    try {
      const result = await testImapConnection(selectedAccountId);
      setTestResult(result);
      if (result.success) {
        // 연결 성공 후 자동으로 메일 로드
        setTimeout(() => loadMails(), 1000);
      }
    } catch (error) {
      setTestResult({
        success: false,
        message:
          error instanceof Error
            ? error.message
            : "IMAP 연결 테스트 실패",
      });
    } finally {
      setTesting(false);
    }
  };

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMs / 3600000);
    const diffDays = Math.floor(diffMs / 86400000);

    if (diffMins < 60) {
      return `${diffMins}분 전`;
    } else if (diffHours < 24) {
      return `${diffHours}시간 전`;
    } else if (diffDays < 7) {
      return `${diffDays}일 전`;
    } else {
      return date.toLocaleDateString("ko-KR");
    }
  };

  const handleMailClick = async (mail: ReceivedMail) => {
    setSelectedMailId(mail.id);
    setLoadingDetail(true);
    
    // 즉시 로컬 상태 업데이트 (UI 반응성 향상)
    // console.log('📧 메일 클릭:', mail.id, '현재 읽음 상태:', mail.isRead);
    setMails((prevMails) =>
      prevMails.map((m) =>
        m.id === mail.id ? { ...m, isRead: true } : m
      )
    );

    // 메일 상세 정보 로드
    try {
      // mail.id에서 accountId와 seqno 추출: "account-{timestamp}-{seqno}" 형식
      const mailIdParts = mail.id.split('-');
      const accountId = `${mailIdParts[0]}-${mailIdParts[1]}`; // "account-1759310844272"
      const seqno = parseInt(mailIdParts[2], 10); // 13
      
      // console.log('🔍 추출된 accountId:', accountId, 'seqno:', seqno, '원본 mailId:', mail.id);
      
      const detail = await getMailDetail(accountId, seqno);
      setSelectedMailDetail(detail);
      
      // 읽음 처리
      if (!mail.isRead) {
        await markMailAsRead(accountId, seqno);
        // console.log('✅ 읽음 처리 완료 - seqno:', seqno);
        
        // 서버 상태 동기화 (백그라운드) - IMAP 서버 반영 대기
        setTimeout(() => {
          if (selectedAccountId) {
            // console.log('🔄 서버 상태 동기화 시작');
            loadMails();
          }
        }, 2000); // 2초로 증가
      }
    } catch (error) {
      // console.error('메일 상세 로드 실패:', error);
    } finally {
      setLoadingDetail(false);
    }
  };

  const handleDeleteMail = async () => {
    if (!selectedMailId || !confirm("이 메일을 IMAP 서버에서 삭제하시겠습니까?\n(Gmail/Naver 휴지통으로 이동됩니다)\n\n⚠️ IMAP 연결에 시간이 걸릴 수 있습니다.")) return;

    try {
      setDeleting(true);
      
      // mail.id에서 accountId와 seqno 추출: "account-{timestamp}-{seqno}" 형식
      const mailIdParts = selectedMailId.split('-');
      const accountId = `${mailIdParts[0]}-${mailIdParts[1]}`; // "account-1759310844272"
      const seqno = parseInt(mailIdParts[2], 10); // 10
      
      // console.log(`🗑️ 메일 삭제 시도: accountId=${accountId}, seqno=${seqno}`);
      
      // IMAP 서버에서 메일 삭제 (타임아웃 40초)
      const response = await apiClient.delete(`/mail/receive/${accountId}/${seqno}`, {
        timeout: 40000, // 40초 타임아웃
      });
      
      if (response.data.success) {
        // 메일 목록에서 제거
        setMails(mails.filter((m) => m.id !== selectedMailId));
        
        // 상세 패널 닫기
        setSelectedMailId("");
        setSelectedMailDetail(null);
        
        alert("메일이 삭제되었습니다.");
        // console.log("✅ 메일 삭제 완료");
      }
    } catch (error: any) {
      // console.error("메일 삭제 실패:", error);
      
      let errorMessage = "메일 삭제에 실패했습니다.";
      
      if (error.code === 'ECONNABORTED' || error.message?.includes('timeout')) {
        errorMessage = "IMAP 서버 연결 시간 초과\n네트워크 상태를 확인하거나 나중에 다시 시도해주세요.";
      } else if (error.response?.data?.message) {
        errorMessage = error.response.data.message;
      }
      
      alert(errorMessage);
    } finally {
      setDeleting(false);
    }
  };

  // 필터링 및 정렬된 메일 목록
  const filteredAndSortedMails = React.useMemo(() => {
    let result = [...mails];

    // 검색
    if (searchTerm) {
      const searchLower = searchTerm.toLowerCase();
      result = result.filter(
        (mail) =>
          mail.subject.toLowerCase().includes(searchLower) ||
          mail.from.toLowerCase().includes(searchLower) ||
          mail.preview.toLowerCase().includes(searchLower)
      );
    }

    // 필터
    if (filterStatus === "unread") {
      result = result.filter((mail) => !mail.isRead);
    } else if (filterStatus === "read") {
      result = result.filter((mail) => mail.isRead);
    } else if (filterStatus === "attachment") {
      result = result.filter((mail) => mail.hasAttachments);
    }

    // 정렬
    if (sortBy === "date-desc") {
      result.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
    } else if (sortBy === "date-asc") {
      result.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
    } else if (sortBy === "from-asc") {
      result.sort((a, b) => a.from.localeCompare(b.from));
    } else if (sortBy === "from-desc") {
      result.sort((a, b) => b.from.localeCompare(a.from));
    }

    return result;
  }, [mails, searchTerm, filterStatus, sortBy]);

  return (
    <div className="min-h-screen bg-background">
      <div className="w-full max-w-none px-4 py-8 space-y-8">
        {/* 페이지 제목 */}
        <div className="bg-card rounded-lg border p-6 space-y-4">
          {/* 브레드크럼브 */}
          <nav className="flex items-center gap-2 text-sm">
            <Link 
              href="/admin/mail/dashboard"
              className="text-muted-foreground hover:text-foreground transition-colors"
            >
              메일 관리
            </Link>
            <ChevronRight className="w-4 h-4 text-muted-foreground" />
            <span className="text-foreground font-medium">메일 수신함</span>
          </nav>
          
          <Separator />
          
          {/* 제목 + 액션 버튼들 */}
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-foreground">메일 수신함</h1>
              <p className="mt-2 text-muted-foreground">
                IMAP으로 받은 메일을 확인합니다
              </p>
            </div>
            <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={loadMails}
              disabled={loading || !selectedAccountId}
            >
              <RefreshCw
                className={`w-4 h-4 mr-2 ${loading ? "animate-spin" : ""}`}
              />
              새로고침
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={handleTestConnection}
              disabled={testing || !selectedAccountId}
            >
              {testing ? (
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
              ) : (
                <CheckCircle className="w-4 h-4 mr-2" />
              )}
              연결 테스트
            </Button>
            </div>
          </div>
        </div>

        {/* 계정 선택 */}
        <Card className="">
          <CardContent className="p-4">
            <div className="flex items-center gap-4">
              <label className="text-sm font-medium text-foreground whitespace-nowrap">
                메일 계정:
              </label>
              <select
                value={selectedAccountId}
                onChange={(e) => setSelectedAccountId(e.target.value)}
                className="flex-1 px-4 py-2 border border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
              >
                <option value="">계정 선택</option>
                {accounts.map((account) => (
                  <option key={account.id} value={account.id}>
                    {account.name} ({account.email})
                  </option>
                ))}
              </select>
            </div>

            {/* 연결 테스트 결과 */}
            {testResult && (
              <div
                className={`mt-4 p-3 rounded-lg flex items-center gap-2 ${
                  testResult.success
                    ? "bg-green-50 text-green-800 border border-green-200"
                    : "bg-red-50 text-red-800 border border-red-200"
                }`}
              >
                {testResult.success ? (
                  <CheckCircle className="w-5 h-5" />
                ) : (
                  <AlertCircle className="w-5 h-5" />
                )}
                <span>{testResult.message}</span>
              </div>
            )}
          </CardContent>
        </Card>

        {/* 검색 및 필터 */}
        {selectedAccountId && (
          <Card className="">
            <CardContent className="p-4">
              <div className="flex flex-col md:flex-row gap-3">
                {/* 검색 */}
                <div className="flex-1 relative">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <input
                    type="text"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    placeholder="제목, 발신자, 내용으로 검색..."
                    className="w-full pl-10 pr-4 py-2 border border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
                  />
                </div>

                {/* 필터 */}
                <div className="flex items-center gap-2">
                  <Filter className="w-4 h-4 text-muted-foreground" />
                  <select
                    value={filterStatus}
                    onChange={(e) => setFilterStatus(e.target.value)}
                    className="px-3 py-2 border border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
                  >
                    <option value="all">전체</option>
                    <option value="unread">읽지 않음</option>
                    <option value="read">읽음</option>
                    <option value="attachment">첨부파일 있음</option>
                  </select>
                </div>

                {/* 정렬 */}
                <div className="flex items-center gap-2">
                  {sortBy.includes("desc") ? (
                    <SortDesc className="w-4 h-4 text-muted-foreground" />
                  ) : (
                    <SortAsc className="w-4 h-4 text-muted-foreground" />
                  )}
                  <select
                    value={sortBy}
                    onChange={(e) => setSortBy(e.target.value)}
                    className="px-3 py-2 border border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
                  >
                    <option value="date-desc">날짜 ↓ (최신순)</option>
                    <option value="date-asc">날짜 ↑ (오래된순)</option>
                    <option value="from-asc">발신자 ↑ (A-Z)</option>
                    <option value="from-desc">발신자 ↓ (Z-A)</option>
                  </select>
                </div>
              </div>

              {/* 검색 결과 카운트 */}
              {(searchTerm || filterStatus !== "all") && (
                <div className="mt-3 text-sm text-muted-foreground">
                  {filteredAndSortedMails.length}개의 메일이 검색되었습니다
                  {searchTerm && (
                    <span className="ml-2">
                      (검색어: <span className="font-medium text-orange-600">{searchTerm}</span>)
                    </span>
                  )}
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {/* 네이버 메일 스타일 3-column 레이아웃 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* 왼쪽: 메일 목록 */}
          <div className="lg:col-span-1">
            {loading ? (
              <Card className="">
                <CardContent className="flex justify-center items-center py-16">
                  <Loader2 className="w-8 h-8 animate-spin text-orange-500" />
                  <span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
                </CardContent>
              </Card>
            ) : filteredAndSortedMails.length === 0 ? (
              <Card className="text-center py-16 bg-card ">
                <CardContent className="pt-6">
                  <Mail className="w-16 h-16 mx-auto mb-4 text-gray-300" />
                  <p className="text-muted-foreground mb-4">
                    {!selectedAccountId
                      ? "메일 계정을 선택하세요"
                      : searchTerm || filterStatus !== "all"
                      ? "검색 결과가 없습니다"
                      : "받은 메일이 없습니다"}
                  </p>
                  {selectedAccountId && (
                    <Button
                      onClick={handleTestConnection}
                      variant="outline"
                      disabled={testing}
                    >
                      {testing ? (
                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      ) : (
                        <CheckCircle className="w-4 h-4 mr-2" />
                      )}
                      IMAP 연결 테스트
                    </Button>
                  )}
                </CardContent>
              </Card>
            ) : (
              <Card className="">
                <CardHeader className="bg-gradient-to-r from-slate-50 to-gray-50 border-b">
                  <CardTitle className="flex items-center gap-2">
                    <Inbox className="w-5 h-5 text-orange-500" />
                    받은 메일함 ({filteredAndSortedMails.length}/{mails.length}개)
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-0">
                  <div className="divide-y max-h-[calc(100vh-300px)] overflow-y-auto">
                    {filteredAndSortedMails.map((mail) => (
                      <div
                        key={mail.id}
                        onClick={() => handleMailClick(mail)}
                        className={`p-4 hover:bg-background transition-colors cursor-pointer ${
                          !mail.isRead ? "bg-blue-50/30" : ""
                        } ${selectedMailId === mail.id ? "bg-accent border-l-4 border-l-primary" : ""}`}
                      >
                        <div className="flex items-start gap-4">
                          {/* 읽음 표시 */}
                          <div className="flex-shrink-0 w-2 h-2 mt-2">
                            {!mail.isRead && (
                              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                            )}
                          </div>

                          {/* 메일 내용 */}
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between mb-1">
                              <span
                                className={`text-sm ${
                                  mail.isRead
                                    ? "text-muted-foreground"
                                    : "text-foreground font-semibold"
                                }`}
                              >
                                {mail.from}
                              </span>
                              <div className="flex items-center gap-2">
                                {mail.hasAttachments && (
                                  <Paperclip className="w-4 h-4 text-gray-400" />
                                )}
                                <span className="text-xs text-muted-foreground">
                                  {formatDate(mail.date)}
                                </span>
                              </div>
                            </div>
                            <h3
                              className={`text-sm mb-1 truncate ${
                                mail.isRead ? "text-foreground" : "text-foreground font-medium"
                              }`}
                            >
                              {mail.subject}
                            </h3>
                            <p className="text-xs text-muted-foreground line-clamp-2">
                              {mail.preview}
                            </p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>

                {/* 페이지네이션 */}
                {totalPages > 1 && (
                  <div className="flex items-center justify-center gap-2 p-4 border-t">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage(1)}
                      disabled={currentPage === 1}
                    >
                      처음
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
                      disabled={currentPage === 1}
                    >
                      이전
                    </Button>
                    
                    <div className="flex items-center gap-1">
                      {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                        let pageNum;
                        if (totalPages <= 5) {
                          pageNum = i + 1;
                        } else if (currentPage <= 3) {
                          pageNum = i + 1;
                        } else if (currentPage >= totalPages - 2) {
                          pageNum = totalPages - 4 + i;
                        } else {
                          pageNum = currentPage - 2 + i;
                        }
                        
                        return (
                          <Button
                            key={pageNum}
                            variant={currentPage === pageNum ? "default" : "outline"}
                            size="sm"
                            onClick={() => setCurrentPage(pageNum)}
                            className="w-8 h-8 p-0"
                          >
                            {pageNum}
                          </Button>
                        );
                      })}
                    </div>

                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
                      disabled={currentPage === totalPages}
                    >
                      다음
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage(totalPages)}
                      disabled={currentPage === totalPages}
                    >
                      마지막
                    </Button>
                  </div>
                )}
              </Card>
            )}
          </div>

          {/* 오른쪽: 메일 상세 패널 */}
          <div className="lg:col-span-1">
            {selectedMailDetail ? (
              <Card className="sticky top-6">
                <CardHeader className="border-b">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-lg">{selectedMailDetail.subject}</CardTitle>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setSelectedMailId("");
                        setSelectedMailDetail(null);
                      }}
                    >
                      ✕
                    </Button>
                  </div>
                  <div className="text-sm text-muted-foreground space-y-1 mt-2">
                    <div className="flex items-center gap-2">
                      <span className="font-medium">보낸 사람:</span>
                      <span>{selectedMailDetail.from}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="font-medium">받는 사람:</span>
                      <span>{selectedMailDetail.to}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="font-medium">날짜:</span>
                      <span>{new Date(selectedMailDetail.date).toLocaleString("ko-KR")}</span>
                    </div>
                  </div>
                  
                  {/* 답장/전달/삭제 버튼 */}
                  <div className="flex gap-2 mt-4">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        // HTML 태그 제거 함수 (강력한 버전)
                        const stripHtml = (html: string) => {
                          if (!html) return "";
                          
                          // 1. DOMPurify로 먼저 정제
                          const cleanHtml = DOMPurify.sanitize(html, { 
                            ALLOWED_TAGS: [], // 모든 태그 제거
                            KEEP_CONTENT: true // 내용만 유지
                          });
                          
                          // 2. DOM으로 텍스트만 추출
                          const tmp = document.createElement("DIV");
                          tmp.innerHTML = cleanHtml;
                          let text = tmp.textContent || tmp.innerText || "";
                          
                          // 3. CSS 스타일 제거 (p{...} 같은 패턴)
                          text = text.replace(/[a-z-]+\{[^}]*\}/gi, '');
                          
                          // 4. 연속된 공백 정리
                          text = text.replace(/\s+/g, ' ').trim();
                          
                          return text;
                        };
                        
                        // console.log('📧 답장 데이터:', {
                        //   htmlBody: selectedMailDetail.htmlBody,
                        //   textBody: selectedMailDetail.textBody,
                        // });
                        
                        // textBody 우선 사용 (순수 텍스트), 없으면 htmlBody에서 추출
                        const bodyText = selectedMailDetail.textBody 
                          || (selectedMailDetail.htmlBody ? stripHtml(selectedMailDetail.htmlBody) : "");
                        
                        // console.log('📧 변환된 본문:', bodyText);
                        
                        const replyData = {
                          originalFrom: selectedMailDetail.from,
                          originalSubject: selectedMailDetail.subject,
                          originalDate: selectedMailDetail.date,
                          originalBody: bodyText,
                        };
                        router.push(
                          `/admin/mail/send?action=reply&data=${encodeURIComponent(JSON.stringify(replyData))}`
                        );
                      }}
                    >
                      <Reply className="w-4 h-4 mr-1" />
                      답장
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        // HTML 태그 제거 함수 (강력한 버전)
                        const stripHtml = (html: string) => {
                          if (!html) return "";
                          
                          // 1. DOMPurify로 먼저 정제
                          const cleanHtml = DOMPurify.sanitize(html, { 
                            ALLOWED_TAGS: [], // 모든 태그 제거
                            KEEP_CONTENT: true // 내용만 유지
                          });
                          
                          // 2. DOM으로 텍스트만 추출
                          const tmp = document.createElement("DIV");
                          tmp.innerHTML = cleanHtml;
                          let text = tmp.textContent || tmp.innerText || "";
                          
                          // 3. CSS 스타일 제거 (p{...} 같은 패턴)
                          text = text.replace(/[a-z-]+\{[^}]*\}/gi, '');
                          
                          // 4. 연속된 공백 정리
                          text = text.replace(/\s+/g, ' ').trim();
                          
                          return text;
                        };
                        
                        // console.log('📧 전달 데이터:', {
                        //   htmlBody: selectedMailDetail.htmlBody,
                        //   textBody: selectedMailDetail.textBody,
                        // });
                        
                        // textBody 우선 사용 (순수 텍스트), 없으면 htmlBody에서 추출
                        const bodyText = selectedMailDetail.textBody 
                          || (selectedMailDetail.htmlBody ? stripHtml(selectedMailDetail.htmlBody) : "");
                        
                        // console.log('📧 변환된 본문:', bodyText);
                        
                        const forwardData = {
                          originalFrom: selectedMailDetail.from,
                          originalSubject: selectedMailDetail.subject,
                          originalDate: selectedMailDetail.date,
                          originalBody: bodyText,
                        };
                        router.push(
                          `/admin/mail/send?action=forward&data=${encodeURIComponent(JSON.stringify(forwardData))}`
                        );
                      }}
                    >
                      <Forward className="w-4 h-4 mr-1" />
                      전달
                    </Button>
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={handleDeleteMail}
                      disabled={deleting}
                    >
                      {deleting ? (
                        <Loader2 className="w-4 h-4 mr-1 animate-spin" />
                      ) : (
                        <Trash2 className="w-4 h-4 mr-1" />
                      )}
                      삭제
                    </Button>
                  </div>
                </CardHeader>
                <CardContent className="p-6 max-h-[calc(100vh-300px)] overflow-y-auto">
                  {/* 첨부파일 */}
                  {selectedMailDetail.attachments && selectedMailDetail.attachments.length > 0 && (
                    <div className="mb-4 p-3 bg-muted rounded-lg">
                      <p className="text-sm font-medium mb-2">첨부파일 ({selectedMailDetail.attachments.length}개)</p>
                      <div className="space-y-1">
                        {selectedMailDetail.attachments.map((att, index) => (
                          <div key={index} className="flex items-center gap-2 text-sm">
                            <Paperclip className="w-4 h-4" />
                            <span>{att.filename}</span>
                            <span className="text-muted-foreground">({(att.size / 1024).toFixed(1)} KB)</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* 메일 본문 */}
                  {selectedMailDetail.htmlBody ? (
                    <div
                      className="prose prose-sm max-w-none"
                      dangerouslySetInnerHTML={{
                        __html: DOMPurify.sanitize(selectedMailDetail.htmlBody),
                      }}
                    />
                  ) : (
                    <div className="whitespace-pre-wrap text-sm">
                      {selectedMailDetail.textBody}
                    </div>
                  )}
                </CardContent>
              </Card>
            ) : loadingDetail ? (
              <Card className="sticky top-6">
                <CardContent className="flex justify-center items-center py-16">
                  <Loader2 className="w-8 h-8 animate-spin text-orange-500" />
                  <span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
                </CardContent>
              </Card>
            ) : (
              <Card className="sticky top-6">
                <CardContent className="flex flex-col justify-center items-center py-16 text-center">
                  <Mail className="w-16 h-16 mb-4 text-gray-300" />
                  <p className="text-muted-foreground">
                    메일을 선택하면 내용이 표시됩니다
                  </p>
                </CardContent>
              </Card>
            )}
          </div>
        </div>

        {/* 안내 정보 */}
        <Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 ">
          <CardHeader>
            <CardTitle className="text-lg flex items-center">
              <CheckCircle className="w-5 h-5 mr-2 text-green-600" />
              메일 수신 기능 완성! 🎉
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-foreground mb-4">
              ✅ 구현 완료된 모든 기능:
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <p className="font-medium text-gray-800 mb-2">📬 기본 기능</p>
                <ul className="space-y-1 text-sm text-muted-foreground">
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>IMAP 프로토콜 메일 수신</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>메일 목록 표시</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>읽음/안읽음 상태</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>첨부파일 유무 표시</span>
                  </li>
                </ul>
              </div>
              <div>
                <p className="font-medium text-gray-800 mb-2">📄 상세보기</p>
                <ul className="space-y-1 text-sm text-muted-foreground">
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>HTML 본문 렌더링</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>텍스트 본문 보기</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>자동 읽음 처리</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>첨부파일 다운로드</span>
                  </li>
                </ul>
              </div>
              <div>
                <p className="font-medium text-gray-800 mb-2">🔍 고급 기능</p>
                <ul className="space-y-1 text-sm text-muted-foreground">
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>통합 검색 (제목/발신자/내용)</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>필터링 (읽음/첨부파일)</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>정렬 (날짜/발신자)</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>자동 새로고침 (30초)</span>
                  </li>
                </ul>
              </div>
              <div>
                <p className="font-medium text-gray-800 mb-2">🔒 보안</p>
                <ul className="space-y-1 text-sm text-muted-foreground">
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>XSS 방지 (DOMPurify)</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>비밀번호 암호화</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>안전한 파일명 생성</span>
                  </li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}