import Link from 'next/link';
import { calculateSaju, FIVE_ELEMENTS } from '@/lib/saju-calculator';
import PDFButton from '../../components/PDFButton';
import ShareButtons from '../../components/ShareButtons';
import CompatibilityDetailUnlock from './CompatibilityDetailUnlock';

interface PageProps {
  searchParams: Promise<{
    year1: string;
    month1: string;
    day1: string;
    hour1?: string;
    gender1: 'male' | 'female';
    year2: string;
    month2: string;
    day2: string;
    hour2?: string;
    gender2: 'male' | 'female';
  }>;
}

// 오행 한글 매핑
const elementKrMap: Record<string, string> = {
  '木': '목', '火': '화', '土': '토', '金': '금', '水': '수'
};

// Deterministic hash for seeded score variation
function seededOffset(seed: string, index: number): number {
  let hash = 0;
  const str = seed + index.toString();
  for (let i = 0; i < str.length; i++) {
    hash = ((hash << 5) - hash) + str.charCodeAt(i);
    hash |= 0;
  }
  return ((hash % 11) - 5); // -5 ~ +5
}

// 오행 관계 타입 판별
type ElementRelation = 'same' | 'produce' | 'produced' | 'overcome' | 'overcomed';

function getElementRelation(el1: string, el2: string): ElementRelation {
  const produceMap: Record<string, string> = {
    '木': '火', '火': '土', '土': '金', '金': '水', '水': '木'
  };
  if (el1 === el2) return 'same';
  if (produceMap[el1] === el2) return 'produce';
  if (produceMap[el2] === el1) return 'produced';
  const overcomeMap: Record<string, string> = {
    '木': '土', '火': '金', '土': '水', '金': '木', '水': '火'
  };
  if (overcomeMap[el1] === el2) return 'overcome';
  return 'overcomed';
}

// 지지 관계 판별
function getBranchRelation(b1: string, b2: string): { sixHarmony: boolean; threeHarmony: boolean; conflict: boolean } {
  const sixHarmony: Record<string, string> = {
    '子': '丑', '丑': '子', '寅': '亥', '亥': '寅',
    '卯': '戌', '戌': '卯', '辰': '酉', '酉': '辰',
    '巳': '申', '申': '巳', '午': '未', '未': '午'
  };
  const threeHarmonyGroups = [
    ['申', '子', '辰'], ['寅', '午', '戌'],
    ['亥', '卯', '未'], ['巳', '酉', '丑']
  ];
  const conflictMap: Record<string, string> = {
    '子': '午', '午': '子', '丑': '未', '未': '丑',
    '寅': '申', '申': '寅', '卯': '酉', '酉': '卯',
    '辰': '戌', '戌': '辰', '巳': '亥', '亥': '巳'
  };

  const isThreeHarmony = threeHarmonyGroups.some(g => g.includes(b1) && g.includes(b2));
  return {
    sixHarmony: sixHarmony[b1] === b2,
    threeHarmony: isThreeHarmony,
    conflict: conflictMap[b1] === b2,
  };
}

