import React from 'react';
import { ImpactAssessment } from '../../types/futures';
import { toPersianDigits } from '../../utils/persianNumbers';
import {
  GraduationCap,
  Microscope,
  Cpu,
  Users,
  Briefcase,
  Target,
  Sparkles
} from 'lucide-react';

interface ImpactGaugesProps {
  impact: ImpactAssessment;
}

interface DimensionConfig {
  key: keyof ImpactAssessment;
  title: string;
  desc: string;
  icon: React.ReactNode;
  color: string;
}

export const ImpactGauges: React.FC<ImpactGaugesProps> = ({ impact }) => {
  const dimensions: DimensionConfig[] = [
    {
      key: 'education',
      title: 'آموزش و برنامه‌های درسی',
      desc: 'میزان دگرگونی در شیوه‌های تدریس، یادگیری و امتحانات',
      icon: <GraduationCap size={16} />,
      color: '#38bdf8'
    },
    {
      key: 'research',
      title: 'پژوهش و تولید علم',
      desc: 'تأثیر بر سرعت تحقیقات، روش‌شناسی و آزمایشگاه‌ها',
      icon: <Microscope size={16} />,
      color: '#a855f7'
    },
    {
      key: 'operations',
      title: 'عملیات و فرآیندهای اداری',
      desc: 'تغییر در خدمات دانشجویی، مالی و مدیریت پردیس',
      icon: <Cpu size={16} />,
      color: '#00d4aa'
    },
    {
      key: 'students',
      title: 'تجربه و آینده دانشجویان',
      desc: 'اثر بر مهارت‌ها، انگیزه، سلامت روان و هویت دانشجو',
      icon: <Users size={16} />,
      color: '#fbbf24'
    },
    {
      key: 'faculty',
      title: 'اعضای هیئت علمی',
      desc: 'تحول در نقش استاد، بار کاری و معیارهای ارتقا',
      icon: <Sparkles size={16} />,
      color: '#ec4899'
    },
    {
      key: 'laborMarket',
      title: 'بازار کار و اشتغال‌پذیری',
      desc: 'تغییر در تقاضای کارفرمایان و مهارت‌های شغلی موردنیاز',
      icon: <Briefcase size={16} />,
      color: '#f97316'
    },
    {
      key: 'strategicImportance',
      title: 'اهمیت راهبردی برای دانشگاه اصفهان',
      desc: 'وزن در تصمیم‌گیری هیئت رئیسه و اولویت‌بندی بودجه',
      icon: <Target size={16} />,
      color: '#f43f5e'
    }
  ];

  return (
    <div className="flex flex-col gap-3">
      {dimensions.map((dim) => {
        const score = impact[dim.key] || 1;
        const percent = (score / 5) * 100;

        return (
          <div
            key={dim.key}
            className="bg-[#0b1429] border border-slate-800/80 rounded-xl p-3.5 flex flex-col gap-2 hover:border-slate-700 transition-colors"
          >
            <div className="flex items-center justify-between gap-2">
              <div className="flex items-center gap-2 text-xs font-bold text-slate-200">
                <span
                  className="p-1.5 rounded-lg flex items-center justify-center"
                  style={{ backgroundColor: `${dim.color}1a`, color: dim.color }}
                >
                  {dim.icon}
                </span>
                <span>{dim.title}</span>
              </div>
              <div className="flex items-center gap-1 text-xs">
                <span className="font-extrabold text-white text-sm">
                  {toPersianDigits(score)}
                </span>
                <span className="text-slate-500 text-[11px]">از ۵</span>
              </div>
            </div>

            <p className="text-[11px] text-slate-400">{dim.desc}</p>

            {/* Score Bar */}
            <div className="w-full h-2 bg-slate-800/90 rounded-full overflow-hidden flex">
              <div
                className="h-full rounded-full transition-all duration-500"
                style={{
                  width: `${percent}%`,
                  backgroundColor: dim.color
                }}
              ></div>
            </div>

            {/* 5 Dots Indicator */}
            <div className="flex items-center justify-between px-1 text-[9px] text-slate-500">
              <span>خیلی کم (۱)</span>
              <span>کم (۲)</span>
              <span>متوسط (۳)</span>
              <span>زیاد (۴)</span>
              <span>بسیار زیاد (۵)</span>
            </div>
          </div>
        );
      })}
    </div>
  );
};