'use client';

import { useEffect, useState } from 'react';
import { createBrowserClient } from '@supabase/ssr'
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import TokenPurchaseModal from '@/components/TokenPurchaseModal';
import { ensureProfile } from '@/lib/ensure-profile';

export default function MyPage() {
    const [user, setUser] = useState<any>(null);
    const [records, setRecords] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [credits, setCredits] = useState(0);
    const [showTokenModal, setShowTokenModal] = useState(false);
    const router = useRouter();
    const supabase = createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
    );

    useEffect(() => {
        async function getUserData() {
            const { data: { user } } = await supabase.auth.getUser();
            if (!user) {
                router.push('/login');
                return;
            }
            setUser(user);

            // Fetch credits (프로필 없으면 자동 생성)
            const currentCredits = await ensureProfile(supabase, user);
            setCredits(currentCredits);

            // Fetch records
            const { data, error } = await supabase
                .from('saju_records')
                .select('*')
                .eq('user_id', user.id) // Ensure only fetching user's records
                .order('created_at', { ascending: false });

            if (error) {
                console.error('Error fetching records:', error.message, error.details, error.hint);
                alert('기록을 불러오는 중 오류가 발생했습니다: ' + error.message);
            } else {
                setRecords(data || []);
            }

            setLoading(false);
        }

        getUserData();
    }, [router]);

    if (loading) return (
        <div className="min-h-screen flex items-center justify-center">
            <div className="w-16 h-16 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
        </div>
    );

    return (
        <div className="min-h-screen bg-gray-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>
                        <div className="hidden md:flex space-x-6">
                            <Link href="/saju" className="text-gray-700 hover:text-indigo-600 transition font-medium">사주팔자</Link>
                            <Link href="/compatibility" className="text-gray-700 hover:text-indigo-600 transition font-medium">궁합</Link>
                            <Link href="/tojeong" className="text-gray-700 hover:text-indigo-600 transition font-medium">토정비결</Link>
                            <Link href="/mypage" className="text-indigo-600 font-bold">마이페이지</Link>
                        </div>
                    </div>
                </div>
            </nav>

            <div className="p-4 md:p-8">
            <div className="max-w-4xl mx-auto">
                <header className="mb-8 flex justify-between items-center bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <h1 className="text-3xl font-bold text-gray-900">내 사주 보관함</h1>
                    <Link href="/saju" className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-bold shadow-md">
                        + 새 사주 보기
                    </Link>
                </header>

                <div className="bg-white rounded-2xl shadow-sm p-6 mb-8 border border-gray-100 flex flex-col md:flex-row items-center gap-6">
                    <div className="w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white text-3xl font-bold shadow-lg">
                        {user.email[0].toUpperCase()}
                    </div>
                    <div className="flex-1 text-center md:text-left">
                        <h2 className="text-2xl font-bold text-gray-900 mb-1">{user.email}</h2>
                        <div className="flex flex-wrap gap-2 justify-center md:justify-start">
                            <span className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">회원</span>
                            <span className="px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-semibold">보유 토큰: {credits}개</span>
                            <button
                                onClick={() => setShowTokenModal(true)}
                                className="px-3 py-1 bg-indigo-600 text-white rounded-full text-sm font-semibold hover:bg-indigo-700 transition"
                            >
                                토큰 충전
                            </button>
                        </div>
                    </div>
                    <button
                        onClick={async () => {
                            await supabase.auth.signOut();
                            router.push('/');
                            router.refresh();
                        }}
                        className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-700 transition"
                    >
                        로그아웃
                    </button>
                </div>

                <h2 className="text-xl font-bold text-gray-900 mb-4 ml-2 border-l-4 border-indigo-500 pl-3">저장된 기록 ({records.length})</h2>

                {records.length === 0 ? (
                    <div className="text-center py-20 bg-white rounded-2xl border border-gray-200 border-dashed">
                        <div className="text-6xl mb-4">📭</div>
                        <p className="text-xl text-gray-800 font-bold mb-2">아직 저장된 사주 기록이 없습니다.</p>
                        <p className="text-gray-500 mb-8">나의 운세를 확인하고 평생 소장해보세요!</p>
                        <Link
                            href="/saju"
                            className="px-8 py-3 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition font-bold shadow-lg hover:shadow-xl transform hover:-translate-y-1"
                        >
                            지금 무료로 사주 보기
                        </Link>
                    </div>
                ) : (
                    <div className="grid md:grid-cols-2 gap-6">
                        {records.map((record) => (
                            <div key={record.id} className="bg-white p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 group">
                                <div className="flex justify-between items-start mb-4">
                                    <div>
                                        <span className="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 text-xs font-bold rounded-full mb-2">
                                            {new Date(record.created_at).toLocaleDateString()}
                                        </span>
                                        <h3 className="text-xl font-bold text-gray-900 group-hover:text-indigo-600 transition">
                                            {record.saju_data.birthDate.year}년 {record.saju_data.birthDate.month}월 {record.saju_data.birthDate.day}일생
                                        </h3>
                                    </div>
                                    <span className="text-2xl">🔮</span>
                                </div>
                                <div className="text-sm text-gray-500 mb-6 line-clamp-3 bg-gray-50 p-3 rounded-lg h-20">
                                    {record.interpretation
                                        ? record.interpretation.replace(/[#*]/g, '').substring(0, 100) + '...'
                                        : '해석 내용 없음'}
                                </div>
                                <Link
                                    href={`/result/saved/${record.id}`}
                                    className="block w-full text-center py-3 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition font-bold shadow-md"
                                >
                                    다시 보기
                                </Link>
                            </div>
                        ))}
                    </div>
                )}
            </div>
            </div>

            <TokenPurchaseModal
                isOpen={showTokenModal}
                onClose={() => setShowTokenModal(false)}
                onPurchaseComplete={async () => {
                    setShowTokenModal(false);
                    if (user) {
                        const { data: profile } = await supabase
                            .from('profiles')
                            .select('credits')
                            .eq('id', user.id)
                            .single();
                        if (profile) setCredits(profile.credits || 0);
                    }
                }}
                user={user}
                supabase={supabase}
            />
        </div>
    );
}