// 오행 관계별 상세 해석
function getElementInterpretation(el1: string, el2: string, relation: ElementRelation) {
  const el1Kr = elementKrMap[el1];
  const el2Kr = elementKrMap[el2];

  const interpretations: Record<string, { pros: string[]; cons: string[]; advice: string }> = {
    // 상생: el1이 el2를 생함
    '木_火': {
      pros: [
        `${el1Kr}(나무)이 ${el2Kr}(불)을 키워주는 관계예요. 한 분이 자연스럽게 상대방에게 에너지를 전해주거든요.`,
        '성장을 응원하고 지지해주는 따뜻한 관계가 될 수 있어요.',
        '서로의 열정을 자극해서 함께 발전해 나갈 수 있는 좋은 조합이에요.',
        '함께 있으면 자연스럽게 활력이 넘치고, 창의적인 아이디어가 샘솟을 거예요.',
      ],
      cons: [
        '한쪽이 너무 많이 희생하면 에너지가 소진될 수 있어요. 균형이 중요해요.',
        '불꽃처럼 열정적인 만큼 감정 기복이 클 수 있으니 차분한 대화가 필요해요.',
        '서로에 대한 기대가 커질 수 있어서, 적절한 거리감을 유지하는 것도 좋아요.',
      ],
      advice: '서로의 에너지를 아낌없이 주되, 자기 자신도 잘 챙기는 게 이 관계의 핵심이에요.',
    },
    '火_土': {
      pros: [
        `${el1Kr}(불)이 ${el2Kr}(흙)을 따뜻하게 만들어주는 관계예요. 서로에게 안정감을 줄 수 있거든요.`,
        '열정과 안정이 조화를 이루어 실질적인 성과를 만들어낼 수 있어요.',
        '서로 다른 강점을 가지고 있어서 팀워크가 좋은 편이에요.',
        '어려운 순간에도 든든하게 의지할 수 있는 관계가 될 거예요.',
      ],
      cons: [
        '급한 성격과 느긋한 성격이 부딪힐 수 있어요. 템포를 맞추는 연습이 필요해요.',
        '때로는 답답함을 느낄 수 있지만, 그만큼 서로를 보완해주는 관계이기도 해요.',
        '가끔은 서로의 속도 차이를 인정하고 기다려주는 여유가 필요하답니다.',
      ],
      advice: '서로의 리듬을 존중하면서 함께 걸어가면, 오래오래 행복한 관계가 될 거예요.',
    },
    '土_金': {
      pros: [
        `${el1Kr}(흙)이 ${el2Kr}(쇠)를 품고 있는 관계예요. 안정 속에서 가치를 만들어내는 조합이에요.`,
        '현실적이고 실용적인 면에서 잘 맞아서 함께 무언가를 이뤄내기 좋아요.',
        '서로를 단단하게 만들어주는 든든한 파트너가 될 수 있어요.',
        '물질적으로나 정서적으로 안정감 있는 관계를 만들어갈 수 있답니다.',
      ],
      cons: [
        '둘 다 고집이 있을 수 있어서 의견 충돌 시 양보하는 연습이 필요해요.',
        '너무 현실적인 면만 추구하다 보면 로맨스가 부족해질 수 있어요.',
        '변화를 두려워하기보다 함께 새로운 시도를 해보는 것도 좋겠어요.',
      ],
      advice: '안정감 위에 가끔 달콤한 서프라이즈를 더하면 완벽한 관계가 될 거예요.',
    },
    '金_水': {
      pros: [
        `${el1Kr}(쇠)이 ${el2Kr}(물)을 만들어내는 관계예요. 깊은 지혜와 감성이 만나는 조합이에요.`,
        '서로의 내면을 잘 이해하고, 깊은 대화를 나눌 수 있는 사이가 될 거예요.',
        '원칙과 유연함이 조화를 이루어 균형 잡힌 관계를 만들 수 있어요.',
        '서로에게 영감을 주고 정서적으로 풍요로운 관계가 될 수 있답니다.',
      ],
      cons: [
        '감정 표현 방식이 다를 수 있어요. 직접적으로 마음을 표현하는 연습을 해보세요.',
        '때로는 너무 이성적이거나 너무 감성적인 면이 부딪힐 수 있어요.',
        '서로의 감정 표현 스타일을 이해하고 존중하는 것이 중요해요.',
      ],
      advice: '머리와 가슴의 균형, 이성과 감성의 조화가 이 관계의 매력 포인트예요.',
    },
    '水_木': {
      pros: [
        `${el2Kr}(물)이 ${el1Kr}(나무)를 키워주는 관계예요. 성장과 발전의 에너지가 넘치는 조합이에요.`,
        '새로운 것을 시작하고 함께 성장해 나가기에 최적의 파트너예요.',
        '서로에게 자양분이 되어 끊임없이 발전하는 관계가 될 수 있어요.',
        '자유롭고 창의적인 에너지가 넘쳐서 함께하면 즐거울 거예요.',
      ],
      cons: [
        '방향성 없이 흘러갈 수 있으니 함께 목표를 세우는 것이 중요해요.',
        '너무 자유로운 성향이 겹치면 책임감이 부족해질 수 있어요.',
        '각자의 공간을 존중하되, 함께하는 시간도 소중히 여기세요.',
      ],
      advice: '함께 성장하는 기쁨을 느끼면서, 때로는 뿌리를 내리는 안정감도 챙겨보세요.',
    },
    // 동일 오행
    'same': {
      pros: [
        '같은 오행이라 기본적인 가치관과 성향이 비슷해요. 서로를 이해하기 쉬운 관계거든요.',
        '말하지 않아도 통하는 부분이 많아서 편안한 관계를 유지할 수 있어요.',
        '취미나 관심사가 비슷해서 함께 즐길 거리가 많을 거예요.',
        '서로의 마음을 직감적으로 알아차릴 수 있는 특별한 케미가 있어요.',
      ],
      cons: [
        '너무 비슷해서 오히려 새로운 자극이 부족할 수 있어요.',
        '같은 약점을 공유하기 때문에 함께 빠질 수 있는 함정이 있어요.',
        '때로는 의도적으로 다른 관점을 찾아보는 노력이 필요해요.',
      ],
      advice: '닮은 점을 즐기되, 각자만의 개성과 차이도 만들어가면 더 풍성한 관계가 될 거예요.',
    },
    // 상극
    '木_土': {
      pros: [
        '긴장감이 있지만 그만큼 서로에게 강한 끌림을 느낄 수 있는 관계예요.',
        '서로 다른 관점을 가지고 있어서 새로운 시각을 배울 수 있어요.',
        '도전적인 관계이지만 극복할수록 더 단단해지는 사이가 될 거예요.',
      ],
      cons: [
        `${el1Kr}(나무)이 ${el2Kr}(흙)을 극하는 관계라 의견 충돌이 생기기 쉬워요.`,
        '주도권 다툼이 일어날 수 있으니 서로 양보하는 자세가 중요해요.',
        '상대방을 변화시키려 하기보다 있는 그대로 받아들이는 연습을 해보세요.',
        '감정이 격해질 때는 일단 한 발 물러서서 냉각 시간을 갖는 것이 좋아요.',
      ],
      advice: '부딪히는 만큼 성장할 수 있는 관계예요. 서로를 가르치려 하지 말고 배우려는 마음이 중요해요.',
    },
    '火_金': {
      pros: [
        '강렬한 에너지가 만나는 관계라 서로에게 깊은 인상을 남길 수 있어요.',
        '서로의 강한 면을 인정하고 존중할 수 있다면 최강의 파트너가 될 수 있어요.',
        '갈등을 극복한 뒤에는 누구보다 단단한 신뢰가 생기는 관계예요.',
      ],
      cons: [
        `${el1Kr}(불)이 ${el2Kr}(쇠)를 녹이는 관계라 갈등이 뜨거울 수 있어요.`,
        '둘 다 자존심이 강해서 먼저 사과하기 어려울 수 있어요.',
        '감정적으로 상처를 주기 쉬우니 말 한마디 한마디를 신중하게 하세요.',
        '서로의 영역을 존중하고 간섭을 줄이는 것이 관계 유지의 비결이에요.',
      ],
      advice: '불꽃이 튀는 관계이지만, 그 열기를 잘 다스리면 누구보다 강한 유대감을 만들 수 있어요.',
    },
    '土_水': {
      pros: [
        '서로 다른 성향이지만, 그래서 오히려 배울 점이 많은 관계예요.',
        '현실적인 면과 유연한 면이 만나 균형을 찾을 수 있는 조합이에요.',
        '서로의 부족한 점을 채워줄 수 있는 잠재력이 있는 관계거든요.',
      ],
      cons: [
        `${el1Kr}(흙)이 ${el2Kr}(물)을 막는 관계라 소통에 장벽이 생기기 쉬워요.`,
        '고집과 유연함이 부딪히면서 답답함을 느낄 수 있어요.',
        '서로의 방식을 존중하고, 중간 지점을 찾으려는 노력이 필요해요.',
        '대화가 막힐 때는 글이나 편지로 마음을 전하는 것도 좋은 방법이에요.',
      ],
      advice: '서로의 차이를 인정하고 존중하는 것이 이 관계의 가장 큰 과제이자 선물이에요.',
    },
    '金_木': {
      pros: [
        '서로에게 자극을 주는 관계라 성장의 계기가 될 수 있어요.',
        '갈등을 잘 해결하면 오히려 더 깊은 이해와 공감이 생기는 사이예요.',
        '상대방을 통해 자신의 새로운 면을 발견할 수 있는 관계거든요.',
      ],
      cons: [
        `${el1Kr}(쇠)이 ${el2Kr}(나무)를 자르는 관계라 비판적인 면이 나올 수 있어요.`,
        '상대방의 약점을 지적하기보다 장점을 칭찬하는 습관을 들여보세요.',
        '서로를 통제하려 하면 관계가 힘들어질 수 있으니 자유를 존중해주세요.',
        '작은 것부터 서로 칭찬하고 감사하는 연습을 해보면 관계가 훨씬 좋아질 거예요.',
      ],
      advice: '날카로운 면이 있지만, 서로를 다듬어가는 과정에서 보석 같은 관계가 될 수 있어요.',
    },
    '水_火': {
      pros: [
        '상반된 에너지가 만나서 강한 끌림을 느낄 수 있는 관계예요.',
        '열정과 차분함이 만나 독특한 균형을 이룰 수 있는 조합이에요.',
        '서로에게서 완전히 새로운 세계를 경험할 수 있는 흥미로운 관계거든요.',
      ],
      cons: [
        `${el1Kr}(물)이 ${el2Kr}(불)을 끄는 관계라 서로의 열정을 꺾을 수 있어요.`,
        '한쪽이 너무 뜨겁고 한쪽이 너무 차가우면 갈등이 생기기 쉬워요.',
        '감정의 온도차를 줄이기 위해 서로의 감정을 자주 확인하는 것이 중요해요.',
        '큰 결정은 충분히 대화한 뒤에 함께 내리는 것이 좋아요.',
      ],
      advice: '물과 불이 만나면 증기가 되듯, 서로의 에너지를 잘 합치면 엄청난 힘을 발휘할 수 있어요.',
    },
  };

  // 상생 관계 매핑
  if (relation === 'produce') {
    return interpretations[`${el1}_${produceTarget(el1)}`] || interpretations['same'];
  }
  if (relation === 'produced') {
    return interpretations[`${el2}_${produceTarget(el2)}`] || interpretations['same'];
  }
  if (relation === 'same') {
    return interpretations['same'];
  }
  // 상극
  const key = `${el1}_${overcomeTarget(el1)}`;
  if (interpretations[key]) return interpretations[key];
  const reverseKey = `${el2}_${overcomeTarget(el2)}`;
  if (interpretations[reverseKey]) return interpretations[reverseKey];
  return interpretations['same'];
}

