import { CheckCircle, Info, MessageSquare } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import type { WalkthroughFormViewProps } from '@/components/walkthrough-form/types';
import type { WalkthroughFormCategory } from '@/shared/constants/walkthrough';

interface WalkthroughCategoryScoreCardProps extends WalkthroughFormViewProps {
  readonly category: WalkthroughFormCategory;
}

export function WalkthroughCategoryScoreCard({
  category,
  state,
  actions,
}: WalkthroughCategoryScoreCardProps) {
  const currentRating = state.ratings[category.key];
  const hasRating = currentRating !== undefined;

  return (
    <div className={`rounded-xl border p-4 transition-all ${
      hasRating
        ? 'bg-slate-900/40 border-slate-600/30'
        : 'bg-slate-900/20 border-slate-700/30'
    }`}>
      <div className="flex items-start justify-between gap-3 mb-3">
        <div className="flex items-center gap-2">
          <h4 className="text-sm font-semibold text-white">{category.label}</h4>
          <div className="relative">
            <Button
              type="button"
              onClick={() => actions.setActiveTooltip(state.activeTooltip === category.key ? null : category.key)}
              size="icon"
              className="w-5 h-5 rounded-full bg-slate-700/50 flex items-center justify-center hover:bg-slate-600/50 transition-colors"
              aria-label={`Show ${category.label} rating guidance`}
            >
              <Info size={12} className="text-slate-400" />
            </Button>
            {state.activeTooltip === category.key && (
              <>
                <div className="fixed inset-0 z-10" onClick={() => actions.setActiveTooltip(null)} />
                <div className="absolute left-0 top-full mt-1 w-64 bg-slate-700 rounded-lg p-3 shadow-xl z-20">
                  <p className="text-xs text-slate-300">{category.tooltip}</p>
                </div>
              </>
            )}
          </div>
          {hasRating && (
            <CheckCircle size={14} className="text-emerald-400" />
          )}
        </div>
      </div>

      <div className="flex flex-wrap gap-2 mb-3">
        {category.ratings.map((rating) => (
          <Button
            key={rating.value}
            type="button"
            onClick={() => actions.updateRating(category.key, rating.value)}
            className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-all ${
              currentRating === rating.value
                ? `${rating.bg} ${rating.color} ring-1 ring-current`
                : 'bg-slate-800/50 border-slate-700/50 text-slate-400 hover:border-slate-600/50 hover:text-slate-300'
            }`}
          >
            {rating.label}
          </Button>
        ))}
      </div>

      <div className="relative">
        <MessageSquare size={14} className="absolute left-3 top-2.5 text-slate-600" />
        <Input
          type="text"
          placeholder="Optional comment..."
          value={state.comments[category.key] || ''}
          onChange={(event) => actions.updateComment(category.key, event.target.value)}
          className="w-full pl-9 pr-3 py-2 bg-slate-900/50 border border-slate-700/30 rounded-lg text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-indigo-500/40"
        />
      </div>
    </div>
  );
}
