import React from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { useJobPostings, useApplications } from '@/lib/krowHooks';
import KROWCandidateLeaderboardReal from '@/components/krow/KROWCandidateLeaderboard';
import { Briefcase, Users, Brain, Clock, TrendingUp, Award, ChevronRight } from 'lucide-react';

const METRICS = [
  { icon: Briefcase, label: 'Open Positions', bg: 'bg-[#0838E0]', glow: 'shadow-blue-600/20' },
  { icon: Users, label: 'Total Candidates', bg: 'bg-[#333F48]', glow: 'shadow-slate-600/20' },
  { icon: Brain, label: 'AI Screened', bg: 'bg-[#0838E0]', glow: 'shadow-blue-600/20' },
  { icon: Clock, label: 'Pending Screen', bg: 'bg-[#F9E547]', glow: 'shadow-yellow-400/30' },
  { icon: TrendingUp, label: 'Avg AI Score', bg: 'bg-[#333F48]', glow: 'shadow-slate-600/20' },
  { icon: Award, label: 'Hired', bg: 'bg-[#0838E0]', glow: 'shadow-blue-600/20' },
];



function MetricCard({ icon: Icon, value, label, bg, glow, index }) {
  const isYellow = bg === 'bg-[#F9E547]';
  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.06, duration: 0.4, ease: 'easeOut' }}
      whileHover={{ y: -4, transition: { duration: 0.2 } }}
      className="glass-card border border-white/60 rounded-2xl p-4 shadow-sm hover:shadow-lg transition-shadow"
    >
      <div className={`w-10 h-10 rounded-xl ${bg} flex items-center justify-center shadow-lg ${glow} mb-3`}>
        <Icon className={`w-5 h-5 ${isYellow ? 'text-[#0838E0]' : 'text-white'}`} />
      </div>
      <motion.div
        key={value}
        initial={{ scale: 0.8, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ delay: index * 0.06 + 0.2, type: 'spring', stiffness: 200 }}
        className="text-3xl font-heading font-bold gradient-text"
      >
        {value}
      </motion.div>
      <div className="text-[11px] text-[#9CA3AF] font-medium tracking-wide mt-0.5">{label}</div>
    </motion.div>
  );
}

