import React from 'react';
import { motion } from 'framer-motion';
import { useApplications, useInterviews, useStaff, useJobPostings } from '@/lib/krowHooks';
import { Loader2, BarChart3 } from 'lucide-react';
import ImpactMetrics from '@/components/krow/ImpactMetrics';
import AnalyticsMetrics from '@/components/krow/AnalyticsMetrics';
import PipelineFunnel from '@/components/krow/PipelineFunnel';
import ScoreDistribution from '@/components/krow/ScoreDistribution';
import InterviewAnalytics from '@/components/krow/InterviewAnalytics';
import HiringAnalytics from '@/components/krow/HiringAnalytics';
import { useTranslation } from 'react-i18next';

export default function Analytics() {
  const { t } = useTranslation();
  const { data: applications = [], isLoading: appsLoading } = useApplications();
  const { data: interviews = [], isLoading: intLoading } = useInterviews();
  const { data: staff = [], isLoading: staffLoading } = useStaff();
  useJobPostings();

  if (appsLoading || intLoading || staffLoading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="w-6 h-6 text-[#9CA3AF] animate-spin" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <motion.div
        initial={{ opacity: 0, y: -12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
        className="flex items-center gap-3"
      >
        <div className="w-10 h-10 rounded-xl bg-[#0838E0] flex items-center justify-center shadow-lg shadow-blue-500/20">
          <BarChart3 className="w-5 h-5 text-white" />
        </div>
        <div>
          <h1 className="text-[22px] font-heading font-bold text-[#111827]">{t('analytics.hiringAnalytics')}</h1>
          <p className="text-[13px] text-[#6B7280]">{t('analytics.applicantsPipelineScoresInterviewsHiringInsights')}</p>
        </div>
        <div className="ml-auto">
          </div>
      </motion.div>

      <ImpactMetrics applications={applications} interviews={interviews} staff={staff} />

      <AnalyticsMetrics applications={applications} interviews={interviews} staff={staff} />

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <PipelineFunnel applications={applications} />
        <ScoreDistribution applications={applications} />
      </div>

      <div>
        <h2 className="text-[11px] font-bold text-[#9CA3AF] tracking-wider mb-3 font-heading">{t('analytics.interviewCompletion')}</h2>
        <InterviewAnalytics applications={applications} interviews={interviews} />
      </div>

      <HiringAnalytics applications={applications} staff={staff} />
    </div>
  );
}