'use client';

import { useRouter } from 'next/navigation';
import { useAuth } from '@/contexts/AuthContext';

interface DailyNoteButtonProps {
    variant?: 'primary' | 'secondary';
}

export default function DailyNoteButton({ variant = 'secondary' }: DailyNoteButtonProps) {
    const router = useRouter();

    const { user } = useAuth();

    const goToDailyNote = () => {
        if (!user) {
            router.push('/login');
            return;
        }

        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');

        const dateStr = `${year}-${month}-${day}`;
        // Redirect to a phantom document with namespaced ID: daily-YYYY-MM-DD-UID
        router.push(`/docs/daily-${dateStr}-${user.uid}`);
    };

    const isPrimary = variant === 'primary';

    return (
        <button
            onClick={goToDailyNote}
            className={`inline-flex items-center gap-3 px-6 py-3.5 text-sm font-bold rounded-2xl transition-all shadow-md hover:shadow-xl active:scale-95 group border ${isPrimary
                ? 'bg-emerald-600 text-white border-emerald-500 hover:bg-emerald-700'
                : 'bg-indigo-50 text-indigo-700 border-indigo-100 hover:bg-indigo-100'
                }`}
            title="오늘의 데일리 노트로 이동"
        >
            <svg
                className={`w-5 h-5 transition-transform group-hover:scale-110 ${isPrimary ? 'text-white' : 'text-indigo-600'}`}
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                />
            </svg>
            <span className="truncate">
                {isPrimary ? '오늘의 데일리 노트 작성' : 'Daily Note'}
            </span>
        </button>
    );
}