'use client'

import { useState, useEffect } from 'react'
import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link'
import { toast } from 'react-hot-toast'
import {
  ArrowLeft,
  Mail,
  Phone,
  Globe,
  MapPin,
  Building2,
  User,
  Calendar,
  Tag,
  Star,
  Edit,
  Archive,
  History,
  Download,
  Copy,
  CheckCircle,
  XCircle,
  Loader2,
  FileText,
  Users,
  Briefcase,
  Clock,
  TrendingUp
} from 'lucide-react'
import ProtectedRoute from '@/components/ProtectedRoute'
import LoadingSpinner from '@/components/LoadingSpinner'
import ContactHistory from '@/components/contacts/ContactHistory'
import QuickActions from '@/components/contacts/QuickActions'
import RelationshipManager from '@/components/contacts/RelationshipManager'
import HierarchyTree from '@/components/contacts/HierarchyTree'
import { contactsAPI, Contact } from '@/lib/api/contacts'

function ContactDetailContent() {
  const params = useParams()
  const router = useRouter()
  const contactId = params.id as string

  const [contact, setContact] = useState<Contact | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [activeTab, setActiveTab] = useState<'info' | 'company' | 'address' | 'categories' | 'relationships' | 'hierarchy' | 'activities' | 'history'>('info')
  const [copiedField, setCopiedField] = useState<string | null>(null)

  useEffect(() => {
    fetchContact()
  }, [contactId])

  const fetchContact = async () => {
    setLoading(true)
    setError(null)
    try {
      const data = await contactsAPI.getById(contactId)
      setContact(data)
    } catch (err: any) {
      const message = err.response?.data?.message || 'Failed to load contact'
      setError(message)
      toast.error(message)
    } finally {
      setLoading(false)
    }
  }

  const copyToClipboard = (text: string, field: string) => {
    navigator.clipboard.writeText(text)
    setCopiedField(field)
    toast.success(`${field} copied to clipboard`)
    setTimeout(() => setCopiedField(null), 2000)
  }

  const handleArchive = async () => {
    if (!contact) return
    
    if (confirm(`Are you sure you want to archive ${contact.name}?`)) {
      try {
        await contactsAPI.archive(contactId, 'Archived by user')
        toast.success('Contact archived successfully')
        router.push('/contacts')
      } catch (err: any) {
        toast.error(err.response?.data?.message || 'Failed to archive contact')
      }
    }
  }

  const handleExport = async () => {
    // TODO: Implement single contact export
    toast.success('Export feature coming soon')
  }

  const getTypeColor = (type: string) => {
    const colors: Record<string, string> = {
      INDIVIDUAL: 'bg-blue-100 text-blue-700',
      COMPANY: 'bg-green-100 text-green-700',
      HOLDING: 'bg-purple-100 text-purple-700',
      GOVERNMENT: 'bg-orange-100 text-orange-700',
      ORGANIZATION: 'bg-cyan-100 text-cyan-700',
      EMBASSIES: 'bg-red-100 text-red-700',
      BANK: 'bg-emerald-100 text-emerald-700',
      UNIVERSITY: 'bg-indigo-100 text-indigo-700',
      SCHOOL: 'bg-yellow-100 text-yellow-700',
      UN: 'bg-sky-100 text-sky-700',
      NGO: 'bg-pink-100 text-pink-700',
      INSTITUTION: 'bg-gray-100 text-gray-700',
      SUPPLIER: 'bg-emerald-100 text-emerald-700'
    }
    return colors[type] || 'bg-gray-100 text-gray-700'
  }

  const getTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      INDIVIDUAL: 'فرد - Individual',
      COMPANY: 'شركة - Company',
      HOLDING: 'مجموعة - Holding',
      GOVERNMENT: 'حكومي - Government',
      ORGANIZATION: 'منظمات - Organizations',
      BANK: 'بنوك - Banks',
      UNIVERSITY: 'جامعات - Universities',
      EMBASSIES: 'سفارات - Embassies',
      SCHOOL: 'مدارس - Schools',
      UN: 'UN - United Nations',
      NGO: 'NGO - Non-Governmental Organization',
      INSTITUTION: 'مؤسسة - Institution',
      SUPPLIER: 'مورّد - Supplier'
    }
    return labels[type] || type
  }

  const renderStars = (rating?: number) => {
    if (!rating) return <span className="text-gray-400 text-sm">No rating</span>
    return (
      <div className="flex items-center gap-1">
        {[1, 2, 3, 4, 5].map((star) => (
          <Star
            key={star}
            className={`h-5 w-5 ${star <= rating ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
          />
        ))}
      </div>
    )
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <LoadingSpinner size="lg" message="Loading contact details..." />
      </div>
    )
  }

  if (error || !contact) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <XCircle className="h-16 w-16 text-red-500 mx-auto mb-4" />
          <h2 className="text-2xl font-bold text-gray-900 mb-2">Contact Not Found</h2>
          <p className="text-gray-600 mb-6">{error || 'This contact does not exist'}</p>
          <Link
            href="/contacts"
            className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to Contacts
          </Link>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Link
                href="/contacts"
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <ArrowLeft className="h-5 w-5 text-gray-600" />
              </Link>
              <div>
                <div className="flex items-center gap-3">
                  <h1 className="text-2xl font-bold text-gray-900">{contact.name}</h1>
                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(contact.type)}`}>
                    {getTypeLabel(contact.type)}
                  </span>
                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                    contact.status === 'ACTIVE' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'
                  }`}>
                    {contact.status}
                  </span>
                </div>
                <p className="text-sm text-gray-600 mt-1">ID: {contact.uniqueContactId}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <button
                onClick={() => router.push(`/contacts?edit=${contactId}`)}
                className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
              >
                <Edit className="h-4 w-4" />
                Edit
              </button>
              <button
                onClick={() => router.push(`/contacts/merge?sourceId=${contactId}`)}
                className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
              >
                <Users className="h-4 w-4" />
                Merge
              </button>
              <button
                onClick={handleArchive}
                className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
              >
                <Archive className="h-4 w-4" />
                Archive
              </button>
              <button
                onClick={() => setActiveTab('history')}
                className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
              >
                <History className="h-4 w-4" />
                History
              </button>
              <button
                onClick={handleExport}
                className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
              >
                <Download className="h-4 w-4" />
                Export
              </button>
            </div>
          </div>

          {/* Breadcrumb */}
          <nav className="flex items-center gap-2 text-sm text-gray-600 mt-4">
            <Link href="/dashboard" className="hover:text-blue-600">Dashboard</Link>
            <span>/</span>
            <Link href="/contacts" className="hover:text-blue-600">Contacts</Link>
            <span>/</span>
            <span className="text-gray-900 font-medium">{contact.name}</span>
          </nav>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Quick Actions Bar */}
        <div className="mb-6">
          <QuickActions contact={contact} />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column - Avatar and Quick Info */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-xl shadow-sm border p-6">
              {/* Avatar */}
              <div className="text-center mb-6">
                <div className="h-32 w-32 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white text-4xl font-bold mx-auto mb-4">
                  {contact.name.charAt(0)}
                </div>
                <h2 className="text-xl font-bold text-gray-900">{contact.name}</h2>
                {contact.nameAr && (
                  <p className="text-gray-600 mt-1" dir="rtl">{contact.nameAr}</p>
                )}
                {contact.companyName && (
                  <p className="text-sm text-gray-500 mt-2 flex items-center justify-center gap-2">
                    <Building2 className="h-4 w-4" />
                    {contact.companyName}
                  </p>
                )}
              </div>

              {/* Rating */}
              <div className="mb-6 pb-6 border-b">
                <label className="text-sm font-medium text-gray-700 block mb-2">Rating</label>
                {renderStars(contact.rating)}
              </div>

              {/* Quick Actions */}
              <div className="space-y-2">
                {contact.email && (
                  <button
                    onClick={() => copyToClipboard(contact.email!, 'Email')}
                    className="w-full flex items-center gap-3 px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    <Mail className="h-5 w-5 text-gray-600" />
                    <span className="flex-1 text-left text-sm">{contact.email}</span>
                    {copiedField === 'Email' ? (
                      <CheckCircle className="h-4 w-4 text-green-600" />
                    ) : (
                      <Copy className="h-4 w-4 text-gray-400" />
                    )}
                  </button>
                )}
                {contact.phone && (
                  <button
                    onClick={() => copyToClipboard(contact.phone!, 'Phone')}
                    className="w-full flex items-center gap-3 px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    <Phone className="h-5 w-5 text-gray-600" />
                    <span className="flex-1 text-left text-sm">{contact.phone}</span>
                    {copiedField === 'Phone' ? (
                      <CheckCircle className="h-4 w-4 text-green-600" />
                    ) : (
                      <Copy className="h-4 w-4 text-gray-400" />
                    )}
                  </button>
                )}
                {contact.mobile && (
                  <button
                    onClick={() => copyToClipboard(contact.mobile!, 'Mobile')}
                    className="w-full flex items-center gap-3 px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    <Phone className="h-5 w-5 text-gray-600" />
                    <span className="flex-1 text-left text-sm">{contact.mobile}</span>
                    {copiedField === 'Mobile' ? (
                      <CheckCircle className="h-4 w-4 text-green-600" />
                    ) : (
                      <Copy className="h-4 w-4 text-gray-400" />
                    )}
                  </button>
                )}
                {contact.website && (
                  <a
                    href={contact.website.startsWith('http') ? contact.website : `https://${contact.website}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-full flex items-center gap-3 px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    <Globe className="h-5 w-5 text-gray-600" />
                    <span className="flex-1 text-left text-sm">{contact.website}</span>
                  </a>
                )}
              </div>

              {/* Metadata */}
              <div className="mt-6 pt-6 border-t space-y-2">
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <Calendar className="h-4 w-4" />
                  <span>Created: {new Date(contact.createdAt).toLocaleDateString()}</span>
                </div>
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <Clock className="h-4 w-4" />
                  <span>Updated: {new Date(contact.updatedAt).toLocaleDateString()}</span>
                </div>
                {contact.createdBy && (
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <User className="h-4 w-4" />
                    <span>By: {contact.createdBy.name}</span>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Right Column - Tabbed Content */}
          <div className="lg:col-span-2">
            {/* Tabs */}
            <div className="bg-white rounded-t-xl shadow-sm border-x border-t">
              <div className="flex overflow-x-auto">
                {[
                  { id: 'info', label: 'Contact Info', icon: User },
                  { id: 'company', label: 'Company', icon: Building2 },
                  { id: 'address', label: 'Address', icon: MapPin },
                  { id: 'categories', label: 'Categories & Tags', icon: Tag },
                  { id: 'relationships', label: 'Relationships', icon: Users },
                  ...((['COMPANY', 'HOLDING', 'SUPPLIER'].includes(contact.type)) 
                    ? [{ id: 'hierarchy', label: 'Hierarchy', icon: Building2 }] 
                    : []
                  ),
                  { id: 'activities', label: 'Activities', icon: TrendingUp },
                  { id: 'history', label: 'History', icon: History }
                ].map((tab) => {
                  const Icon = tab.icon
                  return (
                    <button
                      key={tab.id}
                      onClick={() => setActiveTab(tab.id as any)}
                      className={`flex items-center gap-2 px-6 py-4 border-b-2 transition-colors whitespace-nowrap ${
                        activeTab === tab.id
                          ? 'border-blue-600 text-blue-600 bg-blue-50'
                          : 'border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50'
                      }`}
                    >
                      <Icon className="h-4 w-4" />
                      <span className="font-medium text-sm">{tab.label}</span>
                    </button>
                  )
                })}
              </div>
            </div>

            {/* Tab Content */}
            <div className="bg-white rounded-b-xl shadow-sm border-x border-b p-6">
              {/* Contact Info Tab */}
              {activeTab === 'info' && (
                <div className="space-y-6">
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Contact Information</h3>
                    <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <dt className="text-sm font-medium text-gray-500">Name</dt>
                        <dd className="mt-1 text-sm text-gray-900">{contact.name}</dd>
                      </div>
                      {contact.nameAr && (
                        <div>
                          <dt className="text-sm font-medium text-gray-500">Arabic Name</dt>
                          <dd className="mt-1 text-sm text-gray-900" dir="rtl">{contact.nameAr}</dd>
                        </div>
                      )}
                      <div>
                        <dt className="text-sm font-medium text-gray-500">Type</dt>
                        <dd className="mt-1 text-sm text-gray-900">{getTypeLabel(contact.type)}</dd>
                      </div>
                      <div>
                        <dt className="text-sm font-medium text-gray-500">Source</dt>
                        <dd className="mt-1 text-sm text-gray-900">{contact.source}</dd>
                      </div>
                      <div>
                        <dt className="text-sm font-medium text-gray-500">Status</dt>
                        <dd className="mt-1">
                          <span className={`inline-flex px-2 py-1 rounded-full text-xs font-medium ${
                            contact.status === 'ACTIVE' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'
                          }`}>
                            {contact.status}
                          </span>
                        </dd>
                      </div>
                      <div>
                        <dt className="text-sm font-medium text-gray-500">Rating</dt>
                        <dd className="mt-1">{renderStars(contact.rating)}</dd>
                      </div>
                    </dl>
                  </div>

                  {/* Contact Methods */}
                  <div className="pt-6 border-t">
                    <h4 className="text-md font-semibold text-gray-900 mb-4">Contact Methods</h4>
                    <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {contact.email && (
                        <div>
                          <dt className="text-sm font-medium text-gray-500">Email</dt>
                          <dd className="mt-1 text-sm text-gray-900">{contact.email}</dd>
                        </div>
                      )}
                      {contact.phone && (
                        <div>
                          <dt className="text-sm font-medium text-gray-500">Phone</dt>
                          <dd className="mt-1 text-sm text-gray-900">{contact.phone}</dd>
                        </div>
                      )}
                      {contact.mobile && (
                        <div>
                          <dt className="text-sm font-medium text-gray-500">Mobile</dt>
                          <dd className="mt-1 text-sm text-gray-900">{contact.mobile}</dd>
                        </div>
                      )}
                      {contact.website && (
                        <div>
                          <dt className="text-sm font-medium text-gray-500">Website</dt>
                          <dd className="mt-1 text-sm text-blue-600">
                            <a
                              href={contact.website.startsWith('http') ? contact.website : `https://${contact.website}`}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="hover:underline"
                            >
                              {contact.website}
                            </a>
                          </dd>
                        </div>
                      )}
                    </dl>
                  </div>
                </div>
              )}

              {/* Company Tab */}
              {activeTab === 'company' && (
                <div className="space-y-6">
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Company Information</h3>
                    <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {contact.companyName && (
                        <div>
                          <dt className="text-sm font-medium text-gray-500">Company Name</dt>
                          <dd className="mt-1 text-sm text-gray-900">{contact.companyName}</dd>
                        </div>
                      )}
                      {contact.companyNameAr && (
                        <div>
                          <dt className="text-sm font-medium text-gray-500">Arabic Company Name</dt>
                          <dd className="mt-1 text-sm text-gray-900" dir="rtl">{contact.companyNameAr}</dd>
                        </div>
                      )}
                      {contact.taxNumber && (
                        <div>
                          <dt className="text-sm font-medium text-gray-500">Tax Number</dt>
                          <dd className="mt-1 text-sm text-gray-900 font-mono">{contact.taxNumber}</dd>
                        </div>
                      )}
                      {contact.commercialRegister && (
                        <div>
                          <dt className="text-sm font-medium text-gray-500">Commercial Register</dt>
                          <dd className="mt-1 text-sm text-gray-900 font-mono">{contact.commercialRegister}</dd>
                        </div>
                      )}
                    </dl>
                  </div>

                  {/* Parent Company */}
                  {contact.parent && (
                    <div className="pt-6 border-t">
                      <h4 className="text-md font-semibold text-gray-900 mb-4">Parent Company</h4>
                      <Link
                        href={`/contacts/${contact.parent.id}`}
                        className="flex items-center gap-3 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
                      >
                        <Building2 className="h-8 w-8 text-gray-400" />
                        <div>
                          <p className="font-medium text-gray-900">{contact.parent.name}</p>
                          <p className="text-sm text-gray-500">{contact.parent.type}</p>
                        </div>
                      </Link>
                    </div>
                  )}

                  {!contact.companyName && !contact.taxNumber && !contact.commercialRegister && !contact.parent && (
                    <div className="text-center py-8 text-gray-500">
                      <Building2 className="h-12 w-12 mx-auto mb-2 text-gray-300" />
                      <p>No company information available</p>
                    </div>
                  )}
                </div>
              )}

              {/* Address Tab */}
              {activeTab === 'address' && (
                <div className="space-y-6">
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Address Information</h3>
                    <dl className="space-y-4">
                      {contact.address && (
                        <div>
                          <dt className="text-sm font-medium text-gray-500">Street Address</dt>
                          <dd className="mt-1 text-sm text-gray-900">{contact.address}</dd>
                        </div>
                      )}
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        {contact.city && (
                          <div>
                            <dt className="text-sm font-medium text-gray-500">City</dt>
                            <dd className="mt-1 text-sm text-gray-900">{contact.city}</dd>
                          </div>
                        )}
                        {contact.country && (
                          <div>
                            <dt className="text-sm font-medium text-gray-500">Country</dt>
                            <dd className="mt-1 text-sm text-gray-900">{contact.country}</dd>
                          </div>
                        )}
                        {contact.postalCode && (
                          <div>
                            <dt className="text-sm font-medium text-gray-500">Postal Code</dt>
                            <dd className="mt-1 text-sm text-gray-900">{contact.postalCode}</dd>
                          </div>
                        )}
                      </div>
                    </dl>
                  </div>

                  {!contact.address && !contact.city && !contact.country && !contact.postalCode && (
                    <div className="text-center py-8 text-gray-500">
                      <MapPin className="h-12 w-12 mx-auto mb-2 text-gray-300" />
                      <p>No address information available</p>
                    </div>
                  )}

                  {/* Map placeholder */}
                  {contact.address && (
                    <div className="pt-6 border-t">
                      <div className="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
                        <div className="text-center text-gray-500">
                          <MapPin className="h-12 w-12 mx-auto mb-2" />
                          <p>Map integration coming soon</p>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              )}

              {/* Categories & Tags Tab */}
              {activeTab === 'categories' && (
                <div className="space-y-6">
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Categories</h3>
                    {contact.categories && contact.categories.length > 0 ? (
                      <div className="flex flex-wrap gap-2">
                        {contact.categories.map((category: any, index: number) => (
                          <span
                            key={index}
                            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-700 rounded-lg"
                          >
                            <Tag className="h-4 w-4" />
                            {category.name || category}
                          </span>
                        ))}
                      </div>
                    ) : (
                      <p className="text-gray-500">No categories assigned</p>
                    )}
                  </div>

                  <div className="pt-6 border-t">
                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Tags</h3>
                    {contact.tags && contact.tags.length > 0 ? (
                      <div className="flex flex-wrap gap-2">
                        {contact.tags.map((tag, index) => (
                          <span
                            key={index}
                            className="inline-flex items-center px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm"
                          >
                            #{tag}
                          </span>
                        ))}
                      </div>
                    ) : (
                      <p className="text-gray-500">No tags assigned</p>
                    )}
                  </div>
                </div>
              )}

              {/* Relationships Tab */}
              {activeTab === 'relationships' && (
                <div>
                  <RelationshipManager contactId={contactId} />
                </div>
              )}

              {/* Hierarchy Tab */}
              {activeTab === 'hierarchy' && (['COMPANY', 'HOLDING', 'SUPPLIER'].includes(contact.type)) && (
                <div>
                  <HierarchyTree rootContactId={contactId} />
                </div>
              )}

              {/* Activities Tab */}
              {activeTab === 'activities' && (
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">Activity Timeline</h3>
                  {/* Placeholder for activities */}
                  <div className="text-center py-12 text-gray-500">
                    <TrendingUp className="h-12 w-12 mx-auto mb-2 text-gray-300" />
                    <p className="mb-2">No activities found</p>
                    <p className="text-sm">Activity timeline coming soon</p>
                  </div>
                </div>
              )}

              {/* History Tab */}
              {activeTab === 'history' && (
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">Contact History</h3>
                  <ContactHistory contactId={contactId} />
                </div>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

export default function ContactDetailPage() {
  return (
    <ProtectedRoute>
      <ContactDetailContent />
    </ProtectedRoute>
  )
}