export default function Overview() {
  const navigate = useNavigate();
  const { data: postings = [] } = useJobPostings();
  const { data: applications = [] } = useApplications();

  const values = [
    postings.filter(p => p.status === 'active').length,
    applications.length,
    applications.filter(a => ['ai_screened', 'interview', 'hired', 'shortlisted'].includes(a.status)).length,
    applications.filter(a => a.status === 'applied').length,
    (() => { const s = applications.filter(a => a.ai_score > 0); return s.length ? Math.round(s.reduce((sum, a) => sum + a.ai_score, 0) / s.length) : 0; })(),
    applications.filter(a => a.status === 'hired').length,
  ];

  const topCandidates = [...applications.filter(a => a.ai_score > 0)].sort((a, b) => b.ai_score - a.ai_score).slice(0, 5);
  const activePostings = postings.filter(p => p.status === 'active').slice(0, 5);

  const statsForPosting = (postingId) => {
    const apps = applications.filter(a => a.job_posting_id === postingId);
    return {
      applied: apps.length,
      screened: apps.filter(a => a.status !== 'applied').length,
    };
  };

  return (
    <div className="space-y-8">
      {/* Hero greeting */}
      <motion.div
        initial={{ opacity: 0, y: -12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="flex items-center justify-between flex-wrap gap-4"
      >
        <div className="min-w-0">
          <h1 className="text-2xl sm:text-3xl font-heading font-bold text-[#111827]">
            Good day. <span className="gradient-text">Let's hire smarter.</span>
          </h1>
          <p className="text-[13px] sm:text-[14px] text-[#6B7280] mt-1">AI-powered hiring · No quizzes · Real readiness</p>
        </div>
      </motion.div>

      {/* Metrics Grid */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {METRICS.map((m, i) => (
          <MetricCard key={m.label} icon={m.icon} value={values[i]} label={m.label} bg={m.bg} glow={m.glow} index={i} />
        ))}
      </div>

      {/* Top Candidates + Open Positions */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Top Candidates */}
        <motion.div
          initial={{ opacity: 0, x: -16 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.5 }}
          className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm"
        >
          <div className="flex items-center justify-between mb-5">
            <h3 className="font-heading font-semibold text-[#111827] text-[16px]">Top Candidates</h3>
            <button onClick={() => navigate('/candidates')} className="text-[12px] text-[#0838E0] hover:underline inline-flex items-center gap-1 font-medium">
              View all <ChevronRight className="w-3 h-3" />
            </button>
          </div>
          <div className="space-y-1">
            {topCandidates.length === 0 && (
              <div className="text-center py-10">
                <div className="w-12 h-12 rounded-full bg-white/50 flex items-center justify-center mx-auto mb-3">
                  <Users className="w-5 h-5 text-[#9CA3AF]" />
                </div>
                <p className="text-[13px] text-[#9CA3AF]">No screened candidates yet</p>
              </div>
            )}
            {topCandidates.map((app, idx) => (
              <motion.div
                key={app.id}
                initial={{ opacity: 0, x: -8 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.6 + idx * 0.06 }}
                className="flex items-center gap-3 p-2.5 rounded-xl hover:bg-white/50 transition-colors cursor-pointer"
                onClick={() => navigate('/candidates')}
              >
                <span className="text-[13px] font-heading font-bold text-[#9CA3AF] w-7">{idx + 1}</span>
                <div className="w-9 h-9 rounded-full bg-[#0838E0] flex items-center justify-center text-white text-[12px] font-semibold shrink-0">
                  {app.applicant_name?.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase()}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-[13px] font-medium text-[#111827] truncate">{app.applicant_name}</div>
                  <div className="text-[11px] text-[#6B7280] truncate">{app.job_title || 'Applicant'}</div>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-16 h-1.5 rounded-full bg-gray-100 overflow-hidden">
                      <div className="h-full bg-[#0838E0] rounded-full" style={{ width: `${app.ai_score}%` }} />
                  </div>
                  <span className="text-[14px] font-heading font-bold gradient-text w-7 text-right">{app.ai_score}</span>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>

        {/* Open Positions */}
        <motion.div
          initial={{ opacity: 0, x: 16 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.5 }}
          className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm"
        >
          <div className="flex items-center justify-between mb-5">
            <h3 className="font-heading font-semibold text-[#111827] text-[16px]">Open Positions</h3>
            <button onClick={() => navigate('/positions')} className="text-[12px] text-[#0838E0] hover:underline inline-flex items-center gap-1 font-medium">
              View all <ChevronRight className="w-3 h-3" />
            </button>
          </div>
          <div className="space-y-1">
            {activePostings.length === 0 && (
              <div className="text-center py-10">
                <div className="w-12 h-12 rounded-full bg-white/50 flex items-center justify-center mx-auto mb-3">
                  <Briefcase className="w-5 h-5 text-[#9CA3AF]" />
                </div>
                <p className="text-[13px] text-[#9CA3AF]">No open positions</p>
              </div>
            )}
            {activePostings.map((posting, idx) => {
              const stats = statsForPosting(posting.id);
              return (
                <motion.div
                  key={posting.id}
                  initial={{ opacity: 0, x: 8 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.6 + idx * 0.06 }}
                  onClick={() => navigate(`/positions/${posting.id}`)}
                  className="flex items-center gap-3 p-2.5 rounded-xl hover:bg-white/50 transition-colors cursor-pointer group"
                >
                  <span className="text-[13px] font-heading font-bold text-[#9CA3AF] w-7">{idx + 1}</span>
                  <div className="w-1 h-9 rounded-full bg-[#0838E0] shrink-0" />
                  <div className="flex-1 min-w-0">
                    <div className="text-[13px] font-medium text-[#111827] truncate">{posting.title}</div>
                    <div className="text-[11px] text-[#6B7280]">{stats.applied} applicants · {stats.screened} screened</div>
                  </div>
                  <ChevronRight className="w-4 h-4 text-[#D1D5DB] group-hover:text-[#0838E0] transition-colors" />
                </motion.div>
              );
            })}
          </div>
        </motion.div>
      </div>

      {/* Candidate Pipeline */}
      <KROWCandidateLeaderboardReal applications={applications} />
    </div>
  );
}