import React from 'react';
import { useWorkerProfile, useJobPostings, useCourses, useLearningPaths } from '@/lib/krowHooks';
import { recommendJobs, recommendNextCourse } from '@/lib/krowScore';
import TalentHero from '@/components/krow/talent/TalentHero';
import IncreaseMarketValue from '@/components/krow/talent/IncreaseMarketValue';
import CareerGrowth from '@/components/krow/talent/CareerGrowth';
import MarketOffers from '@/components/krow/talent/MarketOffers';
import ExperienceNetwork from '@/components/krow/talent/ExperienceNetwork';
import { Loader2 } from 'lucide-react';

export default function EmployeeDashboard() {
  const { data: profile, isLoading } = useWorkerProfile();
  const { data: postings = [] } = useJobPostings();
  const { data: courses = [] } = useCourses();
  const { data: paths = [] } = useLearningPaths();

  if (isLoading || !profile) {
    return <div className="flex justify-center py-20"><Loader2 className="w-6 h-6 animate-spin text-[#0A39DF]" /></div>;
  }

  const jobRecs = recommendJobs(profile, postings, 6);
  const { course: nextCourse } = recommendNextCourse(profile, paths, courses);
  const openOwliver = () => window.dispatchEvent(new CustomEvent('krow:open-owliver'));

  return (
    <div className="space-y-6">
      <TalentHero profile={profile} jobRecs={jobRecs} nextCourse={nextCourse} openOwliver={openOwliver} />
      <MarketOffers profile={profile} jobRecs={jobRecs} />
      <IncreaseMarketValue courses={courses} />
      <CareerGrowth profile={profile} />
      <ExperienceNetwork profile={profile} />
    </div>
  );
}