import { auth } from '@/lib/auth'
import { redirect } from 'next/navigation'
import { logout } from '@/actions/auth'
import Link from 'next/link'

async function logoutAction() {
  'use server'
  await logout()
  redirect('/login')
}

export default async function DashboardPage() {
  const session = await auth()

  if (!session?.user) {
    redirect('/login')
  }

  const user = session.user as any

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <nav className="bg-white dark:bg-gray-800 shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16 items-center">
            <div className="flex items-center space-x-8">
              <h1 className="text-xl font-bold text-gray-900 dark:text-white">
                MemoHanzi <span className="text-sm font-normal text-gray-500">记汉字</span>
              </h1>
              <Link
                href="/collections"
                className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
              >
                Collections
              </Link>
              <Link
                href="/hanzi"
                className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
              >
                Search Hanzi
              </Link>
              <Link
                href="/settings"
                className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
              >
                Settings
              </Link>
              {(user.role === 'ADMIN' || user.role === 'MODERATOR') && (
                <>
                  <Link
                    href="/admin/import"
                    className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
                  >
                    Import
                  </Link>
                  <Link
                    href="/admin/initialize"
                    className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
                  >
                    Initialize
                  </Link>
                </>
              )}
            </div>
            <div className="flex items-center space-x-4">
              <span className="text-sm text-gray-700 dark:text-gray-300">
                {user.name || user.email}
              </span>
              <form action={logoutAction}>
                <button
                  type="submit"
                  className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
                >
                  Sign Out
                </button>
              </form>
            </div>
          </div>
        </div>
      </nav>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="mb-8">
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
            Welcome back{user.name ? `, ${user.name}` : ''}!
          </h2>
          <p className="text-gray-600 dark:text-gray-400">
            Start learning Chinese characters with spaced repetition
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
              Due Cards
            </h3>
            <p className="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">
              0
            </p>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              No cards due right now
            </p>
          </div>

          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
              Total Learned
            </h3>
            <p className="text-3xl font-bold text-green-600 dark:text-green-400 mb-2">
              0
            </p>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Characters mastered
            </p>
          </div>

          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
              Daily Goal
            </h3>
            <p className="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">
              0/50
            </p>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Cards reviewed today
            </p>
          </div>
        </div>

        <div className="mt-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-blue-900 dark:text-blue-300 mb-2">
            Quick Actions
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Link
              href="/collections"
              className="bg-white dark:bg-gray-800 p-4 rounded-lg hover:shadow-md transition-shadow"
            >
              <h4 className="font-semibold text-gray-900 dark:text-white mb-1">
                Browse Collections
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                View and manage your hanzi collections
              </p>
            </Link>
            <Link
              href="/collections/new"
              className="bg-white dark:bg-gray-800 p-4 rounded-lg hover:shadow-md transition-shadow"
            >
              <h4 className="font-semibold text-gray-900 dark:text-white mb-1">
                Create Collection
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                Start a new hanzi collection
              </p>
            </Link>
            <Link
              href="/hanzi"
              className="bg-white dark:bg-gray-800 p-4 rounded-lg hover:shadow-md transition-shadow"
            >
              <h4 className="font-semibold text-gray-900 dark:text-white mb-1">
                Search Hanzi
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                Find hanzi by character, pinyin, or meaning
              </p>
            </Link>
          </div>
          <p className="text-sm text-blue-800 dark:text-blue-400 mt-4">
            More features coming soon: Learning sessions, progress tracking, and more!
          </p>
        </div>
      </main>
    </div>
  )
}