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'

function SectionLabel({ children, action }: { children: React.ReactNode; action?: React.ReactNode }) {
  return (
    <div className="flex items-center gap-3">
      <span className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
        {children}
      </span>
      <div className="flex-1 h-px bg-border" />
      {action && <div className="shrink-0">{action}</div>}
    </div>
  )
}

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

  const now = new Date()
  const greeting = now.getHours() < 12
    ? 'morning'
    : now.getHours() < 18
    ? 'afternoon'
    : 'evening'
  const dayOfWeek = now.toLocaleDateString('en-US', { weekday: 'long' })
  const formattedDate = now.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })
  const firstName = user?.name?.split(' ')[0] || 'there'

  return (
    <div className="overflow-y-auto h-full">
      <PageMeta title="ResolutionFlow" />
      <div className="max-w-4xl mx-auto px-6 pt-12 pb-12">
        {/* Hero: Greeting */}
        <div className="mb-8 animate-fade-in-up">
          <p className="font-sans text-xs uppercase tracking-[0.12em] text-muted-foreground mb-1">
            {dayOfWeek}, {formattedDate}
          </p>
          <h1 className="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight text-[#f0f2f5] leading-tight">
            Good {greeting}, {firstName}.
          </h1>
        </div>

        {/* Chat-style input */}
        <StartSessionInput />

        {/* Pending Escalations (auto-hides if none) */}
        <div className="mt-6">
          <PendingEscalations />
        </div>

        {/* Active Sessions (auto-hides if none) */}
        <div className="mt-8">
          <ActiveFlowPilotSessions />
        </div>

        {/* Dashboard — always visible */}
        <div className="mt-10">
          <SectionLabel>Dashboard</SectionLabel>
          <div className="mt-3 space-y-4 animate-fade-in">
            <PerformanceCards />
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
              <KnowledgeBaseCards />
              <TeamSummary />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default QuickStartPage