import { getServerSession } from 'next-auth'
import { authOptions } from '@/pages/api/auth/[...nextauth]'
import { redirect } from 'next/navigation'
import { getInvitations } from '@/lib/sharing-actions'
import InvitationCard from '@/components/InvitationCard'
import { Mail } from 'lucide-react'
import Link from 'next/link'

type Invitation = {
  id: string
  email: string
  permission: 'editor' | 'viewer'
  status: string
  createdAt: Date
  expiresAt: Date
  listId: string
  inviterId: string
  list: {
    id: string
    title: string
    color: string
  }
  inviter: {
    id: string
    name: string | null
    email: string
  }
}

export default async function InvitationsPage() {
  const session = await getServerSession(authOptions)
  
  if (!session?.user) {
    redirect('/auth/login')
  }

  const invitations = await getInvitations() as Invitation[]

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
        {/* Header */}
        <div className="mb-6 sm:mb-8">
          <Link
            href="/"
            className="inline-flex items-center text-sm text-gray-600 hover:text-gray-900 mb-4"
          >
            ← Back to Lists
          </Link>
          <div className="flex items-center gap-3">
            <div className="p-2 bg-blue-100 rounded-lg">
              <Mail size={24} className="text-blue-600" />
            </div>
            <div>
              <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">
                Invitations
              </h1>
              <p className="text-gray-600 mt-1">
                {invitations.length === 0
                  ? 'No pending invitations'
                  : `${invitations.length} pending ${invitations.length === 1 ? 'invitation' : 'invitations'}`}
              </p>
            </div>
          </div>
        </div>

        {/* Invitations List */}
        {invitations.length === 0 ? (
          <div className="bg-white rounded-lg border border-gray-200 p-8 sm:p-12 text-center">
            <div className="max-w-sm mx-auto">
              <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Mail size={32} className="text-gray-400" />
              </div>
              <h2 className="text-xl font-semibold text-gray-900 mb-2">
                No Invitations
              </h2>
              <p className="text-gray-600 mb-6">
                When someone shares a list with you, you'll see the invitation here.
              </p>
              <Link
                href="/"
                className="inline-block px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors font-medium"
              >
                Go to My Lists
              </Link>
            </div>
          </div>
        ) : (
          <div className="space-y-4">
            {invitations.map((invitation) => (
              <InvitationCard
                key={invitation.id}
                invitation={invitation}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  )
}