function produceTarget(el: string): string {
  const map: Record<string, string> = { '木': '火', '火': '土', '土': '金', '金': '水', '水': '木' };
  return map[el] || '';
}

function overcomeTarget(el: string): string {
  const map: Record<string, string> = { '木': '土', '火': '金', '土': '水', '金': '木', '水': '火' };
  return map[el] || '';
}

// 지지 관계 추가 해석
function getBranchInterpretation(branchRel: { sixHarmony: boolean; threeHarmony: boolean; conflict: boolean }) {
  const extraPros: string[] = [];
  const extraCons: string[] = [];

  if (branchRel.sixHarmony) {
    extraPros.push('두 분의 일지가 육합(六合) 관계예요! 천생연분이라고 할 만큼 자연스럽게 잘 맞는 조합이에요.');
    extraPros.push('만나면 왠지 편안하고 마음이 통하는 느낌을 받으실 거예요.');
  }
  if (branchRel.threeHarmony) {
    extraPros.push('일지가 삼합(三合)에 속해 있어요. 함께 있으면 시너지가 나는 좋은 궁합이에요.');
  }
  if (branchRel.conflict) {
    extraCons.push('일지가 충(沖) 관계에 있어요. 처음에는 강하게 끌리지만, 갈등도 생기기 쉬운 조합이에요.');
    extraCons.push('충 관계는 변화와 자극이 많아서, 서로 인내하고 이해하려는 노력이 꼭 필요해요.');
  }

  return { extraPros, extraCons };
}

