import { PageMeta } from '@/components/common/PageMeta'
import { useAuthStore } from '@/store/authStore'
import { StartSessionInput } from '@/components/dashboard/StartSessionInput'
import { PendingEscalations } from '@/components/dashboard/PendingEscalations'
import { ActiveFlowPilotSessions } from '@/components/dashboard/ActiveFlowPilotSessions'
import { PerformanceCards } from '@/components/dashboard/PerformanceCards'
import { KnowledgeBaseCards } from '@/components/dashboard/KnowledgeBaseCards'
import { TeamSummary } from '@/components/dashboard/TeamSummary'
import { RecentFlowPilotSessions } from '@/components/dashboard/RecentFlowPilotSessions'
import { OnboardingChecklist } from '@/components/dashboard/OnboardingChecklist'

export function QuickStartPage() {
  const user = useAuthStore((s) => s.user)

  return (
    <div className="overflow-y-auto h-full">
      <PageMeta title="Dashboard" />
      <div className="p-6 space-y-5 max-w-5xl mx-auto">
        {/* Greeting */}
        <div className="fade-in" style={{ animationDelay: '100ms' }}>
          <h1 className="font-heading text-3xl font-extrabold tracking-tight text-foreground">
            Good{' '}
            {new Date().getHours() < 12
              ? 'morning'
              : new Date().getHours() < 18
              ? 'afternoon'
              : 'evening'}
            , {user?.name?.split(' ')[0] || 'there'}
          </h1>
          <p className="mt-1 text-sm text-muted-foreground">
            {new Date().toLocaleDateString('en-US', {
              weekday: 'long',
              month: 'long',
              day: 'numeric',
              year: 'numeric',
            })}
          </p>
        </div>

        {/* Onboarding */}
        <OnboardingChecklist />

        {/* 1. Start Session Input */}
        <div className="fade-in" style={{ animationDelay: '200ms' }}>
          <StartSessionInput />
        </div>

        {/* 2. Pending Escalations (auto-hides if none) */}
        <PendingEscalations />

        {/* 3. Active Sessions */}
        <ActiveFlowPilotSessions />

        {/* 4. Performance Stats */}
        <PerformanceCards />

        {/* 5 + 6. Knowledge Base + Team Summary side by side on desktop */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
          <KnowledgeBaseCards />
          <TeamSummary />
        </div>

        {/* 7. Recent Sessions */}
        <RecentFlowPilotSessions />
      </div>
    </div>
  )
}

export default QuickStartPage