'use client';

import Reveal from './Reveal';
import { EnterpriseUseCases, UseCaseItem } from '../types';
import Image from 'next/image';

export default function UseCases({ useCases, headless, badgeId }: { useCases?: EnterpriseUseCases | null; headless?: boolean; badgeId?: string }) {
  if (!useCases || !Array.isArray(useCases.items) || useCases.items.length === 0) return null;

  const items: UseCaseItem[] = useCases.items.slice(0, 4);
  const note = (useCases.note || '').trim();

  // Generate unique indices (1-9) for each use case, ensuring no repeats
  const usedIndices = new Set<number>();
  const getUniqueIndex = (idx: number) => {
    const seed = `${badgeId || ''}|${idx}`;
    let hash = 0;
    for (let i = 0; i < seed.length; i++) {
      hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
    }
    let baseIndex = (hash % 9) + 1;
    
    // If base index is already used, find next available
    let finalIndex = baseIndex;
    let attempts = 0;
    while (usedIndices.has(finalIndex) && attempts < 9) {
      finalIndex = ((finalIndex) % 9) + 1;
      attempts++;
    }
    
    usedIndices.add(finalIndex);
    return finalIndex;
  };

  return (
    <Reveal headless={!!headless}>
      <div className={'pt-8 kyd-avoid-break'}>
        <h3 className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Project Capabilities</h3>
        <div className={'grid grid-cols-1 md:grid-cols-2 gap-4'}>
          {items.map((uc, idx) => {
            const imgIndex = getUniqueIndex(idx);
            const imgSrc = `/badge/puzzle${imgIndex}.svg`;
            return (
            <div key={idx} className={'rounded-md p-5 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
              <div className={'flex items-center gap-3 pb-2'}>
                <Image src={imgSrc} alt={''} width={36} height={36} style={{ flexShrink: 0 }} />
                <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{uc.title}</div>
              </div>
              {uc.potential_impact ? (
                <div className={'text-sm mt-2'} style={{ color: 'var(--text-secondary)' }}>
                  <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>Potential Impact: </span>
                  {uc.potential_impact}
                </div>
              ) : null}
              {uc.demonstrated_capability ? (
                <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>
                  <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>Demonstrated Capability: </span>
                  {uc.demonstrated_capability}
                </div>
              ) : null}
              {uc.justification ? (
                <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>
                  <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>Justification: </span>
                  {uc.justification}
                </div>
              ) : null}
            </div>
          );})}
        </div>
        {note ? (
          <div className={'text-xs mt-3'} style={{ color: 'var(--text-secondary)' }}>{note}</div>
        ) : null}
      </div>
    </Reveal>
  );
}