// 세부 항목별 한 줄 해석
function getDetailedComment(category: string, score: number): string {
  if (category === '연애운') {
    if (score >= 80) return '함께하면 설렘이 끊이지 않는 로맨틱한 관계가 될 거예요.';
    if (score >= 65) return '서로에게 좋은 감정을 느끼며 자연스럽게 가까워질 수 있어요.';
    return '처음에는 어색할 수 있지만, 시간이 지나면 깊은 정이 쌓일 거예요.';
  }
  if (category === '결혼운') {
    if (score >= 80) return '결혼 후에도 서로를 존중하며 행복한 가정을 꾸릴 수 있어요.';
    if (score >= 65) return '일상의 소소한 행복을 함께 나누며 안정적인 결혼생활이 가능해요.';
    return '결혼생활에서는 서로의 역할 분담과 소통이 특히 중요한 커플이에요.';
  }
  if (category === '금전운') {
    if (score >= 80) return '함께 재물을 모으고 불리는 데 시너지가 나는 조합이에요.';
    if (score >= 65) return '경제적으로 안정적인 파트너십을 만들어갈 수 있어요.';
    return '금전 문제에 대해 미리 충분히 대화하고 합의하는 것이 중요해요.';
  }
  // 사업운
  if (score >= 80) return '비즈니스 파트너로도 훌륭한 조합이에요. 함께하면 성공 가능성이 높아요.';
  if (score >= 65) return '각자의 강점을 살려 역할을 나누면 좋은 결과를 만들 수 있어요.';
  return '사업적으로는 신중한 접근이 필요해요. 역할과 책임을 명확히 하세요.';
}

