'use client'

import { Suspense } from 'react'
import { PagePurpose } from '@/components/common/PagePurpose'
import { getModuleByHref } from '@/lib/navigation'
import { CompanionDashboard } from '@/components/companion/CompanionDashboard'
import { GraduationCap } from 'lucide-react'

function LoadingFallback() {
  return (
    <div className="space-y-6">
      {/* Header Skeleton */}
      <div className="flex items-center justify-between">
        <div className="h-12 w-80 bg-slate-200 rounded-xl animate-pulse" />
        <div className="flex gap-2">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="h-10 w-10 bg-slate-200 rounded-lg animate-pulse" />
          ))}
        </div>
      </div>

      {/* Phase Timeline Skeleton */}
      <div className="bg-white border border-slate-200 rounded-xl p-6">
        <div className="h-4 w-24 bg-slate-200 rounded mb-4 animate-pulse" />
        <div className="flex gap-4">
          {[1, 2, 3, 4, 5].map((i) => (
            <div key={i} className="flex items-center gap-2">
              <div className="w-10 h-10 bg-slate-200 rounded-full animate-pulse" />
              {i < 5 && <div className="w-8 h-1 bg-slate-200 animate-pulse" />}
            </div>
          ))}
        </div>
      </div>

      {/* Stats Skeleton */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="bg-white border border-slate-200 rounded-xl p-4">
            <div className="h-4 w-16 bg-slate-200 rounded mb-2 animate-pulse" />
            <div className="h-8 w-12 bg-slate-200 rounded animate-pulse" />
          </div>
        ))}
      </div>

      {/* Content Skeleton */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white border border-slate-200 rounded-xl p-6 h-64 animate-pulse" />
        <div className="bg-white border border-slate-200 rounded-xl p-6 h-64 animate-pulse" />
      </div>
    </div>
  )
}

export default function CompanionPage() {
  const moduleInfo = getModuleByHref('/education/companion')

  return (
    <div className="space-y-6">
      {/* Page Purpose Header */}
      {moduleInfo && (
        <PagePurpose
          title={moduleInfo.module.name}
          purpose={moduleInfo.module.purpose}
          audience={moduleInfo.module.audience}
          collapsible={true}
          defaultCollapsed={true}
        />
      )}

      {/* Main Companion Dashboard */}
      <Suspense fallback={<LoadingFallback />}>
        <CompanionDashboard />
      </Suspense>
    </div>
  )
}