"use client";

import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import LanguageSwitcher from '@/components/LanguageSwitcher';
import WelcomeMessage from '@/components/WelcomeMessage';
import NavigationMenu from '@/components/NavigationMenu';
import { Button } from '@/components/ui/button';
import { LogOut } from 'lucide-react';

/**
 * Dashboard Page with Internationalization
 *
 * Note: Authentication protection is handled by (protected)/layout.tsx
 */
export default function Dashboard() {
  const t = useTranslations('common');
  const router = useRouter();

  const handleLogout = async () => {
    try {
      // ✅ HttpOnly Cookie 방식: Next.js API Route로 프록시
      const response = await fetch('/api/auth/logout', {
        method: 'POST',
      });

      if (response.ok) {
        console.log('✅ 로그아웃 완료: HttpOnly 쿠키 삭제됨');
      }

      // 로그인 페이지로 리다이렉트
      router.push('/login');
    } catch (error) {
      console.error('로그아웃 처리 중 오류:', error);
      // 에러가 나도 로그인 페이지로 이동
      router.push('/login');
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
      <div className="max-w-6xl mx-auto">
        {/* Header with Language Switcher */}
        <header className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
            {t('appName')}
          </h1>
          <div className="flex items-center gap-3">
            <LanguageSwitcher />
            <Button
              variant="outline"
              onClick={handleLogout}
              className="rounded-xl"
            >
              <LogOut className="w-4 h-4 mr-2" />
              Logout
            </Button>
          </div>
        </header>

        {/* Main Content */}
        <main className="space-y-8">
          {/* Welcome Section */}
          <WelcomeMessage />

          {/* Navigation Menu */}
          <div>
            <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
              {t('appName')} Modules
            </h2>
            <NavigationMenu />
          </div>

          {/* Information Section */}
          <div className="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg">
            <h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-100">
              Multi-language Support
            </h3>
            <p className="text-blue-800 dark:text-blue-200">
              This ERP system supports Korean (한국어), English, and Japanese (日本語).
              Use the language switcher above to change the interface language.
            </p>
          </div>

          {/* Developer Info */}
          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
            <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">
              For Developers
            </h3>
            <p className="text-gray-600 dark:text-gray-300 mb-2">
              Check the documentation in <code className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">claudedocs/i18n-usage-guide.md</code>
            </p>
            <p className="text-gray-600 dark:text-gray-300">
              Message files: <code className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">src/messages/</code>
            </p>
          </div>
        </main>
      </div>
    </div>
  );
}