import type { KeyboardEvent } from 'react';
import {
  Briefcase,
  ChevronDown,
  ChevronUp,
  Clock,
  DollarSign,
  MapPin,
  Star,
} from 'lucide-react';
import { VOCATIONAL_CATEGORY_ICON_KEYS } from '@/shared/constants/vocational';
import type { VocationalOpportunity } from '@/shared/types/vocational';
import { VocationalIcon } from '@/components/vocational-opportunities/VocationalIcon';
import { VocationalOpportunityDetails } from '@/components/vocational-opportunities/VocationalOpportunityDetails';

interface VocationalOpportunityCardProps {
  readonly opportunity: VocationalOpportunity;
  readonly expanded: boolean;
  readonly saved: boolean;
  readonly onToggleExpanded: () => void;
  readonly onToggleSaved: () => void;
}

export function VocationalOpportunityCard({
  opportunity,
  expanded,
  saved,
  onToggleExpanded,
  onToggleSaved,
}: VocationalOpportunityCardProps) {
  const handleCardKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      onToggleExpanded();
    }
  };

  return (
    <div className={`bg-slate-800/40 backdrop-blur-sm rounded-2xl border transition-all duration-200 overflow-hidden ${
      expanded ? 'border-sky-500/30' : 'border-slate-700/40 hover:border-slate-600/50'
    }`}>
      <div
        role="button"
        tabIndex={0}
        className="w-full p-5 text-left cursor-pointer"
        onClick={onToggleExpanded}
        onKeyDown={handleCardKeyDown}
      >
        <div className="flex items-start justify-between gap-4">
          <div className="flex items-start gap-4 min-w-0 flex-1">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-sky-500/20 to-blue-500/20 border border-sky-500/20 flex items-center justify-center flex-shrink-0 text-sky-400">
              {VOCATIONAL_CATEGORY_ICON_KEYS[opportunity.category]
                ? <VocationalIcon iconKey={VOCATIONAL_CATEGORY_ICON_KEYS[opportunity.category]} />
                : <Briefcase size={16} />}
            </div>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2 flex-wrap">
                <h3 className="font-semibold text-white text-base">{opportunity.title}</h3>
                {opportunity.featured && (
                  <span className="px-2 py-0.5 bg-amber-500/15 text-amber-400 border border-amber-500/30 rounded-lg text-[10px] font-semibold">FEATURED</span>
                )}
              </div>
              <p className="text-sm text-sky-400 font-medium">{opportunity.company}</p>
              <div className="flex items-center gap-3 mt-1.5 flex-wrap">
                <span className="text-xs text-slate-500 flex items-center gap-1">
                  <MapPin size={10} /> {opportunity.distance}
                </span>
                <span className="text-xs text-slate-500 flex items-center gap-1">
                  <Clock size={10} /> {opportunity.schedule}
                </span>
                <span className="text-xs text-slate-500 flex items-center gap-1">
                  <DollarSign size={10} /> {opportunity.compensation}
                </span>
                <span className="px-2 py-0.5 bg-sky-500/15 text-sky-400 border border-sky-500/30 rounded-lg text-[10px] font-semibold">
                  {opportunity.category}
                </span>
              </div>
              <p className="text-sm text-slate-400 mt-2 line-clamp-2">{opportunity.description}</p>
            </div>
          </div>
          <div className="flex items-center gap-2 flex-shrink-0">
            <button
              type="button"
              onClick={(event) => {
                event.stopPropagation();
                onToggleSaved();
              }}
              className={`p-2 rounded-xl transition-all ${saved ? 'bg-amber-500/15 text-amber-400' : 'bg-slate-700/50 text-slate-500 hover:text-amber-400'}`}
              aria-label={saved ? 'Remove saved opportunity' : 'Save opportunity'}
            >
              <Star size={16} fill={saved ? 'currentColor' : 'none'} />
            </button>
            {expanded ? <ChevronUp size={18} className="text-slate-500" /> : <ChevronDown size={18} className="text-slate-500" />}
          </div>
        </div>
      </div>

      {expanded && (
        <VocationalOpportunityDetails
          opportunity={opportunity}
          saved={saved}
          onToggleSaved={onToggleSaved}
        />
      )}
    </div>
  );
}
