import React from 'react';
import { Check, Plus, RefreshCcw, Sparkles, UserSearch } from 'lucide-react';
import { useTheme } from '../../contexts/ThemeContext';
import { InlineCollapsible, StageHeader, ThinkingBlock } from './SixStepCards';
import type { ExpertCard, ExpertMatchData } from './types';

interface ExpertCardItemProps {
  card: ExpertCard;
  index: number;
  selected: boolean;
  disabled?: boolean;
  onSelect: (id: string) => void;
}

const renderAvatar = (avatar: string | undefined, fallback: React.ReactNode, isDark: boolean) => {
  if (avatar && avatar.trim().startsWith('<svg')) {
    return (
      <span
        className={`flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl ${
          isDark ? 'bg-slate-700/40' : 'bg-white shadow-sm'
        }`}
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: avatar }}
      />
    );
  }
  return (
    <span
      className={`flex h-10 w-10 items-center justify-center rounded-2xl ${
        isDark ? 'bg-cyan-500/20 text-cyan-200' : 'bg-red-50 text-red-500'
      }`}
    >
      {fallback}
    </span>
  );
};

const ExpertCardItem: React.FC<ExpertCardItemProps> = ({ card, index, selected, disabled, onSelect }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  const baseBorder = selected
    ? isDark
      ? 'border-cyan-300/60 ring-1 ring-cyan-300/40 shadow-lg shadow-cyan-500/10 bg-gradient-to-br from-slate-800/70 to-cyan-900/30'
      : 'border-red-300 ring-1 ring-red-200 shadow-md shadow-red-100 bg-gradient-to-br from-white to-red-50/60'
    : isDark
      ? 'border-slate-700/60 bg-gradient-to-br from-slate-800/40 to-slate-900/20 hover:border-cyan-300/40'
      : 'border-gray-100 bg-white hover:border-red-200';

  return (
    <button
      type="button"
      disabled={disabled}
      onClick={() => onSelect(card.id)}
      className={`w-full text-left rounded-2xl border p-3 transition-all sixstep-fade-up disabled:cursor-not-allowed disabled:opacity-60 ${baseBorder}`}
    >
      <div className="flex items-start gap-3">
        <span
          className={`w-7 h-7 rounded-xl border flex items-center justify-center text-xs font-semibold shrink-0 ${
            isDark
              ? 'bg-cyan-500/20 text-cyan-200 border-cyan-400/30'
              : 'bg-red-50 text-red-600 border-red-200'
          }`}
        >
          {index.toString().padStart(2, '0')}
        </span>
        {renderAvatar(card.avatarUrl, <UserSearch className="w-5 h-5" />, isDark)}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <div className={`text-sm font-semibold leading-snug truncate ${isDark ? 'text-white' : 'text-gray-900'}`}>
              {card.name}
            </div>
            {card.isCustom && (
              <span
                className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${
                  isDark ? 'bg-violet-500/20 text-violet-200' : 'bg-violet-50 text-violet-600'
                }`}
              >
                新建
              </span>
            )}
          </div>
          <div className={`text-xs mt-1 leading-relaxed line-clamp-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
            {card.detail || '暂无描述'}
          </div>
        </div>
        <span
          className={`shrink-0 flex h-6 w-6 items-center justify-center rounded-full border transition ${
            selected
              ? isDark
                ? 'border-cyan-300 bg-cyan-400/30 text-cyan-100'
                : 'border-red-400 bg-red-500 text-white'
              : isDark
                ? 'border-slate-600 text-transparent'
                : 'border-gray-300 text-transparent'
          }`}
        >
          <Check className="w-3.5 h-3.5" />
        </span>
      </div>
    </button>
  );
};

interface ExpertMatchCardsProps {
  data: ExpertMatchData;
  onSelectExpert: (id: string) => void;
  onRefetch: () => void;
  onCreateExpert: () => void;
  onConfirm: () => void;
  locked?: boolean;
}

const ExpertMatchCards: React.FC<ExpertMatchCardsProps> = ({
  data,
  onSelectExpert,
  onRefetch,
  onCreateExpert,
  onConfirm,
  locked,
}) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  const isSearching = data.status === 'searching';
  const isCreating = data.status === 'creating';
  const isReady = data.status === 'ready' || data.status === 'confirmed';
  const cards = data.experts ?? [];

  return (
    <InlineCollapsible
      defaultOpen
      title={
        <StageHeader
          title="专家匹配"
          desc={
            isSearching
              ? cards.length > 0
                ? '专家已匹配完成，可选择一位进入下一步'
                : '正在调用查找专家 MCP...'
              : isCreating
                ? '正在调用创建专家 MCP...'
                : data.status === 'error'
                  ? data.errorMessage || '专家匹配失败'
                  : '请选择一位专家进入下一步'
          }
          count={cards.length}
          loading={(isSearching && cards.length === 0) || isCreating}
          done={data.status === 'confirmed'}
          icon={UserSearch}
          accent="actor"
        />
      }
    >
      <div className="space-y-3">
        <ThinkingBlock text={data.thinking} loading={isSearching && cards.length === 0 && !data.thinking} />

        <InlineCollapsible
          variant="subtle"
          defaultOpen
          title={
            <div className="flex items-center gap-2">
              <span className="text-xs font-medium">推荐专家列表</span>
              <span className="text-[10px] opacity-70">{cards.length} 位</span>
            </div>
          }
        >
          {cards.length === 0 ? (
            <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
              {isSearching && cards.length === 0 ? '正在匹配专家...' : '暂无匹配的专家'}
            </div>
          ) : (
            <div className="space-y-2">
              {cards.map((card, idx) => (
                <ExpertCardItem
                  key={card.id}
                  card={card}
                  index={idx + 1}
                  selected={data.selectedExpertId === card.id}
                  disabled={locked}
                  onSelect={onSelectExpert}
                />
              ))}
            </div>
          )}
        </InlineCollapsible>

        {data.status === 'error' && (
          <div className={`rounded-xl border px-3 py-2 text-xs ${
            isDark ? 'border-rose-500/30 bg-rose-500/10 text-rose-200' : 'border-rose-200 bg-rose-50 text-rose-700'
          }`}>
            {data.errorMessage}
          </div>
        )}

        <div className="flex flex-wrap items-center gap-2 pt-1">
          <button
            type="button"
            onClick={onRefetch}
            disabled={locked || isSearching || isCreating}
            className={`inline-flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium transition disabled:cursor-not-allowed disabled:opacity-50 ${
              isDark
                ? 'border-slate-600 bg-slate-800/60 text-slate-200 hover:bg-slate-700'
                : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
            }`}
          >
            <RefreshCcw className={`w-3.5 h-3.5 ${isSearching ? 'animate-spin' : ''}`} />
            重新查找
          </button>

          <div className={`flex-1 text-right text-[11px] ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
            没有想要的专家？
          </div>

          <button
            type="button"
            onClick={onCreateExpert}
            disabled={locked || isCreating || isSearching}
            className={`inline-flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium transition disabled:cursor-not-allowed disabled:opacity-50 ${
              isDark
                ? 'border-violet-400/40 bg-violet-500/15 text-violet-100 hover:bg-violet-500/25'
                : 'border-violet-200 bg-violet-50 text-violet-700 hover:bg-violet-100'
            }`}
          >
            <Plus className="w-3.5 h-3.5" />
            创建专家
          </button>

          <button
            type="button"
            onClick={onConfirm}
            disabled={locked || !data.selectedExpertId || !isReady}
            className={`inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-semibold text-white transition disabled:cursor-not-allowed disabled:opacity-50 ${
              isDark
                ? 'bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400'
                : 'bg-gradient-to-r from-red-500 to-rose-500 hover:from-red-400 hover:to-rose-400'
            }`}
          >
            <Sparkles className="w-3.5 h-3.5" />
            选择该专家
          </button>
        </div>
      </div>
    </InlineCollapsible>
  );
};

export default ExpertMatchCards;