/**
 * File: page.tsx
 * Created by: AI Assistant
 * Date: 2025-11-29
 * Purpose: Forum list page for kreatiVortex platform
 * Part of: kreatiVortex - Platform Pembelajaran Tari Online
 */

'use client';

import { Link } from '@/i18n/routing';
import ActionButton from '@/components/ActionButton';
import { useFetch } from '@/hooks/useFetch';
import { useTranslations } from 'next-intl';

interface ForumData {
  id: string;
  title: string;
  creator: {
    user: {
      name: string;
    };
  };
  _count: {
    posts: number;
  };
  updatedAt: string;
  type: string;
}

export default function ForumPage() {
  const t = useTranslations('Forum');
  const { data: forums, loading } = useFetch<ForumData[]>('/api/forums?type=GENERAL');

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-white">{t('generalForum')}</h1>
          <p className="text-gray-400">{t('generalForumSubtitle')}</p>
        </div>
        <Link href="/dashboard/forum/new">
          <ActionButton>
            {t('createButton')}
          </ActionButton>
        </Link>
      </div>

      <div className="bg-white/10 backdrop-blur-sm rounded-xl border border-white/20 overflow-hidden">
        {loading ? (
          <div className="text-center text-gray-400 py-12">Loading...</div>
        ) : (
          <div className="divide-y divide-white/10">
            {forums?.map((forum) => (
              <div key={forum.id} className="p-6 hover:bg-white/5 transition-colors">
                <div className="flex justify-between items-start">
                  <div className="flex-1">
                    <div className="flex items-center space-x-2 mb-1">
                      <span className="px-2 py-0.5 bg-white/10 text-gray-400 text-xs rounded border border-white/10">
                        {forum.type}
                      </span>
                    </div>
                    <Link href={`/dashboard/forum/detail/${forum.id}`}>
                      <h3 className="text-lg font-semibold text-white mb-2 hover:text-gold-400 transition-colors">
                        {forum.title}
                      </h3>
                    </Link>
                    <div className="flex items-center text-sm text-gray-400 space-x-4">
                      <span className="flex items-center">
                        <span className="w-5 h-5 bg-gray-600 rounded-full flex items-center justify-center text-xs text-white font-bold mr-2">
                          {forum.creator.user.name.charAt(0)}
                        </span>
                        {forum.creator.user.name}
                      </span>
                      <span>•</span>
                      <span>{new Date(forum.updatedAt).toLocaleDateString()}</span>
                    </div>
                  </div>

                  <div className="flex items-center space-x-6 text-gray-400">
                    <div className="text-center">
                      <div className="text-lg font-semibold text-white">{forum._count.posts}</div>
                      <div className="text-xs">{t('posts')}</div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
            {(!forums || forums.length === 0) && (
              <div className="text-center py-12 text-gray-400">
                {t('noForums')}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}