import type { ModuleId } from '@/shared/types/app';
import type { DirectorOverviewCard } from '@/business/director-dashboard/types';
import { DirectorScaleButton } from '@/components/director-dashboard/DirectorScaleButton';
import {
  directorOverviewIcons,
  directorOverviewToneClasses,
  directorTrendClasses,
  directorTrendIcons,
} from '@/components/director-dashboard/directorDashboardViewConfig';

interface DirectorOverviewCardsProps {
  readonly cards: readonly DirectorOverviewCard[];
  readonly onOpenModule: (module: ModuleId) => void;
  readonly onOpenAcknowledgments?: () => void;
  readonly onOpenQuizResults?: () => void;
}

export function DirectorOverviewCards({
  cards,
  onOpenModule,
  onOpenAcknowledgments,
  onOpenQuizResults,
}: DirectorOverviewCardsProps) {
  function handleCardClick(card: DirectorOverviewCard) {
    if (card.action === 'openAcknowledgments' && onOpenAcknowledgments) {
      onOpenAcknowledgments();
      return;
    }

    if (card.action === 'openQuizResults' && onOpenQuizResults) {
      onOpenQuizResults();
      return;
    }

    onOpenModule(card.module);
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-4">
      {cards.map((card) => {
        const OverviewIcon = directorOverviewIcons[card.iconId];
        const TrendIcon = directorTrendIcons[card.trend];

        return (
          <DirectorScaleButton
            key={card.label}
            type="button"
            onClick={() => handleCardClick(card)}
            className="h-auto rounded-2xl border border-violet-100 bg-white p-5 text-left shadow-sm"
          >
            <div className="w-full">
              <div className="flex items-center justify-between mb-3">
                <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${directorOverviewToneClasses[card.tone]} flex items-center justify-center text-white`}>
                  <OverviewIcon size={20} />
                </div>
                <div className={`flex items-center gap-1 text-xs font-semibold ${directorTrendClasses[card.trend]}`}>
                  <TrendIcon size={12} />
                  {card.change}
                </div>
              </div>
              <p className="text-2xl font-bold text-gray-800">{card.value}</p>
              <p className="text-xs text-gray-500 mt-0.5">{card.label}</p>
            </div>
          </DirectorScaleButton>
        );
      })}
    </div>
  );
}
