import { getTranslations } from "next-intl/server";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { headers } from "next/headers";

export default async function Dashboard() {
  const t = await getTranslations('Dashboard');
  
  // Get user session and profile
  const session = await auth.api.getSession({
    headers: await headers()
  });

  let userProfile = null;
  if (session?.user) {
    userProfile = await prisma.userProfile.findUnique({
      where: { userId: session.user.id },
      include: { role: true }
    });
  }

  console.log("User Profile:", userProfile);

  return (
    <div>
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-white mb-2">
          {t('welcomeTitle')}
        </h2>
        <p className="text-gray-300">
          {t('welcomeSubtitle')}
        </p>
        
        {/* Show role registration options for general users */}
        {userProfile?.role?.name === 'UMUM' || userProfile === null && (
          <div className="mt-6 bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
            <h3 className="text-lg font-semibold text-white mb-3">Upgrade Akun Anda</h3>
            <p className="text-gray-400 mb-4">
              Pilih role untuk mengakses fitur lengkap kreatiVortex
            </p>
            <div className="flex flex-col sm:flex-row gap-3">
              <a 
                href="/dashboard/register-role"
                className="inline-flex items-center justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
              >
                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                </svg>
                Daftar sebagai Calon Pendidik
              </a>
              <a 
                href="/dashboard/register-role"
                className="inline-flex items-center justify-center px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors"
              >
                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a2 2 0 012-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm7-2a2 2 0 11-4 0v4a2 2 0 014 0V9z" />
                </svg>
                Daftar sebagai Pendidik
              </a>
            </div>
          </div>
        )}
      </div>

      {/* Recent Activity */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* Recent Videos */}
        <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
          <h3 className="text-lg font-semibold text-white mb-4">{t('recentVideosTitle')}</h3>
          <div className="space-y-4">
            <div className="flex items-center space-x-4">
              <div className="w-16 h-12 bg-gold-400/20 rounded-lg flex items-center justify-center">
                <svg className="w-6 h-6 text-gold-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
              </div>
              <div className="flex-1">
                <h4 className="text-white font-medium">{t('sampleVideo1')}</h4>
                <p className="text-sm text-gray-400">{t('timeAgo', {hours: 2})}</p>
              </div>
            </div>
            <div className="flex items-center space-x-4">
              <div className="w-16 h-12 bg-gold-400/20 rounded-lg flex items-center justify-center">
                <svg className="w-6 h-6 text-gold-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
              </div>
              <div className="flex-1">
                <h4 className="text-white font-medium">{t('sampleVideo2')}</h4>
                <p className="text-sm text-gray-400">{t('timeAgo', {hours: 5})}</p>
              </div>
            </div>
          </div>
        </div>

        {/* Recent Forum Posts */}
        <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
          <h3 className="text-lg font-semibold text-white mb-4">{t('recentDiscussionsTitle')}</h3>
          <div className="space-y-4">
            <div className="border-l border-gold-400 pl-4">
              <h4 className="text-white font-medium mb-1">{t('sampleDiscussion1Title')}</h4>
              <p className="text-sm text-gray-400 mb-2">{t('sampleDiscussion1Content')}</p>
              <p className="text-xs text-gray-500">Oleh Sarah Pendidik • {t('timeAgo', {hours: 1})}</p>
            </div>
            <div className="border-l border-gold-400 pl-4">
              <h4 className="text-white font-medium mb-1">{t('sampleDiscussion2Title')}</h4>
              <p className="text-sm text-gray-400 mb-2">{t('sampleDiscussion2Content')}</p>
              <p className="text-xs text-gray-500">Oleh Budi Student • {t('timeAgo', {hours: 3})}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}