export default async function CompatibilityResultPage({ searchParams }: PageProps) {
  const params = await searchParams;
  const { year1, month1, day1, hour1, gender1, year2, month2, day2, hour2, gender2 } = params;

  const saju1 = calculateSaju(parseInt(year1), parseInt(month1), parseInt(day1), hour1 ? parseInt(hour1) : null, gender1);
  const saju2 = calculateSaju(parseInt(year2), parseInt(month2), parseInt(day2), hour2 ? parseInt(hour2) : null, gender2);

  const element1 = saju1.day.element;
  const element2 = saju2.day.element;
  const branch1 = saju1.day.branch;
  const branch2 = saju2.day.branch;

  const elementRelation = getElementRelation(element1, element2);
  const branchRel = getBranchRelation(branch1, branch2);

  // 궁합 점수 계산
  const calculateCompatibility = () => {
    let score = 50;
    if (element1 === element2) score += 10;
    else if (elementRelation === 'produce' || elementRelation === 'produced') score += 25;
    else score -= 10; // overcome/overcomed

    if (branchRel.sixHarmony) score += 20;
    if (branchRel.threeHarmony) score += 15;
    if (branchRel.conflict) score -= 20;

    return Math.min(100, Math.max(0, score));
  };

  const compatibilityScore = calculateCompatibility();

  const getScoreGrade = (score: number): string => {
    if (score >= 90) return 'S';
    if (score >= 80) return 'A';
    if (score >= 70) return 'B';
    if (score >= 60) return 'C';
    return 'D';
  };

  const getScoreText = (score: number): string => {
    if (score >= 90) return '천생연분';
    if (score >= 80) return '매우 좋음';
    if (score >= 70) return '좋음';
    if (score >= 60) return '보통';
    return '주의 필요';
  };

  const getScoreColor = (score: number): string => {
    if (score >= 90) return 'from-pink-500 to-red-500';
    if (score >= 80) return 'from-pink-400 to-purple-400';
    if (score >= 70) return 'from-purple-400 to-indigo-400';
    if (score >= 60) return 'from-indigo-400 to-blue-400';
    return 'from-gray-400 to-gray-500';
  };

  // Deterministic seed for detailed scores
  const seed = `${year1}${month1}${day1}${year2}${month2}${day2}`;
  const detailedScores = [
    { name: '연애운', score: compatibilityScore + seededOffset(seed, 1), icon: '💑' },
    { name: '결혼운', score: compatibilityScore + seededOffset(seed, 2), icon: '💍' },
    { name: '금전운', score: compatibilityScore + seededOffset(seed, 3), icon: '💰' },
    { name: '사업운', score: compatibilityScore + seededOffset(seed, 4), icon: '💼' },
  ].map(item => ({
    ...item,
    score: Math.min(100, Math.max(0, item.score)),
    comment: getDetailedComment(item.name, Math.min(100, Math.max(0, compatibilityScore + seededOffset(seed, ['연애운', '결혼운', '금전운', '사업운'].indexOf(item.name) + 1)))),
  }));

  // 오행 기반 상세 해석
  const interp = getElementInterpretation(element1, element2, elementRelation);
  const branchInterp = getBranchInterpretation(branchRel);

  const allPros = [...interp.pros, ...branchInterp.extraPros];
  const allCons = [...interp.cons, ...branchInterp.extraCons];

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50">
      {/* Navigation */}
      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">
              🔮 사주보기
            </Link>
            <div className="flex gap-4">
              <Link href="/compatibility" className="text-gray-700 hover:text-pink-600 transition font-medium">다시 보기</Link>
              <Link href="/" className="text-gray-700 hover:text-pink-600 transition font-medium">처음으로</Link>
            </div>
          </div>
        </div>
      </nav>

      {/* Result Content */}
      <div id="pdf-content" className="max-w-6xl mx-auto px-4 py-12">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">💕 궁합 결과</h1>
          <p className="text-xl text-gray-600">두 사람의 사주팔자를 비교한 결과입니다</p>
        </div>

        {/* 두 사람 정보 */}
        <div className="grid md:grid-cols-2 gap-6 mb-12">
          <div className="bg-gradient-to-br from-pink-500 to-pink-600 rounded-2xl shadow-xl p-8 text-white">
            <div className="text-center mb-6">
              <div className="text-5xl mb-3">👤</div>
              <h3 className="text-2xl font-bold">첫 번째 사람</h3>
              <p className="text-pink-100 mt-2">{saju1.birthDate.year}년 {saju1.birthDate.month}월 {saju1.birthDate.day}일</p>
              <p className="text-pink-100">{gender1 === 'male' ? '남성' : '여성'}</p>
            </div>
            <div className="bg-white/20 backdrop-blur-sm rounded-xl p-4">
              <p className="text-center mb-2 font-semibold">일간 (日干)</p>
              <div className="text-center">
                <span className="text-4xl font-bold">{saju1.day.stem}</span>
                <span className="text-2xl ml-2">({saju1.day.stemKr})</span>
              </div>
              <p className="text-center mt-2 text-pink-100">
                {element1} ({elementKrMap[element1] || ''})
              </p>
            </div>
          </div>

          <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
            <div className="text-center mb-6">
              <div className="text-5xl mb-3">👤</div>
              <h3 className="text-2xl font-bold">두 번째 사람</h3>
              <p className="text-purple-100 mt-2">{saju2.birthDate.year}년 {saju2.birthDate.month}월 {saju2.birthDate.day}일</p>
              <p className="text-purple-100">{gender2 === 'male' ? '남성' : '여성'}</p>
            </div>
            <div className="bg-white/20 backdrop-blur-sm rounded-xl p-4">
              <p className="text-center mb-2 font-semibold">일간 (日干)</p>
              <div className="text-center">
                <span className="text-4xl font-bold">{saju2.day.stem}</span>
                <span className="text-2xl ml-2">({saju2.day.stemKr})</span>
              </div>
              <p className="text-center mt-2 text-purple-100">
                {element2} ({elementKrMap[element2] || ''})
              </p>
            </div>
          </div>
        </div>

        {/* 총합 궁합 점수 */}
        <div className={`bg-gradient-to-r ${getScoreColor(compatibilityScore)} rounded-3xl shadow-2xl p-12 mb-12 text-white`}>
          <div className="text-center">
            <h2 className="text-3xl font-bold mb-6">종합 궁합 점수</h2>
            <div className="flex items-center justify-center gap-8 mb-6">
              <div className="text-8xl font-bold">{compatibilityScore}</div>
              <div className="text-left">
                <div className="text-6xl font-bold mb-2">{getScoreGrade(compatibilityScore)}</div>
                <div className="text-2xl">{getScoreText(compatibilityScore)}</div>
              </div>
            </div>
            <div className="max-w-2xl mx-auto">
              <div className="w-full bg-white/30 rounded-full h-4">
                <div className="bg-white h-4 rounded-full transition-all duration-1000" style={{ width: `${compatibilityScore}%` }}></div>
              </div>
            </div>
          </div>
        </div>

        {/* 세부 궁합 */}
        <div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-8">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">세부 궁합</h2>
          <div className="grid md:grid-cols-2 gap-6">
            {detailedScores.map((item) => (
              <div key={item.name} className="bg-gray-50 rounded-xl p-6">
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-3">
                    <span className="text-3xl">{item.icon}</span>
                    <h3 className="text-xl font-bold text-gray-900">{item.name}</h3>
                  </div>
                  <span className="text-2xl font-bold text-pink-600">{item.score}점</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-3 mb-3">
                  <div
                    className="bg-gradient-to-r from-pink-500 to-purple-500 h-3 rounded-full transition-all duration-500"
                    style={{ width: `${item.score}%` }}
                  ></div>
                </div>
                <p className="text-sm text-gray-600">{item.comment}</p>
              </div>
            ))}
          </div>
        </div>

        {/* 궁합 상세 해석 - 블러 잠금 영역 */}
        <CompatibilityDetailUnlock
          allPros={allPros}
          allCons={allCons}
          advice={interp.advice}
          element1={element1}
          element2={element2}
          element1Kr={elementKrMap[element1] || ''}
          element2Kr={elementKrMap[element2] || ''}
        />

        {/* 다른 메뉴 */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Link href="/compatibility" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group">
            <div className="text-4xl mb-3">💕</div>
            <h3 className="text-xl font-bold text-gray-900 mb-2">다시 보기</h3>
            <p className="text-gray-600 text-sm">다른 궁합 확인하기</p>
          </Link>

          <Link href="/" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group">
            <div className="text-4xl mb-3">📜</div>
            <h3 className="text-xl font-bold text-gray-900 mb-2">사주 보기</h3>
            <p className="text-gray-600 text-sm">내 사주 확인하기</p>
          </Link>

          <PDFButton
            elementId="pdf-content"
            filename={`궁합_${year1}${month1}${day1}_${year2}${month2}${day2}.pdf`}
            buttonText="궁합 PDF 저장"
            className="bg-gradient-to-r from-pink-600 to-purple-600 text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group w-full disabled:opacity-50 disabled:cursor-not-allowed"
          />

          <ShareButtons
            title={`두 사람의 궁합 결과 - ${compatibilityScore}점`}
            description={`${getScoreText(compatibilityScore)} - 두 사람의 궁합을 확인해보세요!`}
          />
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 mt-20">
        <div className="max-w-7xl mx-auto text-center">
          <div className="text-2xl font-bold mb-4 bg-gradient-to-r from-pink-400 to-purple-400 bg-clip-text text-transparent">
            🔮 사주보기
          </div>
          <p className="text-gray-400 mb-6">쟁승메이드가 제공하는 무료 사주 서비스</p>
          <div className="text-sm text-gray-500">
            <p>문의: bgg8988@gmail.com | <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="hover:text-pink-400">쟁승메이드</a></p>
            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}
