import type { KeyboardEvent } from 'react';
import { ChevronDown, ChevronUp, Globe, MapPin, Star } from 'lucide-react';
import {
  COMMUNITY_CATEGORY_ICON_KEYS,
  COMMUNITY_PARTNERSHIP_TYPE_CLASSES,
  COMMUNITY_PARTNERSHIP_TYPE_LABELS,
} from '@/shared/constants/community';
import type { CommunityOrganization } from '@/shared/types/community';
import { CommunityIcon } from '@/components/community-service/CommunityIcon';
import { CommunityOrganizationDetails } from '@/components/community-service/CommunityOrganizationDetails';

interface CommunityOrganizationCardProps {
  readonly organization: CommunityOrganization;
  readonly expanded: boolean;
  readonly saved: boolean;
  readonly onToggleExpanded: () => void;
  readonly onToggleSaved: () => void;
}

export function CommunityOrganizationCard({
  organization,
  expanded,
  saved,
  onToggleExpanded,
  onToggleSaved,
}: CommunityOrganizationCardProps) {
  const handleCardKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
    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-green-500/30' : 'border-slate-700/40 hover:border-slate-600/50'
    }`}>
      <div className="relative p-5">
        <button
          type="button"
          className="absolute inset-0 z-0 w-full h-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500/50 focus-visible:ring-inset rounded-t-2xl"
          onClick={onToggleExpanded}
          onKeyDown={handleCardKeyDown}
          aria-expanded={expanded}
          aria-label={`${expanded ? 'Collapse' : 'Expand'} ${organization.name} details`}
        />
        <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-green-500/20 to-emerald-500/20 border border-green-500/20 flex items-center justify-center flex-shrink-0 text-green-400">
              {COMMUNITY_CATEGORY_ICON_KEYS[organization.category]
                ? <CommunityIcon iconKey={COMMUNITY_CATEGORY_ICON_KEYS[organization.category]} />
                : <Globe 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">{organization.name}</h3>
                {organization.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>
              <div className="flex items-center gap-3 mt-1 flex-wrap">
                <span className={`px-2 py-0.5 rounded-lg text-[10px] font-semibold border ${COMMUNITY_PARTNERSHIP_TYPE_CLASSES[organization.partnershipType]}`}>
                  {COMMUNITY_PARTNERSHIP_TYPE_LABELS[organization.partnershipType]}
                </span>
                <span className="text-xs text-slate-500 flex items-center gap-1">
                  <MapPin size={10} /> {organization.distance}
                </span>
                <span className="text-xs text-slate-500">{organization.category}</span>
              </div>
              <p className="text-sm text-slate-400 mt-2 line-clamp-2">{organization.description}</p>
            </div>
          </div>
          <div className="relative z-10 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 organization' : 'Save organization'}
            >
              <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 && (
        <CommunityOrganizationDetails
          organization={organization}
          saved={saved}
          onToggleSaved={onToggleSaved}
        />
      )}
    </div>
  );
}
