import Link from 'next/link';
import { createClient } from '@/lib/supabase/server';
import SavedInterpretation from './SavedInterpretation';

interface PageProps {
    params: Promise<{ id: string }>;
}

export default async function SavedResultPage({ params }: PageProps) {
    const { id } = await params;
    const supabase = await createClient();

    // 인증된 사용자의 쿠키를 사용하여 RLS 통과
    const { data: record, error } = await supabase
        .from('saju_records')
        .select('*')
        .eq('id', id)
        .single();

    if (error || !record) {
        return (
            <div className="min-h-screen flex flex-col items-center justify-center p-4">
                <h1 className="text-2xl font-bold text-red-600 mb-4">기록을 찾을 수 없습니다.</h1>
                <p className="text-gray-500 mb-4">로그인이 필요하거나 삭제된 기록일 수 있습니다.</p>
                <div className="flex gap-4">
                    <Link href="/login" className="text-indigo-600 hover:underline">로그인</Link>
                    <Link href="/mypage" className="text-indigo-600 hover:underline">마이페이지</Link>
                    <Link href="/" className="text-indigo-600 hover:underline">홈으로</Link>
                </div>
            </div>
        );
    }

    const { saju_data, interpretation } = record;
    const date = new Date(record.created_at).toLocaleDateString();

    return (
        <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-4xl mx-auto">
                <div className="text-center mb-12">
                    <span className="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-semibold mb-4">
                        {date} 저장됨
                    </span>
                    <h1 className="text-3xl font-bold text-gray-900">저장된 사주 결과</h1>
                    <p className="mt-2 text-gray-600">
                        {saju_data.birthDate.year}년 {saju_data.birthDate.month}월 {saju_data.birthDate.day}일생
                    </p>
                </div>

                <div className="bg-white rounded-3xl shadow-xl p-6 md:p-10 mb-8">
                    <SavedInterpretation interpretation={interpretation} />
                </div>

                <div className="text-center flex flex-wrap justify-center gap-4">
                    <Link
                        href="/"
                        className="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition font-medium"
                    >
                        홈으로
                    </Link>
                    <Link
                        href="/mypage"
                        className="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition font-medium"
                    >
                        목록으로
                    </Link>
                    <Link
                        href="/saju"
                        className="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-medium"
                    >
                        새로운 사주 보기
                    </Link>
                </div>
            </div>
        </div>
    );
}