'use client';

import { Angry, Heart, ThumbsUp } from 'lucide-react';
import type { JobReactionType } from '@ehandyhire/shared';
import type { FeedJob } from '@/components/jobs/JobFeed';
import { defaultJobReactionSummary } from '@/lib/jobReactions';
import { cn } from '@/lib/utils';

const REACTIONS: {
  type: JobReactionType;
  label: string;
  icon: typeof ThumbsUp;
  activeClass: string;
}[] = [
  {
    type: 'LIKE',
    label: 'Like',
    icon: ThumbsUp,
    activeClass: 'bg-sky-100 text-sky-700 ring-sky-200',
  },
  {
    type: 'LOVE',
    label: 'Love',
    icon: Heart,
    activeClass: 'bg-rose-100 text-rose-600 ring-rose-200',
  },
  {
    type: 'ANGRY',
    label: 'Angry',
    icon: Angry,
    activeClass: 'bg-amber-100 text-amber-700 ring-amber-200',
  },
];

export function JobFeedReactions({
  job,
  onReact,
  disabled = false,
}: {
  job: FeedJob;
  onReact: (jobId: string, type: JobReactionType) => void;
  disabled?: boolean;
}) {
  const summary = job.reactions ?? defaultJobReactionSummary();

  return (
    <div className="flex flex-wrap items-center gap-2 border-t border-border pt-3">
      {REACTIONS.map(({ type, label, icon: Icon, activeClass }) => {
        const count = summary.counts[type];
        const isActive = summary.userReaction === type;

        return (
          <button
            key={type}
            type="button"
            disabled={disabled}
            onClick={() => onReact(job.id, type)}
            aria-label={`${label} this job`}
            aria-pressed={isActive}
            className={cn(
              'inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium ring-1 ring-transparent transition-colors',
              disabled && 'opacity-50 cursor-not-allowed',
              isActive
                ? activeClass
                : 'bg-slate-50 text-slate-600 hover:bg-slate-100 ring-slate-200/80'
            )}
          >
            <Icon className={cn('h-4 w-4', type === 'LOVE' && isActive && 'fill-current')} />
            <span className="hidden sm:inline">{label}</span>
            {count > 0 ? <span className="tabular-nums text-xs opacity-80">{count}</span> : null}
          </button>
        );
      })}
    </div>
  );
}