import type { CustomWorldDraftCardSummary } from '../../../packages/shared/src/contracts/customWorldAgent';

type CustomWorldAgentDraftDrawerProps = {
  draftCards: CustomWorldDraftCardSummary[];
  activeCardId?: string | null;
  onSelectCard: (cardId: string) => void;
};

const DRAWER_KIND_ORDER: CustomWorldDraftCardSummary['kind'][] = [
  'world',
  'chapter',
  'thread',
  'faction',
  'character',
  'landmark',
  'camp',
];

function resolveGroupLabel(kind: CustomWorldDraftCardSummary['kind']) {
  if (kind === 'world') return '世界总卡';
  if (kind === 'chapter') return '第一幕';
  if (kind === 'thread') return '世界线程';
  if (kind === 'faction') return '势力';
  if (kind === 'character') return '关键角色';
  if (kind === 'landmark') return '关键地点';
  if (kind === 'camp') return '营地';
  return '草稿卡';
}

export function CustomWorldAgentDraftDrawer({
  draftCards,
  activeCardId,
  onSelectCard,
}: CustomWorldAgentDraftDrawerProps) {
  const groupedCards = DRAWER_KIND_ORDER.map((kind) => ({
    kind,
    items: draftCards.filter((card) => card.kind === kind),
  })).filter((group) => group.items.length > 0);

  return (
    <div className="rounded-[1.5rem] border border-white/10 bg-black/18 px-4 py-4">
      <div className="text-[11px] font-bold tracking-[0.2em] text-zinc-400">
        草稿抽屉
      </div>
      {groupedCards.length > 0 ? (
        <div className="mt-3 space-y-4">
          {groupedCards.map((group) => (
            <section key={group.kind}>
              <div className="flex items-center justify-between gap-3">
                <div className="text-[11px] tracking-[0.18em] text-zinc-400">
                  {resolveGroupLabel(group.kind)}
                </div>
                <div className="text-[11px] text-zinc-500">
                  {group.items.length}
                </div>
              </div>
              <div className="mt-2 space-y-2">
                {group.items.map((card, index) => {
                  const isActive = activeCardId === card.id;

                  return (
                    <button
                      key={card.id || `${group.kind}-card-${index}`}
                      type="button"
                      onClick={() => onSelectCard(card.id)}
                      className={`w-full rounded-[1.2rem] border px-3 py-3 text-left transition ${
                        isActive
                          ? 'border-sky-300/30 bg-sky-500/10'
                          : 'border-white/8 bg-white/5 hover:border-white/14'
                      }`}
                    >
                      <div className="flex items-start justify-between gap-3">
                        <div className="text-sm font-semibold text-white">
                          {card.title}
                        </div>
                        {card.warningCount > 0 ? (
                          <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-2 py-0.5 text-[10px] text-amber-100">
                            {card.warningCount}
                          </span>
                        ) : null}
                      </div>
                      <div className="mt-1 text-[11px] text-zinc-400">
                        {card.subtitle}
                      </div>
                      <div className="mt-2 text-sm leading-6 text-zinc-300">
                        {card.summary}
                      </div>
                      <div className="mt-3 flex flex-wrap gap-2">
                        <span className="rounded-full border border-white/10 bg-black/24 px-2.5 py-1 text-[10px] text-zinc-200">
                          关联 {card.linkedIds.length}
                        </span>
                        <span className="rounded-full border border-white/10 bg-black/24 px-2.5 py-1 text-[10px] text-zinc-200">
                          {card.status === 'warning' ? '待精修' : '建议稿'}
                        </span>
                        {card.kind === 'character' && card.assetStatusLabel ? (
                          <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-2.5 py-1 text-[10px] text-amber-100">
                            {card.assetStatusLabel}
                          </span>
                        ) : null}
                      </div>
                    </button>
                  );
                })}
              </div>
            </section>
          ))}
        </div>
      ) : (
        <div className="mt-3 text-sm leading-7 text-zinc-400">
          最小锚点齐备后，世界底稿会先从这里长出来。
        </div>
      )}
    </div>
  );
}