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

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

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

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

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

  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-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-indigo-600 to-purple-600 bg-clip-text text-transparent">
              🔮 사주보기
            </Link>
            <Link
              href="/"
              className="text-gray-700 hover:text-indigo-600 transition font-medium"
            >
              다시 보기
            </Link>
          </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">
            {yearNum}년 {monthNum}월 {dayNum}일 {hourNum !== null && `${hourNum}시`}
            {gender === 'male' ? ' 남성' : ' 여성'}
          </p>
        </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="overflow-x-auto">
            <table className="w-full border-collapse">
              <thead>
                <tr className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
                  <th className="py-4 px-6 text-center font-bold text-lg">구분</th>
                  {sajuData.hour && <th className="py-4 px-6 text-center font-bold text-lg">시주 (時柱)</th>}
                  <th className="py-4 px-6 text-center font-bold text-lg">일주 (日柱)</th>
                  <th className="py-4 px-6 text-center font-bold text-lg">월주 (月柱)</th>
                  <th className="py-4 px-6 text-center font-bold text-lg">년주 (年柱)</th>
                </tr>
              </thead>
              <tbody>
                {/* 천간 */}
                <tr className="border-b border-gray-200 hover:bg-indigo-50 transition">
                  <td className="py-4 px-6 text-center font-semibold text-gray-700">천간 (天干)</td>
                  {sajuData.hour && (
                    <td className="py-4 px-6 text-center">
                      <div className="text-3xl font-bold text-indigo-600">{sajuData.hour.stem}</div>
                      <div className="text-sm text-gray-600 mt-1">{sajuData.hour.stemKr}</div>
                    </td>
                  )}
                  <td className="py-4 px-6 text-center bg-blue-50">
                    <div className="text-3xl font-bold text-blue-600">{sajuData.day.stem}</div>
                    <div className="text-sm text-gray-600 mt-1">{sajuData.day.stemKr}</div>
                    <div className="text-xs text-blue-600 font-semibold mt-1">일간 (日干)</div>
                  </td>
                  <td className="py-4 px-6 text-center">
                    <div className="text-3xl font-bold text-indigo-600">{sajuData.month.stem}</div>
                    <div className="text-sm text-gray-600 mt-1">{sajuData.month.stemKr}</div>
                  </td>
                  <td className="py-4 px-6 text-center">
                    <div className="text-3xl font-bold text-indigo-600">{sajuData.year.stem}</div>
                    <div className="text-sm text-gray-600 mt-1">{sajuData.year.stemKr}</div>
                  </td>
                </tr>

                {/* 지지 */}
                <tr className="border-b border-gray-200 hover:bg-purple-50 transition">
                  <td className="py-4 px-6 text-center font-semibold text-gray-700">지지 (地支)</td>
                  {sajuData.hour && (
                    <td className="py-4 px-6 text-center">
                      <div className="text-3xl font-bold text-purple-600">{sajuData.hour.branch}</div>
                      <div className="text-sm text-gray-600 mt-1">{sajuData.hour.branchKr}</div>
                    </td>
                  )}
                  <td className="py-4 px-6 text-center bg-blue-50">
                    <div className="text-3xl font-bold text-blue-600">{sajuData.day.branch}</div>
                    <div className="text-sm text-gray-600 mt-1">{sajuData.day.branchKr}</div>
                  </td>
                  <td className="py-4 px-6 text-center">
                    <div className="text-3xl font-bold text-purple-600">{sajuData.month.branch}</div>
                    <div className="text-sm text-gray-600 mt-1">{sajuData.month.branchKr}</div>
                  </td>
                  <td className="py-4 px-6 text-center">
                    <div className="text-3xl font-bold text-purple-600">{sajuData.year.branch}</div>
                    <div className="text-sm text-gray-600 mt-1">{sajuData.year.branchKr}</div>
                  </td>
                </tr>

                {/* 십성 */}
                <tr className="border-b border-gray-200 hover:bg-emerald-50 transition">
                  <td className="py-4 px-6 text-center font-semibold text-gray-700">십성 (十星)</td>
                  {sajuData.hour && (
                    <td className="py-4 px-6 text-center">
                      <div className="text-lg font-semibold text-emerald-600">{sajuData.hour.tenGod}</div>
                    </td>
                  )}
                  <td className="py-4 px-6 text-center bg-blue-50">
                    <div className="text-lg font-semibold text-blue-600">{sajuData.day.tenGod}</div>
                  </td>
                  <td className="py-4 px-6 text-center">
                    <div className="text-lg font-semibold text-emerald-600">{sajuData.month.tenGod}</div>
                  </td>
                  <td className="py-4 px-6 text-center">
                    <div className="text-lg font-semibold text-emerald-600">{sajuData.year.tenGod}</div>
                  </td>
                </tr>

                {/* 십이운성 */}
                <tr className="hover:bg-pink-50 transition">
                  <td className="py-4 px-6 text-center font-semibold text-gray-700">십이운성</td>
                  {sajuData.hour && (
                    <td className="py-4 px-6 text-center">
                      <div className="text-lg font-semibold text-pink-600">{sajuData.hour.fortune}</div>
                    </td>
                  )}
                  <td className="py-4 px-6 text-center bg-blue-50">
                    <div className="text-lg font-semibold text-blue-600">{sajuData.day.fortune}</div>
                  </td>
                  <td className="py-4 px-6 text-center">
                    <div className="text-lg font-semibold text-pink-600">{sajuData.month.fortune}</div>
                  </td>
                  <td className="py-4 px-6 text-center">
                    <div className="text-lg font-semibold text-pink-600">{sajuData.year.fortune}</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div className="mt-6 p-4 bg-blue-50 rounded-xl">
            <p className="text-sm text-gray-700">
              <strong className="text-blue-600">일간 (日干):</strong> {sajuData.day.stem}({sajuData.day.stemKr}) - 나 자신을 나타내는 중심 기둥입니다.
            </p>
          </div>
        </div>

        {/* 사주 해석 */}
        <div className="grid md:grid-cols-2 gap-8 mb-8">
          {/* 성격 */}
          <div className="bg-white rounded-2xl shadow-lg p-8">
            <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
              <span className="text-3xl mr-3">👤</span>
              성격 특징
            </h3>
            <div className="space-y-3 text-gray-700">
              <p className="leading-relaxed">
                일간이 <strong className="text-indigo-600">{sajuData.day.stem}({sajuData.day.stemKr})</strong>인 사람은
                {sajuData.day.element === '木' && ' 나무처럼 성장하고 발전하려는 의지가 강합니다. 창의적이고 진취적인 성향을 가지고 있습니다.'}
                {sajuData.day.element === '火' && ' 불처럼 열정적이고 활동적입니다. 리더십이 있고 사교성이 뛰어납니다.'}
                {sajuData.day.element === '土' && ' 흙처럼 안정적이고 신뢰감 있습니다. 포용력이 있고 책임감이 강합니다.'}
                {sajuData.day.element === '金' && ' 금속처럼 강인하고 원칙적입니다. 결단력 있고 의리를 중시합니다.'}
                {sajuData.day.element === '水' && ' 물처럼 유연하고 지혜롭습니다. 적응력이 뛰어나고 사려 깊습니다.'}
              </p>
            </div>
          </div>

          {/* 운세 */}
          <div className="bg-white rounded-2xl shadow-lg p-8">
            <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
              <span className="text-3xl mr-3">🌟</span>
              운세 흐름
            </h3>
            <div className="space-y-3 text-gray-700">
              <p className="leading-relaxed">
                현재 십이운성이 <strong className="text-purple-600">{sajuData.day.fortune}</strong>으로,
                {sajuData.day.fortune === '장생' && ' 새로운 시작과 성장의 시기입니다.'}
                {sajuData.day.fortune === '목욕' && ' 정화와 준비의 시기입니다.'}
                {sajuData.day.fortune === '관대' && ' 사회적으로 인정받는 시기입니다.'}
                {sajuData.day.fortune === '건록' && ' 안정되고 왕성한 활동의 시기입니다.'}
                {sajuData.day.fortune === '제왕' && ' 최고의 전성기를 맞이하는 시기입니다.'}
                {sajuData.day.fortune === '쇠' && ' 조금씩 힘이 약해지는 시기입니다.'}
                {sajuData.day.fortune === '병' && ' 어려움이 있을 수 있는 시기입니다.'}
                {sajuData.day.fortune === '사' && ' 끝과 새 시작을 준비하는 시기입니다.'}
                {sajuData.day.fortune === '묘' && ' 잠시 휴식이 필요한 시기입니다.'}
                {sajuData.day.fortune === '절' && ' 극복과 인내가 필요한 시기입니다.'}
                {sajuData.day.fortune === '태' && ' 새로운 기운이 싹트는 시기입니다.'}
                {sajuData.day.fortune === '양' && ' 성장을 준비하는 시기입니다.'}
              </p>
            </div>
          </div>
        </div>

        {/* 추가 기능 버튼 */}
        <div className="grid md:grid-cols-3 gap-6">
          <Link
            href={`/fortune?${new URLSearchParams(params as any).toString()}`}
            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="/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>

          <PDFButton
            elementId="pdf-content"
            filename={`사주팔자_${yearNum}${monthNum}${dayNum}.pdf`}
            buttonText="사주 PDF 저장"
          />
        </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-indigo-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-indigo-400">쟁승메이드</a></p>
            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}