import React from 'react';
import { University1415Dimension } from '../../types/futures';
import { toPersianDigits } from '../../utils/persianNumbers';
import { Target, ArrowLeft, Lightbulb, ArrowUpRight } from 'lucide-react';

interface Dimension1415CardProps {
  dimension: University1415Dimension;
  onClick: () => void;
}

export const Dimension1415Card: React.FC<Dimension1415CardProps> = ({ dimension, onClick }) => {
  return (
    <div
      onClick={onClick}
      className="intel-card interactive flex flex-col justify-between gap-3 text-right bg-white border border-slate-200 rounded-3xl p-5 shadow-sm hover:shadow-md"
      style={{ borderTop: `4px solid ${dimension.pillarColor}` }}
    >
      <div>
        {/* Header Badges */}
        <div className="flex items-center justify-between gap-2 mb-2">
          <span className="text-[10.5px] text-slate-400 font-bold">
            {dimension.titleEn}
          </span>
          <span
            className="text-[11px] font-bold px-2.5 py-0.5 rounded-full"
            style={{
              backgroundColor: `${dimension.pillarColor}15`,
              color: dimension.pillarColor
            }}
          >
            آمادگی: {toPersianDigits(dimension.readinessPercentage)}٪
          </span>
        </div>

        {/* Title */}
        <h4 className="text-slate-900 font-extrabold text-base mb-1.5 flex items-center justify-between">
          <span>{dimension.title}</span>
          <div className="circle-action-btn text-slate-700 w-7 h-7 text-xs">
            <ArrowUpRight size={14} />
          </div>
        </h4>

        {/* Definition */}
        <p className="text-slate-600 text-xs leading-relaxed line-clamp-2">
          {dimension.definition}
        </p>

        {/* Strategic Recommendation Preview */}
        {dimension.strategicRecommendations[0] && (
          <div className="mt-3 p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-[11px] text-slate-700 flex items-start gap-2">
            <Lightbulb size={14} className="text-amber-500 shrink-0 mt-0.5" />
            <span className="line-clamp-2">{dimension.strategicRecommendations[0]}</span>
          </div>
        )}
      </div>

      {/* Scores & Gap Meter */}
      <div className="pt-3 border-t border-slate-100 flex flex-col gap-2">
        <div className="flex items-center justify-between text-xs font-bold">
          <span className="text-amber-600">
            موجود: {toPersianDigits(dimension.currentScore)}
          </span>
          <span className="text-teal-600">
            هدف: {toPersianDigits(dimension.targetScore)}
          </span>
          <span className="text-rose-600 bg-rose-50 px-2 py-0.5 rounded-full text-[11px]">
            شکاف: {toPersianDigits(dimension.gap)}
          </span>
        </div>

        {/* Readiness Bar */}
        <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden flex">
          <div
            className="h-full rounded-full transition-all duration-500"
            style={{
              width: `${dimension.readinessPercentage}%`,
              backgroundColor: dimension.pillarColor
            }}
          ></div>
        </div>
      </div>
    </div>
  );
};