'use client';

import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import StatsCard from '@/components/dashboard/StatsCard';
import type { DashboardSummary } from './types';

// Solid icon classes (legacy callers) -> command-center tinted circle chips.
// Literal values so Tailwind's scanner generates every class.
const ICON_TINTS: Record<string, string> = {
  'bg-amber-500': 'bg-amber-500/10 text-amber-500',
  'bg-emerald-500': 'bg-emerald-500/10 text-emerald-500',
  'bg-teal-500': 'bg-teal-500/10 text-teal-500',
  'bg-indigo-500': 'bg-indigo-500/10 text-indigo-500',
};

/** A StatsCard-styled KPI with a progress bar for percentage metrics. */
export function ProgressCard({
  title, value, icon, barColor, iconBg, subtitle, delay, onClick,
}: {
  title: string;
  value: number;
  icon: string;
  barColor: string;
  iconBg: string;
  subtitle: string;
  delay: number;
  onClick?: () => void;
}) {
  const pct = Math.max(0, Math.min(100, value));
  const tint = ICON_TINTS[iconBg] ?? ICON_TINTS['bg-indigo-500'];
  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, delay: delay * 0.07 }}
      onClick={onClick}
      className={`bg-white dark:bg-slate-900 border border-vz-border dark:border-slate-800 rounded-none p-5 shadow-sm transition duration-200 ${
        onClick ? 'cursor-pointer hover:translate-y-[-2px] hover:border-[#405189]' : 'hover:shadow-md'
      }`}
    >
      <div className="flex items-center justify-between gap-3">
        <div className="min-w-0">
          <p className="text-[10px] uppercase tracking-wider text-vz-muted font-bold truncate" title={title}>{title}</p>
          <p className="text-2xl font-bold text-[#495057] dark:text-white mt-1">{value}%</p>
        </div>
        <span className={`w-11 h-11 rounded-full flex items-center justify-center text-base shrink-0 ${tint}`}>
          <i className={icon} aria-hidden="true" />
        </span>
      </div>
      <div className="mt-3 h-2 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
        <motion.div
          initial={{ width: 0 }}
          animate={{ width: `${pct}%` }}
          transition={{ duration: 0.7, delay: delay * 0.07 }}
          className={`h-full rounded-full ${barColor}`}
        />
      </div>
      <p className="text-[11px] text-vz-muted mt-1.5">{subtitle}</p>
    </motion.div>
  );
}

export default function SummaryCards({ summary }: { summary: DashboardSummary }) {
  const router = useRouter();

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
      <StatsCard
        title="Total Candidates"
        value={summary.total_candidates}
        icon="fa-solid fa-users"
        color="indigo"
        delay={0}
        onClick={() => router.push('/candidates')}
      />
      <StatsCard
        title="Total Job Descriptions"
        value={summary.total_jds}
        icon="fa-solid fa-file-lines"
        color="teal"
        delay={1}
        onClick={() => router.push('/jobs')}
      />
      <ProgressCard
        title="Average Candidate Score"
        value={summary.average_score}
        icon="fa-solid fa-gauge-high"
        iconBg="bg-amber-500"
        barColor="bg-amber-500"
        subtitle="Average AI/manual screening score"
        delay={2}
        onClick={() => router.push('/candidates')}
      />
      <ProgressCard
        title="Conversion Rate"
        value={summary.conversion_rate}
        icon="fa-solid fa-arrow-trend-up"
        iconBg="bg-emerald-500"
        barColor="bg-emerald-500"
        subtitle={`${summary.hired_candidates} of ${summary.total_candidates} candidates hired`}
        delay={3}
        onClick={() => router.push('/candidates')}
      />
    </div>
  );
}