'use client'

import React from 'react'
import { useSession, signOut } from 'next-auth/react'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import Cookies from 'js-cookie'

interface Messages {
  common: {
    logout: string
    login: string
  }
  dashboard: {
    title: string
    welcome: string
    loading: string
    error: string
    errorDescription: string
    newRoute: {
      title: string
      description: string
    }
    routes: {
      title: string
      description: string
    }
    inbox: {
      title: string
      description: string
    }
    history: {
      title: string
      description: string
    }
  }
}

export default function DashboardPage() {
  const { data: session, status } = useSession()
  const [messages, setMessages] = useState<Messages | null>(null)

  useEffect(() => {
    const loadMessages = async () => {
      const lang = Cookies.get('NEXT_LOCALE') || 'de'
      const messages = await import(`@/messages/${lang}.json`)
      setMessages(messages.default)
    }
    loadMessages()
  }, [])

  if (status === 'loading' || !messages) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-indigo-500"></div>
      </div>
    )
  }

  if (status === 'unauthenticated') {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold mb-4">{messages.dashboard.error}</h2>
          <p className="mb-4">{messages.dashboard.errorDescription}</p>
          <Link
            href="/auth/login"
            className="text-indigo-600 hover:text-indigo-800"
          >
            {messages.common.login}
          </Link>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-100">
      <div className="py-6">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center">
            <h1 className="text-3xl font-bold text-gray-900">{messages.dashboard.title}</h1>
            <div className="flex items-center space-x-4">
              <span className="text-gray-600">
                {messages.dashboard.welcome}, {session?.user?.name || session?.user?.email}
              </span>
            </div>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
          <div className="py-4">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <Link
                href="/dashboard/new-route"
                className="bg-white overflow-hidden shadow rounded-lg p-6 hover:shadow-lg transition-shadow duration-200"
              >
                <div className="flex items-center">
                  <div className="flex-shrink-0 bg-indigo-500 rounded-md p-3">
                    <svg
                      className="h-6 w-6 text-white"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M12 4v16m8-8H4"
                      />
                    </svg>
                  </div>
                  <div className="ml-4">
                    <h2 className="text-lg font-medium text-gray-900">
                      {messages.dashboard.newRoute.title}
                    </h2>
                    <p className="mt-1 text-sm text-gray-500">
                      {messages.dashboard.newRoute.description}
                    </p>
                  </div>
                </div>
              </Link>

              <Link
                href="/dashboard/routes"
                className="bg-white overflow-hidden shadow rounded-lg p-6 hover:shadow-lg transition-shadow duration-200"
              >
                <div className="flex items-center">
                  <div className="flex-shrink-0 bg-green-500 rounded-md p-3">
                    <svg
                      className="h-6 w-6 text-white"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
                      />
                    </svg>
                  </div>
                  <div className="ml-4">
                    <h2 className="text-lg font-medium text-gray-900">
                      {messages.dashboard.routes.title}
                    </h2>
                    <p className="mt-1 text-sm text-gray-500">
                      {messages.dashboard.routes.description}
                    </p>
                  </div>
                </div>
              </Link>

              <Link
                href="/dashboard/inbox"
                className="bg-white overflow-hidden shadow rounded-lg p-6 hover:shadow-lg transition-shadow duration-200"
              >
                <div className="flex items-center">
                  <div className="flex-shrink-0 bg-yellow-500 rounded-md p-3">
                    <svg
                      className="h-6 w-6 text-white"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
                      />
                    </svg>
                  </div>
                  <div className="ml-4">
                    <h2 className="text-lg font-medium text-gray-900">
                      {messages.dashboard.inbox.title}
                    </h2>
                    <p className="mt-1 text-sm text-gray-500">
                      {messages.dashboard.inbox.description}
                    </p>
                  </div>
                </div>
              </Link>

              <Link
                href="/dashboard/history"
                className="bg-white overflow-hidden shadow rounded-lg p-6 hover:shadow-lg transition-shadow duration-200"
              >
                <div className="flex items-center">
                  <div className="flex-shrink-0 bg-purple-500 rounded-md p-3">
                    <svg
                      className="h-6 w-6 text-white"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                  </div>
                  <div className="ml-4">
                    <h2 className="text-lg font-medium text-gray-900">
                      {messages.dashboard.history.title}
                    </h2>
                    <p className="mt-1 text-sm text-gray-500">
                      {messages.dashboard.history.description}
                    </p>
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </div>

        {/* Çıkış Yap Butonu */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
          <div className="border-t border-gray-200 pt-8">
            <button
              onClick={() => signOut({ callbackUrl: '/' })}
              className="w-full bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 transition-colors duration-200"
            >
              {messages.common.logout}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}