import { calculateSaju } from '@/lib/saju-calculator';
import Link from 'next/link';
import PDFButton from '../components/PDFButton';
import ShareButtons from '../components/ShareButtons';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import { calculateDaeun, getCurrentDaeun, getDaeunDescription } from '@/lib/daeun-calculator';
import { getCurrentSolarTerm, getSolarTermName, getSolarTermMonthBranch } from '@/lib/solar-terms';
import { EARTHLY_BRANCHES_KR, FIVE_ELEMENTS_KR, FIVE_ELEMENTS } from '@/lib/saju-calculator';
import { calculateElementScore, performFullAnalysis } from '@/lib/ai-interpretation';
import AiInterpretationSection from '@/components/AiInterpretationSection';

interface PageProps {
  searchParams: Promise<{
    year: string;
    month: string;
    day: string;
    hour?: string;
    gender: 'male' | 'female';
    calendarType: 'solar' | 'lunar';
    originalYear?: string;
    originalMonth?: string;
    originalDay?: string;
    isLeapMonth?: string;
  }>;
}

export default async function ResultPage({ searchParams }: PageProps) {
  const params = await searchParams;
  const {
    year, month, day, hour, gender, calendarType,
    originalYear, originalMonth, originalDay, isLeapMonth
  } = params;

  const yearNum = parseInt(year);
  const monthNum = parseInt(month);
  const dayNum = parseInt(day);
  const hourNum = hour ? parseInt(hour) : null;

  const inputYear = originalYear ? parseInt(originalYear) : yearNum;
  const inputMonth = originalMonth ? parseInt(originalMonth) : monthNum;
  const inputDay = originalDay ? parseInt(originalDay) : dayNum;
  const isLunar = calendarType === 'lunar';
  const isLeap = isLeapMonth === 'true';

  const sajuData = calculateSaju(yearNum, monthNum, dayNum, hourNum, gender);

  // 절기 정보
  const solarTermIndex = getCurrentSolarTerm(yearNum, monthNum, dayNum);
  const solarTermName = getSolarTermName(solarTermIndex);
  const monthBranchIndex = getSolarTermMonthBranch(yearNum, monthNum, dayNum);
  const monthBranchName = EARTHLY_BRANCHES_KR[monthBranchIndex];

  // 종합 분석 수행
  const analysis = performFullAnalysis(sajuData);
  const elementScores = analysis.elementScores;

  // 대운 계산
  const daeunList = calculateDaeun(
    yearNum, monthNum, dayNum, gender,
    sajuData.month.stem, sajuData.month.branch
  );
  const currentYear = new Date().getFullYear();
  const currentDaeun = getCurrentDaeun(daeunList, currentYear);

  // 오행 색상 매핑 (새 디자인)
  const elementColors: { [key: string]: string } = {
    '木': 'text-green-700', '火': 'text-red-600', '土': 'text-yellow-700',
    '金': 'text-[#d4af37]', '水': 'text-blue-700',
  };
  const elementBgColors: { [key: string]: string } = {
    '木': 'bg-green-50 border-green-400', '火': 'bg-red-50 border-red-400',
    '土': 'bg-yellow-50 border-yellow-400', '金': 'bg-[#F3E7E3] border-[#d4af37]',
    '水': 'bg-blue-50 border-blue-400',
  };

  // 띠 계산
  const zodiacAnimals = ['쥐', '소', '호랑이', '토끼', '용', '뱀', '말', '양', '원숭이', '닭', '개', '돼지'];
  const zodiacIndex = (yearNum - 4) % 12;
  const zodiacAnimal = zodiacAnimals[zodiacIndex >= 0 ? zodiacIndex : zodiacIndex + 12];

  return (
    <div className="min-h-screen bg-[#F3E7E3]">
      <Header />

      {/* 2컬럼 레이아웃 */}
      <div className="container-custom pt-24 pb-12">
        <div className="grid lg:grid-cols-[300px_1fr] gap-8">
          {/* 사이드바 - 입력 정보 */}
          <aside className="lg:sticky lg:top-24 h-fit">
            <div className="glass-panel rounded-2xl p-6 text-white">
              <h2 className="text-xl font-bold mb-6 text-center pb-4 border-b border-white/20">
                기본 정보
              </h2>

              <div className="space-y-4">
                <div>
                  <div className="text-sm text-gray-300 mb-1">생년월일</div>
                  <div className="font-bold">
                    {isLunar ? (
                      <div>
                        <div className="text-lg">음력 {inputYear}.{inputMonth}.{inputDay}</div>
                        {isLeap && <div className="text-xs text-[#d4af37]">(윤달)</div>}
                        <div className="text-xs text-gray-300 mt-1">
                          양력 {yearNum}.{monthNum}.{dayNum}
                        </div>
                      </div>
                    ) : (
                      <div className="text-lg">{yearNum}.{monthNum}.{dayNum}</div>
                    )}
                  </div>
                </div>

                {hourNum !== null && (
                  <div>
                    <div className="text-sm text-gray-300 mb-1">태어난 시간</div>
                    <div className="font-bold text-lg">{hourNum}시</div>
                  </div>
                )}

                <div>
                  <div className="text-sm text-gray-300 mb-1">성별</div>
                  <div className="font-bold text-lg">{gender === 'male' ? '남성' : '여성'}</div>
                </div>

                <div>
                  <div className="text-sm text-gray-300 mb-1">띠</div>
                  <div className="font-bold text-lg">{zodiacAnimal}띠</div>
                </div>

                <div>
                  <div className="text-sm text-gray-300 mb-1">일간</div>
                  <div className="font-bold text-2xl text-[#d4af37]">
                    {sajuData.day.stem} ({sajuData.day.stemKr})
                  </div>
                  <div className="text-sm mt-1">{FIVE_ELEMENTS_KR[sajuData.day.element as keyof typeof FIVE_ELEMENTS_KR]}({sajuData.day.element})</div>
                </div>
              </div>

              {/* 빠른 액션 */}
              <div className="mt-6 pt-6 border-t border-white/20 space-y-3">
                <Link
                  href="/"
                  className="block w-full text-center bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white px-4 py-2 rounded-lg transition-all font-medium text-sm"
                >
                  다시 보기
                </Link>
                <Link
                  href="/compatibility"
                  className="block w-full text-center bg-[#d4af37] hover:bg-[#F3E7E3] text-[#173658] px-4 py-2 rounded-lg transition-all font-medium text-sm"
                >
                  궁합 확인
                </Link>
              </div>
            </div>
          </aside>

          {/* 메인 콘텐츠 */}
          <main id="pdf-content">
            {/* 페이지 헤더 */}
            <div className="text-center mb-8">
              <h1 className="text-3xl md:text-4xl font-bold text-[#173658] mb-3">
                사주팔자 감정서
              </h1>
              <p className="text-[#5d6d7e]">
                전통 명리학과 AI 기술의 만남
              </p>
            </div>

            {/* 사주팔자 표 */}
            <div className="glass-panel-light rounded-2xl p-6 md:p-8 mb-6">
              <h2 className="text-2xl font-bold text-[#173658] mb-6 text-center">사주팔자 (四柱八字)</h2>

              <div className="overflow-x-auto">
                <table className="w-full border-collapse">
                  <thead>
                    <tr className="bg-[#173658] text-white">
                      <th className="py-3 px-4 text-center font-bold">구분</th>
                      {sajuData.hour && <th className="py-3 px-4 text-center font-bold">시주</th>}
                      <th className="py-3 px-4 text-center font-bold">일주</th>
                      <th className="py-3 px-4 text-center font-bold">월주</th>
                      <th className="py-3 px-4 text-center font-bold">년주</th>
                    </tr>
                  </thead>
                  <tbody>
                    {/* 천간 */}
                    <tr className="border-b border-gray-200">
                      <td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">천간</td>
                      {sajuData.hour && (
                        <td className="py-3 px-4 text-center">
                          <div className="text-2xl font-bold text-[#173658]">{sajuData.hour.stem}</div>
                          <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.hour.stemKr}</div>
                        </td>
                      )}
                      <td className="py-3 px-4 text-center bg-[#d4af37]/10">
                        <div className="text-2xl font-bold text-[#173658]">{sajuData.day.stem}</div>
                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.day.stemKr}</div>
                        <div className="text-xs text-[#d4af37] font-bold mt-1">일간</div>
                      </td>
                      <td className="py-3 px-4 text-center">
                        <div className="text-2xl font-bold text-[#173658]">{sajuData.month.stem}</div>
                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.month.stemKr}</div>
                      </td>
                      <td className="py-3 px-4 text-center">
                        <div className="text-2xl font-bold text-[#173658]">{sajuData.year.stem}</div>
                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.year.stemKr}</div>
                      </td>
                    </tr>

                    {/* 지지 */}
                    <tr className="border-b border-gray-200">
                      <td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">지지</td>
                      {sajuData.hour && (
                        <td className="py-3 px-4 text-center">
                          <div className="text-2xl font-bold text-[#173658]">{sajuData.hour.branch}</div>
                          <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.hour.branchKr}</div>
                        </td>
                      )}
                      <td className="py-3 px-4 text-center bg-[#d4af37]/10">
                        <div className="text-2xl font-bold text-[#173658]">{sajuData.day.branch}</div>
                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.day.branchKr}</div>
                      </td>
                      <td className="py-3 px-4 text-center">
                        <div className="text-2xl font-bold text-[#173658]">{sajuData.month.branch}</div>
                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.month.branchKr}</div>
                      </td>
                      <td className="py-3 px-4 text-center">
                        <div className="text-2xl font-bold text-[#173658]">{sajuData.year.branch}</div>
                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.year.branchKr}</div>
                      </td>
                    </tr>

                    {/* 지장간 */}
                    <tr className="border-b border-gray-200">
                      <td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">
                        <div>지장간</div>
                        <div className="text-xs text-[#5d6d7e] font-normal">숨은 천간</div>
                      </td>
                      {(() => {
                        const pillars = sajuData.hour
                          ? [analysis.hiddenStems.find(h => h.pillar === '시주'), analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')]
                          : [analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')];
                        return pillars.map((h, idx) => (
                          <td key={idx} className={`py-2 px-2 text-center ${h?.pillar === '일주' ? 'bg-[#d4af37]/10' : ''}`}>
                            {h && (
                              <div className="flex flex-wrap justify-center gap-1">
                                {h.stems.map((s, si) => (
                                  <span
                                    key={si}
                                    className={`inline-block px-2 py-0.5 rounded text-xs font-semibold border ${elementBgColors[s.element] || 'bg-gray-100'}`}
                                    title={s.role}
                                  >
                                    {s.stemKr}
                                  </span>
                                ))}
                              </div>
                            )}
                          </td>
                        ));
                      })()}
                    </tr>

                    {/* 십성 */}
                    <tr className="border-b border-gray-200">
                      <td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">십성</td>
                      {sajuData.hour && (
                        <td className="py-3 px-4 text-center">
                          <div className="text-sm font-bold text-[#173658]">{sajuData.hour.tenGod}</div>
                        </td>
                      )}
                      <td className="py-3 px-4 text-center bg-[#d4af37]/10">
                        <div className="text-sm font-bold text-[#173658]">{sajuData.day.tenGod}</div>
                      </td>
                      <td className="py-3 px-4 text-center">
                        <div className="text-sm font-bold text-[#173658]">{sajuData.month.tenGod}</div>
                      </td>
                      <td className="py-3 px-4 text-center">
                        <div className="text-sm font-bold text-[#173658]">{sajuData.year.tenGod}</div>
                      </td>
                    </tr>

                    {/* 십이운성 */}
                    <tr>
                      <td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">십이운성</td>
                      {sajuData.hour && (
                        <td className="py-3 px-4 text-center">
                          <div className="text-sm font-bold text-[#173658]">{sajuData.hour.fortune}</div>
                        </td>
                      )}
                      <td className="py-3 px-4 text-center bg-[#d4af37]/10">
                        <div className="text-sm font-bold text-[#173658]">{sajuData.day.fortune}</div>
                      </td>
                      <td className="py-3 px-4 text-center">
                        <div className="text-sm font-bold text-[#173658]">{sajuData.month.fortune}</div>
                      </td>
                      <td className="py-3 px-4 text-center">
                        <div className="text-sm font-bold text-[#173658]">{sajuData.year.fortune}</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              {/* 지지 상호작용 */}
              {analysis.branchInteractions.length > 0 && (
                <div className="mt-6 pt-6 border-t border-[#173658]/10">
                  <h3 className="text-base font-bold text-[#173658] mb-3 text-center">
                    지지 상호작용
                  </h3>
                  <div className="flex flex-wrap justify-center gap-2">
                    {analysis.branchInteractions.map((inter, idx) => {
                      const isPositive = inter.type.includes('합');
                      const isNegative = inter.type.includes('충') || inter.type.includes('형');
                      const colorClass = isPositive
                        ? 'bg-emerald-50 border-emerald-400 text-emerald-800'
                        : isNegative
                          ? 'bg-red-50 border-red-400 text-red-800'
                          : 'bg-amber-50 border-amber-400 text-amber-800';
                      return (
                        <span key={idx} className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold border ${colorClass}`}>
                          {inter.type} {inter.branchesKr.join('')}
                          {inter.resultElement && ` → ${FIVE_ELEMENTS_KR[inter.resultElement as keyof typeof FIVE_ELEMENTS_KR]}`}
                        </span>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* 오행 균형 */}
              <div className="mt-6 pt-6 border-t border-[#173658]/10">
                <h3 className="text-base font-bold text-[#173658] mb-4 text-center">
                  오행 균형
                </h3>
                <div className="grid grid-cols-5 gap-2">
                  {Object.entries(elementScores).map(([element, score]) => (
                    <div key={element} className="text-center">
                      <div className={`text-xl font-bold mb-1 ${elementColors[element] || ''}`}>{element}</div>
                      <div className="text-xs text-[#5d6d7e] mb-2">
                        {FIVE_ELEMENTS_KR[element as keyof typeof FIVE_ELEMENTS_KR]}
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2 mb-1">
                        <div
                          className={`h-2 rounded-full transition-all ${element === sajuData.day.element
                            ? 'bg-gradient-to-r from-[#173658] to-[#d4af37]'
                            : 'bg-gray-400'
                            }`}
                          style={{ width: `${Math.max(score, 5)}%` }}
                        ></div>
                      </div>
                      <div className="text-xs font-bold text-[#173658]">{score}%</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* 분석 카드 그리드 */}
            <div className="grid md:grid-cols-2 gap-6 mb-6">
              {/* 신강/신약 + 용신 카드 */}
              <div className="glass-panel-light rounded-2xl p-6">
                <h3 className="text-xl font-bold text-[#173658] mb-4">
                  일간 세력 분석
                </h3>
                <div className="flex items-center gap-3 mb-4">
                  <span className={`inline-block px-4 py-2 rounded-xl text-base font-bold ${
                    analysis.dayMasterStrength.result === '신강'
                      ? 'bg-red-100 text-red-700 border-2 border-red-400'
                      : analysis.dayMasterStrength.result === '신약'
                        ? 'bg-blue-100 text-blue-700 border-2 border-blue-400'
                        : 'bg-green-100 text-green-700 border-2 border-green-400'
                  }`}>
                    {analysis.dayMasterStrength.result}
                  </span>
                  <span className="text-[#5d6d7e] text-sm">점수: {analysis.dayMasterStrength.score}</span>
                </div>
                <ul className="space-y-1 text-sm text-[#5d6d7e] mb-6">
                  {analysis.dayMasterStrength.reasons.map((r, i) => (
                    <li key={i} className="flex items-start">
                      <span className="text-[#d4af37] mr-2">-</span>
                      <span>{r}</span>
                    </li>
                  ))}
                </ul>

                <div className="border-t border-[#173658]/10 pt-4">
                  <h4 className="font-bold text-[#173658] mb-3">용신 / 희신 / 기신</h4>
                  <div className="flex flex-wrap gap-2 mb-3">
                    <span className={`px-3 py-1.5 rounded-lg text-xs font-bold border ${elementBgColors[analysis.yongShin.yongShin] || 'bg-gray-100'}`}>
                      용신: {analysis.yongShin.yongShinKr}
                    </span>
                    <span className={`px-3 py-1.5 rounded-lg text-xs font-bold border ${elementBgColors[analysis.yongShin.heeShin] || 'bg-gray-100'}`}>
                      희신: {analysis.yongShin.heeShinKr}
                    </span>
                    <span className="px-3 py-1.5 rounded-lg text-xs font-bold bg-gray-200 border border-gray-400 text-gray-700">
                      기신: {analysis.yongShin.giShinKr}
                    </span>
                  </div>
                  <p className="text-sm text-[#5d6d7e] leading-relaxed">{analysis.yongShin.explanation}</p>
                </div>
              </div>

              {/* 신살 + 공망 카드 */}
              <div className="glass-panel-light rounded-2xl p-6">
                <h3 className="text-xl font-bold text-[#173658] mb-4">
                  신살 (神煞)
                </h3>
                {analysis.shinsal.length > 0 ? (
                  <div className="space-y-2 mb-6">
                    {analysis.shinsal.map((s, i) => (
                      <div key={i} className="flex items-start gap-2 p-3 rounded-xl bg-[#F3E7E3]">
                        <span className="inline-block px-2 py-1 bg-[#173658] text-white rounded-lg text-xs font-bold whitespace-nowrap">
                          {s.name}
                        </span>
                        <div>
                          <div className="text-sm font-semibold text-[#173658]">
                            {s.pillar} {s.branchKr}
                          </div>
                          <div className="text-xs text-[#5d6d7e] mt-0.5">{s.description}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-[#5d6d7e] text-sm mb-6">특별한 신살이 발견되지 않았습니다.</p>
                )}

                <div className="border-t border-[#173658]/10 pt-4">
                  <h4 className="font-bold text-[#173658] mb-2">공망 (空亡)</h4>
                  <div className="flex gap-2 mb-2">
                    {analysis.gongmang.branchesKr.map((bk, i) => (
                      <span key={i} className="px-3 py-1.5 bg-[#173658] text-white rounded-lg text-sm font-bold">
                        {bk}
                      </span>
                    ))}
                  </div>
                  <p className="text-xs text-[#5d6d7e] leading-relaxed">{analysis.gongmang.description}</p>
                </div>

                {/* 세운 정보 */}
                <div className="border-t border-[#173658]/10 pt-4 mt-4">
                  <h4 className="font-bold text-[#173658] mb-2">
                    {analysis.seun.year}년 세운
                  </h4>
                  <div className="flex items-center gap-2 mb-2">
                    <span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.seun.element] || 'bg-gray-100'}`}>
                      {analysis.seun.stemKr}{analysis.seun.branchKr}
                    </span>
                    <span className="text-sm text-[#5d6d7e]">{analysis.seun.elementKr} 기운</span>
                  </div>
                  {analysis.seun.interactions.length > 0 && (
                    <div className="flex flex-wrap gap-1.5 mt-2">
                      {analysis.seun.interactions.map((si, i) => (
                        <span key={i} className={`text-xs px-2 py-1 rounded-full font-semibold ${
                          si.type.includes('합') ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'
                        }`}>
                          {si.type} {si.branchesKr.join('')}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* AI 상세 해석 */}
            <AiInterpretationSection sajuData={sajuData} currentDaeun={currentDaeun} daeunList={daeunList} />

            {/* 대운 (大運) */}
            <div className="glass-panel-light rounded-2xl p-6 md:p-8 mb-6">
              <h2 className="text-2xl font-bold text-[#173658] mb-6 text-center">
                대운 (大運) - 10년 주기 운세
              </h2>

              {currentDaeun && (
                <div className="bg-gradient-to-r from-[#173658] to-[#1e426a] rounded-2xl p-6 mb-6 text-white">
                  <h3 className="text-xl font-bold mb-4 text-center">현재 대운</h3>
                  <div className="text-center mb-4">
                    <div className="text-4xl font-bold mb-2">
                      {currentDaeun.stem}{currentDaeun.branch}
                    </div>
                    <div className="text-lg mb-2">
                      {currentDaeun.stemKr}{currentDaeun.branchKr}
                    </div>
                    <div className="text-base opacity-90">
                      {currentDaeun.age}세 ~ {currentDaeun.age + 9}세 ({currentDaeun.startYear}년 ~ {currentDaeun.endYear}년)
                    </div>
                  </div>
                  <p className="text-center leading-relaxed text-sm">
                    {getDaeunDescription(currentDaeun, sajuData.day.stem)}
                  </p>
                </div>
              )}

              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
                {daeunList.map((daeun, index) => {
                  const isCurrent = currentDaeun &&
                    daeun.startYear === currentDaeun.startYear &&
                    daeun.endYear === currentDaeun.endYear;

                  return (
                    <div
                      key={index}
                      className={`rounded-xl p-4 border-2 transition ${isCurrent
                        ? 'bg-[#d4af37]/20 border-[#d4af37]'
                        : 'bg-white border-[#173658]/20'
                        }`}
                    >
                      <div className="text-center">
                        <div className="text-2xl font-bold text-[#173658] mb-1">
                          {daeun.stem}{daeun.branch}
                        </div>
                        <div className="text-sm text-[#5d6d7e] mb-2">
                          {daeun.stemKr}{daeun.branchKr}
                        </div>
                        <div className="text-xs text-[#5d6d7e]">
                          {daeun.age}세 ~ {daeun.age + 9}세
                        </div>
                        <div className="text-xs text-[#5d6d7e]">
                          {daeun.startYear} ~ {daeun.endYear}
                        </div>
                        {isCurrent && (
                          <div className="mt-2">
                            <span className="inline-block bg-[#173658] text-white text-xs px-3 py-1 rounded-full font-semibold">
                              현재
                            </span>
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* 추가 기능 버튼 */}
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
              <Link
                href={`/fortune?${new URLSearchParams(params as any).toString()}`}
                className="glass-panel-light rounded-xl p-6 card-hover text-center"
              >
                <div className="text-3xl mb-3">🌟</div>
                <h3 className="text-lg font-bold text-[#173658] mb-1">오늘의 운세</h3>
                <p className="text-[#5d6d7e] text-sm">오늘의 운을 확인하기</p>
              </Link>

              <Link
                href="/compatibility"
                className="glass-panel-light rounded-xl p-6 card-hover text-center"
              >
                <div className="text-3xl mb-3">💕</div>
                <h3 className="text-lg font-bold text-[#173658] mb-1">궁합 보기</h3>
                <p className="text-[#5d6d7e] text-sm">두 사람의 궁합 확인</p>
              </Link>

              <PDFButton
                elementId="pdf-content"
                filename={`사주팔자_${yearNum}${monthNum}${dayNum}.pdf`}
                buttonText="PDF 저장"
              />

              <ShareButtons
                title={`내 사주팔자 - ${yearNum}년생 ${gender === 'male' ? '남성' : '여성'}`}
                description={`일간: ${sajuData.day.stem}(${sajuData.day.stemKr}) | ${sajuData.day.element}`}
              />
            </div>
          </main>
        </div>
      </div>

      <Footer />
    </div>
  );
}