import React, { useMemo } from 'react';
import { FaCheckCircle, FaExternalLinkAlt } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
import RepairStatusCompletionBarChart from './RepairStatusCompletionBarChart';
import type { CompletionByTypeData } from '../utils/chartLabelUtils';

type RepairStatusCompletionCardProps = {
  loading?: boolean;
  totalWorkOrders: number;
  completedWorkOrders: number;
  inProgressWorkOrders: number;
  rejectedWorkOrders: number;
  byTypeChartData: CompletionByTypeData | null;
  onOpenReport: () => void;
};

const RepairStatusCompletionCard: React.FC<RepairStatusCompletionCardProps> = ({
  loading = false,
  totalWorkOrders,
  completedWorkOrders,
  inProgressWorkOrders,
  rejectedWorkOrders,
  byTypeChartData,
  onOpenReport,
}) => {
  const { t } = useTranslation();

  const completionRate = useMemo(() => {
    if (totalWorkOrders <= 0) return '0.00';
    return ((completedWorkOrders / totalWorkOrders) * 100).toFixed(2);
  }, [completedWorkOrders, totalWorkOrders]);

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-all px-5 py-4 border border-gray-200 dark:border-gray-700">
      <div className="flex items-start justify-between gap-3 mb-3">
        <div className="flex items-start gap-3 min-w-0">
          <div className="w-11 h-11 rounded-full bg-emerald-50 dark:bg-emerald-900/30 flex items-center justify-center shrink-0">
            <FaCheckCircle className="text-emerald-600 dark:text-emerald-300 text-lg" />
          </div>
          <div>
            <div className="text-2xl font-semibold text-gray-900 dark:text-white">{completionRate}%</div>
            <div className="text-sm font-medium text-emerald-700 dark:text-emerald-300">
              {t('dashboard.overallCompletionRate', { defaultValue: 'Overall Completion Rate' })}
            </div>
          </div>
        </div>
        <button
          type="button"
          onClick={onOpenReport}
          className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-emerald-600 dark:text-emerald-300 shrink-0"
          title={t('dashboard.viewCompletionDetails', { defaultValue: 'View completion details' })}
        >
          <FaExternalLinkAlt className="w-4 h-4" />
        </button>
      </div>

      {loading ? (
        <div className="h-44 flex items-center justify-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-600" />
        </div>
      ) : (
        <RepairStatusCompletionBarChart data={byTypeChartData} />
      )}

      <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
        <div className="rounded-lg bg-indigo-50 dark:bg-indigo-900/20 px-3 py-2 text-center">
          <div className="text-lg font-semibold text-indigo-700 dark:text-indigo-300">{totalWorkOrders}</div>
          <div className="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400">Total</div>
        </div>
        <div className="rounded-lg bg-blue-50 dark:bg-blue-900/20 px-3 py-2 text-center">
          <div className="text-lg font-semibold text-blue-700 dark:text-blue-300">{inProgressWorkOrders}</div>
          <div className="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400">In Progress</div>
        </div>
        <div className="rounded-lg bg-red-50 dark:bg-red-900/20 px-3 py-2 text-center">
          <div className="text-lg font-semibold text-red-700 dark:text-red-300">{rejectedWorkOrders}</div>
          <div className="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400">Rejected</div>
        </div>
        <div className="rounded-lg bg-emerald-50 dark:bg-emerald-900/20 px-3 py-2 text-center">
          <div className="text-lg font-semibold text-emerald-700 dark:text-emerald-300">{completedWorkOrders}</div>
          <div className="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400">Completed</div>
        </div>
      </div>
    </div>
  );
};

export default RepairStatusCompletionCard;
