import { ExternalLink } from 'lucide-react';

import { isValidEsaResourceUrl } from '@/business/esa-funding/selectors';
import { Button } from '@/components/ui/button';
import type { EsaResource } from '@/shared/types/esaFunding';
import { cn } from '@/lib/utils';

interface EsaFundingResourcesProps {
  readonly resources: readonly EsaResource[];
}

export function EsaFundingResources({ resources }: EsaFundingResourcesProps) {
  if (resources.length === 0) {
    return null;
  }

  return (
    <section className="bg-slate-800/60 backdrop-blur-sm rounded-2xl p-6 border border-slate-700/50">
      <div className="flex items-center gap-2 mb-4">
        <ExternalLink size={20} className="text-emerald-400" />
        <h3 className="font-bold text-white">Helpful Resources</h3>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {resources.map((resource) => {
          const validUrl = isValidEsaResourceUrl(resource.url);
          const cardClassName = cn(
            'bg-slate-900/60 rounded-xl p-4 border border-slate-700/40 transition-all text-left group h-auto items-start whitespace-normal',
            validUrl ? 'hover:border-emerald-500/30' : 'opacity-70 cursor-not-allowed',
          );
          const content = (
            <>
              <span className="flex items-center justify-between mb-1.5 w-full">
                <span className="text-sm font-semibold text-white group-hover:text-emerald-400 transition-colors">
                  {resource.title}
                </span>
                <ExternalLink size={14} className="text-slate-600 group-hover:text-emerald-400 transition-colors" />
              </span>
              <span className="text-xs text-slate-500">{resource.description}</span>
              {!validUrl && <span className="text-[10px] text-amber-400 mt-2 block">Link not configured</span>}
            </>
          );

          if (validUrl) {
            return (
              <Button key={resource.title} asChild variant="ghost" className={cardClassName}>
                <a href={resource.url} target="_blank" rel="noopener noreferrer">
                  {content}
                </a>
              </Button>
            );
          }

          return (
            <div key={resource.title} className={cardClassName} aria-disabled="true">
              {content}
            </div>
          );
        })}
      </div>
    </section>
  );
}
